1615355 - Developer tools do not work in a popup window

Status: NEW

(DevTools :: General, defect, P2)

Description

[Dmitry]

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

Steps to reproduce:

A lot of developer tools don't work in a popup window (created through window.open).

1. View source maps (while visible in main window)
2. Pause code execution through hotkey
3. Break on ... > Subtree modification
4. things like Document.getElementById() only look through DOM in main window, but not in popup

Actual results:

1. Not showing any
2. Since there's no code, there's nothing to pause
3. My action is ignored
4. Element not found

Expected results:

Whatever happens in a normal window

1. Source shows up
2. Code gets paused
3. I can break on subtree modification.
4. Element gets found.

Comment 1

[Dmitry]

These were discovered when while trying to debug display issues of a dropdown in a popup window. Basically debugging is impossible. You simply have no way of pausing the code while dropdown is open. You can't console.log any part of the DOM either, because stuff in popup window can't be accessed.

Comment 2

[Virginia (please send need info request to Brindusa Tot)]

Hi,

Thanks for reporting this bug.

As a starting point, I've chosen a component for this bug in the hope that someone with more expertise may look at it.

In the meantime, can you download the latest Firefox Nightly https://nightly.mozilla.org/ and verify if you are able to reproduce the reported issue as well?

Thanks,
Virginia

Comment 3

[Dmitry]

Hi Virginia,
Confirmed on latest nightly.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Dmitry, would you have a more detailed test case please? I tested a random window.open("https://mozilla.org") and was able to inspect the new tab being created and evaluate things in the console.
What am I missing?

Comment 5

[Dmitry]

Nicolas, it's a React SPA that uses react-new-window package to create the popup. I'll try to make a minimal test case whenever I find time.

Comment 6

[Dmitry]

https://github.com/rmariuzzo/react-new-window

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

see https://rmariuzzo.github.io/react-new-window/

I can reproduce 1. 2. and 3.

for 4. I can't reproduce, I am able to query the dom of the page in the window. Do you mean that you execute the document.getElementById from the original tab? if so it's normal to not find elements in the window that was created, as its a separate document.

Also highlighting elements does not seem to work in the window.

We should probably try to break this bug into multiple smaller ones, so they're more actionable.

Comment 8

[Dmitry]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #7)

see https://rmariuzzo.github.io/react-new-window/

I can reproduce 1. 2. and 3.

for 4. I can't reproduce, I am able to query the dom of the page in the window. Do you mean that you execute the document.getElementById from the original tab? if so it's normal to not find elements in the window that was created, as its a separate document.

Also highlighting elements does not seem to work in the window.

We should probably try to break this bug into multiple smaller ones, so they're more actionable.

Yes, you're correct about (4)

Comment 9

[Patrick Brosset <:pbro>]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #7)

Also highlighting elements does not seem to work in the window.

I can reproduce this too, and it seems to be coming from this line:

    // Only try to create the highlighter when the document is loaded,
    // otherwise, wait for the navigate event to fire.
    if (doc.documentElement && doc.readyState != "uninitialized") {
      this._createHighlighter();
    }

The window that gets created with window.open with the about:blank URL has a readyState value equal to uninitialized, so the highlighter never gets created.