use backdrop-filter for "Invert" when available, fixes #126

m-khvoinitsky · Nov 3, 2019 · d8f68a4 · d8f68a4
1 parent e43d559
commit d8f68a4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 22 deletions.
diff --git a/lib/content-script.js b/lib/content-script.js
@@ -70,6 +70,14 @@ async function do_it(changes) {
             if (new_method.number === '1') {
                 stylesheet_color_processor = new StylesheetColorProcessor(window, await get_prefs());
                 stylesheet_color_processor.load_into_window();
+            } else if (new_method.number === '3') {
+                let el = document.querySelector('#mybpwaycfxccmnp-dblt-backdrop-filter');
+                if (!el) {
+                    el = document.createElement('div');
+                    el.setAttribute('id', 'mybpwaycfxccmnp-dblt-backdrop-filter');
+                    el.style.display = 'none';
+                    document.documentElement.appendChild(el);
+                }
             }
             loaded_stylesheets = await loaded_stylesheets_promise;
         }

diff --git a/methods/invert.css b/methods/invert.css
@@ -1,23 +1,43 @@
-window,
-page,
-html:not(.dark-background-light-text-is-pdf-viewer):not(.dark-background-light-text-is-top-level-image-document),
-html:not(.dark-background-light-text-is-top-level-image-document) img:not(.mwe-math-fallback-image-inline):not([alt="inline_formula"]),    /* TODO: "black on transparent" mark */
-embed[type="application/x-shockwave-flash"],
-object[type="application/x-shockwave-flash"],
-video,
-div#viewer.pdfViewer div.page
-{
-    filter: invert(100%) hue-rotate(180deg) !important;
+@supports (backdrop-filter: invert(100%)) {
+    #mybpwaycfxccmnp-dblt-backdrop-filter {
+        display: block !important;
+        position: fixed !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        margin: 0 !important;
+        pointer-events: none !important;
+        z-index: 2147483647 !important;
+        backdrop-filter: invert(100%) hue-rotate(180deg) !important;
+    }
+    img:not(.mwe-math-fallback-image-inline):not([alt="inline_formula"]),
+    video {
+        filter: invert(100%) hue-rotate(180deg) !important;
+    }
 }
-/* #28 */
-:fullscreen video,
-video:fullscreen
-{
-    filter: none !important;
-}
-html {
-    background-color: black !important;
+@supports not (backdrop-filter: invert(100%)) {
+    html,
+    img:not(.mwe-math-fallback-image-inline):not([alt="inline_formula"]),    /* TODO: "black on transparent" mark */
+    embed[type="application/x-shockwave-flash"],
+    object[type="application/x-shockwave-flash"],
+    video,
+    div#viewer.pdfViewer div.page
+    {
+        filter: invert(100%) hue-rotate(180deg) !important;
+    }
+    /* #28 */
+    :fullscreen video,
+    video:fullscreen
+    {
+        filter: none !important;
+    }
+
+    html {
+        background-color: black !important;
+    }
 }
+
 button,
 input,
 optgroup,
@@ -26,7 +46,3 @@ textarea {
     background-color: white;
     color: black;
 }
-
-@-moz-document domain(facebook.com) {
-
-}