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.
Created attachment 256178 [details]
Created attachment 256179 [details]
[Animated GIF] Before/after the patch
I also lighten up borders and locked styles slightly.
If you think this is a positive change, I can convert some other parts of the Inspector.
Comment on attachment 256178 [details]
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.
> - 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.
Isn't 'hairline' a supported CSS border width now?
I couldn't find it in WebKit source.
(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.
(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.
Created attachment 256189 [details]
[Animated GIF] Before/after, Node tab
Created attachment 256354 [details]
I'll convert the rest of the codebase from RGB to HSL in a separate patch.
Comment on attachment 256354 [details]
Clearing flags on attachment: 256354
Committed r186492: <http://trac.webkit.org/changeset/186492>
All reviewed patches have been landed. Closing bug.