Bug 146619 - Web Inspector: Use "hairline" borders on retina screen
Summary: Web Inspector: Use "hairline" borders on retina screen
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: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-07-05 02:42 PDT by Nikita Vasilyev
Modified: 2015-07-07 23:28 PDT (History)
9 users (show)

See Also:


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-
Details | Formatted Diff | Diff
[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 Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 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.
Comment 1 Radar WebKit Bug Importer 2015-07-05 02:43:11 PDT
<rdar://problem/21676123>
Comment 2 Nikita Vasilyev 2015-07-05 02:48:11 PDT
Created attachment 256178 [details]
WIP
Comment 3 Nikita Vasilyev 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.
Comment 4 Nikita Vasilyev 2015-07-05 02:55:46 PDT
If you think this is a positive change, I can convert some other parts of the Inspector.
Comment 5 Timothy Hatcher 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.
Comment 6 Brian Burg 2015-07-05 13:56:59 PDT
Isn't 'hairline' a supported CSS border width now?
Comment 7 Timothy Hatcher 2015-07-05 15:57:11 PDT
I couldn't find it in WebKit source.
Comment 8 Nikita Vasilyev 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.
Comment 9 Nikita Vasilyev 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.
Comment 10 Nikita Vasilyev 2015-07-05 21:19:15 PDT
Created attachment 256189 [details]
[Animated GIF] Before/after, Node tab
Comment 11 Nikita Vasilyev 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.
Comment 12 WebKit Commit Bot 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>
Comment 13 WebKit Commit Bot 2015-07-07 23:28:16 PDT
All reviewed patches have been landed.  Closing bug.