1717893 - Inspector empty when element is focused and page refresh

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[danny.kulangiev]

Attachment: Screen Shot 2021-06-23 at 1.40.46 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:90.0) Gecko/20100101 Firefox/90.0

Steps to reproduce:

0. Open Firefox Developer Edition
1. Right-click inspect an element (or use cmd+shift+c).
2. Select an element.
3. Refresh the page.

Actual results:

The dev tools inspector goes blank (need to close and reopen it again)

Expected results:

Either focus on the element that was selected before the page refresh or refresh the inspector.

Comment 1

[danny.kulangiev]

Another thing to add:

I am running Firefox Dev Edition on a local web server.

Comment 2

[Julian Descottes [:jdescottes]]

Hi and thanks for filing.

I couldn't reproduce the issue for now, so we will need some more information.

I am running Firefox Dev Edition on a local web server.

Any chance you can share a test case? Either a public webpage, or a small project we could setup?

Also when this happens for you, could you open the Browser Console https://developer.mozilla.org/en-US/docs/Tools/Browser_Console and check if there is any relevant error?

Thanks!

Comment 3

[danny.kulangiev]

(In reply to Julian Descottes [:jdescottes] from comment #2)

Also when this happens for you, could you open the Browser Console https://developer.mozilla.org/en-US/docs/Tools/Browser_Console and check if there is any relevant error?

In the Browser Console I am getting the following error:

    write resource://devtools/shared/protocol/types.js:362
    write resource://devtools/shared/protocol/Request.js:109
    write resource://devtools/shared/protocol/Request.js:39
    name resource://devtools/shared/protocol/Front/FrontClassWithSpec.js:35
    querySelector resource://devtools/client/fronts/walker.js:145
    querySelectors resource://devtools/client/fronts/walker.js:410
    querySelectors resource://devtools/client/fronts/walker.js:437
inspector.js:364:15
    _handleRejectionIfNotDestroyed resource://devtools/client/inspector/inspector.js:364
    onRootNodeAvailable resource://devtools/client/inspector/inspector.js:1319

If that did not help, I will try to set up an environment where it can be reproduced.

Comment 4

[danny.kulangiev]

(In reply to danny.kulangiev from comment #3)

(In reply to Julian Descottes [:jdescottes] from comment #2)

Also when this happens for you, could you open the Browser Console https://developer.mozilla.org/en-US/docs/Tools/Browser_Console and check if there is any relevant error?

In the Browser Console I am getting the following error:

    TypeError: can't access property "actorID", v is undefined
    write resource://devtools/shared/protocol/types.js:362
    write resource://devtools/shared/protocol/Request.js:109
    write resource://devtools/shared/protocol/Request.js:39
    name resource://devtools/shared/protocol/Front/FrontClassWithSpec.js:35
    querySelector resource://devtools/client/fronts/walker.js:145
    querySelectors resource://devtools/client/fronts/walker.js:410
    querySelectors resource://devtools/client/fronts/walker.js:437
inspector.js:364:15
    _handleRejectionIfNotDestroyed resource://devtools/client/inspector/inspector.js:364
    onRootNodeAvailable resource://devtools/client/inspector/inspector.js:1319

If that did not help, I will try to set up an environment where it can be reproduced.

whoops, formatting got messed up in the code block, I included the first line which was cut off.

Comment 5

[Julian Descottes [:jdescottes]]

Thanks for the stack trace! According to this log, it seems that our logic to reselect the previously selected node fails.
This stack also indicates that the node we are trying to reselect seems to be in an iframe.

Basically when you select a node in DevTools, we store an array of selectors which should allow us to "reselect" the node after a refresh. We need an array of those selectors in case the selected node is nested in iframes:
[".selector.to.first.frame", ".selector.to.second.frame", ..., ".selector.to.last.frame", ".node.selector"]

In your case we have at least one frame selector (so I assume the inspected node was inside a frame?) but when we reload the document, we find the frame, but it doesn't have a document yet. The following code fails to find a node https://searchfox.org/mozilla-central/rev/c0fc8c4852e927b0ae75d893d35772b8c60ee06b/devtools/client/fronts/walker.js#423-437
And we don't check that we managed to retrieve a node there, which makes the next call fail. That should be easy to guard if that's really what happens.

I think I can try to build a test case to reproduce something similar, but in the meantime, it would be great if you could tell use more about the structure of the page you are inspecting, in particular if it uses iframes, and if they are somehow dynamically generated?

I'm curious to know if you are hitting the edge case I described or if for some reason we try to reselect iframes in a situation where there was no iframe.

Comment 6

[danny.kulangiev]

The page I am working on leverages web components so it might have something to do with accessing the shadow DOM. We are not using iframes anywhere, so it might help to just reproduce the issue using web components.

Some more info that I can share is that we are using Lightning Web Components on the page.

Comment 7

[Julian Descottes [:jdescottes]]

Attachment: Bug 1717893 - [devtools] Avoid blank inspector if iframe selector matches non-iframe element

Fix an edge case which can lead to an empty markup view after reload.

Comment 8

[Julian Descottes [:jdescottes]]

(In reply to danny.kulangiev from comment #6)

The page I am working on leverages web components so it might have something to do with accessing the shadow DOM. We are not using iframes anywhere, so it might help to just reproduce the issue using web components.

Some more info that I can share is that we are using Lightning Web Components on the page.

Thanks for the feedback.

Indeed we handle iframes and custom elements similarly when it comes to reselecting nodes. And it is more likely that the code to initialize a given webcomponent has not been triggered yet when we attempt to reselect it. On top of that we also have some logic to wait for iframes to load before reselecting, whereas we don't do anything for custom elements.

I reproduce with the following STRs:

• open https://juliandescottes.github.io/webcomponents-playground/dynamic/
• click on "call attachShadow for component-1"
• right click on "component-1" (not "component-1-content"!)
• select "Inspect"
• wait for the inpsector to open
• reload

(and the current patch fixes those STRs, thankfully)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1901ae10c819
[devtools] Avoid blank inspector if iframe selector matches non-iframe element r=bomsy

Comment 10

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/1901ae10c819

Comment 11

[danny.kulangiev]

Awesome looks like it is fixed :)