1637616 - Cannot inspect markup of Addon's popup.html through about:debugging

Status: NEW

(DevTools :: about:debugging, defect, P3)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

I was trying to make Private Relay's popup.html mobile responsive in fx-private-relay#258, which had me trying to inspect the markup of popup.html while Firefox Private Relay is running on my Android device or emulator.

STR:

1. Download the XPI of Firefox Private Relay locally from AMO.
   wget https://addons.mozilla.org/firefox/downloads/file/3556483/private_relay-1.3.0-fx.xpi
2. Launch Firefox Private Relay on your Android device or Android emulator. See https://github.com/mozilla/fx-private-relay/pull/254#issuecomment-622964146 for instructions on how to do that.
3. Open about:debugging and connect to your Android device or Android emulator.
4. Click on Inspect for Private Relay and Multiprocess Toolbox.
5. Select popup.html from the iframe picker.
6. Notice that the markup is not loaded in the Private Relay remote debugging toolbox (maybe that is the desired behaviour?). In the Multiprocess Toolbox, you can search for ids/classes that are on the popup.html in the markup view searchbox, but they do not appear on the markup view.

Some errors I do see:

TypeError: can't access property "setDebugTargetData", this.component is undefined
    _setDebugTargetData resource://devtools/client/framework/toolbox.js:4229
    _onNavigate resource://devtools/client/framework/toolbox.js:4218
    _emit resource://devtools/shared/event-emitter.js:226
    emit resource://devtools/shared/event-emitter.js:172
    emit resource://devtools/shared/event-emitter.js:324
    _onTabNavigated resource://devtools/client/fronts/targets/browsing-context.js:76
    _emit resource://devtools/shared/event-emitter.js:226
    emit resource://devtools/shared/event-emitter.js:172
    emit resource://devtools/shared/event-emitter.js:324
    onPacket resource://devtools/shared/protocol/Front.js:294
    onPacket resource://devtools/client/devtools-client.js:493
    _onJSONObjectReady resource://devtools/shared/transport/transport.js:464
    makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103
    makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103
event-emitter.js:241:21

Closing the tab to the Private Relay toolbox and Multiprocess toolbox, and reopening through their respective Inspect buttons in about:debugging throws the following:

Exception when calling onAvailable handler Protocol error (noSuchActor): No such actor for ID: server0.conn1.child34/consoleActor2 from: server0.conn1.child34/consoleActor2 Error: Protocol error (noSuchActor): No such actor for ID: server0.conn1.child34/consoleActor2 from: server0.conn1.child34/consoleActor2
    onPacket resource://devtools/shared/protocol/Front.js:319
    DevTools RDP*request resource://devtools/shared/protocol/Front.js:256
    name resource://devtools/shared/protocol/Front/FrontClassWithSpec.js:47
    startListeners resource://devtools/client/fronts/webconsole.js:519
    attachConsole resource://devtools/client/fronts/targets/target-mixin.js:448
    _attach resource://devtools/client/fronts/targets/browsing-context.js:100
    attach resource://devtools/client/fronts/targets/browsing-context.js:102
    _attachTarget resource://devtools/client/framework/toolbox.js:768
    _onTargetAvailable resource://devtools/client/framework/toolbox.js:739
    promises resource://devtools/shared/resources/target-list.js:329
    watchTargets resource://devtools/shared/resources/target-list.js:324
    open resource://devtools/client/framework/toolbox.js:844
    open resource://devtools/client/framework/toolbox.js:988
    createToolbox resource://devtools/client/framework/devtools.js:622
    showToolbox resource://devtools/client/framework/devtools.js:509
    initToolbox chrome://devtools/content/framework/toolbox-init.js:152
    async* chrome://devtools/content/framework/toolbox-init.js:162
target-list.js:338:19

Exception when calling onAvailable handler Protocol error (noSuchActor): No such actor for ID: server0.conn1.child34/inspectorActor3 from: server0.conn1.child34/inspectorActor3 Error: Protocol error (noSuchActor): No such actor for ID: server0.conn1.child34/inspectorActor3 from: server0.conn1.child34/inspectorActor3
    onPacket resource://devtools/shared/protocol/Front.js:319
    DevTools RDP*request resource://devtools/shared/protocol/Front.js:256
    name resource://devtools/shared/protocol/Front/FrontClassWithSpec.js:47
    _getWalker resource://devtools/client/fronts/inspector.js:64
    initialize resource://devtools/client/fronts/inspector.js:43
    manage resource://devtools/shared/protocol/Front.js:116
    getFront resource://devtools/shared/protocol/types.js:609
    getFront resource://devtools/client/fronts/targets/target-mixin.js:305
    initInspectorFront resource://devtools/client/inspector/inspector.js:244
    _onTargetAvailable resource://devtools/client/inspector/inspector.js:222
    promises resource://devtools/shared/resources/target-list.js:329
    watchTargets resource://devtools/shared/resources/target-list.js:324
    init resource://devtools/client/inspector/inspector.js:198
    open resource://devtools/client/inspector/panel.js:12
    onLoad resource://devtools/client/framework/toolbox.js:2529
target-list.js:338:19

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing :gl !

Luca, sorry for pinging you here, but I can't really tests GV/Fenix at the moment, so I was wondering if you had any experience debugging webextensions with popups on GeckoView?

Comment 2

[Luca Greco [:rpl] [:luca] [:lgreco]]

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

Thanks for filing :gl !

Luca, sorry for pinging you here, but I can't really tests GV/Fenix at the moment, so I was wondering if you had any experience debugging webextensions with popups on GeckoView?

uhm... that's interesting but not completely unexpected (I should have thought to try that the last time I looked into GeckoView remote debugging, my bad):
I know for sure that GeckoView doesn't open the webextensions browserAction/pageActions popups in tabs as we used to do in Fennec, but I haven't actually tried to use the inspector in a toolbox connected to GeckoView.

I do have my dev environment setup for testing GeckoView/Fenix with the web-ext cli tool, and so I should be able to test that soon(-ish), I'll give it a try asap and see if I can collect some other useful details so that we can decide how we should deal with that.

(as a side note, it would be also good if we could think of some ways to test at least some scenarios related to connecting a toolbox to GeckoView as part of the automated tests, but we can discuss about that separately and see if we can find a reasonable way of doing that in the future).

Not clearing my needinfo on purpose, to use it as a reminder to come back to this as soon as I can.