Bug 1585096 - Cleanup code path separation in RDM's React components. r=gl

Depends on D82557

Differential Revision: https://phabricator.services.mozilla.com/D82558

devtools/client/responsive/components/App.js

@@ -18,9 +18,6 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 const Toolbar = createFactory(
   require("devtools/client/responsive/components/Toolbar")
 );
-const Viewports = createFactory(
-  require("devtools/client/responsive/components/Viewports")
-);
 
 loader.lazyGetter(this, "DeviceModal", () =>
   createFactory(require("devtools/client/responsive/components/DeviceModal"))
@@ -79,7 +76,6 @@ class App extends PureComponent {
 
     this.onAddCustomDevice = this.onAddCustomDevice.bind(this);
     this.onBrowserContextMenu = this.onBrowserContextMenu.bind(this);
-    this.onBrowserMounted = this.onBrowserMounted.bind(this);
     this.onChangeDevice = this.onChangeDevice.bind(this);
     this.onChangeNetworkThrottling = this.onChangeNetworkThrottling.bind(this);
     this.onChangePixelRatio = this.onChangePixelRatio.bind(this);
@@ -88,14 +84,12 @@ class App extends PureComponent {
     this.onChangeViewportOrientation = this.onChangeViewportOrientation.bind(
       this
     );
-    this.onContentResize = this.onContentResize.bind(this);
     this.onDeviceListUpdate = this.onDeviceListUpdate.bind(this);
     this.onEditCustomDevice = this.onEditCustomDevice.bind(this);
     this.onExit = this.onExit.bind(this);
     this.onRemoveCustomDevice = this.onRemoveCustomDevice.bind(this);
     this.onRemoveDeviceAssociation = this.onRemoveDeviceAssociation.bind(this);
     this.doResizeViewport = this.doResizeViewport.bind(this);
-    this.onResizeViewport = this.onResizeViewport.bind(this);
     this.onRotateViewport = this.onRotateViewport.bind(this);
     this.onScreenshot = this.onScreenshot.bind(this);
     this.onToggleLeftAlignment = this.onToggleLeftAlignment.bind(this);
@@ -123,12 +117,6 @@ class App extends PureComponent {
     this.browser.frameLoader.requestUpdatePosition();
   }
 
-  onBrowserMounted(browser) {
-    this.browser = browser;
-    this.browser.addEventListener("contextmenu", this.onBrowserContextMenu);
-    window.postMessage({ type: "browser-mounted" }, "*");
-  }
-
   onChangeDevice(id, device, deviceType) {
     // Resize the viewport first.
     this.doResizeViewport(id, device.width, device.height);
@@ -215,17 +203,6 @@ class App extends PureComponent {
     }
   }
 
-  onContentResize({ width, height }) {
-    window.postMessage(
-      {
-        type: "content-resize",
-        width,
-        height,
-      },
-      "*"
-    );
-  }
-
   onDeviceListUpdate(devices) {
     updatePreferredDevices(devices);
   }
@@ -292,19 +269,6 @@ class App extends PureComponent {
     this.props.dispatch(resizeViewport(id, width, height));
   }
 
-  onResizeViewport({ width, height }) {
-    // This is the response function that listens to changes to the size
-    // and sends out a "viewport-resize" message with the new size.
-    window.postMessage(
-      {
-        type: "viewport-resize",
-        width,
-        height,
-      },
-      "*"
-    );
-  }
-
   /**
    * Dispatches the rotateViewport action creator. This utilized by the RDM toolbar as
    * a prop.
@@ -346,16 +310,14 @@ class App extends PureComponent {
     this.onChangeViewportOrientation(id, type, angle, true);
     this.props.dispatch(rotateViewport(id));
 
-    if (Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")) {
-      window.postMessage(
-        {
-          type: "viewport-resize",
-          height: viewport.width,
-          width: viewport.height,
-        },
-        "*"
-      );
-    }
+    window.postMessage(
+      {
+        type: "viewport-resize",
+        height: viewport.width,
+        width: viewport.height,
+      },
+      "*"
+    );
   }
 
   onScreenshot() {
@@ -365,15 +327,13 @@ class App extends PureComponent {
   onToggleLeftAlignment() {
     this.props.dispatch(toggleLeftAlignment());
 
-    if (Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")) {
-      window.postMessage(
-        {
-          type: "toggle-left-alignment",
-          leftAlignmentEnabled: this.props.leftAlignmentEnabled,
-        },
-        "*"
-      );
-    }
+    window.postMessage(
+      {
+        type: "toggle-left-alignment",
+        leftAlignmentEnabled: this.props.leftAlignmentEnabled,
+      },
+      "*"
+    );
   }
 
   onToggleReloadOnTouchSimulation() {
@@ -394,10 +354,7 @@ class App extends PureComponent {
 
   onUpdateDeviceModal(isOpen, modalOpenedFromViewport) {
     this.props.dispatch(updateDeviceModal(isOpen, modalOpenedFromViewport));
-
-    if (Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")) {
-      window.postMessage({ type: "update-device-modal", isOpen }, "*");
-    }
+    window.postMessage({ type: "update-device-modal", isOpen }, "*");
   }
 
   render() {
@@ -405,20 +362,17 @@ class App extends PureComponent {
 
     const {
       onAddCustomDevice,
-      onBrowserMounted,
       onChangeDevice,
       onChangeNetworkThrottling,
       onChangePixelRatio,
       onChangeTouchSimulation,
       onChangeUserAgent,
-      onContentResize,
       onDeviceListUpdate,
       onEditCustomDevice,
       onExit,
       onRemoveCustomDevice,
       onRemoveDeviceAssociation,
       doResizeViewport,
-      onResizeViewport,
       onRotateViewport,
       onScreenshot,
       onToggleLeftAlignment,
@@ -466,17 +420,6 @@ class App extends PureComponent {
         onToggleUserAgentInput,
         onUpdateDeviceModal,
       }),
-      !Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")
-        ? Viewports({
-            screenshot,
-            viewports,
-            onBrowserMounted,
-            onContentResize,
-            onRemoveDeviceAssociation,
-            doResizeViewport,
-            onResizeViewport,
-          })
-        : null,
       devices.isModalOpen
         ? DeviceModal({
             deviceAdderViewportTemplate,

devtools/client/responsive/components/DeviceSelector.js

@@ -4,7 +4,6 @@
 
 "use strict";
 
-const Services = require("Services");
 const {
   createFactory,
   PureComponent,
@@ -149,20 +148,7 @@ class DeviceSelector extends PureComponent {
     // MenuButton is expected to be used in the toolbox document usually,
     // but since RDM's frame also loads theme-switching.js, we can create
     // MenuButtons (& HTMLTooltips) in the RDM frame document.
-    let toolboxDoc = null;
-    if (Services.prefs.getBoolPref("devtools.responsive.browserUI.enabled")) {
-      toolboxDoc = window.document;
-    } else if (window.parent) {
-      toolboxDoc = window.parent.document;
-    } else {
-      // Main process content in old RDM.
-      // However, actually, this case is a possibility to run through only
-      // from browser_tab_remoteness_change.js test.
-      console.error(
-        "Unable to find a proper document to create the device-selector MenuButton for RDM"
-      );
-      return null;
-    }
+    const toolboxDoc = window.document;
 
     return MenuButton(
       {

devtools/client/responsive/ui.js

@@ -455,9 +455,6 @@ class ResponsiveUI {
       case "change-user-agent":
         this.onChangeUserAgent(event);
         break;
-      case "content-resize":
-        this.onContentResize(event);
-        break;
       case "exit":
         this.onExit();
         break;
@@ -544,14 +541,6 @@ class ResponsiveUI {
     this.emit("user-agent-changed");
   }
 
-  onContentResize(event) {
-    const { width, height } = event.data;
-    this.emit("content-resize", {
-      width,
-      height,
-    });
-  }
-
   onExit() {
     const { browserWindow, tab } = this;
     this.manager.closeIfNeeded(browserWindow, tab);