Shadow DOM — "reveal slotted elements" UI could be more clear

[violasong]

This little gray arrow (with lack of hover/active state) is a bit more hidden than it should be, especially in dark mode. (Related to #4) Perhaps other polish could be made as well. Here's a test page to try out the interaction.

[fvsch]

The icons look small (around 9x5 pixels), but the icon hitbox is 14x14 pixels. Still small, but not too bad.

In the Console, this type of arrow uses a SVG icon, and I tweaked it recently to display at 10x10 instead of 9x9. Going for 10x10 is probably doable here too.

This part of the Inspector still uses a previous implementation, where the arrow icons have a theme-twisty class (not sure what’s the history of that name), and use a PNG sprite:

• chrome://devtools/skin/images/controls.png
• chrome://devtools/skin/images/controls@2x.png

This sprite has elements with hardcoded partial opacity. Here’s a demo:

For the Console I moved away from a sprite (which had already been updated to SVG) to several individual SVG icons. Since theme-twisty might be used in a lot of places, with some background-position tricks to change the icon, it might be more reasonable to just update the sprite:

• To a SVG sprite (no more double PNGs)
• With higher opacity for elements
• And perhaps slightly bigger triangles (10px instead of 9px)

[fvsch]

The checkboxes are used in the Inspector's Rules panel, for the record. After a code search, it looks it’s the only place where it’s used.

Oh and the triangle icon we use in the Console is: chrome://devtools/skin/images/devtools-components/arrow.svg (but sized at 10x10)

[digitarald]

SVGs might help with here, as issue seems to be the low pixel line width. In the shot above (WQHD+ screen), the upper line of the arrow blurs.

[martinbalfanz]

These are all very good points and I think SVG could really help.

Though, I wanted to mention that I think the original task was also about the tiny arrow behind the <div> being a bit hidden. I think this needs a whole new icon.

[digitarald]

I think this needs a whole new icon.

New icon as replacing the current style or fixing the line weights of the current one?

[yashjohar]

I agree with @fvsch, the icon is too small, even with a 14x14px box. Having text appear alongside a slightly bigger SVG icon might help. Here's an example:

[violasong]

Would be great to have a 10x10 SVG version of this icon, since it will be useful for other situations as well.

In an earlier version of this feature, there was indeed a reveal link on hover, like Chrome's:

In this bug I had suggested we combine the arrows and reveal links as they seemed a bit redundant, but I can see how it could be helpful as an extra label and hitbox. It does seem a bit odd to have a bit of free-floating non-DOM text show on hover, but now that I look at this more, it does visually match the #shadow-root (open) text. I would be fine with this change.

cc: @juliandescottes @belen-albeza

[martinbalfanz]

@digitarald I meant more the line weight, sorry for the confusion. I like the suggestion with the text appearing alongside, thought that doesn't help quickly scanning the markup view. I'm curious what the slightly bigger (and maybe thicker) SVG would look like :)

[yashjohar]

@martinbalfanz roughly, the svg (arrow in the gif) is 1px wider and the arrowhead has longer edges:

[grlwholifts]

Hey @fvsch is this icon still needed? If yes, I would like to take this up. Let me know.

[fvsch]

Hmm not sure what we need to go forward.

@violasong It looks like @yashjohar's proposal (with the slightly larger icon and the "reveal" label appearing on hover) was well received. Should we try to implement it directly, or do we want to tweak this design more or explore other solutions?

[violasong]

Ah, thanks for reviving this sad forgotten bug! (There's a bigger question here about how we should do badges/buttons that could indicate action vs state vs both, but I still think Yash's plan is good to move forward with for now.)

Just checking with @juliandescottes and @belen-albeza to see if they have thoughts :).