1112302 - DevTools: the string 'background' is replaced by '#F1F2F0' in devtools CSS files

Status: RESOLVED DUPLICATE of bug 1049436

(DevTools :: General, defect)

Description

[Albert Juhé]

Attachment: background-replaced-by-f1f2f0.png

When working on the new devtools network table header (see Bug 951714 Comment 89), I noticed that the string 'background' is replaced by '#F1F2F0' when it appears on a CSS value.

So, for example:

> .box {
>   background-color: background;
> }

Produces:

> .box {
>   background-color: #F1F2F0;
> }

I'm not sure if that is a feature or a bug. But it makes impossible to write variable names that contain the word 'background'.

For example:

> .requests-menu-header-button[sorted] {
>   background-color: var(--theme-selection-background);
>   color: var(--theme-selection-color);
> }

Results in (screenshot attached):

> .requests-menu-header-button[sorted] {
>   background-color: var(--theme-selection-#F1F2F0);
>   color: var(--theme-selection-color);
> }

Which makes the rule invalid.

Expected results: the string 'background' should not be replaced.

Comment 1

[Brian Grinstead [:bgrins]]

I believe this is the same problem as Bug 1049436 - although I'm not sure why the string "Background" is being replaced.  Mike, do you think this is a dup?

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to Brian Grinstead [:bgrins] from comment #1)
> I believe this is the same problem as Bug 1049436 - although I'm not sure
> why the string "Background" is being replaced.  Mike, do you think this is a
> dup?

Yes, background is a system color so we show a color swatch.

Of course, we shouldn't show color swatches about CSS variables, which is what bug 1049436 is about so this is a dupe.