Broken "Close Responsive Design Mode"?

Hello,

I’m using the 77.0b3 (64-bit) version of FireFox Developer (on Debian 10/Cinnamon) and while testing a new HTML layout I’m working on, I just discovered that the “Close Responsive Design Mode” button isn’t working anymore. Same goes for the “Responsive Design Mode (Ctrl+Shift+M)” button as well as the keyboard shortcut.

In one word, entering the “Responsive Design Mode” still works as expected, using the image button or the Ctrl+Shift+M keyboard shortcut. But once activated, it becomes impossible to exit it, be it by using the top close button image , the Responsive Mode button image or the Ctrl+Shift+M shortcut.

Just wanted to report this probable regression :wink:

Thanks for the great work you all do @Mozilla!

Hello,

Thank you for reporting this issue! It’s certainly problematic. Using the steps you described, I’m unable to reproduce this on Firefox Developer Edition 77.0b3 (64bit). I’ve also tried this on Ubuntu 18.04 and MacOS.

Would you be able to let me know if you’re getting any errors in the Browser Toolbox’s console when opening/closing RDM? You can open the Browser Toolbox using Ctrl+Shift+Alt+I (on Linux). Or by going to Firefox menu > Web Developer > Browser Toolbox.

Thanks!

It might be easier to report any errors that are in the Browser Console, since the Browser Toolbox isn’t enabled by default in Firefox Developer Edition.

Here is a copy of the Browser Console’s output on my system:

When activating the RDM:

[Exception... "Not implemented"  nsresult: "0x80004001 (NS_ERROR_NOT_IMPLEMENTED)"  location: "JS frame :: resource://gre/modules/RemoteWebNavigation.jsm :: get sessionHistory :: line 142"  data: no] RemoteWebNavigation.jsm:142:11
get sessionHistory resource://gre/modules/RemoteWebNavigation.jsm:142
construct chrome://global/content/elements/browser-custom-element.js:1258
start resource://devtools/client/responsive/browser/tunnel.js:207
start resource://devtools/client/responsive/browser/swap.js:281
AsyncFunctionNext self-hosted:693
(Async: async)
init resource://devtools/client/responsive/ui.js:195
ResponsiveUI resource://devtools/client/responsive/ui.js:115
openIfNeeded resource://devtools/client/responsive/manager.js:129
toggle resource://devtools/client/responsive/manager.js:92
onClick resource://devtools/client/definitions.js:588
onClick resource://devtools/client/framework/toolbox.js:1558
onClick resource://devtools/client/framework/components/ToolboxToolbar.js:223
React 19
dispatchInteractiveEvent self-hosted:891
React 19
setCanRender resource://devtools/client/framework/components/ToolboxController.js:124
setCanRender self-hosted:844
open resource://devtools/client/framework/toolbox.js:924
(Async: requestIdleCallback handler)
open resource://devtools/client/framework/toolbox.js:922
InterpretGeneratorResume self-hosted:1151
AsyncFunctionNext self-hosted:693
(Async: async)
<anonymous> self-hosted:844
open resource://devtools/client/framework/toolbox.js:984
createToolbox resource://devtools/client/framework/devtools.js:622
InterpretGeneratorResume self-hosted:1151
AsyncFunctionNext self-hosted:693
(Async: async)
showToolbox resource://devtools/client/framework/devtools.js:509
selectToolCommand resource://devtools/client/framework/devtools-browser.js:263
InterpretGeneratorResume self-hosted:1151
AsyncFunctionNext self-hosted:693
(Async: async)
oncommand resource://devtools/client/framework/browser-menus.js:96
<anonymous> self-hosted:891
fillSubviewFromMenuItems resource:///modules/CustomizableUI.jsm:4403
(Async: EventListener.handleEvent)
fillSubviewFromMenuItems resource:///modules/CustomizableUI.jsm:4388
onViewShowing resource:///modules/DevToolsStartup.jsm:580
aEventName resource:///modules/CustomizableUI.jsm:2862
dispatchCustomEvent resource:///modules/PanelMultiView.jsm:197
dispatchCustomEvent resource:///modules/PanelMultiView.jsm:1388
_blockersPromise resource:///modules/PanelMultiView.jsm:231
(Async: promise callback)
dispatchAsyncEvent resource:///modules/PanelMultiView.jsm:229
_openView resource:///modules/PanelMultiView.jsm:819
_showMainView resource:///modules/PanelMultiView.jsm:785
_openPopupPromise resource:///modules/PanelMultiView.jsm:524
(Async: promise callback)
openPopup resource:///modules/PanelMultiView.jsm:507
openPopup resource:///modules/PanelMultiView.jsm:284
showSubView chrome://browser/content/customizableui/panelUI.js:505
handleWidgetCommand resource:///modules/CustomizableUI.jsm:1929
handleWidgetCommand self-hosted:948
(Async: EventListener.handleEvent)
buildWidget resource:///modules/CustomizableUI.jsm:1742
getWidgetNode resource:///modules/CustomizableUI.jsm:1165
buildArea resource:///modules/CustomizableUI.jsm:975
registerToolbarNode resource:///modules/CustomizableUI.jsm:889
registerToolbarNode resource:///modules/CustomizableUI.jsm:3599
onDOMContentLoaded chrome://browser/content/browser.js:1794
onDOMContentLoaded self-hosted:844
(Async: EventListener.handleEvent)
<anonymous> chrome://browser/content/browser.xhtml:134

