Use uBO version of easylist cookie

lib/dom-actions.ts

@@ -96,11 +96,12 @@ export class DomActions implements DomActionsProvider {
     return !!existingElement;
   }
 
-  applyCosmetics(selector: string): boolean {
+  applyCosmetics(stylesheet: string): boolean {
     // TODO: use document.styleSheets instead of a real DOM element
     const styleEl = getStyleElement('autoconsent-cosmetics');
     this.autoconsentInstance.config.logs.lifecycle && console.log("[cosmetics]", styleEl, location.href);
-    return hideElements(styleEl, selector, "opacity");
+    styleEl.innerText = stylesheet;
+    return stylesheet.length > 0;
   }
 
   undoCosmetics(): boolean {

lib/filterlist-utils.ts

@@ -1,5 +1,5 @@
-import { FiltersEngine } from '@cliqz/adblocker';
-import { extractFeaturesFromDOM } from '@cliqz/adblocker-content';
+import { FiltersEngine } from '../node_modules/@cliqz/adblocker/src/index';
+import { extractFeaturesFromDOM } from '../node_modules/@cliqz/adblocker-content/src/index';
 import { parse as tldtsParse } from 'tldts-experimental';
 
 export function parseFilterList(rawFilterlist: string) {
@@ -12,7 +12,7 @@ export function parseFilterList(rawFilterlist: string) {
   return engine;
 }
 
-export function getFilterlistSelectors(engine: FiltersEngine): string {
+export function getCosmeticStylesheet(engine: FiltersEngine): string {
   const parsed = tldtsParse(location.href);
   const hostname = parsed.hostname || '';
   const domain = parsed.domain || '';
@@ -26,16 +26,18 @@ export function getFilterlistSelectors(engine: FiltersEngine): string {
     ...extractFeaturesFromDOM([document.documentElement]),
 
     getBaseRules: true,
-    getInjectionRules: true,
+    getInjectionRules: false, // we don't inject scripts atm
     getExtendedRules: true,
     getRulesFromDOM: true,
     getRulesFromHostname: true,
   });
+  return cosmetics.styles;
+}
 
-  if (cosmetics.styles) {
-    const selectorsOnly = cosmetics.styles.replace(/\s*{ display: none !important; }\s*/g, ',').replace(/,$/, '');
+export function getFilterlistSelectors(styles: string): string {
+  if (styles) {
+    const selectorsOnly = styles.replace(/\s*{[^\\}]*}\s*/g, ',').replace(/,$/, '');
     return selectorsOnly;
   }
-
   return '';
 }

lib/web.ts

@@ -8,7 +8,7 @@ import { dynamicCMPs } from './cmps/all';
 import { AutoConsentCMP } from './cmps/base';
 import { DomActions } from './dom-actions';
 import { normalizeConfig } from './utils';
-import { getFilterlistSelectors, parseFilterList } from './filterlist-utils';
+import { getCosmeticStylesheet, getFilterlistSelectors, parseFilterList } from './filterlist-utils';
 import { FiltersEngine } from '@cliqz/adblocker';
 
 import { getFirstConsistentlyInteractive } from 'time-to-interactive-polyfill/src/index.js';
@@ -136,12 +136,12 @@ export default class AutoConsent {
       if (document.readyState === 'loading') {
         window.addEventListener('DOMContentLoaded', () => {
           performance.mark('autoconsent-apply-filterlist-start');
-          this.applyCosmeticFilters(false);
+          this.applyCosmeticFilters();
           performance.mark('autoconsent-apply-filterlist-end');
         });
       } else {
         performance.mark('autoconsent-apply-filterlist-start');
-        this.applyCosmeticFilters(false);
+        this.applyCosmeticFilters();
         performance.mark('autoconsent-apply-filterlist-end');
       }
     }
@@ -476,21 +476,19 @@ export default class AutoConsent {
 
   /**
    * Apply cosmetic filters
-   * @param verify if true, will check if the filters are actually hiding something
-   * @returns true if the cosmetic filters are actually hiding something (only when verify is set).
+   * @returns true if the filters were applied, false otherwise
    */
-  applyCosmeticFilters(verify: boolean) {
+  applyCosmeticFilters(styles?: string) {
     if (!this.filtersEngine) {
       return false;
     }
-    this.updateState({ cosmeticFiltersOn: true });
-    const selectors = getFilterlistSelectors(this.filtersEngine);
-    if (verify) {
-      // TODO: this may be a false positive: sometimes filters hide unrelated elements that are not cookie pop-ups
-      return this.domActions.elementVisible(selectors, 'any');
+    if (!styles) {
+      // TODO: pass the hiding snippet to adblocker https://github.com/ghostery/adblocker/issues/4178
+      styles = getCosmeticStylesheet(this.filtersEngine);
     }
-    this.domActions.applyCosmetics(selectors);
-    return false;
+    this.updateState({ cosmeticFiltersOn: true });
+    this.domActions.applyCosmetics(styles);
+    return true;
   }
 
   undoCosmetics() {
@@ -500,13 +498,22 @@ export default class AutoConsent {
 
   filterListFallback() {
     const logsConfig = this.config.logs;
-    const cosmeticFiltersWorked = this.applyCosmeticFilters(true); // this will also refresh filters based on the current DOM state
+    // TODO: pass the hiding snippet to adblocker https://github.com/ghostery/adblocker/issues/4178
+    const cosmeticStyles = getCosmeticStylesheet(this.filtersEngine);
+
+    // TODO: this may be a false positive: sometimes filters hide unrelated elements that are not cookie pop-ups
+    const cosmeticFiltersWorked = this.domActions.elementVisible(
+      getFilterlistSelectors(cosmeticStyles),
+      'any'
+    );
+
     if (!cosmeticFiltersWorked) {
       logsConfig.lifecycle && console.log("Cosmetic filters didn't work, removing them", location.href);
       this.undoCosmetics();
       this.updateState({ lifecycle: 'nothingDetected' });
       return false;
     } else {
+      this.applyCosmeticFilters(cosmeticStyles);
       logsConfig.lifecycle && console.log("Keeping cosmetic filters", location.href);
       this.updateState({ lifecycle: 'cosmeticFiltersDetected' });
       this.sendContentMessage({

package.json

@@ -19,7 +19,7 @@
     "test:chrome": "playwright test --project chrome",
     "test:lib": "playwright test tests/dom-actions.spec.ts",
     "test:sample": "playwright test tests/_sample-test.spec.ts --project webkit",
-    "fetch-fanboy-list": "wget https://www.fanboy.co.nz/fanboy-cookiemonster.txt -O rules/fanboy-cookiemonster.txt",
+    "fetch-fanboy-list": "wget https://secure.fanboy.co.nz/fanboy-cookiemonster_ubo.txt -O rules/fanboy-cookiemonster.txt",
     "fetch-site-list": "curl https://s3.amazonaws.com/cdn.cliqz.com/re-consent/supported_sites.txt > sites.txt",
     "build-rules": "node rules/build.mjs",
     "version": "node update_version.js && git add addon/manifest.*.json",
@@ -62,7 +62,8 @@
     "onlyPublishWithReleaseLabel": true
   },
   "dependencies": {
-    "@cliqz/adblocker": "^1.26.15",
+    "@cliqz/adblocker": "https://gitpkg.vercel.app/muodov/adblocker/packages/adblocker?hiding-styles-hack",
+    "@cliqz/adblocker-content": "https://gitpkg.vercel.app/muodov/adblocker/packages/adblocker-content?hiding-styles-hack",
     "time-to-interactive-polyfill": "^0.2.4"
   }
 }