2 years ago
5 months ago


(Reporter: andy+bugzilla, Assigned: evilpie)


(Blocks: 1 bug, {dev-doc-complete})

Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox53 fixed)


(Whiteboard: triaged)


(1 attachment, 1 obsolete attachment)



2 years ago
We have tabs.insertCSS, but in bug 1226547 comment 1 its mentioned why we'd want a user CSS to be installed. This would be a CSS that:

"The latter likely needs to come with a "super-power" over its Chrome counterpart, which gives inserted stylesheets lower priority than content and does not honor !important: we should have an "overrideContent" flag or something like that, in order to prevent web pages from trumping extension-provided CSS rules."

Comment 1

2 years ago
Currently tabs.insertCSS inserts a CSS as a USER_SHEET:﷒0﷓

If we allowed it to be inserted as an AUTHOR_SHEET:

Then it would be able to override the content sheets.

Comment 2

2 years ago
Correction. It's currently inserted as AUTHOR_SHEET. This bug would allow insertion as a USER_SHEET.

Sorry for the confusion.


2 years ago
Priority: -- → P3
Whiteboard: triaged

Comment 3

2 years ago
This can be easily done by adding an `origin` property which defaults to `AUTHOR_SHEET` to the `details` argument of `tabs.insertCSS` and `tabs.removeCSS` (bug 1247455). This is also useful to Stylish-y add-ons, both to override `!important` style attributes and to style scrollers in the page.


2 years ago
See Also: → bug 1288917


2 years ago
Assignee: nobody → evilpies

Comment 5

2 years ago
I am open to naming suggestion, I don't feel like "origin" is really that great. Origin has another much more common meaning in the context of HTTP. Uh and we seem to share InjectDetails between JS and CSS.

Comment 6

2 years ago
I'm not really involved in the details here, but I like naming things.

What about 'definer' or 'cssDefiner'? It gets at the heart of what an AUTHOR or USER _SHEET means.

Comment 7

2 years ago
I got to about the same point you did with a patch, which naughty me, I didn't add it to bugzilla. I called it type, purely because the SDK calls it that:

But I agree origin is so overloaded with other meanings.


2 years ago
webextensions: --- → +

Comment 8

2 years ago
(In reply to Matt from comment #6)
> I'm not really involved in the details here, but I like naming things.
> What about 'definer' or 'cssDefiner'? It gets at the heart of what an AUTHOR
> or USER _SHEET means.

Or it could be something like 'precedence'. That's even more clear as to its role, being similar in meaning to "priority" but with more of a "which wins" connotation than priority's "what's the ordering?"
I don't think "priority" or "precedence" is appropriate because the cascading order is
1. user "!important"
2. author "!important"
3. author non-"!important"
4. user non-"!important"

Comment 10

2 years ago
Hmm. You make a good point. I'd forgotten that customizing the browser default and overriding a site's choices were two sides of the same mechanism.

I'd suggest "role" but that's already taken.

That said, I still think using an -er suffix sounds wrong unless used to name a class which implements some action. (eg. FooDownloader, BarCopier, BazHasher)

Comment 11

2 years ago
I like "role"! In which sense is it taken? It's not a property of InjectDetails.

Comment 12

2 years ago
Huh. You're right. For some reason, my tired mind was telling me that screen/print/etc. were "roles" rather than "media types" and, if that were true, it'd have the same kind of problem as "origin".

However, I'd say that stylesheets and HTML element accessibility are distinct enough for such a common English word to be used by both without confusion.

Comment 13

2 years ago
Created attachment 8821688 [details] [diff] [review]
Add "role" option for insertCSS/removeCSS
Attachment #8817543 - Attachment is obsolete: true
Attachment #8821688 - Flags: review?(aswan)
Comment on attachment 8821688 [details] [diff] [review]
Add "role" option for insertCSS/removeCSS

Redirecting to Kris.  My only minor comment is that you've misspelled the name of the new property in the patch subject (rule/role)
Attachment #8821688 - Flags: review?(aswan) → review?(kmaglione+bmo)


2 years ago
Attachment #8821688 - Attachment description: Add "rule" option for insertCSS/removeCSS → Add "role" option for insertCSS/removeCSS
Keywords: dev-doc-needed
Comment on attachment 8821688 [details] [diff] [review]
Add "role" option for insertCSS/removeCSS

Review of attachment 8821688 [details] [diff] [review]:

r=me with "role" changed to "origin".


::: browser/components/extensions/ext-tabs.js
@@ +844,4 @@
>          } else {
>            options.run_at = "document_idle";
>          }
> +        if (details.role !== null) {

This CSS spec calls this the origin, not the role:
Attachment #8821688 - Flags: review?(kmaglione+bmo) → review+

Comment 16

2 years ago
Please see the previous discussion, I don't think origin is a good name to use.
I'm still not comfortable defining a whole new term for this, when one already exists in the spec... How about something like "originRole"?

Comment 18

2 years ago
We agreed to cssOrigin on IRC.

Comment 19

2 years ago
Pushed by
webext: Add cssOrigin option to insertCSS/removeCSS. r=kmag

Comment 20

2 years ago
Last Resolved: 2 years ago
status-firefox53: --- → fixed
Flags: in-testsuite+
Resolution: --- → FIXED
Target Milestone: --- → mozilla53
I've added this here:

Let me know if this covers it.
Flags: needinfo?(evilpies)

Comment 22

2 years ago
The text looks good. don't forget to add a new row to the compatibility table and update
Flags: needinfo?(evilpies)
Keywords: dev-doc-needed → dev-doc-complete
Hey, IIUC the cssOrigin arguments should also be added to and maybe (indicating it's specific to *CSS functions)?
Flags: needinfo?(wbamberg)

Comment 24

a year ago
I'm using this on but it doesn't really works.

I do somethings like that (all the code is on :

const CSS = `
body * {
  /*CSS transition*/
  transition: none !important;
  /*CSS animations*/
  animation: none !important;
browser.tabs.insertCSS(, { code: CSS, cssOrigin: 'user' });

I can overwrite almost all animation, but not all. It seem !important is not taken in account and cssOrigin: 'user' doesn't mean it can't be overwrite.

For example on the "more" button is still changing his with an animation.
> the cssOrigin arguments should also be added to...

Sorry to be so slow on this. This is done (not by me...)
Flags: needinfo?(wbamberg)


5 months ago
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.