RESOLVED FIXED 146619
Web Inspector: Use "hairline" borders on retina screen 
https://bugs.webkit.org/show_bug.cgi?id=146619
Summary Web Inspector: Use "hairline" borders on retina screen
Nikita Vasilyev
Reported 2015-07-05 02:42:59 PDT
Created attachment 256177 [details] [Animated GIF] Styles, before/after We could use one physical pixel borders (hairline) on retina screens to reduce visual noise. In the attached animated GIF I decreased the width of some of the borders in the styles sidebar. It can provide extra hierarchy cues; for example, I intentionally kept vertical sidebar border and borders under "Computed Rules Metrics" unchanged as they are the "outer" borders of the sidebar and they should be thicker than the dividers between the items inside.
Attachments
[Animated GIF] Styles, before/after (186.84 KB, image/gif)
2015-07-05 02:42 PDT, Nikita Vasilyev 		no flags
Details
WIP (6.91 KB, patch)
2015-07-05 02:48 PDT, Nikita Vasilyev 		timothy: review-
nvasilyev: commit-queue-
DetailsFormatted DiffDiff
[Animated GIF] Before/after the patch (87.24 KB, image/gif)
2015-07-05 02:54 PDT, Nikita Vasilyev 		no flags
Details
[Animated GIF] Before/after, Node tab (87.63 KB, image/gif)
2015-07-05 21:19 PDT, Nikita Vasilyev 		no flags
Details
Patch (6.91 KB, patch)
2015-07-07 22:19 PDT, Nikita Vasilyev 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2015-07-05 02:43:11 PDT
<rdar://problem/21676123>
Nikita Vasilyev
Comment 2 2015-07-05 02:48:11 PDT
Created attachment 256178 [details] WIP
Nikita Vasilyev
Comment 3 2015-07-05 02:54:11 PDT
Created attachment 256179 [details] [Animated GIF] Before/after the patch I also lighten up borders and locked styles slightly.
Nikita Vasilyev
Comment 4 2015-07-05 02:55:46 PDT
If you think this is a positive change, I can convert some other parts of the Inspector.
Timothy Hatcher
Comment 5 2015-07-05 10:52:47 PDT
Comment on attachment 256178 [details] WIP View in context: https://bugs.webkit.org/attachment.cgi?id=256178&action=review I'm in favor of the change. I think we need to keep main borders as 1px. Interior borders (like in the styles sidebar) would be fine to use 0.5px. > Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css:39 > - border-top: 1px solid rgb(179, 179, 179); > + border-top: 1px solid hsla(0, 0%, 0%, 0.3); rgb(179, 179, 179) is used in many places in the code. I'd rather keep them as rgb() to make it easier to grep for the color.
Brian Burg
Comment 6 2015-07-05 13:56:59 PDT
Isn't 'hairline' a supported CSS border width now?
Timothy Hatcher
Comment 7 2015-07-05 15:57:11 PDT
I couldn't find it in WebKit source.
Nikita Vasilyev
Comment 8 2015-07-05 16:57:21 PDT
(In reply to comment #6) > Isn't 'hairline' a supported CSS border width now? "border: hairline solid black" didn't work, if that's what you meant.
Nikita Vasilyev
Comment 9 2015-07-05 17:09:17 PDT
(In reply to comment #5) > > Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css:39 > > - border-top: 1px solid rgb(179, 179, 179); > > + border-top: 1px solid hsla(0, 0%, 0%, 0.3); > > rgb(179, 179, 179) is used in many places in the code. I'd rather keep them > as rgb() to make it easier to grep for the color. I can convert all RGB colors to HSL in a separate patch, would it be okay? I find HSL more human friendly. In this particular case, I can change the shade of gray by changing only one number instead of three. I can use Option up/down keys and see the change immediately.
Nikita Vasilyev
Comment 10 2015-07-05 21:19:15 PDT
Created attachment 256189 [details] [Animated GIF] Before/after, Node tab
Nikita Vasilyev
Comment 11 2015-07-07 22:19:26 PDT
Created attachment 256354 [details] Patch I'll convert the rest of the codebase from RGB to HSL in a separate patch.
WebKit Commit Bot
Comment 12 2015-07-07 23:28:12 PDT
Comment on attachment 256354 [details] Patch Clearing flags on attachment: 256354 Committed r186492: <http://trac.webkit.org/changeset/186492>
WebKit Commit Bot
Comment 13 2015-07-07 23:28:16 PDT
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.