1986704 - Inspector takes long to load after element in shadow DOM was selected

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Claas Augner [:claas]]

Attachment: Screen Recording 2025-09-03 at 16.36.03.mov

What were you doing?

1. Open https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim#try_it
2. Inspect the gray area on the right to the Run/Reset buttons, and select the <ul aria-live="polite"> element.
3. Then hard-refresh (Cmd + Shift + R for me).

What happened?

The Inspector takes long to load, and is blank in the mean time.

What should have happened?

The Inspector should load immediately.

Anything else we should know?

:jdescottes wrote:

it might very well be related to shadow dom, as we try to restore the selection. And for iframe/shadowdom, I think we have some logic to wait until the selector might become available?

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing!

(In reply to Claas Augner [:claas] from comment #0)

Anything else we should know?

:jdescottes wrote:

it might very well be related to shadow dom, as we try to restore the selection. And for iframe/shadowdom, I think we have some logic to wait until the selector might become available?

Specifically, this logic is started at https://searchfox.org/firefox-main/rev/7620954e589eb74f20e94e284b250848a159fca0/devtools/client/inspector/inspector.js#683-687

cssSelectors.length
  ? this.commands.inspectorCommand.findNodeFrontFromSelectors(
      cssSelectors
    )
  : null,

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Here's a profile from the STR: https://share.firefox.dev/47I0VPd

There's no jank here, so we're probably only waiting for something. The inspector starts being populated when the client received the root-available event, not sure why we're getting it so late.

Comment 3

[Julian Descottes [:jdescottes]]

https://searchfox.org/firefox-main/rev/644f0db17749554fe23a45b43e77e61f42acdfd9/devtools/shared/commands/inspector/inspector-command.js#178-179,186

 * @param {Integer} timeoutInMs
 *        The maximum number of ms the function should run (defaults to 5000).
...
async findNodeFrontFromSelectors(nodeSelectors, timeoutInMs = 5000) {

Here's the link to the function definition which hardcodes a default 5 seconds timeout.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 1986704 - [devtools] Reduce markupview timeout to wait for selector on navigation to 1000 ms

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1622a301a4cc
https://hg.mozilla.org/integration/autoland/rev/867c45a95dbb
[devtools] Reduce markupview timeout to wait for selector on navigation to 1000ms r=devtools-reviewers,nchevobbe

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a9001933a817
https://hg.mozilla.org/integration/autoland/rev/c5a25be9383c
Revert "Bug 1986704 - [devtools] Reduce markupview timeout to wait for selector on navigation to 1000ms r=devtools-reviewers,nchevobbe" for causing dt failures @browser_inspector_reload_nested_iframe.js.

Comment 7

[agoloman]

Backed out for causing dt failures @browser_inspector_reload_nested_iframe.js.

• Backout link
• Push with failures
• Failure Log

Comment 8

[Julian Descottes [:jdescottes]]

I thought the delay for this test would be fine but it seems flaky on slow platforms, switching from 500ms to 100ms

Edit: Even with a heavily reduced delay, the test still fails on debug/tsan.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1437c3b7d393
https://hg.mozilla.org/integration/autoland/rev/3471d4174128
[devtools] Reduce markupview timeout to wait for selector on navigation to 1000ms r=devtools-reviewers,nchevobbe

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c4ed3e87f339
https://hg.mozilla.org/integration/autoland/rev/f7032fe7f4eb
Revert "Bug 1986704 - [devtools] Reduce markupview timeout to wait for selector on navigation to 1000ms r=devtools-reviewers,nchevobbe" for causing dt failures on browser_inspector_command_findNodeFrontFromSelectors.js

Comment 11

[Cristina Horotan [:chorotan]]

Backed out for causing dt failures on browser_inspector_command_findNodeFrontFromSelectors.js

Backout link

Push with failures

Failure log

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9792818fe620
https://hg.mozilla.org/integration/autoland/rev/dbc72197726b
[devtools] Reduce markupview timeout to wait for selector on navigation to 1000 ms r=devtools-reviewers,nchevobbe

Comment 13

[Narcis Beleuzu [:NarcisB]]

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

Comment 14

[Alex Finder]

(In reply to Pulsebot from comment #12)

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9792818fe620
https://hg.mozilla.org/integration/autoland/rev/dbc72197726b
[devtools] Reduce markupview timeout to wait for selector on navigation to
1000 ms r=devtools-reviewers,nchevobbe

Perfherder has detected a devtools performance change from push dbc72197726b0f1155f10d9c8affef04514d7d22.

If you have any questions, please reach out to a performance sheriff. Alternatively, you can find help on Slack by joining #perf-help, and on Matrix you can find help by joining #perftest.

Improvements:

Ratio	Test	Platform	Options	Absolute values (old vs new)
108%	reload-inspector:parent-process objects-with-stacks	linux2404-64-shippable		18.33 -> -1.50
104%	reload-inspector:parent-process objects-with-stacks	linux2404-64		19.58 -> -0.83

Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests.

If you need the profiling jobs you can trigger them yourself from treeherder job view or ask a performance sheriff to do that for you.

You can run all of these tests on try with ./mach try perf --alert 47193

The following documentation link provides more information about this command.