2035503 - Hovering and clicking an SVG background image shows a chrome:// url instead of the real URL

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Julien Wajsberg [:julienw]]

STR:

1. Go to https://stage.fx-enterprise.nonprod.webservices.mozgcp.net/
2. Open devtools inspector, inspect the background below the white dialog.
3. Look at the inspector, the <div class="page-container"> should be selected
4. Look at the rules, there's a background image in the background property
5. Try to hover it => see there's an error when trying to show the preview
6. Try to click it => it tries to open chrome://devtools/assets/login-background-jeIpShq-.svg (note: the image name might change) instead of an url part of my website domain.

Comment 1

[Julien Wajsberg [:julienw]]

Currently in nightly v152 Build 20260428094204
But I reproduce in Firefox stable v149.0.2 so it's not a recent regression.
All on Linux.

Comment 2

[Julian Descottes [:jdescottes]]

Same behavior on macos

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Ran mozregression:

3:34.01 INFO: Narrowed nightly regression window from [2022-04-27, 2022-04-29] (2 days) to [2022-04-27, 2022-04-28] (1 days) (~0 steps left)
3:34.01 INFO: Got as far as we can go bisecting nightlies...
3:34.01 INFO: Last good revision: 23768574eb6d1c1191228316adbc082aaf3a7fd5 (2022-04-27)
3:34.01 INFO: First bad revision: 6d8eefa220596a138aceee2b8e93529128c98451 (2022-04-28)
3:34.01 INFO: Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=23768574eb6d1c1191228316adbc082aaf3a7fd5&tochange=6d8eefa220596a138aceee2b8e93529128c98451

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

The URL is retrieved in the OutputParser directly from the token, which we append after a baseUri that is passed as an option to the OutputParser https://searchfox.org/firefox-main/rev/410a52656dd13aa2360a3e96788e41bf48e80c0f/devtools/client/shared/output-parser.js#2365-2367,2370-2373,2375

this.#appendNode(
  "a",
  {
...
    href: options.baseURI
      ? (URL.parse(url, options.baseURI)?.href ?? url)
      : url,
  },
...
);

the baseURI is passed from https://searchfox.org/firefox-main/rev/410a52656dd13aa2360a3e96788e41bf48e80c0f/devtools/client/inspector/rules/views/text-property-editor.js#601,623

this.outputParserOptions = {
...
  baseURI: this.#sheetHref,

where #sheetHref is the getter in https://searchfox.org/firefox-main/rev/410a52656dd13aa2360a3e96788e41bf48e80c0f/devtools/client/inspector/rules/views/text-property-editor.js#554-560

get #sheetHref() {
  const domRule = this.rule.domRule;
  if (domRule) {
    return domRule.href || domRule.nodeHref;
  }
  return undefined;
}

Here, the stylesheet is a constructed stylesheet, so it doesn't have a URL, so the URL will be considered as "relative" to the preview tooltip document. I guess in such case we can default to the target URL

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2035503 - [devtools] Fix image preview for urls in constructed stylesheets. r=#devtools.

Comment 6

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

Based on comment #3, this bug contains a bisection range found by mozregression. However, the Regressed by field is still not filled.

:nchevobbe, if possible, could you fill the Regressed by field and investigate this regression?

For more information, please visit BugBot documentation.

Comment 7

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

This bug has been marked as a regression. Setting status flag for Nightly to affected.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

pushed patch to fix the issue

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5f7c24a18aeb
https://hg.mozilla.org/integration/autoland/rev/4542622d01de
[devtools] Fix image preview for urls in constructed stylesheets. r=devtools-reviewers,jdescottes.

Comment 10

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/4542622d01de