1605637 - CSS variable --red-60 not declared in chrome://browser/content/extension.css

Status: RESOLVED WONTFIX

(WebExtensions :: General, defect, P5)

Description

[mad1ost]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

In manifest.json use browser_style: true for options_ui, so in options.html we get extra stylesheet chrome://browser/content/extension.css

Actual results:

In chrome://browser/content/extension.css we have next rules

.browser-style > input[type="text"]:invalid:not(:focus),
textarea.browser-style:invalid:not(:focus) {
  border-color: var(--red-60);
  box-shadow: 0 0 0 1px var(--red-60),
    0 0 0 4px rgba(251, 0, 34, 0.3);
}

but CSS variable --red-60 not declared.

Expected results:

As workaround I add next style:

:root {
  --red-60: #d70022;
}

I found in https://design.firefox.com/photon/visuals/color.html that it shoutd be #d70022.

Comment 1

[Miruna Curtean]

Attachment: ccsTest.xpi

Reproduced by modifying an extension as suggested. See Extension attached.
Tested on Windows 10 Pro 64-bit, macOS Catalina10.15 and Ubuntu 18.04.3 LTS on Firefox Nightly 73.0a1 (20200106092427), FF Beta 72.0 (20200103162918) and FF Release 71.0 (20191202093317).

Comment 2

[Rob Wu [:robwu]]

Closing bug because support for browser_style feature is going to be removed (at least in MV3), see bug 1827910.