White flash during loading and switching with other sidebar item

[dougwl]

If the user has a dark theme on firefox, opening the extension results in a brief white 'flash' before the correct theme is applied, it happens both when opening it and when changing to other sidebar items.
The normal behavior using the native options (history, bookmarks and sync) is a smooth transition with no flashes.
I'm using firefox nightly, so I can't point out if this happens on other browser versions.

This is something very minor, but since this place is for this type of discussion, I think there isn't any harm in pointing it out.

[aaFn]

Hello @dougwl , yes this is normal:

• the active theme is retrieved through API calls
• for that code to get executed, the sidebar must be open and running
• meanwhile, it contains default colors
• the flash comes from the duration of load by FF of the add-on page in the sidebar, and then start of code, then interrogation of stored options to see if we should match the active FF theme or not, and if yes, then read it, and apply it

No ideal situation, add-ons are not integrated in FF itself .. and cannot guess in advance or inherit all the colors of a theme.

[Gitoffthelawn]

Personally, I use userChrome.css / userContent.css to work around these sorts of issues.

[dougwl]

I've been so involved with work that actually forgot to give a response here, sorry.

The whole explanation makes sense, but in this first moment during load there is no need to any color fidelity, right? Since the problem results just from drastic differences between colors schemes used by Bookmark Search and the one set in Firefox.
Sidebar extensions are loaded as an HTML page with its respective CSS style-sheets, so just by adding 'prefers-color-scheme' into the CSS rules and providing some basic dark colors alternatives, at the very least the 'flash' wouldn't be such a jarring thing.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
CSS media feature supported since version 67.

And in my opinion just returning the default dark theme colors would be enough, your explanation already covers what should happens after.

https://design.firefox.com/photon/visuals/color.html

Grey 60            #4a4a4f
Grey 70            #38383d
Grey 90            #0c0c0d

Any other specific change can be done with userChrome or userContent , and that's fair.

Thanks for giving your thoughts on the case, anyway!

[aaFn]

Hello @dougwl , interesting, but remember that BSP2 supports all FF versions from 56. So as a policy, I try not using any CSS feature above FF56, as I do not know easy ways to make "conditional CSS code" based on FF version, and working out specific workarounds for each case / feature I would try to use, is a lot of work.

[dougwl]

The way CSS is designed ensures that unsupported code/syntax is ignored, so any unrecognized rule will be skipped and the rest of the style remains safe. Taking into account, that some browsers may need some type of fallback for design consistency.
In this case, there is nothing that can be done for browsers bellow version 67, but they can still keep operating the same as always (a fair trade, considering the drawbacks of using a version so outdated).

My two cents here would be to move the basic color scheme under ':root' , and keep the values in a centralized manner, through custom properties. A simple illustration of what I'm talking about:

:root{
  --bg-color: white; 
  --main-text-color: black;
}

@media (prefers-color-scheme: dark){   //  This will be ignored by any browser that doesn't support the syntax
	:root{
		--bg-color: black;
		--main-text-color: white;
	}
}

body{
	background-color: var(--bg-color);
	color: var(--main-text-color);
}

For demonstration purposes, here is a live example:

https://codepen.io/douglaswilliam/pen/QWaaOBe

[aaFn]

Interesting ... I'll think about it, thank you.
(btw, looks like background for dark is grey 70 by default, and font color is grey 10 ..)

[aaFn]

Ok, I tried to see how well that works = bad news, there is still a white flash .. shorter (this is somewhat a good piece of news), but still there !

Apparently coming from the duration of load by FF of the add-on page in the sidebar, and then start of CSS interpretation .. and same for the history window (don't ask me why FF creates a sidebar / window with white background and not the theme background, I don't know 😢 ).

Will see if there is something else to tweak, or if you have any suggestion, welcome.

[aaFn]

Oups, my bad, I saw I had several places using the background color, modifed them also, and now it looks like there is no more flash, or nothing visible at least 😀 .

However, in the add-on options page, and in the new window creation for Bookmark history, there is still a white flash in spite of the same CSS code, And there, I can't find anything to improve, as it seems.

I checked with TST (Tree Style Tab), the same white flash happens on the add-on options page ..
=> seems some things are built-in FF which cause this short white flash, in those two cases at least.

[dougwl]

However, in the add-on options page, and in the new window creation for Bookmark history, there is still a white flash in spite of the same CSS code, And there, I can't find anything to improve, as it seems.

I checked with TST (Tree Style Tab), the same white flash happens on the add-on options page .. => seems some things are built-in FF which cause this short white flash, in those two cases at least.

I can't say about the Bookmark History window, but for the add-on options page what you're seeing is a hard-coded white color on the ' .inline-options-stack ' class, contained in ' aboutaddons.css ' .
This element is used as a filler between operations and should be respecting theme colors, which is not the case.
So, this one is actually on Mozilla and happens with any extension using the about section, including their own.
Later I might check if someone reported something on Bugzilla and open a bug if it's not the case.

Thank you for looking into my suggestion and I'm glad this conversation helped somehow!

[aaFn]

The improvement to avoid the white flash is in 2.0.106, out since yesterday.
Enjoy .. aaFn.

[Gitoffthelawn]

@aaFn wrote:

...I do not know easy ways to make "conditional CSS code" based on FF version, and working out specific workarounds for each case / feature I would try to use, is a lot of work.

Just FYI, I'm 75% certain (lol) that you can use certain CSS at-rules to indirectly detect the current FF version. I seem to recall doing it a few years back.

Now regarding writing specific workarounds for each version-specific issue, that's certainly a pain point! :)