Bug 120384 - Web Inspector: Give reload icon an :active state and allow CSS to style some SVG images
Summary: Web Inspector: Give reload icon an :active state and allow CSS to style some ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2013-08-27 16:45 PDT by Joseph Pecoraro
Modified: 2013-08-28 13:41 PDT (History)
4 users (show)

See Also:

Attachments
[PATCH] Proposed Fix (9.77 KB, patch)
2013-08-27 16:51 PDT, Joseph Pecoraro 		timothy: review+
timothy: commit-queue-
Details | Formatted Diff | Diff
[IMAGE] Different Reload image states (14.69 KB, image/png)
2013-08-27 16:51 PDT, Joseph Pecoraro 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2013-08-27 16:45:12 PDT 
Some images in the inspector are duplicated just to change fill colors. This is because we can't modify them in <img>. Convert to using <svg> in these cases and we can style them with CSS.
Comment 1 Radar WebKit Bug Importer 2013-08-27 16:45:55 PDT 
<rdar://problem/14851315>
Comment 2 Joseph Pecoraro 2013-08-27 16:51:20 PDT 
Created attachment 209821 [details]
[PATCH] Proposed Fix

The cache in ImageUtilities might not be needed. So far, this image, and the DownloadArrow I want to add will only be load once. Feel free to tell me to remove it.
Comment 3 Joseph Pecoraro 2013-08-27 16:51:47 PDT 
Created attachment 209822 [details]
[IMAGE] Different Reload image states
Comment 4 Timothy Hatcher 2013-08-28 10:24:42 PDT 
Comment on attachment 209821 [details]
[PATCH] Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Images/Reload.svg:4
> +    <path d="M11.3333594,8.19978872 C11.3373138,8.13355217 11.3392924,8.06721247 11.3392924,8.00085802 L13.5,8.00085802 C13.5,8.11015036 13.4967412,8.21941842 13.4902278,8.32851658 C13.3092357,11.3601207 10.7044904,13.671017 7.67237326,13.4900575 C4.64025461,13.309098 2.32895216,10.7048051 2.50994432,7.67319946 C2.6855607,4.73163777 5.14309162,2.46860779 8,2.50032937 L8,0.3 L11.0969295,2.13000381 L13.5,3.55 L8,6.8 L8,4.66165014 C6.25756644,4.65173653 4.94768721,5.89954424 4.84179688,7.67319965 C4.731911,9.51378018 5.96019866,11.2236643 7.80111758,11.333532 C9.64203807,11.4433997 11.2234734,10.0403708 11.3333594,8.19978872 Z M11.3333594,8.19978872"/>

I like spaces between the letter and numbers, and spaces instead of commas. That would match all the other SVGs.

> Source/WebInspectorUI/UserInterface/ResourceTreeElement.css:39
> +.item.resource > .status > .reload-button > svg > path {

I think * instead of path would be better. And no > after svg incase a <g> or other nesting changes.

> Source/WebInspectorUI/UserInterface/ResourceTreeElement.css:43
> +.item.resource.selected > .status > .reload-button > svg > path {

Ditto.

> Source/WebInspectorUI/UserInterface/ResourceTreeElement.css:47
> +.item.resource.selected > .status > .reload-button:active > svg > path {

Ditto.
Comment 5 Joseph Pecoraro 2013-08-28 13:41:20 PDT 
Committed <http://trac.webkit.org/changeset/154777>.