Bug 162047

Summary: Web Inspector: Use CSS variables for common text colors
Product: WebKit Reporter: Matt Baker <mattbaker>
Component: Web InspectorAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bburg, inspector-bugzilla-changes, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   

Matt Baker
Reported 2016-09-15 21:29:29 PDT
Summary: Use CSS variables for common text colors. Color usage identified by running ack over the UserInterface directory: > ack -ohi --nogroup --css --match="hsl\(.*\)" | sort -r | uniq -c | sort -r 9 color: hsl(0, 0%, 60%) 9 color: hsl(0, 0%, 50%) 3 color: hsl(0, 0%, 70%) 3 color: hsl(0, 0%, 22%) 3 color: hsl(0, 0%, 18%) 2 color: hsl(209, 100%, 50%) 2 color: hsl(0, 0%, 85%) 2 color: hsl(0, 0%, 40%) 2 color: hsl(0, 0%, 4%) 2 color: hsl(0, 0%, 30%) 2 color: hsl(0, 0%, 23%) 2 color: hsl(0, 0%, 20%) 2 color: hsl(0, 0%, 0%, 0.25) 9 color: hsl(0, 0%, 60%) 9 color: hsl(0, 0%, 50%) 3 color: hsl(0, 0%, 70%) 3 color: hsl(0, 0%, 22%) 3 color: hsl(0, 0%, 18%) 2 color: hsl(209, 100%, 50%) 2 color: hsl(0, 0%, 85%) 2 color: hsl(0, 0%, 40%) 2 color: hsl(0, 0%, 4%) 2 color: hsl(0, 0%, 30%) 2 color: hsl(0, 0%, 23%) 2 color: hsl(0, 0%, 20%) 2 color: hsl(0, 0%, 0%, 0.25) 1 color: hsl(44, 53%, 33%) 1 color: hsl(43, 96%, 44%) 1 color: hsl(359, 57%, 50%) 1 color: hsl(309, 21%, 70%) 1 color: hsl(30, 90%, 35%) 1 color: hsl(295, 76%, 32%) 1 color: hsl(248, 52%, 78%) 1 color: hsl(240, 55%, 30%) 1 color: hsl(240, 55%, 25%) 1 color: hsl(240, 100%, 52%) 1 color: hsl(210, 100%, 40%) 1 color: hsl(210, 100%, 33%) 1 color: hsl(210, 0%, 0%) 1 color: hsl(207, 46%, 59%) 1 color: hsl(206, 69%, 45%) 1 color: hsl(119, 27%, 65%) 1 color: hsl(119, 100%, 22%) 1 color: hsl(1, 33%, 70%) 1 color: hsl(0, 86%, 47%) 1 color: hsl(0, 75%, 45%) 1 color: hsl(0, 59%, 41%) 1 color: hsl(0, 33%, 49%) 1 color: hsl(0, 100%, 100%) 1 color: hsl(0, 0%, 82%) 1 color: hsl(0, 0%, 75%) 1 color: hsl(0, 0%, 74%) 1 color: hsl(0, 0%, 65%) 1 color: hsl(0, 0%, 57%) 1 color: hsl(0, 0%, 46%) 1 color: hsl(0, 0%, 45%) 1 color: hsl(0, 0%, 37%) 1 color: hsl(0, 0%, 34%) 1 color: hsl(0, 0%, 33%) 1 color: hsl(0, 0%, 32%) 1 color: hsl(0, 0%, 31%) 1 color: hsl(0, 0%, 14%) 1 color: hsl(0, 0%, 12%) 1 color: hsl(0, 0%, 11%) The most frequently used colors should be added to Variables.css. Colors that are used only once, and visually indistinguishable from another more frequently used color, should be replaced.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2016-09-15 21:29:56 PDT
<rdar://problem/28332668>
Matt Baker
Comment 2 2016-09-16 16:00:49 PDT
This should have been: > ack -ohi --nogroup --css --match=" color: hsl\(.*\)" | sort -r | uniq -c | sort -r Which limits the search to `color` properties: 9 color: hsl(0, 0%, 60%) 9 color: hsl(0, 0%, 50%) 3 color: hsl(0, 0%, 70%) 3 color: hsl(0, 0%, 22%) 3 color: hsl(0, 0%, 18%) 2 color: hsl(209, 100%, 50%) 2 color: hsl(0, 0%, 85%) 2 color: hsl(0, 0%, 40%) 2 color: hsl(0, 0%, 4%) 2 color: hsl(0, 0%, 23%) 2 color: hsl(0, 0%, 20%) 2 color: hsl(0, 0%, 0%, 0.25) 1 color: hsl(44, 53%, 33%) 1 color: hsl(43, 96%, 44%) 1 color: hsl(359, 57%, 50%) 1 color: hsl(309, 21%, 70%) 1 color: hsl(30, 90%, 35%) 1 color: hsl(295, 76%, 32%) 1 color: hsl(248, 52%, 78%) 1 color: hsl(240, 55%, 30%) 1 color: hsl(240, 55%, 25%) 1 color: hsl(240, 100%, 52%) 1 color: hsl(210, 100%, 40%) 1 color: hsl(210, 100%, 33%) 1 color: hsl(210, 0%, 0%) 1 color: hsl(207, 46%, 59%) 1 color: hsl(206, 69%, 45%) 1 color: hsl(119, 27%, 65%) 1 color: hsl(119, 100%, 22%) 1 color: hsl(1, 33%, 70%) 1 color: hsl(0, 86%, 47%) 1 color: hsl(0, 75%, 45%) 1 color: hsl(0, 59%, 41%) 1 color: hsl(0, 33%, 49%) 1 color: hsl(0, 100%, 100%) 1 color: hsl(0, 0%, 82%) 1 color: hsl(0, 0%, 75%) 1 color: hsl(0, 0%, 74%) 1 color: hsl(0, 0%, 65%) 1 color: hsl(0, 0%, 57%) 1 color: hsl(0, 0%, 46%) 1 color: hsl(0, 0%, 45%) 1 color: hsl(0, 0%, 37%) 1 color: hsl(0, 0%, 34%) 1 color: hsl(0, 0%, 33%) 1 color: hsl(0, 0%, 32%) 1 color: hsl(0, 0%, 31%) 1 color: hsl(0, 0%, 30%) 1 color: hsl(0, 0%, 14%) 1 color: hsl(0, 0%, 12%) 1 color: hsl(0, 0%, 11%)
Timothy Hatcher
Comment 3 2016-09-16 16:04:52 PDT
This one is invalid: color: hsl(0, 0%, 0%, 0.25) Should be hsla() or just black.
Matt Baker
Comment 4 2016-09-16 16:16:01 PDT
(In reply to comment #3) > This one is invalid: color: hsl(0, 0%, 0%, 0.25) > > Should be hsla() or just black. Good catch! This should be --text-color-placeholder, which is hsla(0, 0%, 0%, 0.35).
Blaze Burg
Comment 5 2016-12-16 11:13:27 PST
I don't think this is important to do by itself. We can just refactor as we touch text colors in UI changes.
Note You need to log in before you can comment on or make changes to this bug.