1696479 - Tweak chiclet and urlbar-label-box colors in dark mode

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Marco Bonardo [:mak]]

the chiclet and label-box colors are not correct for the latest spec, we should tweak them to apply at least to [lwt-default-theme-in-dark-mode]. We can't just use a darker overlay on LWT themes since some of those themes have completely black background.

Comment 1

[Marco Bonardo [:mak]]

Attachment: Bug 1696479 - Tweak urlbar chiclets and label box colors in Proton themes. r=harry

Proton themes want to alternate the chiclets background color when focused / unfocused.
Other themes will just use an overlay, because we can't predict whether their colors will contrast.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/16d520863319
Tweak urlbar chiclets and label box colors in Proton themes. r=harry,dao

Comment 3

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out changeset 16d520863319 (bug 1696479) for browser_parsable_css.js mochitest failures.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&selectedTaskRun=Jn5--YZdSNC6OxPkBccScg.0&fromchange=3b19f7ab532fec4b105260d44101e0e165ddecd6&searchStr=linux%2C18.04%2Cx64%2Copt%2Cmochitests%2Ctest-linux1804-64%2Fopt-mochitest-browser-chrome-e10s%2Cbc3&tochange=01ef3736228e3be944734ab1744819f79c4e1736

Backout link: https://hg.mozilla.org/integration/autoland/rev/01ef3736228e3be944734ab1744819f79c4e1736

Failure log: https://treeherder.mozilla.org/logviewer?job_id=333537402&repo=autoland&lineNumber=2522

