1470830 - [meta] Migrate XBL styles to use document stylesheets

Status: RESOLVED FIXED

(Toolkit :: Themes, task, P3)

Description

[:Paolo Amadini]

After intensive experimentation and discussion in bug 1463820, bug 1457907, bug 1458426, and in person at the All Hands, we decided that we're going to migrate XBL styles to use document stylesheets, instead of UA stylesheets as we initially considered.

This is a tracking bug specifically for modifying the cascade level of the stylesheets, which will change the priority of rules that already match the same element. The affected stylesheets are the unscoped UA sheets in "components.css" and the scoped XBL sheets still loaded using <resources>.

The bulk of the work consists in increasing the specificity of rules in the "browser" folder that are meant to override the base styles of widgets in the "toolkit" folder. In some cases, the rules can be consolidated when the base styles are unused, although identifying superfluous rules won't be the focus.

We decided to front-load this part of the work so we can use the upcoming long Nightly cycle to address regressions.

After this is done, the second step when porting XBL bindings with <content> to Custom Elements depends on the migration strategy of the individual binding:

- For bindings where we won't be using Shadow DOM and don't have <children>, there is probably nothing more to do.

- For bindings where we won't be using Shadow DOM and have <children>, we have to identify rules that cross the XBL anonymous boundaries with child selectors, and update them to keep the new DOM structure in to account.

- For bindings where we will be using Shadow DOM, we have to convert every rule that applies to the anonymous content so that it's loaded in the Shadow DOM scope. For overrides in "browser", we may need to load additional scoped styles in a derived class of the base component, or use CSS variables.

This second part of the work can be addressed during the conversion of the individual widgets.

Comment 1

[:Paolo Amadini]

I've uploaded rebased patches to the individual widget bugs:

Bug 1473932 - "findBar.css"
Bug 1473926 - "colorpicker.css", "datetimebox.css", and "datetimepopup.css"
Bug 1473910 - "tabprompts.css"
Bug 1446168 - "tabbox.css"
Bug 1473930 - "scrollbox.css"
Bug 1473921 - "checkbox.css" and "radio.css"
Bug 1473922 - "button.css"
Bug 1473927 - "textbox.css"
Bug 1473928 - "numberbox.css"
Bug 1473929 - "tree.css"

The complete patch series is available on MozReview and the tryserver here:

https://hg.mozilla.org/try/rev/8988266d008b840b0026f46ad6f439563322ee2e
https://reviewboard-hg.mozilla.org/gecko/rev/8988266d008b840b0026f46ad6f439563322ee2e

Comment 2

[:Paolo Amadini]

https://hg.mozilla.org/mozreview/gecko/rev/8988266d008b840b0026f46ad6f439563322ee2e

Comment 3

[:Paolo Amadini]

List of patches from the review repository log:

https://hg.mozilla.org/mozreview/gecko/log/8988266d008b840b0026f46ad6f439563322ee2e

Comment 4

[:Paolo Amadini]

Thanks to Dão for taking care of the entire second batch of conversions!

With only the cleanup in bug 1470873 remaining, I'm closing the meta-bug.