Web Inspector: New rule button in the style sidebar is blurry and too dark

• Component: Web Inspector
• Status: RESOLVED FIXED

[Timothy Hatcher]

Created attachment 259211 [details]
Screenshot

It looks like it is scaled and full black.

[Radar WebKit Bug Importer]

<rdar://problem/22317417>

[Devin Rousso]

Created attachment 259220 [details]
Patch

[Timothy Hatcher]

Comment on attachment 259220 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css:85
> +    margin: 5.5px 0 0 6px;

Will this work on non-retina? Are we scaling the SVG? Why 5.5 and 6 mixed?

[Devin Rousso]

(In reply to comment #3)
> > Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css:85
> > +    margin: 5.5px 0 0 6px;
> 
> Will this work on non-retina? Are we scaling the SVG? Why 5.5 and 6 mixed?

Oh crap I totally forgot about non-retina.  I'll need to check that.

[Timothy Hatcher]

We should just make the SVG be correct and use whole pixel positions.

[Devin Rousso]

Created attachment 259331 [details]
Patch

[Devin Rousso]

Comment on attachment 259331 [details]
Patch

This still does not look nice on non-retina.  I will need to fix this, but I am not quite sure how yet...

[Devin Rousso]

Created attachment 259435 [details]
Patch

[Timothy Hatcher]

Comment on attachment 259435 [details]
Patch

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

> Source/WebInspectorUI/ChangeLog:15
> +        * UserInterface/Images/Plus13.svg: Copied from Source/WebInspectorUI/UserInterface/Images/Plus.svg.
> +        * UserInterface/Images/Plus15.svg: Copied from Source/WebInspectorUI/UserInterface/Images/Plus.svg.

Maybe PlusSmall and PlusLarge? The numbers bother me.

> Source/WebInspectorUI/UserInterface/Images/Minus.svg:4
> -    <line class="stroked" fill="none" stroke="black" x1="1.5" y1="6.5" x2="11.5" y2="6.5"/>
> +    <line class="stroked" fill="none" stroke="black" x1="1" y1="6.5" x2="12" y2="6.5"/>

This seems like it would be blurry now.

> Source/WebInspectorUI/UserInterface/Images/NewTabPlus.svg:4
> +    <path d="M 7.5 2 V 13 M 2 7.5 H 13" class="stroked" fill="none" stroke="black"/>

Ditto.

[Devin Rousso]

(In reply to comment #9)
> Maybe PlusSmall and PlusLarge? The numbers bother me.

I went with Plus13 and Plus15 at Joe's suggestion because we also have a NewTabPlus.svg, which has slightly thicker lines.  Also, since Plus is so common, appending the square size will let us easily identify how big it is (we may need a Plus17 in the future, so PlusLarger doesn't make a lot of sense there).

> This seems like it would be blurry now.
So I actually talked with Dean Jackson and he explained that SVG elements have their pixel values on a 0.5 unit, so if you set a line on x=1.5, the line will draw from 1 to 2.  It's similar to what we have been doing to avoid blurry edges.  I tested it on both retina and non and it looked fine.

[Timothy Hatcher]

I knew it was half pixel aligned.  I just didn't expect to see whole pixel values in the path.

[WebKit Commit Bot]

Comment on attachment 259435 [details]
Patch

Rejecting attachment 259435 [details] from commit-queue.

Failed to run "['/Volumes/Data/EWS/WebKit/Tools/Scripts/webkit-patch', '--status-host=webkit-queues.webkit.org', '--bot-id=webkit-cq-02', 'land-attachment', '--force-clean', '--non-interactive', '--parent-command=commit-queue', 259435, '--port=mac']" exit_code: 2 cwd: /Volumes/Data/EWS/WebKit

Last 500 characters of output:
/git.webkit.org/WebKit
   8bcad24..e91f121  master     -> origin/master
Partial-rebuilding .git/svn/refs/remotes/origin/master/.rev_map.268f45cc-cd09-0410-ab3c-d52691b4dbfc ...
Currently at 188731 = 8bcad240f15aaad40b4b85766086c1f4ebd2ccb2
r188732 = e91f1219ec679745f8073ad53af0dcee40aa8a20
Done rebuilding .git/svn/refs/remotes/origin/master/.rev_map.268f45cc-cd09-0410-ab3c-d52691b4dbfc
First, rewinding head to replay your work on top of it...
Fast-forwarded master to refs/remotes/origin/master.

Full output: http://webkit-queues.webkit.org/results/83640

[Joseph Pecoraro]

This was reviewed but hasn't landed yet! I'll look into manually landed it.

[Joseph Pecoraro]

http://trac.webkit.org/changeset/189220