use image data instead of paths for browser icons

When using paths, platform implementations of setIcon typically
will fetch the resource then convert to image data internally.
It is preferable for uBO to do this conversion itself as it can
be done only once at launch time.

With chromium-based browsers, using image data eliminate the
incessant network traffic to fetch browser icons as reported
in the extension's dev tool, meaning a good chunk of overhead
is eliminated.

Also, use optimal icon sizes, as of now both chromium and firefox
prefers 16px instead of 19px, and 32px instead of 38px.

platform/chromium/manifest.json

@@ -5,8 +5,8 @@
   },
   "browser_action": {
     "default_icon": {
-      "19": "img/browsericons/icon19.png",
+      "16": "img/icon_16.png",
-      "38": "img/browsericons/icon38.png"
+      "32": "img/icon_32.png"
     },
     "default_title": "uBlock Origin",
     "default_popup": "popup.html"

platform/chromium/vapi-background.js

@@ -638,29 +638,65 @@ vAPI.tabs.injectScript = function(tabId, details, callback) {
 
 // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/browserAction#Browser_compatibility
 //   Firefox for Android does no support browser.browserAction.setIcon().
+//   Performance: use ImageData for platforms supporting it.
 
 vAPI.setIcon = (function() {
-    var browserAction = chrome.browserAction,
+    let browserAction = chrome.browserAction,
         titleTemplate = chrome.runtime.getManifest().name + ' ({badge})';
-    var iconPaths = [
+    let icons = [
         {
-            '19': 'img/browsericons/icon19-off.png',
+            tabId: 0,
-            '38': 'img/browsericons/icon38-off.png'
+            path: { '16': 'img/icon_16-off.png', '32': 'img/icon_32-off.png' }
         },
         {
-            '19': 'img/browsericons/icon19.png',
+            tabId: 0,
-            '38': 'img/browsericons/icon38.png'
+            path: { '16': 'img/icon_16.png', '32': 'img/icon_32.png' }
         }
     ];
 
+    (function() {
+        if ( browserAction.setIcon === undefined ) { return; }
+        if (
+            vAPI.webextFlavor.soup.has('chromium') === false &&
+            vAPI.webextFlavor.soup.has('firefox') === false
+        ) {
+            return;
+        }
+        let imgs = [
+            { i: 0, p: '16' }, { i: 0, p: '32' },
+            { i: 1, p: '16' }, { i: 1, p: '32' },
+        ];
+        let onLoaded = function() {
+            for ( let img of imgs ) {
+                if ( img.r.complete === false ) { return; }
+            }
+            let ctx = document.createElement('canvas').getContext('2d');
+            let iconData = [ null, null ];
+            for ( let img of imgs ) {
+                let w = img.r.naturalWidth, h = img.r.naturalHeight;
+                ctx.width = w; ctx.height = h;
+                ctx.clearRect(0, 0, w, h);
+                ctx.drawImage(img.r, 0, 0);
+                if ( iconData[img.i] === null ) { iconData[img.i] = {}; }
+                iconData[img.i][img.p] = ctx.getImageData(0, 0, w, h);
+            }
+            icons[0] = { tabId: 0, imageData: iconData[0] };
+            icons[1] = { tabId: 0, imageData: iconData[1] };
+        };
+        for ( let img of imgs ) {
+            img.r = new Image();
+            img.r.addEventListener('load', onLoaded, { once: true });
+            img.r.src = icons[img.i].path[img.p];
+        }
+    })();
+
     var onTabReady = function(tab, status, badge) {
         if ( vAPI.lastError() || !tab ) { return; }
 
         if ( browserAction.setIcon !== undefined ) {
-            browserAction.setIcon({
+            let details = icons[status === 'on' ? 1 : 0];
-                tabId: tab.id,
+            details.tabId = tab.id;
-                path: iconPaths[status === 'on' ? 1 : 0]
+            browserAction.setIcon(details);
-            });
             browserAction.setBadgeText({
                 tabId: tab.id,
                 text: badge

platform/firefox/manifest.json

@@ -12,8 +12,8 @@
   "browser_action": {
     "browser_style": false,
     "default_icon": {
-      "19": "img/browsericons/icon19.png",
+      "16": "img/icon_16.png",
-      "38": "img/browsericons/icon38.png"
+      "32": "img/icon_32.png"
     },
     "default_title": "uBlock Origin",
     "default_popup": "popup.html"

platform/opera/manifest.json

@@ -5,8 +5,8 @@
   },
   "browser_action": {
     "default_icon": {
-      "19": "img/browsericons/icon19.png",
+      "16": "img/icon_16.png",
-      "38": "img/browsericons/icon19.png"
+      "32": "img/icon_32.png"
     },
     "default_popup": "popup.html",
     "default_title": "uBlock Origin"
@@ -78,8 +78,8 @@
   "short_name": "uBlock₀",
   "sidebar_action": {
     "default_icon": {
-      "19": "img/browsericons/icon19.png",
+      "16": "img/icon_16.png",
-      "38": "img/browsericons/icon19.png"
+      "32": "img/icon_32.png"
     },
     "default_panel": "logger-ui.html",
     "default_title": "__MSG_statsPageName__"

platform/webext/manifest.json

@@ -12,8 +12,8 @@
   "browser_action": {
     "browser_style": false,
     "default_icon": {
-      "19": "img/browsericons/icon19.png",
+      "16": "img/icon_16.png",
-      "38": "img/browsericons/icon38.png"
+      "32": "img/icon_32.png"
     },
     "default_title": "uBlock Origin",
     "default_popup": "popup.html"

tools/make-chromium.sh

@@ -18,7 +18,6 @@ cp -R src/lib               $DES/
 cp -R src/_locales          $DES/
 cp src/*.html               $DES/
 cp platform/chromium/*.js   $DES/js/
-cp -R platform/chromium/img $DES/
 cp platform/chromium/*.html $DES/
 cp platform/chromium/*.json $DES/
 cp LICENSE.txt              $DES/

tools/make-firefox.sh

@@ -18,7 +18,6 @@ cp -R src/lib                           $DES/
 cp -R src/_locales                      $DES/
 cp -R $DES/_locales/nb                  $DES/_locales/no
 cp src/*.html                           $DES/
-cp -R platform/chromium/img             $DES/
 cp platform/chromium/*.js               $DES/js/
 cp platform/chromium/*.html             $DES/
 cp platform/chromium/*.json             $DES/

tools/make-opera.sh

@@ -18,7 +18,6 @@ cp -R src/lib               $DES/
 cp -R src/_locales          $DES/
 cp src/*.html               $DES/
 cp platform/chromium/*.js   $DES/js/
-cp -R platform/chromium/img $DES/
 cp platform/chromium/*.html $DES/
 cp platform/chromium/*.json $DES/
 cp LICENSE.txt              $DES/

tools/make-webext.sh

@@ -18,7 +18,6 @@ cp -R src/lib                           $DES/
 cp -R src/_locales                      $DES/
 cp -R $DES/_locales/nb                  $DES/_locales/no
 cp src/*.html                           $DES/
-cp -R platform/chromium/img             $DES/
 cp platform/chromium/*.js               $DES/js/
 cp platform/chromium/*.html             $DES/
 cp platform/chromium/*.json             $DES/