Fix toolbar icon paused state & assets (#1339)

extension-manifest-v3/scripts/build.js

@@ -10,7 +10,7 @@ const pwd = process.cwd();
 const options = {
   srcDir: resolve(pwd, 'src'),
   outDir: resolve(pwd, 'dist'),
-  assets: ['_locales', 'assets'],
+  assets: ['_locales', 'icons'],
 };
 
 const TARGET_TO_MANIFEST_MAP = {

extension-manifest-v3/src/background/stats.js

@@ -27,6 +27,12 @@ export const tabStats = new AutoSyncingMap({ storageKey: 'tabStats:v1' });
 
 const chromeAction = chrome.action || chrome.browserAction;
 
+const { icons } = chrome.runtime.getManifest();
+const inactiveIcons = Object.keys(icons).reduce((acc, key) => {
+  acc[key] = icons[key].replace('.', '-inactive.');
+  return acc;
+}, {});
+
 function setBadgeColor(color = '#3f4146' /* gray-600 */) {
   chromeAction.setBadgeBackgroundColor({ color });
 }
@@ -45,23 +51,23 @@ observe('terms', async (terms) => {
 });
 
 async function refreshIcon(tabId) {
+  const options = await store.resolve(Options);
+
   const stats = tabStats.get(tabId);
   if (!stats) return;
 
-  const options = await store.resolve(Options);
-  const paused = options.paused?.some(({ id }) => id === stats.domain);
-  const data = {};
+  const inactive =
+    !options.terms || options.paused?.some(({ id }) => id === stats.domain);
 
-  if (paused || !options.terms) {
-    data.path = {
-      16: '/assets/images/icon19_off.png',
-      32: '/assets/images/icon38_off.png',
-    };
-  } else if (options.trackerWheel && stats.trackers.length > 0) {
+  const data = {};
+  if (options.trackerWheel && stats.trackers.length > 0) {
     data.imageData = getOffscreenImageData(
       128,
       stats.trackers.map((t) => t.category),
+      { grayscale: inactive },
     );
+  } else {
+    data.path = inactive ? inactiveIcons : icons;
   }
 
   // Note: Even in MV3, this is not (yet) returning a promise.
@@ -89,8 +95,11 @@ async function refreshIcon(tabId) {
 }
 
 const delayMap = new Map();
-function updateIcon(tabId) {
-  if (delayMap.has(tabId)) return;
+function updateIcon(tabId, force) {
+  if (delayMap.has(tabId)) {
+    if (!force) return;
+    clearTimeout(delayMap.get(tabId));
+  }
 
   delayMap.set(
     tabId,
@@ -103,6 +112,8 @@ function updateIcon(tabId) {
       __PLATFORM__ === 'firefox' ? 1000 : 250,
     ),
   );
+
+  refreshIcon(tabId);
 }
 
 export function updateTabStats(tabId, requests) {
@@ -113,7 +124,8 @@ export function updateTabStats(tabId, requests) {
     // as some of the requests are fired before the tab is created, tabId -1
     if (!stats) return;
 
-    let sortingRequired = false;
+    let trackersUpdated = false;
+    let requestsUpdated = false;
 
     // Filter out requests that are not related to the current page
     // (e.g. requests on trailing edge when navigation to a new page is in progress)
@@ -140,7 +152,7 @@ export function updateTabStats(tabId, requests) {
               };
 
           stats.trackers.push(tracker);
-          sortingRequired = true;
+          trackersUpdated = true;
         }
 
         if (!tracker.requests.some((r) => r.url === request.url)) {
@@ -170,20 +182,24 @@ export function updateTabStats(tabId, requests) {
             blocked: request.blocked,
             modified: request.modified,
           });
+
+          requestsUpdated = true;
         }
       }
     }
 
-    if (sortingRequired) {
+    if (trackersUpdated) {
       stats.trackers.sort(
         (a, b) => order.indexOf(a.category) - order.indexOf(b.category),
       );
     }
 
     // After navigation stats are cleared, so the current `stats` variable might be outdated
-    if (stats === tabStats.get(tabId)) {
+    if (requestsUpdated && stats === tabStats.get(tabId)) {
       tabStats.set(tabId, stats);
-      updateIcon(tabId);
+
+      // We need to update the icon only if new categories were added
+      if (trackersUpdated) updateIcon(tabId);
     }
   });
 }
@@ -269,7 +285,7 @@ function setupTabStats(tabId, request) {
     tabStats.delete(tabId);
   }
 
-  updateIcon(tabId);
+  updateIcon(tabId, true);
 }
 
 // Setup stats for the tab when a user navigates to a new page

extension-manifest-v3/src/manifest.chromium.json

@@ -23,17 +23,13 @@
     "wss://*/*"
   ],
   "icons": {
-    "16": "assets/images/icon16.png",
-    "48": "assets/images/icon48.png",
-    "128": "assets/images/icon128.png"
+    "64": "icons/icon-64.png",
+    "128": "icons/icon-128.png"
   },
   "action": {
     "default_icon": {
-      "16": "assets/images/icon16.png",
-      "24": "assets/images/icon19.png",
-      "32": "assets/images/icon38.png",
-      "48": "assets/images/icon48.png",
-      "128": "assets/images/icon128.png"
+      "64": "icons/icon-64.png",
+      "128": "icons/icon-128.png"
     },
     "default_title": "Ghostery",
     "default_popup": "pages/panel/index.html"

extension-manifest-v3/src/manifest.firefox.json

@@ -20,17 +20,15 @@
     "wss://*/*"
   ],
   "icons": {
-    "16": "assets/images/icon16.png",
-    "48": "assets/images/icon48.png",
-    "128": "assets/images/icon128.png"
+    "32": "icons/icon.svg",
+    "64": "icons/icon.svg",
+    "128": "icons/icon.svg"
   },
   "browser_action": {
     "default_icon": {
-      "16": "assets/images/icon16.png",
-      "24": "assets/images/icon19.png",
-      "32": "assets/images/icon38.png",
-      "48": "assets/images/icon48.png",
-      "128": "assets/images/icon128.png"
+      "32": "icons/icon.svg",
+      "64": "icons/icon.svg",
+      "128": "icons/icon.svg"
     },
     "default_area": "navbar",
     "default_title": "Ghostery",

extension-manifest-v3/src/manifest.safari.json

@@ -22,17 +22,15 @@
     "wss://*/*"
   ],
   "icons": {
-    "16": "assets/images/icon16.png",
-    "48": "assets/images/icon48.png",
-    "128": "assets/images/icon128.png"
+    "32": "icons/icon.svg",
+    "64": "icons/icon.svg",
+    "128": "icons/icon.svg"
   },
   "browser_action": {
     "default_icon": {
-      "16": "assets/images/icon16.png",
-      "24": "assets/images/icon19.png",
-      "32": "assets/images/icon38.png",
-      "48": "assets/images/icon48.png",
-      "128": "assets/images/icon128.png"
+      "32": "icons/icon.svg",
+      "64": "icons/icon.svg",
+      "128": "icons/icon.svg"
     },
     "default_title": "Ghostery",
     "default_popup": "pages/panel/index.html"

extension-manifest-v3/xcode/Ghostery.xcodeproj/project.pbxproj

@@ -90,6 +90,8 @@
 		B456D52127E094E40038964E /* Arrow.svg in Resources */ = {isa = PBXBuildFile; fileRef = B456D51A27E094E30038964E /* Arrow.svg */; };
 		B456D52227E094E40038964E /* Extensions.svg in Resources */ = {isa = PBXBuildFile; fileRef = B456D51B27E094E40038964E /* Extensions.svg */; };
 		B456D52327E094E40038964E /* Extensions.svg in Resources */ = {isa = PBXBuildFile; fileRef = B456D51B27E094E40038964E /* Extensions.svg */; };
+		B463BF722ADE91F00088B0F0 /* icons in Resources */ = {isa = PBXBuildFile; fileRef = B463BF712ADE91F00088B0F0 /* icons */; };
+		B463BF732ADE91F00088B0F0 /* icons in Resources */ = {isa = PBXBuildFile; fileRef = B463BF712ADE91F00088B0F0 /* icons */; };
 		B46514432987C3BD000E71F6 /* licenses.html in Resources */ = {isa = PBXBuildFile; fileRef = B46514422987C3BD000E71F6 /* licenses.html */; };
 		B46514442987C3BD000E71F6 /* licenses.html in Resources */ = {isa = PBXBuildFile; fileRef = B46514422987C3BD000E71F6 /* licenses.html */; };
 		B469CA8A27BE924D00408C43 /* node_modules in Resources */ = {isa = PBXBuildFile; fileRef = B469CA8227BE924D00408C43 /* node_modules */; };
@@ -214,6 +216,7 @@
 		B456D51927E094E30038964E /* Settings.svg */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = Settings.svg; sourceTree = "<group>"; };
 		B456D51A27E094E30038964E /* Arrow.svg */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = Arrow.svg; sourceTree = "<group>"; };
 		B456D51B27E094E40038964E /* Extensions.svg */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = Extensions.svg; sourceTree = "<group>"; };
