code review to further lower overhead of updating toolbar icon

platform/chromium/vapi-background.js

@@ -656,6 +656,14 @@ vAPI.setIcon = (function() {
 
     (function() {
         if ( browserAction.setIcon === undefined ) { return; }
+
+        // The global badge background color.
+        if ( browserAction.setBadgeBackgroundColor !== undefined ) {
+            browserAction.setBadgeBackgroundColor({
+                color: [ 0x66, 0x66, 0x66, 0xFF ]
+            });
+        }
+
         if (
             vAPI.webextFlavor.soup.has('chromium') === false &&
             vAPI.webextFlavor.soup.has('firefox') === false
@@ -690,23 +698,15 @@ vAPI.setIcon = (function() {
         }
     })();
 
-    var onTabReady = function(tab, status, badge) {
+    var onTabReady = function(tab, state, badge, parts) {
         if ( vAPI.lastError() || !tab ) { return; }
 
         if ( browserAction.setIcon !== undefined ) {
-            let details = icons[status === 'on' ? 1 : 0];
+            if ( parts === undefined || (parts & 0x01) !== 0 ) {
-            details.tabId = tab.id;
+                icons[state].tabId = tab.id;
-            browserAction.setIcon(details);
+                browserAction.setIcon(icons[state]);
-            browserAction.setBadgeText({
-                tabId: tab.id,
-                text: badge
-            });
-            if ( badge !== '' ) {
-                browserAction.setBadgeBackgroundColor({
-                    tabId: tab.id,
-                    color: '#666'
-                });
             }
+            browserAction.setBadgeText({ tabId: tab.id, text: badge });
         }
 
         if ( browserAction.setTitle !== undefined ) {
@@ -714,18 +714,21 @@ vAPI.setIcon = (function() {
                 tabId: tab.id,
                 title: titleTemplate.replace(
                     '{badge}',
-                    status === 'on' ? (badge !== '' ? badge : '0') : 'off'
+                    state === 1 ? (badge !== '' ? badge : '0') : 'off'
                 )
             });
         }
     };
 
-    return function(tabId, iconStatus, badge) {
+    // parts: bit 0 = icon
+    //        bit 1 = badge
+
+    return function(tabId, state, badge, parts) {
         tabId = toChromiumTabId(tabId);
         if ( tabId === 0 ) { return; }
 
         chrome.tabs.get(tabId, function(tab) {
-            onTabReady(tab, iconStatus, badge);
+            onTabReady(tab, state, badge, parts);
         });
 
         if ( vAPI.contextMenu instanceof Object ) {

src/js/messaging.js

@@ -434,7 +434,7 @@ var onMessage = function(request, sender, callback) {
         pageStore = µb.pageStoreFromTabId(request.tabId);
         if ( pageStore ) {
             pageStore.toggleNetFilteringSwitch(request.url, request.scope, request.state);
-            µb.updateBadgeAsync(request.tabId);
+            µb.updateToolbarIcon(request.tabId, 0x03);
         }
         break;
 

src/js/pagestore.js

@@ -576,7 +576,7 @@ PageStore.prototype.journalProcess = function(fromTimer) {
     // https://github.com/chrisaljoudi/uBlock/issues/905#issuecomment-76543649
     //   No point updating the badge if it's not being displayed.
     if ( (aggregateCounts & 0xFFFF) && µb.userSettings.showIconBadge ) {
-        µb.updateBadgeAsync(this.tabId);
+        µb.updateToolbarIcon(this.tabId, 0x02);
     }
 
     // Everything before pivot does not originate from current page -- we still

src/js/tab.js

@@ -815,7 +815,7 @@ vAPI.tabs.onPopupUpdated = (function() {
 
         // Blocked
         if ( µb.userSettings.showIconBadge ) {
-            µb.updateBadgeAsync(openerTabId);
+            µb.updateToolbarIcon(openerTabId, 0x02);
         }
 
         // It is a popup, block and remove the tab.
@@ -839,7 +839,7 @@ vAPI.tabs.registerListeners();
 // Create an entry for the tab if it doesn't exist.
 
 µb.bindTabToPageStats = function(tabId, context) {
-    this.updateBadgeAsync(tabId);
+    this.updateToolbarIcon(tabId, 0x03);
 
     // Do not create a page store for URLs which are of no interests
     if ( µb.tabContextManager.exists(tabId) === false ) {
@@ -922,33 +922,45 @@ vAPI.tabs.registerListeners();
 
 // Update visual of extension icon.
 
-µb.updateBadgeAsync = (function() {
+µb.updateToolbarIcon = (function() {
-    var tabIdToTimer = new Map();
+    let tabIdToDetails = new Map();
 
-    var updateBadge = function(tabId) {
+    let updateBadge = function(tabId) {
-        tabIdToTimer.delete(tabId);
+        let parts = tabIdToDetails.get(tabId);
+        tabIdToDetails.delete(tabId);
 
-        var state = false;
+        let state = 0;
-        var badge = '';
+        let badge = '';
 
-        var pageStore = this.pageStoreFromTabId(tabId);
+        let pageStore = this.pageStoreFromTabId(tabId);
         if ( pageStore !== null ) {
-            state = pageStore.getNetFilteringSwitch();
+            state = pageStore.getNetFilteringSwitch() ? 1 : 0;
-            if ( state && this.userSettings.showIconBadge && pageStore.perLoadBlockedRequestCount ) {
+            if (
+                state === 1 &&
+                this.userSettings.showIconBadge &&
+                pageStore.perLoadBlockedRequestCount
+            ) {
                 badge = this.formatCount(pageStore.perLoadBlockedRequestCount);
             }
         }
 
-        vAPI.setIcon(tabId, state ? 'on' : 'off', badge);
+        vAPI.setIcon(tabId, state, badge, parts);
     };
 
-    return function(tabId) {
+    // parts: bit 0 = icon
-        if ( tabIdToTimer.has(tabId) ) { return; }
+    //        bit 1 = badge
+
+    return function(tabId, newParts) {
         if ( vAPI.isBehindTheSceneTabId(tabId) ) { return; }
-        tabIdToTimer.set(
+        if ( newParts === undefined ) { newParts = 0x03; }
-            tabId,
+        let currentParts = tabIdToDetails.get(tabId);
-            vAPI.setTimeout(updateBadge.bind(this, tabId), 701)
+        if ( currentParts === newParts ) { return; }
-        );
+        if ( currentParts === undefined ) {
+            vAPI.setTimeout(updateBadge.bind(this, tabId), 701);
+        } else {
+            newParts |= currentParts;
+        }
+        tabIdToDetails.set(tabId, newParts);
     };
 })();
 

src/js/traffic.js

@@ -971,7 +971,7 @@ var injectCSP = function(pageStore, details) {
         return;
     }
 
-    µb.updateBadgeAsync(tabId);
+    µb.updateToolbarIcon(tabId, 0x02);
 
     // Use comma to merge CSP directives.
     // Ref.: https://www.w3.org/TR/CSP2/#implementation-considerations