Move "Quit" button to top bar in element picker

Additionally:

- Removed auto fade out of dialog when mouse does not hover the
  dialog.
- Added a minimize/maximize button in top bar

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/55

src/css/epicker-ui.css

@@ -13,7 +13,6 @@ html#ublock0-epicker,
 #ublock0-epicker aside {
     background-color: var(--surface-1);
     border: 1px solid var(--border-2);
-    bottom: 2px;
     box-sizing: border-box;
     cursor: default;
     display: none;
@@ -22,14 +21,21 @@ html#ublock0-epicker,
     min-width: min(24rem, 100vw - 4px);
     overflow-y: auto;
     position: fixed;
-    right: 2px;
     width: min(32rem, 100vw - 4px);
 }
 #ublock0-epicker.paused:not(.zap) aside {
     display: flex;
 }
+#ublock0-epicker.minimized aside {
+    min-width: min(16rem, 100vw - 4px);
+    overflow: hidden;
+    width: min(16rem, 100vw - 4px);
+}
+#ublock0-epicker.minimized aside > *:not(#windowbar) {
+    display: none;
+}
 #ublock0-epicker aside > *:not(:first-child) {
-    padding: 2px;
+    padding: 0 2px;
 }
 
 #ublock0-epicker #toolbar {
@@ -43,16 +49,6 @@ html#ublock0-epicker,
     background-color: var(--button-preferred-surface);
     color: var(--button-preferred-ink);
 }
-#ublock0-epicker #move {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
-    cursor: grab;
-    height: 1.5rem;
-    margin-bottom: 2px;
-    opacity: 0.8;
-    }
-#ublock0-epicker aside.moving #move {
-    cursor: grabbing;
-}
 #ublock0-epicker section {
     border: 0;
     box-sizing: border-box;
@@ -129,8 +125,8 @@ html#ublock0-epicker,
     );
     display: inline-block;
     flex-shrink: 0;
-    height: 16px;
+    height: 20px;
-    width: 16px;
+    width: 20px;
     }
 .resultsetModifier  > span > span:nth-of-type(3) {
     background-color: var(--surface-3);
@@ -174,7 +170,7 @@ html#ublock0-epicker,
     overflow: hidden;
 }
 #ublock0-epicker #candidateFilters {
-    max-height: min(14em, 20vh);
+    max-height: min(12em, 18vh);
     overflow-y: auto;
 }
 #ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
@@ -211,32 +207,12 @@ html#ublock0-epicker,
     https://github.com/gorhill/uBlock/issues/3449
     https://github.com/uBlockOrigin/uBlock-issues/issues/55
 **/
-@keyframes startDialog {
-  0% { opacity: 1.0; }
-  60% { opacity: 1.0; }
-  100% { opacity: 0.1; }
-}
 #ublock0-epicker.paused aside {
-    opacity: 0.1;
     visibility: visible;
     z-index: 100;
 }
-#ublock0-epicker.paused:not(.show):not(.hide) aside:not(:hover) {
-    animation-duration: 1.6s;
-    animation-name: startDialog;
-    animation-timing-function: linear;
-}
-#ublock0-epicker.paused aside:hover {
-    opacity: 1;
-}
-#ublock0-epicker.paused.show aside {
-    opacity: 1;
-}
-#ublock0-epicker.paused.hide aside {
-    opacity: 0.1;
-}
 
-#ublock0-epicker svg {
+#ublock0-epicker svg#sea {
     cursor: crosshair;
     box-sizing: border-box;
     height: 100%;
@@ -245,26 +221,62 @@ html#ublock0-epicker,
     top: 0;
     width: 100%;
 }
-#ublock0-epicker.paused svg {
+#ublock0-epicker.paused svg#sea {
     cursor: not-allowed;
 }
-#ublock0-epicker svg > path:first-child {
+#ublock0-epicker svg#sea > path:first-child {
     fill: rgba(0,0,0,0.5);
     fill-rule: evenodd;
 }
