Add command to toggle cosmetic filtering

Related issue:
- uBlockOrigin/uBlock-issues#2000

Author: gorhill

platform/chromium/manifest.json

@@ -26,6 +26,9 @@
     },
     "relax-blocking-mode": {
       "description": "__MSG_relaxBlockingMode__"
+    },
+    "toggle-cosmetic-filtering": {
+      "description": "__MSG_toggleCosmeticFiltering__"
     }
   },
   "content_scripts": [

platform/firefox/manifest.json

@@ -35,6 +35,9 @@
     },
     "relax-blocking-mode": {
       "description": "__MSG_relaxBlockingMode__"
+    },
+    "toggle-cosmetic-filtering": {
+      "description": "__MSG_toggleCosmeticFiltering__"
     }
   },
   "content_scripts": [

platform/opera/manifest.json

@@ -26,6 +26,9 @@
     },
     "relax-blocking-mode": {
       "description": "__MSG_relaxBlockingMode__"
+    },
+    "toggle-cosmetic-filtering": {
+      "description": "__MSG_toggleCosmeticFiltering__"
     }
   },
   "content_scripts": [

src/_locales/en/messages.json

@@ -1221,13 +1221,13 @@
     "message": "Select all",
     "description": "Label for buttons used to select all text in editor"
   },
-  "toggleBlockingProfile": {
-    "message": "Toggle blocking profile",
-    "description": "Label for keyboard shortcut used to toggle blocking profile"
+  "toggleCosmeticFiltering": {
+    "message": "Toggle cosmetic filtering",
+    "description": "Label for keyboard shortcut used to toggle cosmetic filtering"
   },
   "relaxBlockingMode": {
     "message": "Relax blocking mode",
-    "description": "Label for keyboard shortcut used to relax blocking mode (meant to replace 'Toggle blocking profile')"
+    "description": "Label for keyboard shortcut used to relax blocking mode"
   },
   "storageUsed": {
     "message": "Storage used: {{value}} {{unit}}",

src/js/commands.js

@@ -160,11 +160,21 @@ const relaxBlockingMode = (( ) => {
 })();
 
 vAPI.commands.onCommand.addListener(async command => {
+    // Generic commands
+    if ( command === 'open-dashboard' ) {
+        µb.openNewTab({
+            url: 'dashboard.html',
+            select: true,
+            index: -1,
+        });
+        return;
+    }
+    // Tab-specific commands
+    const tab = await vAPI.tabs.getCurrent();
+    if ( tab instanceof Object === false ) { return; }
     switch ( command ) {
     case 'launch-element-picker':
     case 'launch-element-zapper': {
-        const tab = await vAPI.tabs.getCurrent();
-        if ( tab instanceof Object === false ) { return; }
         µb.epickerArgs.mouse = false;
         µb.elementPickerExec(
             tab.id,
@@ -175,8 +185,6 @@ vAPI.commands.onCommand.addListener(async command => {
         break;
     }
     case 'launch-logger': {
-        const tab = await vAPI.tabs.getCurrent();
-        if ( tab instanceof Object === false ) { return; }
         const hash = tab.url.startsWith(vAPI.getURL(''))
             ? ''
             : `#_+${tab.id}`;
@@ -187,16 +195,14 @@ vAPI.commands.onCommand.addListener(async command => {
         });
         break;
     }
-    case 'open-dashboard': {
-        µb.openNewTab({
-            url: 'dashboard.html',
-            select: true,
-            index: -1,
-        });
-        break;
-    }
     case 'relax-blocking-mode':
-        relaxBlockingMode(await vAPI.tabs.getCurrent());
+        relaxBlockingMode(tab);
+        break;
+    case 'toggle-cosmetic-filtering':
+        µb.toggleHostnameSwitch({
+            name: 'no-cosmetic-filtering',
+            hostname: hostnameFromURI(µb.normalizeTabURL(tab.id, tab.url)),
+        });
         break;
     default:
         break;

src/js/ublock.js

@@ -566,11 +566,14 @@ const matchBucket = function(url, hostname, bucket, start) {
 /******************************************************************************/
 
 µb.toggleHostnameSwitch = function(details) {
+    const newState = typeof details.state === 'boolean'
+        ? details.state
+        : sessionSwitches.evaluateZ(details.name, details.hostname) === false;
     let changed = sessionSwitches.toggleZ(
         details.name,
         details.hostname,
         !!details.deep,
-        details.state
+        newState
     );
     if ( changed === false ) { return; }
 
@@ -580,7 +583,7 @@ const matchBucket = function(url, hostname, bucket, start) {
         this.updateToolbarIcon(details.tabId, 0b100);
         break;
     case 'no-cosmetic-filtering': {
-        const scriptlet = details.state ? 'cosmetic-off' : 'cosmetic-on';
+        const scriptlet = newState ? 'cosmetic-off' : 'cosmetic-on';
         vAPI.tabs.executeScript(details.tabId, {
             file: `/js/scriptlets/${scriptlet}.js`,
             allFrames: true,
@@ -590,7 +593,7 @@ const matchBucket = function(url, hostname, bucket, start) {
     case 'no-large-media':
         const pageStore = this.pageStoreFromTabId(details.tabId);
         if ( pageStore !== null ) {
-            pageStore.temporarilyAllowLargeMediaElements(!details.state);
+            pageStore.temporarilyAllowLargeMediaElements(!newState);
         }
         break;
     }
@@ -601,7 +604,7 @@ const matchBucket = function(url, hostname, bucket, start) {
         details.name,
         details.hostname,
         !!details.deep,
-        details.state
+        newState
     );
     if ( changed ) {
         this.saveHostnameSwitches();