Bug 152680 – Web Inspector: Add indicator that element has pseudo-class in DOM tree

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

It is a bit hard to find that one element with the forced :hover style just by looking at the styles panel (especially since, if it's long enough, it automatically scrolls the pseudo-classes out of view).

[Radar WebKit Bug Importer]

<rdar://problem/24035315>

[Devin Rousso]

Created attachment 268172 [details]
Patch

[Timothy Hatcher]

Comment on attachment 268172 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=268172&action=review

> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:106
> +    background-color: hsl(212, 92%, 54%);
> +    border-radius: 50%;

A colored circle that fades out? Can you post a screenshot or animated GIF?

[Devin Rousso]

Created attachment 268408 [details]
After patch is applied

It doesn't fade in/out as that would require the ::before element to always be present (so that "content" doesn't change) and I figured that it wasn't a very good idea...

Also, not entirely sure how to make gif's using builtin stuff on ElCap, but whatever Nikita uses is awesome, so if someone could point me to that I would be forever grateful.

[Nikita Vasilyev]

(In reply to comment #4)
> Also, not entirely sure how to make gif's using builtin stuff on ElCap, but
> whatever Nikita uses is awesome, so if someone could point me to that I
> would be forever grateful.

I use http://www.cockos.com/licecap/

[Devin Rousso]

(In reply to comment #5)
> I use http://www.cockos.com/licecap/

Is this also the one that shows an icon when a special key is pressed so that the viewer knows whether I hit option/command?  I really like that part about your screenshots :)

[Timothy Hatcher]

Oh I see, the video helped! Looks good to me.

[Joseph Pecoraro]

Comment on attachment 268172 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=268172&action=review

>> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:106
>> +    border-radius: 50%;
> 
> A colored circle that fades out? Can you post a screenshot or animated GIF?

I wonder if there is a way we can give this a tooltip.

[Devin Rousso]

Comment on attachment 268172 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=268172&action=review

>>> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:106
>>> +    border-radius: 50%;
>> 
>> A colored circle that fades out? Can you post a screenshot or animated GIF?
> 
> I wonder if there is a way we can give this a tooltip.

So I just tried modifying the code to make the indicator its own element, but doing so would require a lot of restructuring of the different "position" attributes of the elements for each DOMNodeItem (at least, it did in the way I did it).  The only use-case that I can see for the tooltip (right now) is to just list the different pseudo-classes currently applied, but seeing as the indicator is only 5px by 5px, it would be very hard to actually hover it and I think that users are more likely to just select the node and look in the sidebar.

[WebKit Commit Bot]

Comment on attachment 268172 [details]
Patch

Clearing flags on attachment: 268172

Committed r194723: <http://trac.webkit.org/changeset/194723>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Nikita Vasilyev]

(In reply to comment #6)
> (In reply to comment #5)
> > I use http://www.cockos.com/licecap/
> 
> Is this also the one that shows an icon when a special key is pressed so
> that the viewer knows whether I hit option/command?  I really like that part
> about your screenshots :)

Unfortunately, LICEcap doesn't do it.
When I need it, I use http://www.araelium.com/screenflick

Screenflick doesn't do animated GIFs out of the box though,
so I usually post a video when I use it.

There is also https://github.com/keycastr/keycastr.
It isn't a screen recording tool but a standalone app to show
pressed shortcuts. It's neat but it doesn't show when you press
or release functional keys - only when a shortcut is triggered, e.g.
Cmd C.