1779043 - Media Queries sidebar in Style Editor doesn't jump to the right section, if there are multiple `<inline>` style sheets

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect)

Description

[Daniel Holbert [:dholbert] (PTO until 2/24)]

STR:

1. Visit https://www.tutorialrepublic.com/codelab.php?topic=css3&file=media-queries
2. Right-click the right pane and choose "inspect" ("The background of the output area is different in different media or devices.")
3. Choose the "Style Editor" devtools pane.
4. Look at the Media Queries pane on the right of style editor, and click on the active media query entry there (for me that's "screen and min-width:321px")

EXPECTED RESULTS:
It looks like the intent is that we should jump to the relevant part of the stylesheet for that media query.

ACTUAL RESULTS:
We jump to the wrong stylesheet - we jump to the end of a different unrelated <inline> style sheet.

Comment 1

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: screencast

Comment 2

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: testcase 1 (reduced)

Comment 3

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: screencast with reduced testcase 1

As you can see here[1], when I click the media query in testcase 1, the DevTools style-editor takes me to the wrong inline stylesheet when I click on the media query in the sidebar.

[1] My screencasting tool doesn't capture my cursor, but you can take my word for it that I'm clicking on the media-query sidebar here.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report and the reduced test case Daniel, it really helps

The jumping function expect a location object with either a styleSheet or a source property (https://searchfox.org/mozilla-central/rev/9ad01b5eae48436e3bdb8df01be3973e683d5242/devtools/client/styleeditor/StyleEditorUI.jsm#1430-1433)
The issue with the test case is that both are falsy (one is null, the other undefined), so we end up jumping to the first
The location is built from https://searchfox.org/mozilla-central/rev/9ad01b5eae48436e3bdb8df01be3973e683d5242/devtools/client/styleeditor/StyleEditorUI.jsm#1291-1296
For the styleSheet property, we don't have a rule parent stylesheet for some reason, although we could probably simply replace this with editor.styleSheet
It seems to "work", except the line numbers for each media rules are off, so it doesn't jump to the right location either (but at least it stays on the right stylesheet)

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Filed Bug 1779180 to fix line numbers

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1779043 - [devtools] Fix jumping to media query in inline sheets. r=jdescottes.

We directly pass the editor stylesheet in the location parameter that is passed
to jumpToLocation.

jumpToLocation wasn't covered in any test, so we modify browser_styleeditor_media_sidebar.js
to add coverage for it.
This is also testing Bug 1779180 which is in the same stack.

Depends on D151596

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/95e34a0fbb39
[devtools] Fix jumping to media query in inline sheets. r=jdescottes.

Comment 8

[bszekely]

Backed out for causing mochitest failures on test_css-logic-media-queries.html

Failure line: TEST-UNEXPECTED-FAIL | devtools/server/tests/chrome/test_css-logic-media-queries.html | rule.source gives correct output for rule 1 - got "inline:2", expected "inline:12"

Push with failures

[Failure log](TEST-UNEXPECTED-FAIL | devtools/server/tests/chrome/test_css-logic-media-queries.html | rule.source gives correct output for rule 1 - got "inline:2", expected "inline:12" )

Backout link

[task 2022-07-18T07:28:05.369Z] 07:28:05     INFO - TEST-START | devtools/server/tests/chrome/test_css-logic-media-queries.html
[task 2022-07-18T07:28:05.377Z] 07:28:05     INFO - GECKO(1618) | [Parent 1618, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/chrome/nsChromeRegistry.cpp:180
[task 2022-07-18T07:28:05.377Z] 07:28:05     INFO - GECKO(1618) | [Parent 1618, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/dom/security/nsCSPService.cpp:190
[task 2022-07-18T07:28:05.489Z] 07:28:05     INFO - GECKO(1618) | [Parent 1618, Main Thread] WARNING: Failed to retarget HTML data delivery to the parser thread.: file /builds/worker/checkouts/gecko/parser/html/nsHtml5StreamParser.cpp:1234
[task 2022-07-18T07:28:05.625Z] 07:28:05     INFO - TEST-INFO | started process screentopng
[task 2022-07-18T07:28:05.945Z] 07:28:05     INFO - TEST-INFO | screentopng: exit 0
[task 2022-07-18T07:28:05.945Z] 07:28:05     INFO - TEST-UNEXPECTED-FAIL | devtools/server/tests/chrome/test_css-logic-media-queries.html | rule.source gives correct output for rule 1 - got "inline:2", expected "inline:12"
[task 2022-07-18T07:28:05.946Z] 07:28:05     INFO - SimpleTest.is@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:500:14
[task 2022-07-18T07:28:05.947Z] 07:28:05     INFO - window.onload@chrome://mochitests/content/chrome/devtools/server/tests/chrome/test_css-logic-media-queries.html:49:7
[task 2022-07-18T07:28:05.948Z] 07:28:05     INFO - Not taking screenshot here: see the one that was previously logged
[task 2022-07-18T07:28:05.948Z] 07:28:05     INFO - TEST-UNEXPECTED-FAIL | devtools/server/tests/chrome/test_css-logic-media-queries.html | rule.source gives correct output for rule 2 - got "inline:9 @media screen and (min-width: 1px)", expected "inline:19 @media screen and (min-width: 1px)"
[task 2022-07-18T07:28:05.949Z] 07:28:05     INFO - SimpleTest.is@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:500:14
[task 2022-07-18T07:28:05.950Z] 07:28:05     INFO - window.onload@chrome://mochitests/content/chrome/devtools/server/tests/chrome/test_css-logic-media-queries.html:51:7
[task 2022-07-18T07:28:05.950Z] 07:28:05     INFO - GECKO(1618) | MEMORY STAT | vsize 11387MB | residentFast 511MB | heapAllocated 217MB
[task 2022-07-18T07:28:05.950Z] 07:28:05     INFO - TEST-OK | devtools/server/tests/chrome/test_css-logic-media-queries.html | took 312ms
[task 2022-07-18T07:28:05.950Z] 07:28:05     INFO - GECKO(1618) | [Parent 1618, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/chrome/nsChromeRegistry.cpp:180
[task 2022-07-18T07:28:05.950Z] 07:28:05     INFO - GECKO(1618) | [Parent 1618, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/dom/security/nsCSPService.cpp:190
[task 2022-07-18T07:28:05.952Z] 07:28:05     INFO - GECKO(1618) | [Parent 1618, Main Thread] WARNING: Failed to retarget HTML data delivery to the parser thread.: file /builds/worker/checkouts/gecko/parser/html/nsHtml5StreamParser.cpp:1234
[task 2022-07-18T07:28:05.973Z] 07:28:05     INFO - TEST-START | devtools/server/tests/chrome/test_css-logic-specificity.html

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

looking into it

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/64ef75aa27a8
[devtools] Fix jumping to media query in inline sheets. r=jdescottes.

Comment 11

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/64ef75aa27a8