Review icon used for node reps

[nchevobbe]

The icon currently used for node reps can be confusing.

in the console this icon acts as an element picker
in the ruleview and animation inspector, the icon acts as a highlighter

We should settle on one icon for picking elements and one icon for highlighting.

[fvsch]

I kinda like the current icon when used outside of Inspector, if the action is "go to Inspector and select that node". Especially since it's basically a smaller variant of the Inspector's tab icon.

So I would err on the side of figuring out a different icon for "highlight this element / all elements matching this selector". Although it's a tough concept to communicate visually.

Pinging @captainbrosset and @juliandescottes for the Inspector side.

[nchevobbe]

i wonder if we could have an icon version of the box model UI

[captainbrosset]

It would be useful to make a comprehensive list of all the places where this icon is used and what it does in each. The hope is that some of these that act differently than most can be changed to be consistent with the rest.

[nchevobbe]

Here's the inventory (I think I reviewed all usages)

console

clicking on the icon jumps to the inspector and selects the node
hovering highlight the node on screen

acessibility

clicking on the icon jumps to the inspector and selects the node
hovering highlight the node on screen
(same as console)

dom panel

clicking on the icon jumps to the inspector and selects the node
hovering highlight the node on screen
(same as console)

Rule view

clicking on the icon sets the highlighter for elements matching the selector (clicking again removes the highlighter)

Layout view - grid section

clicking on the icon jumps to the inspector and selects the node
hovering highlight the node on screen
(same as console)

Layout view - Box model properties section (offset node)

clicking on the icon jumps to the inspector and selects the node
hovering highlight the node on screen
(same as console)

---

Basically, the rule view is at odd with all the other places we use this icon.

[fvsch]

Thanks a bunch Nicolas.
So we could try to change the icon for "Highlight all elements matching this selector" in Rules.

Do we know if end users struggle with this specific button? If they understand it as a way to jump to the Inspector, they may be ignoring it (since they're already in the Inspector).

Possible visual metaphors:

• highlighter pen https://thenounproject.com/search/?q=highlighter
• something that suggests the box model highlighter?
• something like a dotted selection box: https://thenounproject.com/search/?q=select&i=2407251
• ?

[captainbrosset]

Thanks a lot Nicolas.
There's one more case I know about in the Animation inspector:

Clicking on the icon highlights the node, clicking again turns off the highlighter.

So, finding a different icon for this one would be great.
As for the rule-view, that reminds me that we have a chrome-parity bug on file (I think) to actually highlight on selector hover instead of having an icon. So maybe we could do this instead and get rid of the icon.

[SebastianZ]

As for the rule-view, that reminds me that we have a chrome-parity bug on file (I think) to actually highlight on selector hover instead of having an icon. So maybe we could do this instead and get rid of the icon.

I actually prefer the icon over the hover functionality, first because it is more obvious and second because it keeps the highlighter active and by that allows to scroll through the page to see all matches.

Sebastian

[violasong]

We could have these two cases:

1. No icon needed: hover text to highlight in page and use light blue background-hover color. Current examples: Markup, Fonts Panel. Future examples: selector names, properties, badges.

2. Icon: hover to highlight, click to jump to first matching element in Inspector markup. Example: Console, etc. (not sure if we need the persist highlight feature in Rules.)

cc: @digitarald @gabrielluong @martinbalfanz