Bug 1572840 Part 3: Listen to fullzoom changes in the RDM pane and call the zoom viewport function. r=gl

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

--HG--
extra : moz-landing-system : lando

devtools/client/responsive/index.js

@@ -26,7 +26,11 @@ const message = require("./utils/message");
 const App = createFactory(require("./components/App"));
 const Store = require("./store");
 const { loadDevices, restoreDeviceState } = require("./actions/devices");
-const { addViewport, resizeViewport } = require("./actions/viewports");
+const {
+  addViewport,
+  resizeViewport,
+  zoomViewport,
+} = require("./actions/viewports");
 const { changeDisplayPixelRatio } = require("./actions/ui");
 
 // Exposed for use by tests
@@ -176,3 +180,14 @@ window.getViewportBrowser = () => {
   }
   return browser;
 };
+
+/**
+ * Called by manager.js to zoom the viewport.
+ */
+window.setViewportZoom = zoom => {
+  try {
+    bootstrap.dispatch(zoomViewport(0, zoom));
+  } catch (e) {
+    console.error(e);
+  }
+};

devtools/client/responsive/manager.js

@@ -423,11 +423,18 @@ ResponsiveUI.prototype = {
     // our Zoom UI update event would be overwritten. After this function, future
     // changes to zoom levels will send Zoom UI update events in an order that
     // keeps the Zoom UI synchronized with the RDM content zoom levels.
-    const fullZoom = this.tab.linkedBrowser.fullZoom;
+    const rdmContent = this.tab.linkedBrowser;
-    const textZoom = this.tab.linkedBrowser.textZoom;
+    const rdmViewport = ui.toolWindow;
 
-    ui.toolWindow.docShell.contentViewer.fullZoom = 1;
+    const fullZoom = rdmContent.fullZoom;
-    ui.toolWindow.docShell.contentViewer.textZoom = 1;
+    const textZoom = rdmContent.textZoom;
+
+    rdmViewport.docShell.contentViewer.fullZoom = 1;
+    rdmViewport.docShell.contentViewer.textZoom = 1;
+
+    // Listen to FullZoomChange events coming from the linkedBrowser,
+    // so that we can zoom the size of the viewport by the same amount.
+    rdmContent.addEventListener("FullZoomChange", this);
 
     this.tab.addEventListener("BeforeTabRemotenessChange", this);
 
@@ -445,14 +452,14 @@ ResponsiveUI.prototype = {
     // Show the settings onboarding tooltip
     if (Services.prefs.getBoolPref(SHOW_SETTING_TOOLTIP_PREF)) {
       this.settingOnboardingTooltip = new SettingOnboardingTooltip(
-        ui.toolWindow.document
+        rdmViewport.document
       );
     }
 
     // Re-apply our cached zoom levels. Other Zoom UI update events have finished
     // by now.
-    this.tab.linkedBrowser.fullZoom = fullZoom;
+    rdmContent.fullZoom = fullZoom;
-    this.tab.linkedBrowser.textZoom = textZoom;
+    rdmContent.textZoom = textZoom;
 
     // Non-blocking message to tool UI to start any delayed init activities
     message.post(this.toolWindow, "post-init");
@@ -492,6 +499,7 @@ ResponsiveUI.prototype = {
       await this.inited;
     }
 
+    this.tab.linkedBrowser.removeEventListener("FullZoomChange", this);
     this.tab.removeEventListener("TabClose", this);
     this.tab.removeEventListener("BeforeTabRemotenessChange", this);
     this.browserWindow.removeEventListener("unload", this);
@@ -589,12 +597,16 @@ ResponsiveUI.prototype = {
   },
 
   handleEvent(event) {
-    const { browserWindow, tab } = this;
+    const { browserWindow, tab, toolWindow } = this;
 
     switch (event.type) {
       case "message":
         this.handleMessage(event);
         break;
+      case "FullZoomChange":
+        const zoom = tab.linkedBrowser.fullZoom;
+        toolWindow.setViewportZoom(zoom);
+        break;
       case "BeforeTabRemotenessChange":
       case "TabClose":
       case "unload":