Bug 154525 - Web Inspector: Autocomplete CSS system colors
Summary: Web Inspector: Autocomplete CSS system colors
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-02-21 21:10 PST by Nikita Vasilyev
Modified: 2017-04-27 13:13 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2016-02-21 21:10:18 PST
The following:

    background-color: H|

should autocomplete with "Highlight".

All the system keywords: https://www.w3.org/TR/CSS2/ui.html#system-colors

Although this spec is deprecated, it is still supported by WebKit and all
major browsers.
Comment 1 Radar WebKit Bug Importer 2016-02-21 21:10:46 PST
<rdar://problem/24763778>
Comment 2 Joseph Pecoraro 2016-02-21 22:53:08 PST
I notice you didn't assign this bug to you. Are you going to put up a patch for this?

What is interesting about this is that the actual color is only known by the backend, not the frontend. So to produce an accurate color swatch for "highlight" you have to check what "highlight" actually resolves to on the target. This is important remotely inspecting a target.

You could for instance evaluate some JavaScript and get the computed style of something with that color. Note the element has to be in the DOM, so appending to the <head> ensures the element won't cause any visible change to the page when doing the calculation:

    var span = document.createElement("span");
    span.style.backgroundColor = "highlight";
    document.head.appendChild(span);
    var rgbColor = getComputedStyle(span).backgroundColor;
    span.remove();
    rgbColor // rgb(...)
Comment 3 Nikita Vasilyev 2016-02-21 23:01:27 PST
(In reply to comment #2)
> I notice you didn't assign this bug to you. Are you going to put up a patch
> for this?

Nope.
I intentionally didn't assign it to myself and added "GoodFirstBug" keyword.

> 
> What is interesting about this is that the actual color is only known by the
> backend, not the frontend. So to produce an accurate color swatch for
> "highlight" you have to check what "highlight" actually resolves to on the
> target. This is important remotely inspecting a target. [...]

Good catch! I didn't realise it would be that complicated.