element-picker: Declare we support both light and dark color-schemes. (…

…#3872) This fixes uBlockOrigin/uBlock-issues#2240 and should get the desired behavior regardless of browser. Delay showing the iframe until load to prevent flashing a white background on the initial about:blank.
gorhill · Sep 11, 2022 · 4044aa1 · 4044aa1
1 parent 453fb1e
commit 4044aa1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/js/messaging.js b/src/js/messaging.js
@@ -902,9 +902,6 @@ const onMessage = function(request, sender, callback) {
                 pickerURL: vAPI.getURL(
                     `/web_accessible_resources/epicker-ui.html?secret=${vAPI.warSecret()}`
                 ),
-                needColorScheme:
-                    vAPI.webextFlavor.soup.has('firefox') === false ||
-                    vAPI.webextFlavor.major < 106,
             });
             µb.epickerArgs.target = '';
         });

diff --git a/src/js/scriptlets/epicker.js b/src/js/scriptlets/epicker.js
@@ -1278,22 +1278,21 @@ const pickerCSSStyle = [
     'position: fixed',
     'top: 0',
     'transform: none',
-    'visibility: visible',
+    'visibility: hidden',
     'width: 100%',
     'z-index: 2147483647',
+    'color-scheme: light dark',
+    ''
 ];
 
-// https://github.com/uBlockOrigin/uBlock-issues/issues/1408
-// https://github.com/uBlockOrigin/uBlock-issues/issues/2240
-if ( pickerBootArgs.needColorScheme ) {
-    pickerCSSStyle.push('color-scheme: light');
-}
-pickerCSSStyle.push(''); // Important
 
 const pickerCSS = `
 :root > [${vAPI.sessionId}] {
     ${pickerCSSStyle.join(' !important;')}
 }
+:root > [${vAPI.sessionId}-loaded] {
+    visibility: visible !important;
+}
 :root [${vAPI.sessionId}-clickblind] {
     pointer-events: none !important;
 }
@@ -1316,7 +1315,10 @@ vAPI.MessagingConnection.addListener(onConnectionMessage);
     if ( pickerBootArgs.zap ) {
         url.searchParams.set('zap', '1');
     }
-    pickerRoot.contentWindow.location = url.href;
+    pickerRoot.addEventListener("load", function() {
+      pickerRoot.setAttribute(`${vAPI.sessionId}-loaded`, "");
+    });
+    pickerRoot.src = url.href;
 }
 
 /******************************************************************************/

diff --git a/src/web_accessible_resources/epicker-ui.html b/src/web_accessible_resources/epicker-ui.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html id="ublock0-epicker">
-    
+
 <head>
 <meta charset="utf-8">
+<meta name="color-scheme" content="light dark">
 <title>uBlock Origin Element Picker</title>
 <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
 <link rel="stylesheet" href="../lib/codemirror/addon/hint/show-hint.css">