-#ublock0-epicker svg > path + path {
+#ublock0-epicker svg#sea > path + path {
     stroke: #F00;
     stroke-width: 0.5px;
     fill: rgba(255,63,63,0.20);
 }
-#ublock0-epicker.zap svg > path + path {
+#ublock0-epicker.zap svg#sea > path + path {
     stroke: #FF0;
     stroke-width: 0.5px;
     fill: rgba(255,255,63,0.20);
 }
-#ublock0-epicker.preview svg > path {
+#ublock0-epicker.preview svg#sea > path {
     fill: rgba(0,0,0,0.10);
 }
-#ublock0-epicker.preview svg > path + path {
+#ublock0-epicker.preview svg#sea > path + path {
     stroke: none;
 }
+
+
+#ublock0-epicker #windowbar {
+    display: flex;
+}
+#ublock0-epicker #windowbar svg {
+    fill: none;
+    pointer-events: none;
+    stroke: var(--ink-1);
+    stroke-width: 3px;
+}
+#ublock0-epicker #windowbar #move {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
+    cursor: grab;
+    flex-grow: 1;
+    opacity: 0.8;
+}
+#ublock0-epicker aside.moving #windowbar #move {
+    cursor: grabbing;
+}
+#windowbar #quit,
+#windowbar #minimize {
+    height: 2em;
+    width: 2em;
+}
+#windowbar #quit:hover,
+#windowbar #minimize:hover {
+    background-color: var(--surface-2)
+}
+html.minimized #windowbar #minimize svg > path,
+#windowbar #minimize svg > rect {
+    display: none;
+}
+html.minimized #windowbar #minimize svg > rect {
+    display: initial;
+}

src/js/epicker-ui.js

@@ -28,6 +28,7 @@ import './codemirror/ubo-static-filtering.js';
 import { hostnameFromURI } from './uri-utils.js';
 import punycode from '../lib/punycode.js';
 import * as sfp from './static-filtering-parser.js';
+import { dom } from './dom.js';
 
 /******************************************************************************/
 /******************************************************************************/
@@ -46,7 +47,7 @@ const pickerRoot = document.documentElement;
 const dialog = $stor('aside');
 let staticFilteringParser;
 
-const svgRoot = $stor('svg');
+const svgRoot = $stor('svg#sea');
 const svgOcean = svgRoot.children[0];
 const svgIslands = svgRoot.children[1];
 const NoPaths = 'M0 0';
