1483663 - Inspector does not show native anonymous content that is sibling of a shadow root

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Tim Guan-tin Chien [:timdream] (please needinfo)]

So in the ordinary Shadow DOM world, siblings of a Shadow Root gets ignored, or "moved" under the <slot> element in the Shadow DOM. That's not the case for native anonymous content. They continue to be rendered by layout as if they are in the same place, but with the Shadow Root present, they no longer show up on the inspector.

The concrete example would the soon-to-be-landed bug 1431255, when enabled, results in the following DOM:

<video controls>
  Shadow Root                     UA Widget Shadow Root
    <div class="videocontrols">   videocontrols
      ....
  <img />                         poster image (NAC)
  <div class="caption-box" />     captions     (NAC)

PS there won't be any <slot> inside videocontrols.
PS2 I actually don't know their order in the DOM tree because I couldn't see them in the inspector :), but I assume DOM happens before layout, therefore, Shadow Root gets attached before NAC.

Anyway, it would be nice if the inspector reflects how Gecko handles the NAC elements, even though it might forever be a special case with UA Widgets.

Comment 1

[Julian Descottes [:jdescottes]]

I believe this is the same as Bug 1449942, it's great to have a test case for this. And yes, the order should probably be the one you mentioned here. Closing as duplicate and adding your comment on the other bug.

Comment 2

[Julian Descottes [:jdescottes]]

Not actually a duplicate of Bug 1449942. 

This bug is about anonymous nodes under the host element. Bug 1449942 is about anonymous nodes under the shadow-root.

Comment 3

[Julian Descottes [:jdescottes]]

We normally display the children of a shadow-root host, but to retrieve them we use an inIDeepTreeWalker initialized with mShowAnonymousContent to false. So of course we don't get the NAC elements here.

If I use an anonymous walker instead, I get the following children for <video controls>:
- <div class="videocontrols">
- <img />
- <div class="caption-box" /> 

This is a mix of shadow-root children and of the NAC elements we are interested in.

We can filter out elements which are not really children of the <video controls> element, this gives us the tree you suggested in the summary. 

But what if some of the widgets mix regular elements and NAC elements. If the markup looks like

<custom widget>
  <regular-element1>
  <nac1>
  <regular-element2>
  <nac2>

We might display it arbitrarily as

<custom widget>
  #shadow-root
  <regular-element1>
  <regular-element2>
  <nac1>
  <nac2>

Since both elements serve a different purpose (as you explained in the summary) this might be ok?

I wonder if we should not create a new walker in C++ dedicated to get the children of host elements, because we are really accumulating workarounds at the moment.

Comment 4

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Ouch. This is more complex than I thought.

I am not sure I understand your question correctly. Where is the shadow root on this markup?

<custom widget>
  <regular-element1>
  <nac1>
  <regular-element2>
  <nac2>

if there isn't a shadow root here, it the representation related to this bug?

(If you are saying, for a markup, like

<custom widget>
  #shadow-root
    <regular-element1>
    <regular-element2>
  <nac1>
  <nac2>

I guess the anonymous walker and some filtering can correctly identify them, as you've suggested)

Comment 5

[Julian Descottes [:jdescottes]]

My example was hard to follow, I will give more details :)

If the author is writing the custom element as:

<custom widget>
  <regular-element1 slot="slot1"></regular-element1>
  <nac1></nac1>
  <regular-element2 slot="slot2"></regular-element2>
  <nac2></nac2>
</custom-widget>

And we attach it a shadowRoot with two slots:

#shadow-root
  <slot name="slot1"></slot>
  <slot name="slot2"></slot>

Then it might result in the following display in the markup-view of DevTools

<custom widget>
  #shadow-root
    <slot name="slot1">
      regular-element1 (->)
    </slot>
    <slot name="slot2">
      regular-element2 (->)
    </slot>
  <regular-element1 slot="slot1"></regular-element1>
  <regular-element2 slot="slot1"></regular-element2>
  <nac1></nac1>
  <nac2></nac2>
</custom-widget>

The reason why this is tricky is that we still display the slotted nodes twice:
- once right below the host component
- once in their slot (if they have any assigned slot)

The children of <custom widget> are similar to arguments you pass to the shadow-root, so it's important for us to make them visible early in the tree. The "nac" elements however play a very different role in your widgets. So it will be a bit weird to see them as siblings, but I suppose we can live with it if this only applies to UA widgets.

Comment 6

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(In reply to Julian Descottes [:jdescottes][:julian] from comment #5)
> The children of <custom widget> are similar to arguments you pass to the
> shadow-root, so it's important for us to make them visible early in the
> tree. The "nac" elements however play a very different role in your widgets.
> So it will be a bit weird to see them as siblings, but I suppose we can live
> with it if this only applies to UA widgets.

Yeah, it should be fine. I can't say for sure that there won't be any UA Widgets that come with both NAC and slots, but I suspect there won't be.

Comment 7

[Julian Descottes [:jdescottes]]

Attachment: Bug 1483663 - Show native anonymous nodes under UA widgets;r=ladybenko

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: Bug 1483663 - Support element picker for UA widgets with NAC;r=ladybenko

Depends on D14700

Comment 9

[Julian Descottes [:jdescottes]]

try https://treeherder.mozilla.org/#/jobs?repo=try&revision=272308a59368b474918ad97f85b93e635c2a00be

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2ffa90b738a1
Show native anonymous nodes under UA widgets;r=ladybenko
https://hg.mozilla.org/integration/autoland/rev/6e9f11aeac28
Support element picker for UA widgets with NAC;r=ladybenko

Comment 11

[Andreea Pavel [:apavel]]

Backed out for failing dt at devtools/client/inspector/markup/test/browser_markup_shadowdom_ua_widgets_with_nac.js

Push that started the failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=6e9f11aeac2833556bea33d381ce0dd46d2f1998

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=217975510&repo=autoland&lineNumber=21035

Backout: https://hg.mozilla.org/integration/autoland/rev/70ea3b91de3dafa9eb7d22f3ca6e291a72c0eead

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/17fe89b92245
Show native anonymous nodes under UA widgets;r=ladybenko
https://hg.mozilla.org/integration/autoland/rev/b7d436b51196
Support element picker for UA widgets with NAC;r=ladybenko

Comment 13

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/17fe89b92245
https://hg.mozilla.org/mozilla-central/rev/b7d436b51196