Repository: darkreader/darkreader
Pull request #2391 (2020-04-26 23:17:16)

Fix neowin.net's select option comment
**Before**
![Screenshot (7)](https://user-images.githubusercontent.com/43509631/80322321-dfb57e80-8856-11ea-884c-591feeef1146.png)


**After**
![Screenshot (8)](https://user-images.githubusercontent.com/43509631/80322331-e93ee680-8856-11ea-9bb4-6f424f6d4eff.png)


Patch:
diff --git a/src/config/dynamic-theme-fixes.config b/src/config/dynamic-theme-fixes.config
index a5a83463..17811c4e 100644
--- a/src/config/dynamic-theme-fixes.config
+++ b/src/config/dynamic-theme-fixes.config
@@ -869,9 +869,9 @@ INVERT
 #pagelet_ego_pane button .img._3-8_
 #homepage_panel_promote_footer_pagelet button .img._3-8_
 #event_tabs #reaction_units span img
-.fbAggregatedMap
 .fbPlaceFlyoutWrap img
-#PagesProfileHomeSecondaryColumnPagelet img[src*="map"]
+img[src*="map"]
+[style*="map"]
 
 CSS
 .fbNubButton {
@@ -1939,6 +1939,16 @@ INVERT
 
 ================================
 
+neowin.net
+
+CSS
+.select option {
+    background-color: #1c1e1f !important;
+    color: white !important;
+}
+
+================================
+
 news.ycombinator.com
 
 INVERT
@@ -3374,6 +3384,9 @@ INVERT
 
 wikipedia.org
 
+IGNORE INLINE STYLE
+.legend-color
+
 INVERT
 .mwe-math-element
 .mw-ext-score
@@ -3540,6 +3553,18 @@ INVERT
 
 ================================
 
+xda-developers.com
+
+CSS
+.hb-trigger-inner, .hb-trigger-inner::before, .hb-trigger-inner::after {
+    background-color: ${rgb(48, 51, 53)} !important;
+}
+.hb-trigger:hover .hb-trigger-inner, .hb-trigger:hover .hb-trigger-inner::before, .hb-trigger:hover .hb-trigger-inner::after, .hb-trigger:active .hb-trigger-inner, .hb-trigger:active .hb-trigger-inner::before, .hb-trigger:active .hb-trigger-inner::after, .hb-trigger:focus .hb-trigger-inner, .hb-trigger:focus .hb-trigger-inner::before, .hb-trigger:focus .hb-trigger-inner::after {
+    background-color: ${black} !important;
+}
+
+================================
+
 youtube.com
 
 CSS
diff --git a/src/definitions.d.ts b/src/definitions.d.ts
index 2a630812..763217b0 100644
--- a/src/definitions.d.ts
+++ b/src/definitions.d.ts
@@ -102,6 +102,7 @@ export interface Shortcuts {
 
 export interface DynamicThemeFix {
     url: string[];
+    ignoreInlineStyle: string[];
     invert: string[];
     css: string;
 }
diff --git a/src/generators/dynamic-theme.ts b/src/generators/dynamic-theme.ts
index 3dd3e3ea..ff66bb98 100644
--- a/src/generators/dynamic-theme.ts
+++ b/src/generators/dynamic-theme.ts
@@ -5,6 +5,7 @@ import {compareURLPatterns, isURLInList} from '../utils/url';
 import {DynamicThemeFix} from '../definitions';
 
 const dynamicThemeFixesCommands = {
+    'IGNORE INLINE STYLE': 'ignoreInlineStyle',
     'INVERT': 'invert',
     'CSS': 'css',
 };
@@ -50,6 +51,7 @@ export function getDynamicThemeFixesFor(url: string, frameURL: string, fixes: Dy
 
     const common = {
         url: fixes[0].url,
+        ignoreInlineStyle: fixes[0].ignoreInlineStyle || [],
         invert: fixes[0].invert || [],
         css: fixes[0].css || [],
     };
@@ -73,6 +75,7 @@ export function getDynamicThemeFixesFor(url: string, frameURL: string, fixes: Dy
 
     return {
         url: match.url,
+        ignoreInlineStyle: common.ignoreInlineStyle.concat(match.ignoreInlineStyle || []),
         invert: common.invert.concat(match.invert || []),
         css: [common.css, match.css].filter((s) => s).join('\n'),
     };
diff --git a/src/inject/dynamic-theme/index.ts b/src/inject/dynamic-theme/index.ts
index 550d1f27..5421191d 100644
--- a/src/inject/dynamic-theme/index.ts
+++ b/src/inject/dynamic-theme/index.ts
@@ -161,7 +161,7 @@ function createDynamicStyleOverrides() {
             inlineStyleElements.push(...Array.from(elements as NodeListOf<HTMLLinkElement | HTMLStyleElement>));
         }
     });
-    inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter));
+    inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter, fixes.ignoreInlineStyle));
 }
 
 let loadingStylesCounter = 0;
