Styles not being applied immediately on some pages.

[Aqa-Ib]

Hello, First, thank you very much for this program, I like it very much.

I am writing this to see if you can help to solve a problem present on reStyle as well as on Stylish and his fork Stylus for Firefox.

I am using reStyle on Firefox version 57.0.1 (firefox quantum). The problem is that on some pages, like in google search or bing search, the styles are applied after the page is loaded. This cause that if you are using a dark style, it flashes with the default white background color for a second before becoming dark.

You can see the problem following this steps:

1. Apply one dark style to reStyle. For example, this one is a very good one: https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark
2. Search something on www.bing.com
3. Click on "next page" on the bottom of bing's search page.
4. On the browser's panel, click back to go to the previous page.
5. On the browser's panel, click next to go to the following page.
6. On the browser's panel, click back and next in succession to see the flashes.

Notice that the problem does not happen every single time. Also, sometimes it doesn't apply the style at all.

I am pretty sure that this problem was not present on versions older than firefox quantum. Also, using Stylish or Stylus on Chrome web browser the problem does not appear.

Thank you very much sir, Regards.

[NiklasGollenstede]

Apparently, Bing is programmed to reload on history navigation, i.e. Firefox does a normal page load, but can use chad files, which makes the page load quite fast.

Unfortunately, there is now way for an Add-on to tell Firefox "whenever a page with a URL like ... opens, immediately apply this style". The only way to apply styles to pages of the users choosing is to have Firefox tell the Add-on that a tab was (or is about to be) navigated. The Add-on can then check the URL and tell Firefox to apply a style to that tab. And when I say "tell" it means the operation is asynchronous, so there is no guarantee how long is will take (usually, it is fast, but the Add-on can't control that). At the same time, Firefox will load the page (download resources, interpret them and build (render) the visible page). Usually Downloading and interpreting takes longer than applying the styles, so when first rendering, the style is present. But if the page is loaded from cache (i.e. nothing needs to be downloaded). it can happen that the page is first rendered without the style (white flash) then the command to add the style arrives and Firefox renders again with the style. If that happens or not depends on your computer, the browser and its performance settings. There is little to notching an extension can do about this Enabling or disabling content and/or extension processes can help.

sometimes it doesn't apply the style at all

Well. That should not happen (at all). Do you have a scenario that reproduces this?

[Aqa-Ib]

Hello, I understand the matter, thank you very much for the explanation. The interesting thing is that with Firefox version 52 the problem doesn't appear.

sometimes it doesn't apply the style at all Well. That should not happen (at all). Do you have a scenario that reproduces this?

I cant describe a scenario to reproduce that. It was something that randomly happened, just doing the steps that I wrote to reproduce the bug, but it is a rare one.

Thank you sir, Regards.

[NiklasGollenstede]

interesting thing is that with Firefox version 52 the problem doesn't appear

There are probably two factors here. Firefox Quantum is generally faster at rendering, and it has a seperate process for extensions, which probably mean that RPC to the content processes from extensions is slower.

random[...] bug, but it is a rare one.

I have never seen it myself, which makes it almost impossible to find the cause. Maybe you could look at the logs in the extension debugger for reStyle the next mine(s) this happens and send me anything you find there.

The only buggish condition like this I know about is that I think that pages that are retrieved from the backward-forward-chache after styles have been disabled will still have them applied. But this shouldn't work the other way around and bing.com disables the BF-cache.

---

Since the only things I can think of that could fix the flashing bug would be major hacks and unlikely to work reliably, 'm closing this. If anything new comes up, feel free to reopen.

[Aqa-Ib]

OK thank you sir.

I have realized though that inserting my dark style in the "userContent.css" file, the problem doesn't appear, but then I can't change styles without restarting the browser.

Regards.

[Aqa-Ib]

Hello @NiklasGollenstede. I have looked into this problem and I have verified that writing a dark CSS style into re-style causes the flashes, but writing the same exact dark style into Firefox's userContent.css resolves the flashes.

I have reported this issue to Mozilla developers. https://bugzilla.mozilla.org/show_bug.cgi?id=1462070

One of them said:

If this is the Stylus source code: https://github.com/openstyles/stylus then the extension appears to inject a content script into every page that sends a message to the background page asking what styles to apply. This is always going to be racy (in addition to being needlessly expensive). Using an API like this instead would be more efficient and would make styles available before the content is first displayed: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contentScripts/register

What do you think about it?

[Aqa-Ib]

Thank you very much for posting on bugzilla sir.

I am debating this topic with the Stylus developer as well.

He told me to enter this code into Firefox console for the Stylus extension: browser.contentScripts.register({matches:['<all_urls>'], allFrames:true, matchAboutBlank:true, runAt: 'document_start', css: [{code: editors[0].getValue()}]})

I introduced it and now the flashes are gone forever when using a dark style into Stylus.

So contentScripts.register API is a solution to prevent white flashes in Firefox. Also I understand the downsides that you expressed on bugzilla. Maybe in the future it could be implemented, I wish.

Regards.

[Aqa-Ib]

Stylus developer is trying to fix this issue. It could be useful for re-style as well: https://github.com/openstyles/stylus/issues/287

[fregante]

I just wrote a Chrome polyfill for browser.contentScripts.register, perhaps you can use that API now in both browsers.