@@ -594,8 +595,9 @@ const onStartMoving = (( ) => {
     let isTouch = false;
     let mx0 = 0, my0 = 0;
     let mx1 = 0, my1 = 0;
-    let r0 = 0, b0 = 0;
+    let pw = 0, ph = 0;
-    let rMax = 0, bMax = 0;
+    let dw = 0, dh = 0;
+    let cx0 = 0, cy0 = 0;
     let timer;
 
     const eatEvent = function(ev) {
@@ -605,10 +607,22 @@ const onStartMoving = (( ) => {
 
     const move = ( ) => {
         timer = undefined;
-        const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax);
+        const cx1 = cx0 + mx1 - mx0;
-        const b1 = Math.min(Math.max(b0 - my1 + my0, 2), bMax);
+        const cy1 = cy0 + my1 - my0;
-        dialog.style.setProperty('right', `${r1}px`);
+        if ( cx1 < pw / 2 ) {
-        dialog.style.setProperty('bottom', `${b1}px`);
+            dialog.style.setProperty('left', `${Math.max(cx1-dw/2,2)}px`);
+            dialog.style.removeProperty('right');
+        } else {
+            dialog.style.removeProperty('left');
+            dialog.style.setProperty('right', `${Math.max(pw-cx1-dw/2,2)}px`);
+        }
+        if ( cy1 < ph / 2 ) {
+            dialog.style.setProperty('top', `${Math.max(cy1-dh/2,2)}px`);
+            dialog.style.removeProperty('bottom');
+        } else {
+            dialog.style.removeProperty('top');
+            dialog.style.setProperty('bottom', `${Math.max(ph-cy1-dh/2,2)}px`);
+        }
     };
 
     const moveAsync = ev => {
@@ -635,7 +649,7 @@ const onStartMoving = (( ) => {
         eatEvent(ev);
     };
 
-    return function(ev) {
+    return ev => {
         const target = dialog.querySelector('#move');
         if ( ev.target !== target ) { return; }
         if ( dialog.classList.contains('moving') ) { return; }
@@ -648,12 +662,13 @@ const onStartMoving = (( ) => {
             mx0 = ev.pageX;
             my0 = ev.pageY;
         }
-        const style = self.getComputedStyle(dialog);
-        r0 = parseInt(style.right, 10);
-        b0 = parseInt(style.bottom, 10);
         const rect = dialog.getBoundingClientRect();
-        rMax = pickerRoot.clientWidth - 2 - rect.width ;
+        dw = rect.width;
-        bMax = pickerRoot.clientHeight - 2 - rect.height;
+        dh = rect.height;
+        cx0 = rect.x + dw / 2;
+        cy0 = rect.y + dh / 2;
+        pw = pickerRoot.clientWidth;
+        ph = pickerRoot.clientHeight;
         dialog.classList.add('moving');
         if ( isTouch ) {
             self.addEventListener('touchmove', moveAsync, { capture: true });
@@ -806,7 +821,7 @@ const unpausePicker = function() {
 
 const startPicker = function() {
     self.addEventListener('keydown', onKeyPressed, true);
-    const svg = $stor('svg');
+    const svg = $stor('svg#sea');
     svg.addEventListener('click', onSvgClicked);
     svg.addEventListener('touchstart', onSvgTouch);
     svg.addEventListener('touchend', onSvgTouch);
@@ -820,6 +835,9 @@ const startPicker = function() {
     $id('preview').addEventListener('click', onPreviewClicked);
     $id('create').addEventListener('click', onCreateClicked);
     $id('pick').addEventListener('click', onPickClicked);
+    $id('minimize').addEventListener('click', ( ) => {
+        dom.cl.toggle(dom.html, 'minimized');
+    });
     $id('quit').addEventListener('click', onQuitClicked);
     $id('move').addEventListener('mousedown', onStartMoving);
     $id('move').addEventListener('touchstart', onStartMoving);

src/web_accessible_resources/epicker-ui.html

@@ -15,8 +15,8 @@
 </head>
 
 <body>
-<aside>
+<aside style="right: 2px; bottom: 2px;">
-<div id="move"></div>
+<div id="windowbar"><div id="minimize"><svg viewBox="0 0 64 64"><path d="M 16,48 H 48" /><rect x="16" y="16" height="32" width="32" /></div><div id="move"></div><div id="quit" data-i18n-title="pickerQuit"><svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></div></div>
 <section>
     <div>
         <div class="codeMirrorContainer codeMirrorBreakAll cm-theme-override"></div>
@@ -35,14 +35,9 @@
         </div>
     </div>
     <div id="toolbar">
-        <div>
+        <button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
-            <button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
+        <button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
-        </div>
+        <button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
-        <div>
-            <button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
-            <button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
-            <button id="quit" type="button" data-i18n="pickerQuit">_<span class="hover"></span></button>
-        </div>
     </div>
 </section>
 <ul id="candidateFilters">
@@ -56,7 +51,7 @@
     </li>
 </ul>
 </aside>
-<svg><path d></path><path d></path></svg>
+<svg id="sea"><path d></path><path d></path></svg>
 
 <script src="../lib/codemirror/lib/codemirror.js"></script>
 <script src="../lib/codemirror/addon/edit/closebrackets.js"></script>