[FireMonkey] Toggling UserCSS should apply/remove instantly

[pintassilgo]

Currently, when you enable or disable a UserCSS it's needed to refresh the page to apply. This approach is obvious for UserScripts, but CSS should apply instantly, just like other UserStyles managers such as Stylus do.

[erosman]

Currently, that is not possible.

FireMonkey uses automatic injection method of automatic injection UserCSS (contentScripts API) & UserScript (userScripts API), hence the same metadata block.
Both contentScripts & userScripts API only inject at tab start thus require tab refresh to apply.

Stylus injects manually using a different API tabs.insertCSS() which allows the removal.

FireMonkey's scratchpad uses tabs.insertCSS() to inject manually therefore it can remove the CSS.

However, I have requested a similar feature in Bug 1516478 .

[pintassilgo]

Stylus injects manually using a different API tabs.insertCSS() which allows the removal.

Not that it changes anything, but Stylus injects by appending a <style> element.
https://github.com/openstyles/stylus/blob/fdbfb235473f63435fb8b852da1b359dcfeddd65/content/style-injector.js#L128

openstyles/stylus#248

[erosman]

browser.tabs.insertCSS()

https://github.com/openstyles/stylus/blob/fdbfb235473f63435fb8b852da1b359dcfeddd65/background/style-via-api.js#L68-L73

browser.tabs.removeCSS()

https://github.com/openstyles/stylus/blob/fdbfb235473f63435fb8b852da1b359dcfeddd65/background/style-via-api.js#L229-L232

[pintassilgo]

As stated at the beginning of the issue from the link I posted, browser.tabs.insertCSS() is only used for XML documents, a very edge case. 99% of the time Stylus appends a <style> element.

https://github.com/openstyles/stylus/blob/4228758cec36bad1501f020e39d3bde29a2cfbef/content/apply.js#L83-L99

https://github.com/openstyles/stylus/blob/4228758cec36bad1501f020e39d3bde29a2cfbef/content/apply.js#L18

[erosman]

You are right... I tested it now with Stylus and it does inject as <style> .

Nonetheless, their method of injection is manual. Extension injects the style by matching URLs.
FireMonkey injection is automatic and done by Firefox.

The manual injection of <style> tag interferes with true injection at document-start since <style> require DOM to inject into.

[erosman]

Subsequent to #305 ... there is a new feature in v2.20

• Added option to inject userScript & userCSS temporarily
• Added option to remove the temporarily injected userCSS

Although it is not what this topic requested, it can be helpful. It is similar to Scratchpad function but for userScript & userCSS and it is accessible from the Info page.

What is does

• Inject the displayed userScript or userCSS (not userStyle) as long as it was not already injected in the tab
• Injected userScript has no access to GM API
• Undo/Remove the displayed userCSS if it was injected temporarily

[pintassilgo]

scripting.removeCSS() implemented on Fx 98, bug 1736580
also scripting.insertCSS() bug 1736579

[erosman]

Firefox's implementation of chrome.scripting API is part of Manifest v3 update which has not even reached the testing phase yet.

Footnote: Chrome Users Beware: Manifest V3 is Deceitful and Threatening

[erosman]

v2.43 uploaded

Live userCSS Update

Experimental feature was added in v2.43 to update open tabs when userCSS style changes. There are 2 types of CSS that are injected by FireMonkey:

• Permanent CSS injected by Firefox API when tab is loading
• Temporary CSS injected into tabs from Scratchpad, Popup ➜ CSS ➜ Info ➜ ▷ Run, or Live userCSS update

Live userCSS update is applied to the relevant tabs under the following circumstances:

• When a disabled userCSS is enabled, a temporary CSS is injected
• When the CSS of an enabled userCSS is edited, the temporary CSS is removed and a new one is injected
• When an enabled userCSS is disabled, the temporary CSS is removed (if present)

Please note that temporary CSS can not replace permanent CSS but can override it. The current Firefox API does not facilitate the removal of a permanent CSS.

[pintassilgo]

Great, thank you. Does this also fixes #424? Or only manual updates have live update?

[erosman]

Does this also fixes #424?

No... it doesn't update disabled userCSS.
Please also note that it can not remove the CSS injected by contentScripts API.
It can only override the same rules. e.g.

Injected by the API

a {
  color: red;
}

p {
  color: red;
}

Edit the userCss and remove p

a {
  color: blue;
}

li {
  color: blue;
}

Result

a { /* overridden */
  color: blue; 
}

li { /* added */
  color: blue;
}

p { /* no-change */
  color: red;
}