Bug 152680

Summary: Web Inspector: Add indicator that element has pseudo-class in DOM tree
Product: WebKit Reporter: Devin Rousso <drousso>
Component: Web InspectorAssignee: Devin Rousso <drousso>
Status: RESOLVED FIXED    
Severity: Normal CC: bburg, commit-queue, graouts, joepeck, mattbaker, nvasilyev, timothy, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
Patch
none
After patch is applied none

Description Devin Rousso 2016-01-03 20:42:49 PST
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).
Comment 1 Radar WebKit Bug Importer 2016-01-03 20:43:01 PST
<rdar://problem/24035315>
Comment 2 Devin Rousso 2016-01-03 20:50:45 PST
Created attachment 268172 [details]
Patch
Comment 3 Timothy Hatcher 2016-01-06 10:45:03 PST
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?
Comment 4 Devin Rousso 2016-01-06 14:31:05 PST
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.
Comment 5 Nikita Vasilyev 2016-01-07 04:07:56 PST
(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/
Comment 6 Devin Rousso 2016-01-07 08:04:22 PST
(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 :)
Comment 7 Timothy Hatcher 2016-01-07 10:17:47 PST
Oh I see, the video helped! Looks good to me.
Comment 8 Joseph Pecoraro 2016-01-07 10:58:38 PST
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.
Comment 9 Devin Rousso 2016-01-07 14:04:00 PST
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.
Comment 10 WebKit Commit Bot 2016-01-07 14:11:50 PST
Comment on attachment 268172 [details]
Patch

Clearing flags on attachment: 268172

Committed r194723: <http://trac.webkit.org/changeset/194723>
Comment 11 WebKit Commit Bot 2016-01-07 14:11:54 PST
All reviewed patches have been landed.  Closing bug.
Comment 12 Nikita Vasilyev 2016-01-07 16:59:05 PST
(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.