browser_toggle_zoom.js

/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Verify the content page can be zoomed in within RDM.
// We do not verify here that the fullZoom level applied to the page before RDM starts is
// carried over to the content page after RDM is open. This bug hasn't been fixed.
// See bug 1529166.

const TEST_URL = "http://example.com/";
const INITIAL_ZOOM_LEVEL = 1;
const CHANGED_ZOOM_LEVEL = 3;

addRDMTask(TEST_URL, async function ({ ui }) {
  const innerBrowser = ui.getViewportBrowser();

  let innerBrowserZoom = await getInnerFullZoomLevel(innerBrowser);
  is(innerBrowserZoom, INITIAL_ZOOM_LEVEL,
    `Initial inner full zoom is ${INITIAL_ZOOM_LEVEL}`);

  info("Set the zoom level as we normally would on the browser");
  ZoomManager.setZoomForBrowser(ui.tab.linkedBrowser, CHANGED_ZOOM_LEVEL);

  info("Check that the outer zoom level hasn't changed");
  const outerBrowserZoom = await getInnerFullZoomLevel(ui.tab.linkedBrowser);
  is(outerBrowserZoom, INITIAL_ZOOM_LEVEL,
     "The fullZoom level has not been applied to the outer browser");

  info("Check that the zoom level has tunnelled to the inner browser");
  innerBrowserZoom = await getInnerFullZoomLevel(innerBrowser);
  is(innerBrowserZoom, CHANGED_ZOOM_LEVEL,
    `The new inner full zoom is ${CHANGED_ZOOM_LEVEL}`);
});

function getInnerFullZoomLevel(browser) {
  return ContentTask.spawn(browser, {}, function () {
    return content.docShell.contentViewer.fullZoom;
  });
}

new-part2.diff

diff --git a/devtools/client/responsive.html/browser/swap.js b/devtools/client/responsive.html/browser/swap.js
--- a/devtools/client/responsive.html/browser/swap.js
+++ b/devtools/client/responsive.html/browser/swap.js
@@ -100,16 +100,20 @@ function swapToInnerBrowser({ tab, conta
       gBrowser.addEventListener("XULFrameLoaderCreated", resolve, { once: true });
       browser.loadURI(uri, options);
     });
   }
 
   return {
 
     async start() {
+      // Record the current content's zoom level as we'll need it later to apply it to
+      // the inner browser.
+      const contentFullZoomLevel = tab.linkedBrowser.fullZoom;
+
       // In some cases, such as a preloaded browser used for about:newtab, browser code
       // will force a new frameloader on next navigation to remote content to ensure
       // balanced process assignment.  If this case will happen here, navigate to
       // about:blank first to get this out of way so that we stay within one process while
       // RDM is open. Some process selection rules are specific to remote content, so we
       // use `http://example.com` as a test for what a remote navigation would cause.
       const {
         requiredRemoteType,
@@ -234,17 +238,22 @@ function swapToInnerBrowser({ tab, conta
       });
 
       // 6. Swap the tool UI (with viewport showing the content) into the
       //    original browser tab and close the temporary tab used to load the
       //    tool via `swapBrowsersAndCloseOther`.
       debug("Swap tool UI to original tab");
       swapBrowsersAndCloseOtherSilently(tab, containerTab);
 
-      // 7. Start a tunnel from the tool tab's browser to the viewport browser
+      // 7. Apply the zoom level previously applied to the content page, while keeping
+      //    the RDM UI at a 100% zoom level.
+      innerBrowser.messageManager.sendAsyncMessage("FullZoom", { value: contentFullZoomLevel });
+      tab.linkedBrowser.messageManager.sendAsyncMessage("FullZoom", { value: 1 });
+
+      // 8. Start a tunnel from the tool tab's browser to the viewport browser
       //    so that some browser UI functions, like navigation, are connected to
       //    the content in the viewport, instead of the tool page.
       tunnel = tunnelToInnerBrowser(tab.linkedBrowser, innerBrowser);
       debug("Wait until tunnel start");
       await tunnel.start();
 
       // Swapping browsers disconnects the find bar UI from the browser.
       // If the find bar has been initialized, reconnect it.