[task 2021-03-17T17:56:21.852Z] 17:56:21     INFO - TEST-START | browser/base/content/test/static/browser_parsable_css.js
[task 2021-03-17T17:56:22.489Z] 17:56:22     INFO - TEST-INFO | started process screentopng
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - TEST-INFO | screentopng: exit 0
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - <snipped 8 output lines - if you need more context, please use SimpleTest.requestCompleteLog() in your test>
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Buffered messages logged at 17:56:22
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-table-border-nonzero’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 301}]
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-table-border-nonzero’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 326}]
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘-moz-list-reversed’.  Declaration dropped." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 586}]
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘-moz-list-reversed’.  Declaration dropped." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 590}]
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 734}]
[task 2021-03-17T17:56:22.775Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-html-canvas-content’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 752}]
[task 2021-03-17T17:56:22.776Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 782}]
[task 2021-03-17T17:56:22.776Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-topmost-modal-dialog’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 828}]
[task 2021-03-17T17:56:22.776Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-modal-dialog’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 838}]
[task 2021-03-17T17:56:22.776Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘-moz-min-font-size-ratio’.  Declaration dropped." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 885}]
[task 2021-03-17T17:56:22.777Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘-moz-min-font-size-ratio’.  Declaration dropped." {file: "resource://gre-resources/html.css?always-parse-css-0.9696443607016503" line: 900}]
[task 2021-03-17T17:56:22.777Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-canvas’.  Ruleset ignored due to bad selector." {file: "resource://gre/res/EditorOverride.css?always-parse-css-0.9696443607016503" line: 18}]
[task 2021-03-17T17:56:22.778Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-display-comboboxcontrol-frame’.  Ruleset ignored due to bad selector." {file: "resource://gre/res/EditorOverride.css?always-parse-css-0.9696443607016503" line: 75}]
[task 2021-03-17T17:56:22.778Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-mathml-anonymous-block’.  Ruleset ignored due to bad selector." {file: "resource://gre-resources/mathml.css?always-parse-css-0.9696443607016503" line: 202}]
[task 2021-03-17T17:56:22.779Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘math-depth’.  Declaration dropped." {file: "resource://gre-resources/mathml.css?always-parse-css-0.9696443607016503" line: 224}]
[task 2021-03-17T17:56:22.780Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘math-depth’.  Declaration dropped." {file: "resource://gre-resources/mathml.css?always-parse-css-0.9696443607016503" line: 231}]
[task 2021-03-17T17:56:22.781Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘math-depth’.  Declaration dropped." {file: "resource://gre-resources/mathml.css?always-parse-css-0.9696443607016503" line: 241}]
[task 2021-03-17T17:56:22.781Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown property ‘math-depth’.  Declaration dropped." {file: "resource://gre-resources/mathml.css?always-parse-css-0.9696443607016503" line: 265}]
...
...
...
[task 2021-03-17T17:56:22.874Z] 17:56:22     INFO - Console message: [JavaScript Warning: "Unknown pseudo-class or pseudo-element ‘-moz-svg-marker-anon-child’.  Ruleset ignored due to bad selector." {file: "resource://gre/res/svg.css?always-parse-css-0.9696443607016503" line: 93}]
[task 2021-03-17T17:56:22.874Z] 17:56:22     INFO - Buffered messages finished
[task 2021-03-17T17:56:22.875Z] 17:56:22     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | custom property `--urlbar-box-unfocused-bg-overlay` is not referenced - 
[task 2021-03-17T17:56:22.875Z] 17:56:22     INFO - Stack trace:
[task 2021-03-17T17:56:22.875Z] 17:56:22     INFO - chrome://mochikit/content/browser-test.js:test_ok:1331
[task 2021-03-17T17:56:22.875Z] 17:56:22     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:448
[task 2021-03-17T17:56:22.876Z] 17:56:22     INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-has-dir-attr’.  Ruleset ignored due to bad selector." on resource://gre-resources/html.css because of whitelist item {"sourceName":"/\\b(contenteditable|EditorOverride|svg|forms|html|mathml|ua)\\.css$/i","errorMessage":"/Unknown pseudo-class.*-moz-/i","isFromDevTools":false,"used":true}
[task 2021-03-17T17:56:22.878Z] 17:56:22     INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-dir-attr-rtl’.  Ruleset ignored due to bad selector." on resource://gre-resources/html.css because of whitelist item {"sourceName":"/\\b(contenteditable|EditorOverride|svg|forms|html|mathml|ua)\\.css$/i","errorMessage":"/Unknown pseudo-class.*-moz-/i","isFromDevTools":false,"used":true}
...
...
...
[task 2021-03-17T17:56:22.969Z] 17:56:22     INFO - Ignored error "Unknown pseudo-class or pseudo-element ‘-moz-svg-marker-anon-child’.  Ruleset ignored due to bad selector." on resource://gre/res/svg.css because of whitelist item {"sourceName":"/\\b(contenteditable|EditorOverride|svg|forms|html|mathml|ua)\\.css$/i","errorMessage":"/Unknown pseudo-class.*-moz-/i","isFromDevTools":false,"used":true}
[task 2021-03-17T17:56:22.970Z] 17:56:22     INFO - TEST-PASS | browser/base/content/test/static/browser_parsable_css.js | All the styles (254) loaded without errors. - 
[task 2021-03-17T17:56:22.970Z] 17:56:22     INFO - Leaving test bound checkAllTheCSS
[task 2021-03-17T17:56:22.970Z] 17:56:22     INFO - GECKO(1869) | MEMORY STAT | vsize 3418MB | residentFast 909MB | heapAllocated 653MB
[task 2021-03-17T17:56:22.971Z] 17:56:22     INFO - TEST-OK | browser/base/content/test/static/browser_parsable_css.js | took 686ms

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/eb082a574db0
Tweak urlbar chiclets and label box colors in Proton themes. r=harry,dao

Comment 5

[Romain Testard [:RT]]

Marking as P1. Per experience review we agreed to mark as P1 bug the ones that will block MR1.

Comment 6

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/eb082a574db0

Comment 7

[Cristian Baica [:cbaica], Release Desktop QA]

This has been tested extensively for the proton release, on multiple OS's with multiple ltw themes and dark theme. Marking this as verified fixed.