2008708 - "Reload all tabs" action when changing Enhanced Tracking Protection setting causes tabs that are in devtools with responsive mode to lose their devtools window, and breaking devtools when reopened via F12.

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect, P2)

Description

[Leroy]

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

Steps to reproduce:

1. I opened a Firefox private window and navigated to a (locally hosted) webapp for testing.
2. In this private window, i pressed F12 to show developer tools.
3. I then pressed the icon to enter Responsive Design Mode and selected the iPhone 11 Pro Max. (Device does not seem to matter)
4. In this same window, i opened Firefox settings in a new tab.
5. I navigated to "Privacy & Security"
6. Under "Enhanced Tracking Protection", i changed the preset from "Standard" to "Strict", which shows the user a "Reload All Tabs" button.
7. I clicked the "Reload All Tabs" button, and went back to my other tab.

I attached a video file illustrating these steps and the issue. Please note i used a fresh profile and Google as a test website, both for privacy reasons and to show that this is not caused by an extension or something i did/made on the locally hosted webapp. For size, i encoded and compressed the file.

Actual results:

The web view was still in Responsive Design Mode. Specifically, it was still shaped like the phone device i had selected. But the devtools window and top bar (the one with the device list dropdown) were no longer present. The phone-shaped web view is also no longer resizeable by dragging the bottom right corner.

Refreshing did not cause the missing devtools window and bar to reappear, and i still can't drag to resize.

Pressing F12 does re-open the devtools window, but the top bar is not shown. In this devtools window, the Responsive Design Mode icon is blue, indicating that i'm still in Responsive Design Mode. But clicking this button does nothing. Using the shortcut for Responsive Design Mode also does nothing.

Refreshing does not mitigate this. The tab is 'broken' like this. I could only continue by closing that tab and opening a new one (in the same window), then it all works as expected again.

Expected results:

I expected the tab to function like it did before i pressed the "Reload All Tabs" button. Specifically, i expected the devtools window and top bar (with device list) to stay visible and functional in the tab that was in Responsive Design Mode, with the responsive view still resizable by dragging the bottom right corner.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'DevTools::Responsive Design Mode' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Julian Descottes [:jdescottes]]

Thanks for the report. FWIW, you mentioned attaching a video, but it's not available here. In any case I can reproduce the issue by following your steps.

The browser console shows the following errors after the issue is triggered:

DOMException: BrowsingContext.setOrientationOverride: Browsing context is discarded
    _setRDMPaneOrientation resource://devtools/server/actors/target-configuration.js:479
    _updateParentProcessConfiguration resource://devtools/server/actors/target-configuration.js:286
    updateConfiguration resource://devtools/server/actors/target-configuration.js:234
    handler resource://devtools/shared/protocol/Actor.js:221
    onPacket resource://devtools/server/devtools-server-connection.js:372
    send resource://devtools/shared/transport/local-transport.js:75
    makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103
    makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103
Actor.js:119:15
    writeError resource://devtools/shared/protocol/Actor.js:119
    handler resource://devtools/shared/protocol/Actor.js:276

The API used when clicking on the reload all tabs button is actually discardBrowser https://searchfox.org/firefox-main/rev/e7efe8e2d1b972ed4a073065bc99cfb08f6c31e9/browser/components/preferences/privacy.js#4799-4803

if (tab.pinned || tab.selected) {
  otherGBrowser.reloadTab(tab);
} else {
  otherGBrowser.discardBrowser(tab);
}

The discardBrowser method is defined at https://searchfox.org/firefox-main/rev/e7efe8e2d1b972ed4a073065bc99cfb08f6c31e9/browser/components/tabbrowser/content/tabbrowser.js#2749

For some reason it doesn't allow devtools/rdm to cleanly exit.

Comment 3

[Julian Descottes [:jdescottes]]

We should try to destroy RDM on the closing of the tab to avoid this.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 2008708 - [devtools] Destroy RDM before Tab is discarded

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/2bbd2ad928b9
https://hg.mozilla.org/integration/autoland/rev/344f8a489c6e
[devtools] Destroy RDM before Tab is discarded r=tabbrowser-reviewers,devtools-reviewers,ochameau,nsharpley

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/344f8a489c6e