@@ -313,7 +313,7 @@ function watchForUpdates() {
     });
 
     watchForInlineStyles((element) => {
-        overrideInlineStyle(element, filter);
+        overrideInlineStyle(element, filter, fixes.ignoreInlineStyle);
         if (element === document.documentElement) {
             const rootVariables = getElementCSSVariables(document.documentElement);
             if (rootVariables.size > 0) {
@@ -325,7 +325,7 @@ function watchForUpdates() {
         const inlineStyleElements = root.querySelectorAll(INLINE_STYLE_SELECTOR);
         if (inlineStyleElements.length > 0) {
             createShadowStaticStyleOverrides(root);
-            inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter));
+            inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter, fixes.ignoreInlineStyle));
         }
     });
 
diff --git a/src/inject/dynamic-theme/inline-style.ts b/src/inject/dynamic-theme/inline-style.ts
index c5287505..03b4132e 100644
--- a/src/inject/dynamic-theme/inline-style.ts
+++ b/src/inject/dynamic-theme/inline-style.ts
@@ -185,7 +185,16 @@ function getInlineStyleCacheKey(el: HTMLElement, theme: FilterConfig) {
         .join(' ');
 }
 
-export function overrideInlineStyle(element: HTMLElement, theme: FilterConfig) {
+function shouldIgnoreInlineStyle (element: HTMLElement, selectors: string[]) {
+    for (const ingnoredSelector of selectors) {
+        if (element.matches(ingnoredSelector)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export function overrideInlineStyle(element: HTMLElement, theme: FilterConfig, ignoreSelectors: string[]) {
     const cacheKey = getInlineStyleCacheKey(element, theme);
     if (cacheKey === inlineStyleCache.get(element)) {
         return;
@@ -211,6 +220,17 @@ export function overrideInlineStyle(element: HTMLElement, theme: FilterConfig) {
         unsetProps.delete(targetCSSProp);
     }
 
+    if (ignoreSelectors.length > 0) {
+        if (shouldIgnoreInlineStyle(element, ignoreSelectors)) {
+            unsetProps.forEach((cssProp) => {
+                const {store, dataAttr} = overrides[cssProp];
+                store.delete(element);
+                element.removeAttribute(dataAttr);
+            });
+            return;
+        }
+    }
+
     if (element.hasAttribute('bgcolor')) {
         let value = element.getAttribute('bgcolor');
         if (value.match(/^[0-9a-f]{3}$/i) || value.match(/^[0-9a-f]{6}$/i)) {
diff --git a/src/ui/popup/settings-page/devtools.tsx b/src/ui/popup/settings-page/devtools.tsx
index 0b3d9c9a..a4a07be8 100644
--- a/src/ui/popup/settings-page/devtools.tsx
+++ b/src/ui/popup/settings-page/devtools.tsx
@@ -4,7 +4,7 @@ import {getLocalMessage} from '../../../utils/locales';
 import {Button} from '../../controls';
 import ControlGroup from '../control-group';
 import {ViewProps} from '../types';
-
+import {isFirefox} from '../../../utils/platform';
 
 function getExistingDevToolsWindow() {
     return new Promise<chrome.windows.Window>((resolve) => {
@@ -30,7 +30,7 @@ async function openDevTools() {
     } else {
         chrome.windows.create({
             type: 'popup',
-            url: 'ui/devtools/index.html',
+            url: isFirefox() ? '../devtools/index.html' : 'ui/devtools/index.html',
             width: 600,
             height: 600,
         });


Test patch:
diff --git a/tests/config.tests.ts b/tests/config.tests.ts
index 29ddeff0..36aa7548 100644
--- a/tests/config.tests.ts
+++ b/tests/config.tests.ts
@@ -62,7 +62,7 @@ test('Dynamic Theme Fixes config', async () => {
     expect(fixes.map(({url}) => url[0])).toEqual(fixes.map(({url}) => url[0]).sort(compareURLPatterns));
 
     // selectors should have no comma
-    expect(fixes.every(({invert}) => (invert || []).every((s) => s.indexOf(',') < 0))).toBe(true);
+    expect(fixes.every(({invert, ignoreInlineStyle}) => (invert || []).concat(ignoreInlineStyle || []).every((s) => s.indexOf(',') < 0))).toBe(true);
 
     // fixes are properly formatted
     expect(throwIfDifferent(file, formatDynamicThemeFixes(fixes), 'Dynamic fixes format error')).not.toThrow();
@@ -81,9 +81,13 @@ test('Dynamic Theme Fixes config', async () => {
         'twitter.com',
         'UNSUPPORTED', 'a', 'b',
         'INVERT', 'c', 'd',
+        '========',
+        'wikipedia.org',
+        'IGNORE INLINE STYLE', 'a', 'b',
     ].join('\r\n'))).toEqual([
         {url: ['inbox.google.com', 'mail.google.com'], invert: ['a', 'b'], css: '.x { color: white !important; }'},
         {url: ['twitter.com'], invert: ['c', 'd']},
+        {url: ['wikipedia.org'], ignoreInlineStyle: ['a', 'b']},
     ]);
 });