Dark theme font issue

[fantomovics]

If Firefox use dark theme the number of the extension is not visible,because its dark too.
So maybe if its possible it must to match with the UI color theme

[Loirooriol]

Do you mean the icon? The popup?

The popup should work well in a dark theme (#30).

For the icon, you can customize the colors in the add-on preferences. Sure, it would be nice to make it work automatically, but the wbextensions APIs don't let me specify different icons for light and dark themes (bug 1484840).

[Loirooriol]

Wait, seems I can use browser.themes.getCurrent() and browser.theme.onUpdated.addListener(), even without the theme permission? I thought this wasn't possible, the MDN documentations says that the permission is required, but only browser.themes.update() and browser.themes.reset() need it.

[Loirooriol]

It will be kind of annoying having to decide whether to use light or dark text by myself, since technically this may depend on various factors I don't have control over, but I guess I can try to replicate what Firefox does in the toolbar/tabbar:

https://searchfox.org/mozilla-central/rev/8f4c180b87e52f3345ef8a3432d6e54bd1eb18dc/browser/base/content/browser.js#9008-9035

// The getComputedStyle calls and setting the brighttext are separated in
// two loops to avoid flushing layout and making it dirty repeatedly.
let cachedLuminances = this._toolbarLuminanceCache;
let luminances = new Map();
for (let toolbar of document.querySelectorAll(toolbarSelector)) {
  // toolbars *should* all have ids, but guard anyway to avoid blowing up
  let cacheKey =
    toolbar.id && toolbar.id + JSON.stringify(this._windowState);
  // lookup cached luminance value for this toolbar in this window state
  let luminance = cacheKey && cachedLuminances.get(cacheKey);
  if (isNaN(luminance)) {
    let [r, g, b] = parseRGB(getComputedStyle(toolbar).color);
    luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
    if (cacheKey) {
      cachedLuminances.set(cacheKey, luminance);
    }
  }
  luminances.set(toolbar, luminance);
}

const luminanceThreshold = 127; // In between 0 and 255
for (let [toolbar, luminance] of luminances) {
  if (luminance <= luminanceThreshold) {
    toolbar.removeAttribute("brighttext");
  } else {
    toolbar.setAttribute("brighttext", "true");
  }
}

Where getComputedStyle(toolbar).color seems to be one of popup_text, tab_background_text, tab_text, toolbar_field_text, or toolbar_text of the theme.

For the overflow menu, Firefox uses

https://searchfox.org/mozilla-central/rev/8f4c180b87e52f3345ef8a3432d6e54bd1eb18dc/toolkit/modules/LightweightThemeConsumer.jsm#85-91,508-510

let { r, g, b, a } = rgbaChannels;

if (_isColorDark(r, g, b)) {
  element.removeAttribute("lwt-popup-brighttext");
} else {
  element.setAttribute("lwt-popup-brighttext", "true");
}

function _isColorDark(r, g, b) {
  return 0.2125 * r + 0.7154 * g + 0.0721 * b <= 127;
}

[Gitoffthelawn]

Just FYI, it looks good to me with a dark theme. I do manually set the foreground color, but you've made it so easy. :)

[Loirooriol]

This is what Firefox uses (1st available color):

• In the menu and tab toolbars: tab_background_text, or #000000.
• In the navigation and bookmarks toolbars: toolbar_text, or bookmark_text, or tab_background_text, or #000000.
• In the overflow menu: popup_text, or #000000.

I can't actually know where the action is, but by default it appears in the navigation toolbar.
So preferences could look like

(●) Use automatic theme colors for:
    (●) Navigation and bookmarks toolbars
    ( ) Menu and tab toolbars
    ( ) Overflow menu
( ) Use manual colors:
    [ ] {#ffffff} Background color
    [✓] {#000000} Text color

Just for SVG icons, I don't think this makes much sense for badges.
And with browser_action.theme_icons, Firefox calculates the luminance of the text, and then uses the light or the dark icon appropriately. But I guess I can just use the theme color directly.

Catch: different windows may have different themes. By default I'm already tracking windows and using a different icon per window, so not a big deal. But when counting tabs globally, I will need to be careful.