AG-14460 handle style declarations with only debug property

Squashed commit of the following: commit 0506fbd62f683d30eae75057423296a530a52330 Merge: fa3bd3d deb8dfc Author: Slava Leleka <[email protected]> Date: Mon Oct 31 17:27:59 2022 +0200 Merge branch 'epic/AG-3532' into fix/AG-14460_02 commit fa3bd3d9773f80fd7f4b7a252cb2387445376f01 Author: Slava Leleka <[email protected]> Date: Mon Oct 31 17:16:26 2022 +0200 add test for only debug property in stylesheet commit 2acd1cc18423671590109f772f7ce24ec5f71ac5 Merge: 9e0cf7f fe3bad2 Author: Slava Leleka <[email protected]> Date: Mon Oct 31 17:12:16 2022 +0200 Merge branch 'epic/AG-3532' into fix/AG-14460_02 commit 9e0cf7f18d4a22d834289786ef38181dd3207b22 Author: Slava Leleka <[email protected]> Date: Thu Oct 27 22:40:13 2022 +0300 handle style declarations with only debug property
AdguardTeam · Oct 31, 2022 · d3fe928 · d3fe928
1 parent deb8dfc
commit d3fe928
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 17 deletions.
diff --git a/src/extended-css/helpers/style-protector.ts b/src/extended-css/helpers/style-protector.ts
@@ -46,10 +46,12 @@ export const protectStyleAttribute = (
     const styles: CssStyleMap[] = [];
     rules.forEach((ruleData) => {
         const { style } = ruleData;
-        if (!style) {
-            throw new Error(`No affectedElement style to apply for selector: '${ruleData.selector}'`);
+        // some rules might have only debug property in style declaration
+        // e.g. 'div:has(> a) { debug: true }' -> parsed to boolean `ruleData.debug`
+        // so no style is fine, and here we should collect only valid styles to protect
+        if (style) {
+            styles.push(style);
         }
-        styles.push(style);
     });
     const protectionObserver = new ExtMutationObserver(createProtectionCallback(styles));
     protectionObserver.observe(node, PROTECTION_OBSERVER_OPTIONS);

diff --git a/src/extended-css/helpers/style-setter.ts b/src/extended-css/helpers/style-setter.ts
@@ -84,15 +84,19 @@ export const applyStyle = (context: Context, affectedElement: AffectedElement):
 
     const { node, rules } = affectedElement;
     for (let i = 0; i < rules.length; i += 1) {
-        const { selector, style } = rules[i];
-        if (!style) {
-            throw new Error(`No affectedElement style to apply for selector: '${selector}'`);
+        const { selector, style, debug } = rules[i];
+        // rule may not have style to apply
+        // e.g. 'div:has(> a) { debug: true }' -> means no style to apply, and enable debug mode
+        if (style) {
+            if (style[REMOVE_PSEUDO_MARKER] === PSEUDO_PROPERTY_POSITIVE_VALUE) {
+                removeElement(context, affectedElement);
+                return;
+            }
+            setStyleToElement(node, style);
+        } else if (!debug) {
+            // but rule should not have both style and debug properties
+            throw new Error(`No style declaration in rule for selector: '${selector}'`);
         }
-        if (style[REMOVE_PSEUDO_MARKER] === PSEUDO_PROPERTY_POSITIVE_VALUE) {
-            removeElement(context, affectedElement);
-            return;
-        }
-        setStyleToElement(node, style);
     }
 };
 

diff --git a/src/extended-css/helpers/timing-stats.ts b/src/extended-css/helpers/timing-stats.ts
@@ -61,7 +61,7 @@ export class TimingStats implements TimingStatsInterface {
 type SelectorLogData = {
     selectorParsed: string;
     timings: TimingStatsInterface;
-    styleApplied?: CssStyleMap;
+    styleApplied?: CssStyleMap | null;
     removed?: boolean;
     matchedElements?: HTMLElement[];
 };
@@ -109,18 +109,23 @@ export const printTimingInfo = (context: Context): void => {
 
     context.parsedRules.forEach((ruleData) => {
         if (ruleData.timingStats) {
-            const { selector, style, matchedElements } = ruleData;
-            if (!style) {
-                throw new Error(`Rule with selector '${selector}' should have style declaration.`);
+            const { selector, style, debug, matchedElements } = ruleData;
+            // style declaration for some rules is parsed to debug property and no style to apply
+            // e.g. 'div:has(> a) { debug: true }'
+            if (!style && !debug) {
+                throw new Error(`Rule should have style declaration for selector: '${selector}'`);
             }
             const selectorData: SelectorLogData = {
                 selectorParsed: selector,
                 timings: beautifyTimings(ruleData.timingStats),
             };
-            if (style[REMOVE_PSEUDO_MARKER] === PSEUDO_PROPERTY_POSITIVE_VALUE) {
+            // `ruleData.style` may contain `remove` pseudo-property
+            // and make logs look better
+            if (style && style[REMOVE_PSEUDO_MARKER] === PSEUDO_PROPERTY_POSITIVE_VALUE) {
                 selectorData.removed = true;
+                // no matchedElements for such case as they are removed after ExtendedCss applied
             } else {
-                selectorData.styleApplied = style;
+                selectorData.styleApplied = style || null;
                 selectorData.matchedElements = matchedElements;
             }
             timingsLogData[selector] = selectorData;

diff --git a/test/extended-css.test.ts b/test/extended-css.test.ts
@@ -676,4 +676,34 @@ describe('extended css library', () => {
 
         extendedCss.apply();
     });
+
+    it('debugging - only debug property for logging', (done) => {
+        expect.assertions(3);
+        document.body.innerHTML = '<div id="case13"></div>';
+        const styleSheet = `
+            #case13:not(with-debug) { debug: true }
+        `;
+        const extendedCss = new ExtendedCss({ styleSheet });
+
+        const loggerInfo = logger.info;
+        logger.info = function (...args) {
+            if (args.length === 3
+                    && typeof args[0] === 'string' && args[0].indexOf('Timings') !== -1) {
+                const loggedData = args[2];
+                expect(loggedData).toBeDefined();
+
+                const selectors = Object.keys(loggedData);
+                expect(selectors.length).toEqual(1);
+                expect(selectors[0].includes('with-debug')).toBeTruthy();
+
+                // Cleanup
+                logger.info = loggerInfo;
+                extendedCss.dispose();
+                done();
+            }
+            return loggerInfo.apply(this, args);
+        };
+
+        extendedCss.apply();
+    });
 });