darkreader 4.9.82 → 4.9.84

package/README.md

@@ -43,7 +43,7 @@ Please note that if you encounter error `Too many open files (os error 24)`, the
 
 ### Bundling with official Firefox store signatures (experimental)
 
-Prior to publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that extension bundle did not get corrupted or bit-rotted) and that extension store preformed very basic extension validation.
+Prior to publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that extension bundle did not get corrupted or bit-rotted) and that extension store performed very basic extension validation.
 
 Dark Reader repository contains these digital signatures and you can add them to the extension bundle. The following will build Dark Reader for Firefox version 4.9.63:
 ```
@@ -147,7 +147,7 @@ Step 1: change Dark Reader's settings.
 - Click on the Dark Reader icon.
 - Click on the `Dev tools` button (in the bottom-right corner).
 - Click on the `Preview new design button`.
-- Enable the `Enable on restricted pages` setting under `Settings` -> `Site list`.
+- Enable the `Enable on restricted pages` setting under `Settings` -> `Advanced`.
 
 Step 2: change Firefox's settings.
 

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.82
+ * Dark Reader v4.9.84
  * https://darkreader.org/
  */
 
@@ -127,6 +127,7 @@
     const isMatchMediaChangeEventListenerSupported =
         typeof MediaQueryList === "function" &&
         typeof MediaQueryList.prototype.addEventListener === "function";
+    const isLayerRuleSupported = typeof CSSLayerBlockRule === "function";
     (() => {
         const m = userAgent.match(/chrom(?:e|ium)(?:\/| )([^ ]+)/);
         if (m && m[1]) {
@@ -212,6 +213,10 @@
         });
         return dataURL;
     }
+    async function loadAsText(url, mimeType, origin) {
+        const response = await getOKResponse(url, mimeType, origin);
+        return await response.text();
+    }
 
     const throwCORSError = async (url) => {
         return Promise.reject(
@@ -785,6 +790,15 @@
         }
         return matches;
     }
+    function getHashCode(text) {
+        const len = text.length;
+        let hash = 0;
+        for (let i = 0; i < len; i++) {
+            const c = text.charCodeAt(i);
+            hash = ((hash << 5) - hash + c) & 4294967295;
+        }
+        return hash;
+    }
     function escapeRegExpSpecialChars(input) {
         return input.replaceAll(/[\^$.*+?\(\)\[\]{}|\-\\]/g, "\\$&");
     }
@@ -1143,7 +1157,7 @@
         if (layerRules.has(rule)) {
             return true;
         }
-        if (rule instanceof CSSLayerBlockRule) {
+        if (isLayerRuleSupported && rule instanceof CSSLayerBlockRule) {
             layerRules.add(rule);
             return true;
         }
@@ -2255,8 +2269,7 @@
                     const analysis = analyzeImage(image);
                     resolve({
                         src: url,
-                        blob,
-                        dataURL,
+                        dataURL: analysis.isLarge ? "" : dataURL,
                         width: image.width,
                         height: image.height,
                         ...analysis
@@ -2336,18 +2349,10 @@
                 isDark: false,
                 isLight: false,
                 isTransparent: false,
-                isLarge: false,
-                isTooLarge: false
-            };
-        }
-        if (sw * sh > LARGE_IMAGE_PIXELS_COUNT) {
-            return {
-                isDark: false,
-                isLight: false,
-                isTransparent: false,
-                isLarge: true
+                isLarge: false
             };
         }
+        const isLarge = sw * sh > LARGE_IMAGE_PIXELS_COUNT;
         const sourcePixelsCount = sw * sh;
         const k = Math.min(
             1,
@@ -2400,7 +2405,7 @@
             isTransparent:
                 transparentPixelsCount / totalPixelsCount >=
                 TRANSPARENT_IMAGE_THRESHOLD,
-            isLarge: false
+            isLarge
         };
     }
     let isBlobURLSupported = null;
@@ -2509,7 +2514,8 @@
         if (!isBlobURLSupported) {
             return null;
         }
-        let blobURL = dataURLBlobURLs.get(dataURL);
+        const hash = getHashCode(dataURL);
+        let blobURL = dataURLBlobURLs.get(hash);
         if (blobURL) {
             return blobURL;
         }
@@ -2519,7 +2525,7 @@
             blob = await response.blob();
         }
         blobURL = URL.createObjectURL(blob);
-        dataURLBlobURLs.set(dataURL, blobURL);
+        dataURLBlobURLs.set(hash, blobURL);
         return blobURL;
     }
     function cleanImageProcessingCache() {
@@ -2693,7 +2699,7 @@
             );
             lines.push("}");
         }
-        if (isCSSColorSchemePropSupported && !isIFrame && theme.mode === 1) {
+        if (isCSSColorSchemePropSupported && theme.mode === 1) {
             lines.push("html {");
             lines.push(`    color-scheme: dark !important;`);
             lines.push("}");
@@ -2732,6 +2738,11 @@
             `    border-color: ${modifyBorderColor({r: 128, g: 128, b: 128}, theme)};`
         );
         lines.push("}");
+        lines.push("mark {");
+        lines.push(
+            `    color: ${modifyForegroundColor({r: 0, g: 0, b: 0}, theme)};`
+        );
+        lines.push("}");
         lines.push("::placeholder {");
         lines.push(
             `    color: ${modifyForegroundColor({r: 169, g: 169, b: 169}, theme)};`
@@ -2753,6 +2764,10 @@
         if (theme.selectionColor) {
             lines.push(getModifiedSelectionStyle(theme));
         }
+        if (isLayerRuleSupported) {
+            lines.unshift("@layer {");
+            lines.push("}");
+        }
         return lines.join("\n");
     }
     function getSelectionColor(theme) {
@@ -3087,9 +3102,9 @@
                 const logSrc = imageDetails.src.startsWith("data:")
                     ? "data:"
                     : imageDetails.src;
-                if (isLarge) {
-                    logInfo(`Not modifying too large image ${logSrc}`);
-                    result = null;
+                if (isLarge && isLight && !isTransparent && theme.mode === 1) {
+                    logInfo(`Hiding large light image ${logSrc}`);
+                    result = "none";
                 } else if (
                     isDark &&
                     isTransparent &&
@@ -4142,6 +4157,11 @@
                     "}"
                 ].join("\n");
             })
+            .concat([
+                "[data-darkreader-inline-invert] {",
+                "    filter: invert(100%) hue-rotate(180deg);",
+                "}"
+            ])
             .join("\n");
     }
     function getInlineStyleElements(root) {
@@ -4279,7 +4299,23 @@
         attrObservers.clear();
     }
     const inlineStyleCache = new WeakMap();
+    const svgInversionCache = new WeakSet();
+    const svgAnalysisConditionCache = new WeakMap();
     const themeProps = ["brightness", "contrast", "grayscale", "sepia", "mode"];
+    function shouldAnalyzeSVGAsImage(svg) {
+        if (svgAnalysisConditionCache.has(svg)) {
+            return svgAnalysisConditionCache.get(svg);
+        }
+        const shouldAnalyze = Boolean(
+            svg &&
+                (svg.role === "img" ||
+                    svg.parentElement?.role === "img" ||
+                    svg.getAttribute("class")?.includes("logo") ||
+                    svg.parentElement?.getAttribute("class")?.includes("logo"))
+        );
+        svgAnalysisConditionCache.set(svg, shouldAnalyze);
+        return shouldAnalyze;
+    }
     function getInlineStyleCacheKey(el, theme) {
         return INLINE_STYLE_ATTRS.map(
             (attr) => `${attr}="${el.getAttribute(attr)}"`
@@ -4388,6 +4424,46 @@
                 return;
             }
         }
+        const isSVGElement = element instanceof SVGElement;
+        const svg = isSVGElement
+            ? element.ownerSVGElement ??
+              (element instanceof SVGSVGElement ? element : null)
+            : null;
+        if (isSVGElement && theme.mode === 1 && svg) {
+            if (svgInversionCache.has(svg)) {
+                return;
+            }
+            if (shouldAnalyzeSVGAsImage(svg)) {
+                svgInversionCache.add(svg);
+                const handleSVGRoot = () => {
+                    let svgString = svg.outerHTML;
+                    svgString = svgString.replaceAll(
+                        '<style class="darkreader darkreader--sync" media="screen"></style>',
+                        ""
+                    );
+                    const dataURL = `data:image/svg+xml;base64,${btoa(svgString)}`;
+                    getImageDetails(dataURL).then((details) => {
+                        if (
+                            (details.isDark && details.isTransparent) ||
+                            (details.isLarge &&
+                                details.isLight &&
+                                !details.isTransparent)
+                        ) {
+                            svg.setAttribute(
+                                "data-darkreader-inline-invert",
+                                ""
+                            );
+                        }
+                    });
+                };
+                if (isReadyStateComplete()) {
+                    handleSVGRoot();
+                } else {
+                    addReadyStateCompleteListener(handleSVGRoot);
+                }
+                return;
+            }
+        }
         if (element.hasAttribute("bgcolor")) {
             let value = element.getAttribute("bgcolor");
             if (
@@ -4420,7 +4496,7 @@
             }
             setCustomProp("color", "color", value);
         }
-        if (element instanceof SVGElement) {
+        if (isSVGElement) {
             if (element.hasAttribute("fill")) {
                 const SMALL_SVG_LIMIT = 32;
                 const value = element.getAttribute("fill");
@@ -4602,6 +4678,13 @@
     const asyncQueue = createAsyncTasksQueue();
     function createStyleSheetModifier() {
         let renderId = 0;
+        function getStyleRuleHash(rule) {
+            let cssText = rule.cssText;
+            if (isMediaRule(rule.parentRule)) {
+                cssText = `${rule.parentRule.media.mediaText} { ${cssText} }`;
+            }
+            return getHashCode(cssText);
+        }
         const rulesTextCache = new Set();
         const rulesModCache = new Map();
         const varTypeChangeCleaners = new Set();
@@ -4631,23 +4714,17 @@
             iterateCSSRules(
                 rules,
                 (rule) => {
-                    let cssText = rule.cssText;
+                    const hash = getStyleRuleHash(rule);
                     let textDiffersFromPrev = false;
-                    notFoundCacheKeys.delete(cssText);
-                    if (isMediaRule(rule.parentRule)) {
-                        cssText += `;${rule.parentRule.media.mediaText}`;
-                    }
-                    if (isLayerRule(rule.parentRule)) {
-                        cssText += `;${rule.parentRule.name}`;
-                    }
-                    if (!rulesTextCache.has(cssText)) {
-                        rulesTextCache.add(cssText);
+                    notFoundCacheKeys.delete(hash);
+                    if (!rulesTextCache.has(hash)) {
+                        rulesTextCache.add(hash);
                         textDiffersFromPrev = true;
                     }
                     if (textDiffersFromPrev) {
                         rulesChanged = true;
                     } else {
-                        modRules.push(rulesModCache.get(cssText));
+                        modRules.push(rulesModCache.get(hash));
                         return;
                     }
                     if (rule.style.all === "revert") {
@@ -4681,7 +4758,7 @@
                         };
                         modRules.push(modRule);
                     }
-                    rulesModCache.set(cssText, modRule);
+                    rulesModCache.set(hash, modRule);
                 },
                 () => {
                     hasNonLoadedLink = true;
@@ -5539,11 +5616,15 @@
         if (url.startsWith("data:")) {
             return await (await fetch(url)).text();
         }
+        const parsedURL = new URL(url);
+        if (parsedURL.origin === location.origin) {
+            return await loadAsText(url, "text/css", location.origin);
+        }
         return await bgFetch({
             url,
             responseType: "text",
             mimeType: "text/css",
-            origin: window.location.origin
+            origin: location.origin
         });
     }
     async function replaceCSSImports(cssText, basePath, cache = new Map()) {

package/index.d.ts

@@ -153,7 +153,7 @@ declare namespace DarkReader {
 
         /**
          * A toggle to disable the proxying of `document.styleSheets`.
-         * This is a API-Exclusive option, as it can break legitmate websites,
+         * This is a API-Exclusive option, as it can break legitimate websites,
          * who are using the Dark Reader API.
          */
         disableStyleSheetsProxy: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "darkreader",
-  "version": "4.9.82",
+  "version": "4.9.84",
   "description": "Dark mode for every website",
   "scripts": {
     "api": "node --max-old-space-size=3072 tasks/cli.js build --api",
@@ -58,16 +58,16 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
-    "@types/chrome": "0.0.263",
-    "@types/eslint": "8.56.6",
+    "@types/chrome": "0.0.266",
+    "@types/eslint": "8.56.7",
     "@types/jasmine": "5.1.4",
     "@types/jest": "29.5.12",
     "@types/karma": "6.3.8",
     "@types/karma-coverage": "2.0.3",
-    "@types/node": "20.12.2",
+    "@types/node": "20.12.6",
     "@types/ws": "8.5.10",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.0",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.6.0",
     "chokidar": "3.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "4.2.0",
@@ -88,12 +88,12 @@
     "less": "4.2.0",
     "malevic": "0.20.1",
     "prettier": "3.2.5",
-    "puppeteer-core": "22.6.1",
-    "rollup": "4.13.2",
+    "puppeteer-core": "22.6.3",
+    "rollup": "4.14.1",
     "rollup-plugin-istanbul": "5.0.0",
     "ts-jest": "29.1.2",
     "tslib": "2.6.2",
-    "typescript": "5.4.3",
+    "typescript": "5.4.4",
     "web-ext": "7.11.0",
     "ws": "8.16.0",
     "yazl": "2.5.1"