[tor-bugs] #31170 [Circumvention/Snowflake]: Addon Icon looks horrible Firefox Dark Mode.

[Tor Bug Tracker & Wiki]

#31170: Addon Icon looks horrible Firefox Dark Mode.
-------------------------------------+------------------------------
 Reporter:  knowguy                  |          Owner:  dcf
     Type:  defect                   |         Status:  needs_review
 Priority:  Medium                   |      Milestone:
Component:  Circumvention/Snowflake  |        Version:
 Severity:  Normal                   |     Resolution:
 Keywords:  snowflake-webextension   |  Actual Points:
Parent ID:                           |         Points:
 Reviewer:                           |        Sponsor:
-------------------------------------+------------------------------
Changes (by dcf):

 * status:  assigned => needs_review


Comment:

 Here is a branch that successfully styles the popup in dark mode and
 unsuccessfully tries to set the appropriate toolbar icon in dark mode.
  *
 [https://gitweb.torproject.org/user/dcf/snowflake.git/log/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911
 darkmode 44882d2b0f]
  *
 [https://gitweb.torproject.org/user/dcf/snowflake.git/diff/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911&id2=f795fb5a3366c80a7ea24c11128366ab39b179f7
 diff against master]

 antonela: It appears that it is not currently possible to set different
 toolbar icons based on the current light/dark mode setting. We may need a
 single set of icons that work in both light mode and dark mode. More
 details below.

 [[Image(popup-light.png)]] [[Image(popup-dark.png)]]

 Styling the popup is pretty easy. There is a new
 [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-
 scheme prefers-color-scheme] CSS media query that lets us override certain
 styling in dark mode. To enable dark mode:
  * In Firefox 67+, go to about:config and set `ui.systemUsesDarkTheme=1`
 (and optionally `browser.in-content.dark-mode=true`, to make pages like
 about:addons also be dark). Go to https://bugzilla.mozilla.org/ to check
 if it's working (that site has
 [https://hacks.mozilla.org/2019/05/firefox-67-dark-mode-css-webrender/ its
 own dark theme]).
    * Note that the `ui.systemUsesDarkTheme` setting is ''independent'' of
 the "Dark theme" that you can set at about:addons. You may ''also'' have
 to enable the Dark theme at about:addons to make the toolbar appear dark.
  * In Chrome 76+, run with the `--force-dark-mode` command-line option. I
 haven't tested this myself because my Chromium is not new enough.

 Changing the toolbar icon is harder. The problem is that while we have
 separate status-on.png and status-on-dark.png images, there is no way
 (that I could find) to test whether dark mode is enabled from the
 WebExtension JavaScript. In Firefox, manifest.json can have a
 [https://developer.mozilla.org/en-US/docs/Mozilla/Add-
 ons/WebExtensions/manifest.json/browser_action#Syntax theme_icons] with
 separate `"light"` and `"dark"` icons, and
 [https://gitweb.torproject.org/user/dcf/snowflake.git/commit/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911
 I am using it], but the problem is that it only applies at first startup.
 Once the extension starts running, the code controls the icon using
 [https://developer.mozilla.org/en-US/docs/Mozilla/Add-
 ons/WebExtensions/API/browserAction/setIcon browserAction.setIcon], and
 here is where I couldn't find a way to detect dark mode. (If you reload
 the extension in dark mode, you can see it use the correct, lighter-color
 icon for a split second before the code takes control.) Here are things I
 tried that didn't work:
  * [https://developer.mozilla.org/en-US/docs/Mozilla/Add-
 ons/WebExtensions/API/theme/getCurrent theme.getCurrent()] always returns
 `undefined`. (It's meant for custom extension-set themes, not the built-in
 themes.)
  * By calling `browserAction.setIcon({})`, we could revert back to the
 proper theme-specific `theme_icons` setting, but that only distinguishes
 light and dark mode, not the off/on/running states of the snowflake.
 There's [https://bugzilla.mozilla.org/show_bug.cgi?id=1416871 apparently
 no way] to control the `theme_icons` externally either.
  * There's no `browserAction.getIcon` counterpart to
 `browserAction.getIcon` that would allow us to inspect the filename.
  * Mozilla's own icons use a special SVG `"context-fill"` that changes
 color based on the theme, but
 [https://bugzilla.mozilla.org/show_bug.cgi?id=1394579 it's not allowed]
 for non-Mozilla extensions.
  * More discussion:
    * https://discourse.mozilla.org/t/how-to-correctly-design-color-icon-
 to-be-visible-across-themes/27713
    * https://discourse.mozilla.org/t/use-theme-colors-for-svg-
 favicons/29165

 tl;dr: Unless I'm missing something, we can't use separate toolbar icons
 for light and dark mode. We need a single set of icons that work in either
 mode. I am picturing something like a semi-transparent white circle behind
 the snowflake that would be almost invisible in light themes, and provide
 the needed contrast in dark themes. That's only for the icons in the
 toolbar; the image inside the popup easily supports different icons
 depending on the theme.

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/31170#comment:5>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online