Bug 146619 – Web Inspector: Use "hairline" borders on retina screen

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

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.

[Radar WebKit Bug Importer]

<rdar://problem/21676123>

[Nikita Vasilyev]

Created attachment 256178 [details]
WIP

[Nikita Vasilyev]

Created attachment 256179 [details]
[Animated GIF] Before/after the patch

I also lighten up borders and locked styles slightly.

[Nikita Vasilyev]

If you think this is a positive change, I can convert some other parts of the Inspector.

[Timothy Hatcher]

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]

Isn't 'hairline' a supported CSS border width now?

[Timothy Hatcher]

I couldn't find it in WebKit source.

[Nikita Vasilyev]

(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]

(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]

Created attachment 256189 [details]
[Animated GIF] Before/after, Node tab

[Nikita Vasilyev]

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 on attachment 256354 [details]
Patch

Clearing flags on attachment: 256354

Committed r186492: <http://trac.webkit.org/changeset/186492>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.