Bug 120384 – Web Inspector: Give reload icon an :active state and allow CSS to style some SVG images

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Joseph Pecoraro]

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.

[Radar WebKit Bug Importer]

<rdar://problem/14851315>

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

Created attachment 209822 [details]
[IMAGE] Different Reload image states

[Timothy Hatcher]

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.

[Joseph Pecoraro]

Committed <http://trac.webkit.org/changeset/154777>.