1916355 - Waterfall DOMContentLoaded/load ticks aren't visible in High Contrast Mode

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Netmonitor waterfall, missing load/DOMContentLoaded ticks

The ticks are not visible in the canvas.
Note that in regular theme, the legend in the footer get the same colors as the ticks, but here the color are forced so we wouldn't show anything.
We should probably have some sort of icon at the top of the 2 ticks that we can put next to the labels in the footer (it could be simple squares with different patterns in it)

Comment 1

[Morgan Reschenberg [:morgan]]

Triaging as S2 because UI isn't visible in HCM

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:Honza, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Higher a11y severity is correct in this case.

Comment 4

[Anna Yeddi [:ayeddi]]

Adding a keyword no-plan-to-ship as an ad-hoc flag here. This keyword was meant to exclude specific bugs from the general access-S2 tracking when there are no plans to ship the affected feature. However, we do plan to address and ship this and other HCM-related devtools bugs, which are part of a larger project. This Dev Tools High Contrast Mode support project, tracked by the meta bug 1590215, is ongoing and is tracked by the Dev Tools team separately.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1916355 - [devtools] Make sur waterfall ticks are visible in High Contrast Mode. r=#devtools-reviewers,#accessibility-frontend-reviewers.

This adds a square next to the label in the status bar that serves
as a legend for the tick. The square background re-uses the colors
of the ticks, and those colors are overridden in High Contrast Mode.

In order for the ticks to be visible, we need to make sure that the
background canvas is displayed, and also the call to colorToRGBA needed
a document to properly handle system colors.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d2cab005f94a
[devtools] Make sur waterfall ticks are visible in High Contrast Mode. r=devtools-reviewers,accessibility-frontend-reviewers,jdescottes,nlapre.

Comment 7

[Iulian Moraru]

Backed out for causing dt failures on browser_parsable_css.js.

• Push with failures

• Failure log

• Backout link

[task 2024-09-26T12:56:28.396Z] 12:56:28     INFO - TEST-PASS | browser/base/content/test/static/browser_parsable_css.js | All the styles (187) loaded without errors. - 
[task 2024-09-26T12:56:28.397Z] 12:56:28     INFO - Buffered messages finished
[task 2024-09-26T12:56:28.398Z] 12:56:28     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Unused allowlist item: {"propName":"--timing-marker-dom-content-loaded-color","isFromDevTools":true} - 
[task 2024-09-26T12:56:28.398Z] 12:56:28     INFO - Stack trace:
[task 2024-09-26T12:56:28.398Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:test_ok:1597
[task 2024-09-26T12:56:28.398Z] 12:56:28     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllowlist:543
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:548
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-09-26T12:56:28.399Z] 12:56:28     INFO - Not taking screenshot here: see the one that was previously logged
[task 2024-09-26T12:56:28.400Z] 12:56:28     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Unused allowlist item: {"propName":"--timing-marker-load-color","isFromDevTools":true} - 
[task 2024-09-26T12:56:28.400Z] 12:56:28     INFO - Stack trace:
[task 2024-09-26T12:56:28.401Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:test_ok:1597
[task 2024-09-26T12:56:28.401Z] 12:56:28     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllowlist:543
[task 2024-09-26T12:56:28.401Z] 12:56:28     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:548
[task 2024-09-26T12:56:28.401Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:handleTask:1145
[task 2024-09-26T12:56:28.401Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1217
[task 2024-09-26T12:56:28.401Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1358
[task 2024-09-26T12:56:28.402Z] 12:56:28     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1134
[task 2024-09-26T12:56:28.402Z] 12:56:28     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-09-26T12:56:28.402Z] 12:56:28     INFO - Leaving test bound checkAllTheCSS
[task 2024-09-26T12:56:28.403Z] 12:56:28     INFO - GECKO(4806) | MEMORY STAT | vsize 12294MB | residentFast 1170MB | heapAllocated 807MB
[task 2024-09-26T12:56:28.403Z] 12:56:28     INFO - TEST-OK | browser/base/content/test/static/browser_parsable_css.js | took 420ms
[task 2024-09-26T12:56:28.404Z] 12:56:28     INFO - checking window state
[task 2024-09-26T12:56:28.404Z] 12:56:28     INFO - TEST-START | devtools/client/framework/test/browser_about-devtools-toolbox_load.js

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/722852dd8923
[devtools] Make sur waterfall ticks are visible in High Contrast Mode. r=devtools-reviewers,accessibility-frontend-reviewers,jdescottes,nlapre.

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/722852dd8923