TypeError: this.getViewportBrowser().reload is not a function[ui.js:612:33](resource://devtools/client/responsive/ui.js)

Afterwards, first click on an RDM close button or using Ctrl+Shift+M:

TypeError: "this.getViewportBrowser().reload is not a function"
destroy resource://devtools/client/responsive/ui.js:424
closeIfNeeded resource://devtools/client/responsive/manager.js:199
toggle resource://devtools/client/responsive/manager.js:92
onClick resource://devtools/client/definitions.js:588
onClick resource://devtools/client/framework/toolbox.js:1558
onClick resource://devtools/client/framework/components/ToolboxToolbar.js:223
React 38
setCanRender resource://devtools/client/framework/components/ToolboxController.js:124
open resource://devtools/client/framework/toolbox.js:924
requestIdleCallback handler*open/< resource://devtools/client/framework/toolbox.js:922
open resource://devtools/client/framework/toolbox.js:984
createToolbox resource://devtools/client/framework/devtools.js:622
showToolbox resource://devtools/client/framework/devtools.js:509
toggleToolboxCommand resource://devtools/client/framework/devtools-browser.js:117
oncommand resource://devtools/client/menus.js:77
fillSubviewFromMenuItems resource:///modules/CustomizableUI.jsm:4403
fillSubviewFromMenuItems resource:///modules/CustomizableUI.jsm:4388
onViewShowing resource:///modules/DevToolsStartup.jsm:580
aEventName resource:///modules/CustomizableUI.jsm:2862
dispatchCustomEvent resource:///modules/PanelMultiView.jsm:197
dispatchCustomEvent resource:///modules/PanelMultiView.jsm:1388
_blockersPromise resource:///modules/PanelMultiView.jsm:231
promise callback*dispatchAsyncEvent resource:///modules/PanelMultiView.jsm:229
_openView resource:///modules/PanelMultiView.jsm:819
_showMainView resource:///modules/PanelMultiView.jsm:785
_openPopupPromise resource:///modules/PanelMultiView.jsm:524
promise callback*openPopup resource:///modules/PanelMultiView.jsm:507
openPopup resource:///modules/PanelMultiView.jsm:284
showSubView chrome://browser/content/customizableui/panelUI.js:505
handleWidgetCommand resource:///modules/CustomizableUI.jsm:1929
buildWidget resource:///modules/CustomizableUI.jsm:1742
getWidgetNode resource:///modules/CustomizableUI.jsm:1165
buildArea resource:///modules/CustomizableUI.jsm:975
registerToolbarNode resource:///modules/CustomizableUI.jsm:889
registerToolbarNode resource:///modules/CustomizableUI.jsm:3599
onDOMContentLoaded chrome://browser/content/browser.js:1794
EventListener.handleEvent* chrome://browser/content/browser.xhtml:134

Any subsequent clicks on close buttons or keyboard shortcut produce no more output in the Browser Console.

Thank you! I’m now able to reproduce this issue with the devtools.responsive.reloadConditions.touchSimulation preference enabled.

I’ve filed the issue at: https://bugzilla.mozilla.org/show_bug.cgi?id=1636634

I’m glad you could figure out what the problem might be, and let me thank YOU for the remarkable reactivity you demonstrated which can only strengthen my attachment to the philosophy driven by the Firefox project!

2 Likes