Cherry pick css class differentiation for toolbar button state #1233

gorhill · Jun 15, 2015 · 62849f1 · 62849f1
1 parent ed130af
commit 62849f1
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/platform/firefox/vapi-background.js b/platform/firefox/vapi-background.js
@@ -1855,11 +1855,16 @@ vAPI.toolbarButton.init = function() {
 
     this.defaultArea = CustomizableUI.AREA_NAVBAR;
     this.styleURI = [
-        '#' + this.id + ' {',
+        '#' + this.id + '.off {',
             'list-style-image: url(',
                 vAPI.getURL('img/browsericons/icon16-off.svg'),
             ');',
         '}',
+        '#' + this.id + ' {',
+            'list-style-image: url(',
+                vAPI.getURL('img/browsericons/icon16.svg'),
+            ');',
+        '}',
         '#' + this.viewId + ', #' + this.viewId + ' > iframe {',
             'width: 160px;',
             'height: 290px;',
@@ -2078,16 +2083,15 @@ vAPI.toolbarButton.updateState = function(win, tabId) {
     }
 
     var icon = this.tabs[tabId];
+
     button.setAttribute('badge', icon && icon.badge || '');
 
     if ( !icon || !icon.img ) {
-        icon = '';
+        button.classList.add('off');
     }
     else {
-        icon = 'url(' + vAPI.getURL('img/browsericons/icon16.svg') + ')';
+        button.classList.remove('off');
     }
-
-    button.style.listStyleImage = icon;
 };
 
 /******************************************************************************/