From 43e0e15125b6993f23b02d76f4530a8c32ff56c4 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sun, 3 Mar 2024 10:08:56 -0500
Subject: [PATCH] More fine-tuning of element picker visual/behavior

- Group "Pick" and "Preview"
- Set minimal button width
- Auto-minimize when picking instead of fully hiding the dialog:
  this allows to quit while in picking mode
---
 src/css/epicker-ui.css                       | 24 ++++++++++----------
 src/web_accessible_resources/epicker-ui.html |  6 +++--
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index 716018d29..9e90f5e90 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -22,15 +22,18 @@ html#ublock0-epicker,
     overflow-y: auto;
     position: fixed;
     width: min(32rem, 100vw - 4px);
+    z-index: 100;
 }
-#ublock0-epicker.paused:not(.zap) aside {
+#ublock0-epicker:not(.zap) aside {
     display: flex;
 }
+#ublock0-epicker:not(.paused) aside,
 #ublock0-epicker.minimized aside {
     min-width: min(16rem, 100vw - 4px);
     overflow: hidden;
     width: min(16rem, 100vw - 4px);
 }
+#ublock0-epicker:not(.paused) aside > *:not(#windowbar),
 #ublock0-epicker.minimized aside > *:not(#windowbar) {
     display: none;
 }
@@ -42,6 +45,9 @@ html#ublock0-epicker,
     display: flex;
     justify-content: space-between;
 }
+#ublock0-epicker #toolbar button {
+    min-width: 6em;
+    }
 #ublock0-epicker ul {
     margin: 0.25em 0 0 0;
 }
@@ -203,15 +209,6 @@ html#ublock0-epicker,
     background-color: var(--surface-2);
 }
 
-/**
-    https://github.com/gorhill/uBlock/issues/3449
-    https://github.com/uBlockOrigin/uBlock-issues/issues/55
-**/
-#ublock0-epicker.paused aside {
-    visibility: visible;
-    z-index: 100;
-}
-
 #ublock0-epicker svg#sea {
     cursor: crosshair;
     box-sizing: border-box;
@@ -269,14 +266,17 @@ html#ublock0-epicker,
     height: 2em;
     width: 2em;
 }
+#ublock0-epicker:not(.paused) #windowbar #minimize {
+    display: none;
+}
 #windowbar #quit:hover,
 #windowbar #minimize:hover {
     background-color: var(--surface-2)
 }
-html.minimized #windowbar #minimize svg > path,
+#ublock0-epicker.minimized #windowbar #minimize svg > path,
 #windowbar #minimize svg > rect {
     display: none;
 }
-html.minimized #windowbar #minimize svg > rect {
+#ublock0-epicker.minimized #windowbar #minimize svg > rect {
     display: initial;
 }
diff --git a/src/web_accessible_resources/epicker-ui.html b/src/web_accessible_resources/epicker-ui.html
index ce0fdd9e9..ef5e9d72e 100644
--- a/src/web_accessible_resources/epicker-ui.html
+++ b/src/web_accessible_resources/epicker-ui.html
@@ -35,8 +35,10 @@
         </div>
     </div>
     <div id="toolbar">
-        <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>
+        <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>
+        </div>
         <button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
     </div>
 </section>