Add badge text color customization

Requires a new API (implemented by me) only available since Firefox 63
Loirooriol · Jul 15, 2018 · 906f274 · 906f274
1 parent 7aa191d
commit 906f274
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/background.js b/background.js
@@ -23,6 +23,8 @@ let prefs = {
   badgeBgColorEnabled: true,
   color: "#000000",
   colorEnabled: true,
+  badgeColor: "#ffffff",
+  badgeColorEnabled: true,
   titlePrefix: "Open tabs: ",
 };
 
@@ -107,8 +109,14 @@ function increase(windowId, increment) {
   });
 
   if (prefs.useBadge) {
-    let color = prefs.badgeBgColorEnabled ? prefs.badgeBgColor : "transparent";
-    browser.browserAction.setBadgeBackgroundColor({color});
+    let bgColor = prefs.badgeBgColorEnabled ? prefs.badgeBgColor : "transparent";
+    browser.browserAction.setBadgeBackgroundColor({color: bgColor});
+
+    // Badge text color was added in Firefox 63
+    if (browser.browserAction.setBadgeTextColor) {
+      let color = prefs.badgeColorEnabled ? prefs.badgeColor : "transparent";
+      browser.browserAction.setBadgeTextColor({color});
+    }
   }
 
   // The windowId parameter was added in Firefox 62, polyfill it for previous versions.

diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "short_name": "Tab Counter",
   "author": "Oriol Brufau",
   "homepage_url": "https://github.com/Loirooriol/tab-counter-plus",
-  "version": "2.3",
+  "version": "2.4",
   "description": "Shows the number of tabs in each window. Efficient and customizable.",
   "manifest_version": 2,
   "applications": {

diff --git a/options.html b/options.html
@@ -41,7 +41,8 @@
     }
     input:nth-of-type(1):checked ~ [data-if ~= n1],
     input:nth-of-type(2):checked ~ [data-if ~= n2],
-    input:nth-of-type(3):checked ~ [data-if ~= n3] {
+    input:nth-of-type(3):checked ~ [data-if ~= n3],
+    .badge-color-api [data-if ~= badge-color-api] {
       display: block;
     }
     br[data-bigger] {
@@ -91,6 +92,12 @@ <h3>Counter colors</h3>
       <input type="checkbox" id="badgeBgColorEnabled" checked />
       <input type="color" id="badgeBgColor" value="#4b4b4b" />
       <label for="badgeBgColor">Badge background color</label>
+
+      <div data-if="badge-color-api">
+        <input type="checkbox" id="badgeColorEnabled" checked />
+        <input type="color" id="badgeColor" value="#000000" />
+        <label for="badgeColor">Badge text color</label>
+      </div>
     </div>
 
     <p>

diff --git a/options.js b/options.js
@@ -73,4 +73,7 @@
   document.querySelector("form").addEventListener("reset", function() {
     requestAnimationFrame(savePrefs);
   });
+  if (browser.browserAction.setBadgeTextColor) {
+    document.body.classList.add("badge-color-api");
+  }
 })();