+		B463BF712ADE91F00088B0F0 /* icons */ = {isa = PBXFileReference; lastKnownFileType = folder; name = icons; path = ../../dist/icons; sourceTree = "<group>"; };
 		B46514422987C3BD000E71F6 /* licenses.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = licenses.html; path = ../../dist/licenses.html; sourceTree = "<group>"; };
 		B469CA8227BE924D00408C43 /* node_modules */ = {isa = PBXFileReference; lastKnownFileType = folder; name = node_modules; path = ../../dist/node_modules; sourceTree = "<group>"; };
 		B469CA8427BE924D00408C43 /* background */ = {isa = PBXFileReference; lastKnownFileType = folder; name = background; path = ../../dist/background; sourceTree = "<group>"; };
@@ -459,6 +462,7 @@
 		468E42D92701F84A008B5792 /* common */ = {
 			isa = PBXGroup;
 			children = (
+				B463BF712ADE91F00088B0F0 /* icons */,
 				B479A073299266F300A25D8F /* utils */,
 				B46514422987C3BD000E71F6 /* licenses.html */,
 				CEC6DBC9292BE699001E9642 /* virtual */,
@@ -669,6 +673,7 @@
 				B469CA8E27BE924D00408C43 /* background in Resources */,
 				B4D49C7028045EFC00277CCA /* store in Resources */,
 				B469CA9227BE924D00408C43 /* content_scripts in Resources */,
+				B463BF722ADE91F00088B0F0 /* icons in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -688,6 +693,7 @@
 				B469CA8F27BE924D00408C43 /* background in Resources */,
 				B4D49C7128045EFC00277CCA /* store in Resources */,
 				B469CA9327BE924D00408C43 /* content_scripts in Resources */,
+				B463BF732ADE91F00088B0F0 /* icons in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

packages/ui/src/utils/wheel.js

@@ -16,7 +16,21 @@ function degToRad(degree) {
   return degree * factor;
 }
 
-export function drawWheel(ctx, size, categories, useScale = true) {
+function grayscaleColor(hexColor) {
+  const r = parseInt(hexColor.substr(1, 2), 16);
+  const g = parseInt(hexColor.substr(3, 2), 16);
+  const b = parseInt(hexColor.substr(5, 2), 16);
+  const value = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+  return `rgb(${value}, ${value}, ${value})`;
+}
+
+export function drawWheel(
+  ctx,
+  size,
+  categories,
+  { useScale = true, grayscale = false } = {},
+) {
   if (useScale && typeof window !== 'undefined') {
     const { canvas } = ctx;
 
@@ -61,7 +75,7 @@ export function drawWheel(ctx, size, categories, useScale = true) {
     if (numTrackers > 0) {
       const newPosition = position + numTrackers * increment;
       const color = getCategoryBgColor(category);
-      ctx.strokeStyle = color;
+      ctx.strokeStyle = grayscale ? grayscaleColor(color) : color;
       ctx.beginPath();
       ctx.arc(
         center,
@@ -76,7 +90,7 @@ export function drawWheel(ctx, size, categories, useScale = true) {
   }
 }
 
-export function getOffscreenImageData(size, categories) {
+export function getOffscreenImageData(size, categories, options) {
   let canvas;
   try {
     canvas = new OffscreenCanvas(size, size);
@@ -86,7 +100,7 @@ export function getOffscreenImageData(size, categories) {
     canvas.height = size;
   }
   const ctx = canvas.getContext('2d');
-  drawWheel(ctx, size, categories, false);
+  drawWheel(ctx, size, categories, { useScale: false, ...options });
 
   return ctx.getImageData(0, 0, size, size);
 }