[meta] Migrate XBL styles to use document stylesheets

RESOLVED FIXED

Status

()

P3
normal
RESOLVED FIXED
9 months ago
4 months ago

People

(Reporter: Paolo, Unassigned)

Tracking

(Blocks: 2 bugs, {meta})

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox62 affected)

Details

(Reporter)

Description

9 months ago
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.
(Reporter)

Updated

9 months ago
Depends on: 1470840
(Reporter)

Updated

9 months ago
Depends on: 1470842
(Reporter)

Updated

9 months ago
Depends on: 1470870
(Reporter)

Updated

9 months ago
Depends on: 1470871
(Reporter)

Updated

9 months ago
Depends on: 1470872
(Reporter)

Updated

9 months ago
Depends on: 1470873
(Reporter)

Updated

9 months ago
Depends on: 1461793
(Reporter)

Updated

9 months ago
Depends on: 1471544
(Reporter)

Updated

9 months ago
Depends on: 1421433
(Reporter)

Updated

9 months ago
Depends on: 1472153
(Reporter)

Updated

9 months ago
Depends on: 1473521
(Reporter)

Updated

9 months ago
Depends on: 1473623
(Reporter)

Updated

9 months ago
Depends on: 1473832
(Reporter)

Updated

9 months ago
Depends on: 1463320
(Reporter)

Updated

9 months ago
Depends on: 1473910
(Reporter)

Updated

9 months ago
Depends on: 1473921
(Reporter)

Updated

9 months ago
Depends on: 1473922
(Reporter)

Updated

9 months ago
Depends on: 1473925
(Reporter)

Updated

9 months ago
Depends on: 1473926
(Reporter)

Updated

9 months ago
Depends on: 1473927
(Reporter)

Updated

9 months ago
Depends on: 1473928
(Reporter)

Updated

9 months ago
Depends on: 1473929
(Reporter)

Updated

9 months ago
Depends on: 1473930
(Reporter)

Updated

9 months ago
Depends on: 1473931
(Reporter)

Updated

9 months ago
Depends on: 1473932
(Reporter)

Updated

9 months ago
Depends on: 1473933
(Reporter)

Updated

9 months ago
Depends on: 1473934
(Reporter)

Updated

9 months ago
Blocks: 1474069
(Reporter)

Comment 1

8 months ago
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
(Reporter)

Comment 3

6 months ago
List of patches from the review repository log:

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

Updated

6 months ago
No longer depends on: 1473930

Updated

6 months ago
No longer depends on: 1473932

Updated

6 months ago
Depends on: 1411707

Updated

6 months ago
Blocks: 1457907
No longer depends on: 1457907

Updated

6 months ago
No longer depends on: 1463820

Updated

6 months ago
Blocks: 1458426
No longer depends on: 1458426

Updated

6 months ago
Depends on: 1416363
(Reporter)

Comment 4

4 months ago
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.
Status: NEW → RESOLVED
Last Resolved: 4 months ago
Resolution: --- → FIXED
Summary: Migrate XBL styles to use document stylesheets → [meta] Migrate XBL styles to use document stylesheets
You need to log in before you can comment on or make changes to this bug.