1624482 - Scope menulist styles to its own component using shadow DOM

Status: RESOLVED FIXED

(Toolkit :: Themes, task, P3)

Description

[Tim Nguyen :ntim]

I think it'd be nice to try componentizing the styling of our custom elements a bit more. Right now, we import chrome://global/content/widgets.css or chrome://global/skin/global.css (which itself includes widgets.css) in every single custom element using shadow DOM. widgets.css includes 22 stylesheets which isn't ideal.

To make better use of web components, it would make more sense for each CE to only include styles for its own component.

For this to work however, all CEs must start using shadow DOM, which involves:

• changing the component stylesheet to work with shadow dom
• rewriting external stylesheets to use shadow parts

menulist.js would be a good candidate to start with after bug 1624454.

Comment 1

[Tim Nguyen :ntim]

Attachment: Bug 1624482 - Scope menulist styles to its own component using shadow DOM.

Comment 2

[Tim Nguyen :ntim]

Looks like try isn't super happy: https://treeherder.mozilla.org/#/jobs?repo=try&revision=72a15d28ce2e86e8aaff9e9250094d98365e974a

Will have to investigate :(

Comment 3

[Tim Nguyen :ntim]

(In reply to Tim Nguyen :ntim from comment #2)

Looks like try isn't super happy: https://treeherder.mozilla.org/#/jobs?repo=try&revision=72a15d28ce2e86e8aaff9e9250094d98365e974a

Will have to investigate :(

Bug 1627568 should fix the reftest failures.

The select-related failures were due to popuponly not working at all, this is because the shadowRoot was created all the time (even with popuponly) as the constructor doesn't know about the element's attributes yet. To fix this, I appended a slot into the shadow root when popuponly was used (since you can't create a shadow root conditionally).

Comment 4

[Tim Nguyen :ntim]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=1a29b629bef2b2c075571046305599c9e1eebe34

Comment 5

[Tim Nguyen :ntim]

Attachment: Bug 1624482 - Adapt menupopup accessible to query the correct parent element when slotted.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/86530e261ad5
Scope menulist styles to its own component using shadow DOM. r=dao
https://hg.mozilla.org/integration/autoland/rev/1319738e81d2
Adapt menupopup accessible to query the correct parent element when slotted. r=emilio

Comment 7

[Tim Nguyen :ntim]

Attachment: Bug 1624482 - Followup: Adapt to changes in bug 1590573. r=emalysz

Comment 8

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/86530e261ad5
https://hg.mozilla.org/mozilla-central/rev/1319738e81d2

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7471a82a3d5b
Followup: Adapt to changes in bug 1590573. r=emalysz

Comment 10

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/7471a82a3d5b