1560556 - Use Shadow DOM and CSS Shadow parts for <dropmarker>

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Brian Grinstead [:bgrins]]

We originally used light DOM + connectedCallback for dropmarker because it's styled from document sheets:

• https://searchfox.org/mozilla-central/search?q=dropmarker-icon&path=

But it's a really simple element with a single child that could be moved into a shadow root (created in constructor) and styled with shadow parts:

• https://searchfox.org/mozilla-central/rev/da14c413ef663eb1ba246799e94a240f81c42488/toolkit/content/widgets/general.js#43-45

This would serve a good test case for using Shadow parts, and have the benefit of correctness for consumers that accidentally put a child inside of the node and made us skip adding the icon.

I do notice that it's used in the url bar XBL bindings as anonymous content (https://searchfox.org/mozilla-central/rev/da14c413ef663eb1ba246799e94a240f81c42488/browser/base/content/urlbarBindings.xml) so we might need to wait for Bug 1513337 / removing the legacy URL bar code if there's a bad interaction there.

Comment 1

[Brian Grinstead [:bgrins]]

Attachment: Bug 1560556 - Use Shadow DOM and CSS Shadow parts for <dropmarker>

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: Bug 1560556 - Alternate version using <style> in shadow root instead of a part matching rule in xul.css

Part matching doesn't currently work in xul.css. We may ultimately want to control these types of
styles from a sheet loaded by the shadow root anyway depending on how we want to handle nested roots,
so this is a version showing that.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/87e14a059e60
Use Shadow DOM and CSS Shadow parts for <dropmarker> r=dao

Comment 4

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/87e14a059e60