Bug 152680 - Web Inspector: Add indicator that element has pseudo-class in DOM tree
Summary: Web Inspector: Add indicator that element has pseudo-class in DOM tree
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-01-03 20:42 PST by Devin Rousso
Modified: 2016-01-07 16:59 PST (History)
8 users (show)

See Also:


Attachments
Patch (4.33 KB, patch)
2016-01-03 20:50 PST, Devin Rousso
no flags Details | Formatted Diff | Diff
After patch is applied (7.19 MB, video/quicktime)
2016-01-06 14:31 PST, Devin Rousso
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.