Flashes white while loading

[MethodGrab]

While the chosen site is loading, a white screen will be shown (briefly). (via AMO review)

[MethodGrab]

What would be preferred? A dark background instead of the white?

[quitefrasmotic]

A simple toggle between white and dark background would work great, unless there's an equally simple way to detect if it should be dark or not (e.g. detecting the Firefox theme).

[MethodGrab]

I've finished implementing this, I'll try and submit it to AMO for review tomorrow.

[MethodGrab]

Published on AMO as v0.4.0.

[Huhni]

I'm still seeing the white flash, followed by a gray flash from the dark setting, followed by the actual black color of the website I'm using. It would be nice if you could just select a custom color instead of having to choose between "none, light or dark", although that wouldn't solve the initial white flash either. (The white flash does last longer if I select none as theme though) Editing the userContent.css to set the newtab background-color in firefox also doesn't work :/

Edit: I was able to fix it by also setting browser.display.background_color to #000 in about:config and changing the theme back to none, to remove the gray flash

[MethodGrab]

I'm still seeing the white flash, followed by a gray flash from the dark setting, followed by the actual black color of the website I'm using.

Edit: I was able to fix it by also setting browser.display.background_color to #000 in about:config and changing the theme back to none, to remove the gray flash

As you fixed it by changing browser.display.background_color it sounds like the white flash you experienced was from Firefox before it actually loaded this extension and so outside of my control; I'm glad you found a workaround though.

It would be nice if you could just select a custom color instead of having to choose between "none, light or dark"...

I've opened #6 to track adding this feature.

[Huhni]

Thank you for the quick reply! Unfortunately I noticed that my about:config fix breaks a lot of websites, like raw.githubusercontent.com and other websites that don't set a body background-color :(

[Huhni]

Could it be that the iframe causes the issue? Maybe .cntp-iframe needs a background-color too

Edit: Yep that seems to be the issue! I've added background-color: #000; as a quick test to the .cntp-iframe style and it removed the flash when I ran it as temporary extension in about:debugging

[MethodGrab]

Could it be that the iframe causes the issue? Maybe .cntp-iframe needs a background-color too

Edit: Yep that seems to be the issue! I've added background-color: #000; as a quick test to the .cntp-iframe style and it removed the flash when I ran it as temporary extension in about:debugging

Even if I change body and .cntp-iframe to background-color: black, I still get a noticeable white flash when opening a new tab from a page with a black background.

Try setting the extensions new tab URL to

data:text/html,<style>html { background-color: black } h1 { color: white }</style><h1>Hello World</h1>

and adding the following in app.css

body,
.cntp-iframe {
    background-color: black;
}

Then open multiple new tabs and observe the white flash each time. This only seems to be noticeable when opening a new tab from a page that already has a dark background.

[Huhni]

I'm also using a userChrome.css file for firefox to change the background-color for the about:blank page, maybe this combination removes the white flash.

#tabbrowser-tabpanels{
  background-color: #000 !important;
}
#tabbrowser-tabs {
  --tab-line-color: transparent !important;
}`