[mv3] Add ability to reset zapper selection on mobile devices

platform/mv3/extension/css/zapper-ui.css

@@ -16,11 +16,11 @@ html#ubol-zapper,
     outline: none;
 }
 #ubol-zapper aside {
-    background-color: var(--surface-1);
     box-sizing: border-box;
     cursor: default;
     display: flex;
     flex-direction: column;
+    gap: 2px;
     position: fixed;
     right: 2px;
     top: 50%;
@@ -31,14 +31,6 @@ html#ubol-zapper,
     left: 2px;
     right: unset;
 }
-#ubol-zapper aside > #quit {
-    border: 1px solid rgba(0,0,0,0.5);
-    fill: none;
-    stroke: var(--ink-1);
-    stroke-width: 3px;
-    width: var(--quit-button-size);
-    height: var(--quit-button-size);
-}
 #ubol-zapper svg#sea {
     cursor: crosshair;
     box-sizing: border-box;
@@ -57,6 +49,19 @@ html#ubol-zapper,
     stroke-width: 0.5px;
     fill: rgba(255,255,63,0.20);
 }
-#ubol-zapper #quit:hover {
+#ubol-zapper aside > div {
+    background-color: var(--surface-1);
+    border: 1px solid rgba(0,0,0,0.5);
+    box-sizing: border-box;
+    fill: none;
+    stroke: var(--ink-1);
+    stroke-width: 2px;
+    width: var(--quit-button-size);
+    height: var(--quit-button-size);
+}
+#ubol-zapper aside > div:hover {
     background-color: var(--surface-2)
 }
+:root:not(.mobile) #pick {
+    display: none;
+}

platform/mv3/extension/js/zapper-ui.js

@@ -126,6 +126,7 @@ const svgListening = (( ) => {
     };
 
     return state => {
+        if ( $stor(':root.mobile') !== null ) { return; }
         if ( state === on ) { return; }
         on = state;
         if ( on ) {
@@ -190,6 +191,7 @@ const startZapper = function(port) {
     $stor('svg#sea').addEventListener('touchstart', onSvgTouch, { passive: true });
     $stor('svg#sea').addEventListener('touchend', onSvgTouch);
     $id('quit').addEventListener('click', quitZapper );
+    $id('pick').addEventListener('click', resetZapper );
     svgListening(true);
 };
 
@@ -201,6 +203,7 @@ const quitZapper = function() {
     $stor('svg#sea').removeEventListener('touchstart', onSvgTouch, { passive: true });
     $stor('svg#sea').removeEventListener('touchend', onSvgTouch);
     $id('quit').removeEventListener('click', quitZapper );
+    $id('pick').removeEventListener('click', resetZapper );
     svgListening(false);
     if ( zapperScriptPort ) {
         zapperScriptPort.postMessage({ what: 'quitZapper' });
@@ -213,6 +216,14 @@ const quitZapper = function() {
 
 /******************************************************************************/
 
+const resetZapper = function() {
+    zapperScriptPort.postMessage({
+        what: 'unhighlight'
+    });
+};
+
+/******************************************************************************/
+
 // Wait for the content script to establish communication
 
 globalThis.addEventListener('message', ev => {

platform/mv3/extension/zapper-ui.html

@@ -14,12 +14,18 @@
     <div id="quit" data-i18n-title="zapperTipQuit">
         <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
     </div>
+    <div id="pick">
+        <svg viewBox="0 0 64 64">
+            <path d="M10 32L54 32M32 10L32 54" />
+            <circle cx="32" cy="32" r="12" />
+        </svg>
+    </div>
 </aside>
 <svg id="sea"><path d></path><path d></path></svg>
 
 <script src="js/theme.js" type="module"></script>
 <script src="js/i18n.js" type="module"></script>
-<script src="/js/zapper-ui.js" type="module"></script>
+<script src="js/zapper-ui.js" type="module"></script>
 
 </body>
 </html>