Summary: | Web Inspector: Add indicator that element has pseudo-class in DOM tree | ||||||||
---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Devin Rousso <hi> | ||||||
Component: | Web Inspector | Assignee: | Devin Rousso <hi> | ||||||
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
Devin Rousso
2016-01-03 20:42:49 PST
Created attachment 268172 [details]
Patch
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? 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.
(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/ (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 :) Oh I see, the video helped! Looks good to me. 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 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 on attachment 268172 [details] Patch Clearing flags on attachment: 268172 Committed r194723: <http://trac.webkit.org/changeset/194723> All reviewed patches have been landed. Closing bug. (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. |