Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 1075 insertions, 0 deletions

diff --git a/devtools/client/responsive/ui.js b/devtools/client/responsive/ui.js
new file mode 100644
index 0000000000..9e8b24973d
--- /dev/null
+++ b/devtools/client/responsive/ui.js
@@ -0,0 +1,1075 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const {
+  getOrientation,
+} = require("resource://devtools/client/responsive/utils/orientation.js");
+const Constants = require("resource://devtools/client/responsive/constants.js");
+const {
+  CommandsFactory,
+} = require("resource://devtools/shared/commands/commands-factory.js");
+
+loader.lazyRequireGetter(
+  this,
+  "throttlingProfiles",
+  "resource://devtools/client/shared/components/throttling/profiles.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "message",
+  "resource://devtools/client/responsive/utils/message.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "showNotification",
+  "resource://devtools/client/responsive/utils/notification.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "PriorityLevels",
+  "resource://devtools/client/shared/components/NotificationBox.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "l10n",
+  "resource://devtools/client/responsive/utils/l10n.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "asyncStorage",
+  "resource://devtools/shared/async-storage.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "captureAndSaveScreenshot",
+  "resource://devtools/client/shared/screenshot.js",
+  true
+);
+
+const RELOAD_CONDITION_PREF_PREFIX = "devtools.responsive.reloadConditions.";
+const RELOAD_NOTIFICATION_PREF =
+  "devtools.responsive.reloadNotification.enabled";
+
+function debug(msg) {
+  // console.log(`RDM manager: ${msg}`);
+}
+
+/**
+ * ResponsiveUI manages the responsive design tool for a specific tab.  The
+ * actual tool itself lives in a separate chrome:// document that is loaded into
+ * the tab upon opening responsive design.  This object acts a helper to
+ * integrate the tool into the surrounding browser UI as needed.
+ */
+class ResponsiveUI {
+  /**
+   * @param {ResponsiveUIManager} manager
+   *        The ResponsiveUIManager instance.
+   * @param {ChromeWindow} window
+   *        The main browser chrome window (that holds many tabs).
+   * @param {Tab} tab
+   *        The specific browser <tab> element this responsive instance is for.
+   */
+  constructor(manager, window, tab) {
+    this.manager = manager;
+    // The main browser chrome window (that holds many tabs).
+    this.browserWindow = window;
+    // The specific browser tab this responsive instance is for.
+    this.tab = tab;
+
+    // Flag set when destruction has begun.
+    this.destroying = false;
+    // Flag set when destruction has ended.
+    this.destroyed = false;
+    // The iframe containing the RDM UI.
+    this.rdmFrame = null;
+
+    // Bind callbacks for resizers.
+    this.onResizeDrag = this.onResizeDrag.bind(this);
+    this.onResizeStart = this.onResizeStart.bind(this);
+    this.onResizeStop = this.onResizeStop.bind(this);
+
+    this.onTargetAvailable = this.onTargetAvailable.bind(this);
+
+    this.networkFront = null;
+    // Promise resovled when the UI init has completed.
+    this.inited = this.init();
+
+    EventEmitter.decorate(this);
+  }
+
+  get toolWindow() {
+    return this.rdmFrame.contentWindow;
+  }
+
+  get docShell() {
+    return this.toolWindow.docShell;
+  }
+
+  get viewportElement() {
+    return this.browserStackEl.querySelector("browser");
+  }
+
+  get currentTarget() {
+    return this.commands.targetCommand.targetFront;
+  }
+
+  get watcherFront() {
+    return this.resourceCommand.watcherFront;
+  }
+
+  /**
+   * Open RDM while preserving the state of the page.
+   */
+  async init() {
+    debug("Init start");
+
+    this.initRDMFrame();
+
+    // Hide the browser content temporarily while things move around to avoid displaying
+    // strange intermediate states.
+    this.hideBrowserUI();
+
+    // Watch for tab close and window close so we can clean up RDM synchronously
+    this.tab.addEventListener("TabClose", this);
+    this.browserWindow.addEventListener("unload", this);
+    this.rdmFrame.contentWindow.addEventListener("message", this);
+
+    this.tab.linkedBrowser.enterResponsiveMode();
+
+    // Listen to FullZoomChange events coming from the browser window,
+    // so that we can zoom the size of the viewport by the same amount.
+    this.browserWindow.addEventListener("FullZoomChange", this);
+
+    // Get the protocol ready to speak with responsive emulation actor
+    debug("Wait until RDP server connect");
+    await this.connectToServer();
+
+    // Restore the previous UI state.
+    await this.restoreUIState();
+
+    // Show the browser UI now that its state is ready.
+    this.showBrowserUI();
+
+    // Non-blocking message to tool UI to start any delayed init activities
+    message.post(this.toolWindow, "post-init");
+
+    debug("Init done");
+  }
+
+  /**
+   * Initialize the RDM iframe inside of the browser document.
+   */
+  initRDMFrame() {
+    const { document: doc, gBrowser } = this.browserWindow;
+    const rdmFrame = doc.createElement("iframe");
+    rdmFrame.src = "chrome://devtools/content/responsive/toolbar.xhtml";
+    rdmFrame.classList.add("rdm-toolbar");
+
+    // Create resizer handlers
+    const resizeHandle = doc.createElement("div");
+    resizeHandle.classList.add(
+      "rdm-viewport-resize-handle",
+      "viewport-resize-handle"
+    );
+    const resizeHandleX = doc.createElement("div");
+    resizeHandleX.classList.add(
+      "rdm-viewport-resize-handle",
+      "viewport-horizontal-resize-handle"
+    );
+    const resizeHandleY = doc.createElement("div");
+    resizeHandleY.classList.add(
+      "rdm-viewport-resize-handle",
+      "viewport-vertical-resize-handle"
+    );
+
+    this.browserContainerEl = gBrowser.getBrowserContainer(
+      gBrowser.getBrowserForTab(this.tab)
+    );
+    this.browserStackEl =
+      this.browserContainerEl.querySelector(".browserStack");
+
+    this.browserContainerEl.classList.add("responsive-mode");
+
+    // Prepend the RDM iframe inside of the current tab's browser container.
+    this.browserContainerEl.prepend(rdmFrame);
+
+    this.browserStackEl.append(resizeHandle);
+    this.browserStackEl.append(resizeHandleX);
+    this.browserStackEl.append(resizeHandleY);
+
+    // Wait for the frame script to be loaded.
+    message.wait(rdmFrame.contentWindow, "script-init").then(async () => {
+      // Notify the frame window that the Resposnive UI manager has begun initializing.
+      // At this point, we can render our React content inside the frame.
+      message.post(rdmFrame.contentWindow, "init");
+      // Wait for the tools to be rendered above the content. The frame script will
+      // then dispatch the necessary actions to the Redux store to give the toolbar the
+      // state it needs.
+      message.wait(rdmFrame.contentWindow, "init:done").then(() => {
+        rdmFrame.contentWindow.addInitialViewport({
+          userContextId: this.tab.userContextId,
+        });
+      });
+    });
+
+    this.rdmFrame = rdmFrame;
+
+    this.resizeHandle = resizeHandle;
+    this.resizeHandle.addEventListener("mousedown", this.onResizeStart);
+
+    this.resizeHandleX = resizeHandleX;
+    this.resizeHandleX.addEventListener("mousedown", this.onResizeStart);
+
+    this.resizeHandleY = resizeHandleY;
+    this.resizeHandleY.addEventListener("mousedown", this.onResizeStart);
+
+    this.resizeToolbarObserver = new this.browserWindow.ResizeObserver(
+      entries => {
+        for (const entry of entries) {
+          // If the toolbar needs extra space for the UA input, then set a class
+          // that will accomodate its height. We should also make sure to keep
+          // the width value we're toggling against in sync with the media-query
+          // in devtools/client/responsive/index.css
+          this.rdmFrame.classList.toggle(
+            "accomodate-ua",
+            entry.contentBoxSize[0].inlineSize < 520
+          );
+        }
+      }
+    );
+
+    this.resizeToolbarObserver.observe(this.browserStackEl);
+  }
+
+  /**
+   * Close RDM and restore page content back into a regular tab.
+   *
+   * @param object
+   *        Destroy options, which currently includes a `reason` string.
+   * @return boolean
+   *         Whether this call is actually destroying.  False means destruction
+   *         was already in progress.
+   */
+  async destroy(options) {
+    if (this.destroying) {
+      return false;
+    }
+    this.destroying = true;
+
+    // If our tab is about to be closed, there's not enough time to exit
+    // gracefully, but that shouldn't be a problem since the tab will go away.
+    // So, skip any waiting when we're about to close the tab.
+    const isTabDestroyed =
+      !this.tab.linkedBrowser || this.responsiveFront.isDestroyed();
+    const isWindowClosing = options?.reason === "unload" || isTabDestroyed;
+    const isTabContentDestroying =
+      isWindowClosing || options?.reason === "TabClose";
+
+    // Ensure init has finished before starting destroy
+    if (!isTabContentDestroying) {
+      await this.inited;
+
+      // Restore screen orientation of physical device.
+      await Promise.all([
+        this.updateScreenOrientation("landscape-primary", 0),
+        this.updateMaxTouchPointsEnabled(false),
+      ]);
+
+      // Hide browser UI to avoid displaying weird intermediate states while closing.
+      this.hideBrowserUI();
+
+      // Resseting the throtting needs to be done before the
+      // network events watching is stopped.
+      await this.updateNetworkThrottling();
+    }
+
+    this.tab.removeEventListener("TabClose", this);
+    this.browserWindow.removeEventListener("unload", this);
+    this.tab.linkedBrowser.leaveResponsiveMode();
+
+    this.browserWindow.removeEventListener("FullZoomChange", this);
+    this.rdmFrame.contentWindow.removeEventListener("message", this);
+
+    // Remove observers on the stack.
+    this.resizeToolbarObserver.unobserve(this.browserStackEl);
+
+    // Cleanup the frame content before disconnecting the frame element.
+    this.rdmFrame.contentWindow.destroy();
+
+    this.rdmFrame.remove();
+
+    // Clean up resize handlers
+    this.resizeHandle.remove();
+    this.resizeHandleX.remove();
+    this.resizeHandleY.remove();
+
+    this.browserContainerEl.classList.remove("responsive-mode");
+    this.browserStackEl.style.removeProperty("--rdm-width");
+    this.browserStackEl.style.removeProperty("--rdm-height");
+    this.browserStackEl.style.removeProperty("--rdm-zoom");
+
+    // Ensure the tab is reloaded if required when exiting RDM so that no emulated
+    // settings are left in a customized state.
+    if (!isTabContentDestroying) {
+      let reloadNeeded = false;
+      await this.updateDPPX(null);
+      reloadNeeded |=
+        (await this.updateUserAgent()) && this.reloadOnChange("userAgent");
+
+      // Don't reload on the server if we're already doing a reload on the client
+      const reloadOnTouchSimulationChange =
+        this.reloadOnChange("touchSimulation") && !reloadNeeded;
+      await this.updateTouchSimulation(null, reloadOnTouchSimulationChange);
+      if (reloadNeeded) {
+        await this.reloadBrowser();
+      }
+
+      // Unwatch targets & resources as the last step. If we are not waching for
+      // any resource & target anymore, the JSWindowActors will be unregistered
+      // which will trigger an early destruction of the RDM target, before we
+      // could finalize the cleanup.
+      this.commands.targetCommand.unwatchTargets({
+        types: [this.commands.targetCommand.TYPES.FRAME],
+        onAvailable: this.onTargetAvailable,
+      });
+
+      this.resourceCommand.unwatchResources(
+        [this.resourceCommand.TYPES.NETWORK_EVENT],
+        { onAvailable: this.onNetworkResourceAvailable }
+      );
+
+      this.commands.targetCommand.destroy();
+    }
+
+    // Show the browser UI now.
+    this.showBrowserUI();
+
+    // Destroy local state
+    this.browserContainerEl = null;
+    this.browserStackEl = null;
+    this.browserWindow = null;
+    this.tab = null;
+    this.inited = null;
+    this.rdmFrame = null;
+    this.resizeHandle = null;
+    this.resizeHandleX = null;
+    this.resizeHandleY = null;
+    this.resizeToolbarObserver = null;
+
+    // Destroying the commands will close the devtools client used to speak with responsive emulation actor.
+    // The actor handles clearing any overrides itself, so it's not necessary to clear
+    // anything on shutdown client side.
+    const commandsDestroyed = this.commands.destroy();
+    if (!isTabContentDestroying) {
+      await commandsDestroyed;
+    }
+    this.commands = this.responsiveFront = null;
+    this.destroyed = true;
+
+    return true;
+  }
+
+  async connectToServer() {
+    this.commands = await CommandsFactory.forTab(this.tab);
+    this.resourceCommand = this.commands.resourceCommand;
+
+    await this.commands.targetCommand.startListening();
+
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+    });
+
+    // To support network throttling the resource command
+    // needs to be watching for network resources.
+    await this.resourceCommand.watchResources(
+      [this.resourceCommand.TYPES.NETWORK_EVENT],
+      { onAvailable: this.onNetworkResourceAvailable }
+    );
+
+    this.networkFront = await this.watcherFront.getNetworkParentActor();
+  }
+
+  /**
+   * Show one-time notification about reloads for responsive emulation.
+   */
+  showReloadNotification() {
+    if (Services.prefs.getBoolPref(RELOAD_NOTIFICATION_PREF, false)) {
+      showNotification(this.browserWindow, this.tab, {
+        msg: l10n.getFormatStr("responsive.reloadNotification.description2"),
+      });
+      Services.prefs.setBoolPref(RELOAD_NOTIFICATION_PREF, false);
+    }
+  }
+
+  reloadOnChange(id) {
+    this.showReloadNotification();
+    const pref = RELOAD_CONDITION_PREF_PREFIX + id;
+    return Services.prefs.getBoolPref(pref, false);
+  }
+
+  hideBrowserUI() {
+    this.tab.linkedBrowser.style.visibility = "hidden";
+    this.resizeHandle.style.visibility = "hidden";
+  }
+
+  showBrowserUI() {
+    this.tab.linkedBrowser.style.removeProperty("visibility");
+    this.resizeHandle.style.removeProperty("visibility");
+  }
+
+  handleEvent(event) {
+    const { browserWindow, tab } = this;
+
+    switch (event.type) {
+      case "message":
+        this.handleMessage(event);
+        break;
+      case "FullZoomChange":
+        // Get the current device size and update to that size, which
+        // will pick up changes to the zoom.
+        const { width, height } = this.getViewportSize();
+        this.updateViewportSize(width, height);
+        break;
+      case "TabClose":
+      case "unload":
+        this.manager.closeIfNeeded(browserWindow, tab, {
+          reason: event.type,
+        });
+        break;
+    }
+  }
+
+  handleMessage(event) {
+    if (event.origin !== "chrome://devtools") {
+      return;
+    }
+
+    switch (event.data.type) {
+      case "change-device":
+        this.onChangeDevice(event);
+        break;
+      case "change-network-throttling":
+        this.onChangeNetworkThrottling(event);
+        break;
+      case "change-pixel-ratio":
+        this.onChangePixelRatio(event);
+        break;
+      case "change-touch-simulation":
+        this.onChangeTouchSimulation(event);
+        break;
+      case "change-user-agent":
+        this.onChangeUserAgent(event);
+        break;
+      case "exit":
+        this.onExit();
+        break;
+      case "remove-device-association":
+        this.onRemoveDeviceAssociation();
+        break;
+      case "viewport-orientation-change":
+        this.onRotateViewport(event);
+        break;
+      case "viewport-resize":
+        this.onResizeViewport(event);
+        break;
+      case "screenshot":
+        this.onScreenshot();
+        break;
+      case "toggle-left-alignment":
+        this.onToggleLeftAlignment(event);
+        break;
+      case "update-device-modal":
+        this.onUpdateDeviceModal(event);
+        break;
+    }
+  }
+
+  async onChangeDevice(event) {
+    const { pixelRatio, touch, userAgent } = event.data.device;
+    let reloadNeeded = false;
+    await this.updateDPPX(pixelRatio);
+
+    // Get the orientation values of the device we are changing to and update.
+    const { device, viewport } = event.data;
+    const { type, angle } = getOrientation(device, viewport);
+    await this.updateScreenOrientation(type, angle);
+    await this.updateMaxTouchPointsEnabled(touch);
+
+    reloadNeeded |=
+      (await this.updateUserAgent(userAgent)) &&
+      this.reloadOnChange("userAgent");
+
+    // Don't reload on the server if we're already doing a reload on the client
+    const reloadOnTouchSimulationChange =
+      this.reloadOnChange("touchSimulation") && !reloadNeeded;
+    await this.updateTouchSimulation(touch, reloadOnTouchSimulationChange);
+
+    if (reloadNeeded) {
+      this.reloadBrowser();
+    }
+
+    // Used by tests
+    this.emitForTests("device-changed", {
+      reloadTriggered: reloadNeeded || reloadOnTouchSimulationChange,
+    });
+  }
+
+  async onChangeNetworkThrottling(event) {
+    const { enabled, profile } = event.data;
+    await this.updateNetworkThrottling(enabled, profile);
+    // Used by tests
+    this.emit("network-throttling-changed");
+  }
+
+  onChangePixelRatio(event) {
+    const { pixelRatio } = event.data;
+    this.updateDPPX(pixelRatio);
+  }
+
+  async onChangeTouchSimulation(event) {
+    const { enabled } = event.data;
+
+    await this.updateMaxTouchPointsEnabled(enabled);
+
+    await this.updateTouchSimulation(
+      enabled,
+      this.reloadOnChange("touchSimulation")
+    );
+
+    // Used by tests
+    this.emit("touch-simulation-changed");
+  }
+
+  async onChangeUserAgent(event) {
+    const { userAgent } = event.data;
+    const reloadNeeded =
+      (await this.updateUserAgent(userAgent)) &&
+      this.reloadOnChange("userAgent");
+    if (reloadNeeded) {
+      this.reloadBrowser();
+    }
+    this.emit("user-agent-changed");
+  }
+
+  onExit() {
+    const { browserWindow, tab } = this;
+    this.manager.closeIfNeeded(browserWindow, tab);
+  }
+
+  async onRemoveDeviceAssociation() {
+    let reloadNeeded = false;
+    await this.updateDPPX(null);
+    reloadNeeded |=
+      (await this.updateUserAgent()) && this.reloadOnChange("userAgent");
+
+    // Don't reload on the server if we're already doing a reload on the client
+    const reloadOnTouchSimulationChange =
+      this.reloadOnChange("touchSimulation") && !reloadNeeded;
+    await this.updateTouchSimulation(null, reloadOnTouchSimulationChange);
+    if (reloadNeeded) {
+      this.reloadBrowser();
+    }
+    // Used by tests
+    this.emitForTests("device-association-removed", {
+      reloadTriggered: reloadNeeded || reloadOnTouchSimulationChange,
+    });
+  }
+
+  /**
+   * Resizing the browser on mousemove
+   */
+  onResizeDrag({ screenX, screenY }) {
+    if (!this.isResizing || !this.rdmFrame.contentWindow) {
+      return;
+    }
+
+    const zoom = this.tab.linkedBrowser.fullZoom;
+
+    let deltaX = (screenX - this.lastScreenX) / zoom;
+    let deltaY = (screenY - this.lastScreenY) / zoom;
+
+    const leftAlignmentEnabled = Services.prefs.getBoolPref(
+      "devtools.responsive.leftAlignViewport.enabled",
+      false
+    );
+
+    if (!leftAlignmentEnabled) {
+      // The viewport is centered horizontally, so horizontal resize resizes
+      // by twice the distance the mouse was dragged - on left and right side.
+      deltaX = deltaX * 2;
+    }
+
+    if (this.ignoreX) {
+      deltaX = 0;
+    }
+    if (this.ignoreY) {
+      deltaY = 0;
+    }
+
+    const viewportSize = this.getViewportSize();
+
+    let width = Math.round(viewportSize.width + deltaX);
+    let height = Math.round(viewportSize.height + deltaY);
+
+    if (width < Constants.MIN_VIEWPORT_DIMENSION) {
+      width = Constants.MIN_VIEWPORT_DIMENSION;
+    } else if (width != viewportSize.width) {
+      this.lastScreenX = screenX;
+    }
+
+    if (height < Constants.MIN_VIEWPORT_DIMENSION) {
+      height = Constants.MIN_VIEWPORT_DIMENSION;
+    } else if (height != viewportSize.height) {
+      this.lastScreenY = screenY;
+    }
+
+    // Update the RDM store and viewport size with the new width and height.
+    this.rdmFrame.contentWindow.setViewportSize({ width, height });
+    this.updateViewportSize(width, height);
+
+    // Change the device selector back to an unselected device
+    if (this.rdmFrame.contentWindow.getAssociatedDevice()) {
+      this.rdmFrame.contentWindow.clearDeviceAssociation();
+    }
+  }
+
+  /**
+   * Start the process of resizing the browser.
+   */
+  onResizeStart({ target, screenX, screenY }) {
+    this.browserWindow.addEventListener("mousemove", this.onResizeDrag, true);
+    this.browserWindow.addEventListener("mouseup", this.onResizeStop, true);
+
+    this.isResizing = true;
+    this.lastScreenX = screenX;
+    this.lastScreenY = screenY;
+    this.ignoreX = target === this.resizeHandleY;
+    this.ignoreY = target === this.resizeHandleX;
+  }
+
+  /**
+   * Stop the process of resizing the browser.
+   */
+  onResizeStop() {
+    this.browserWindow.removeEventListener(
+      "mousemove",
+      this.onResizeDrag,
+      true
+    );
+    this.browserWindow.removeEventListener("mouseup", this.onResizeStop, true);
+
+    this.isResizing = false;
+    this.lastScreenX = 0;
+    this.lastScreenY = 0;
+    this.ignoreX = false;
+    this.ignoreY = false;
+
+    // Used by tests.
+    this.emit("viewport-resize-dragend");
+  }
+
+  onResizeViewport(event) {
+    const { width, height } = event.data;
+    this.updateViewportSize(width, height);
+    this.emit("viewport-resize", {
+      width,
+      height,
+    });
+  }
+
+  async onRotateViewport(event) {
+    const { orientationType: type, angle, isViewportRotated } = event.data;
+    await this.updateScreenOrientation(type, angle, isViewportRotated);
+  }
+
+  async onScreenshot() {
+    const messages = await captureAndSaveScreenshot(
+      this.currentTarget,
+      this.browserWindow
+    );
+
+    const priorityMap = {
+      error: PriorityLevels.PRIORITY_CRITICAL_HIGH,
+      warn: PriorityLevels.PRIORITY_WARNING_HIGH,
+    };
+    for (const { text, level } of messages) {
+      // captureAndSaveScreenshot returns "saved" messages, that indicate where the
+      // screenshot was saved. We don't want to display them as the download UI can be
+      // used to open the file.
+      if (level !== "warn" && level !== "error") {
+        continue;
+      }
+
+      showNotification(this.browserWindow, this.tab, {
+        msg: text,
+        priority: priorityMap[level],
+      });
+    }
+
+    message.post(this.rdmFrame.contentWindow, "screenshot-captured");
+  }
+
+  onToggleLeftAlignment(event) {
+    this.updateUIAlignment(event.data.leftAlignmentEnabled);
+  }
+
+  onUpdateDeviceModal(event) {
+    this.rdmFrame.classList.toggle("device-modal-opened", event.data.isOpen);
+  }
+
+  async hasDeviceState() {
+    const deviceState = await asyncStorage.getItem(
+      "devtools.responsive.deviceState"
+    );
+    return !!deviceState;
+  }
+
+  /**
+   * Restores the previous UI state.
+   */
+  async restoreUIState() {
+    const leftAlignmentEnabled = Services.prefs.getBoolPref(
+      "devtools.responsive.leftAlignViewport.enabled",
+      false
+    );
+
+    this.updateUIAlignment(leftAlignmentEnabled);
+
+    const height = Services.prefs.getIntPref(
+      "devtools.responsive.viewport.height",
+      0
+    );
+    const width = Services.prefs.getIntPref(
+      "devtools.responsive.viewport.width",
+      0
+    );
+    this.updateViewportSize(width, height);
+  }
+
+  /**
+   * Restores the previous actor state.
+   *
+   * @param {Boolean} isTargetSwitching
+   */
+  async restoreActorState(isTargetSwitching) {
+    // It's possible the target will switch to a page loaded in the
+    // parent-process (i.e: about:robots). When this happens, the values set
+    // on the BrowsingContext by RDM are not preserved. So we need to call
+    // enterResponsiveMode whenever there is a target switch.
+    this.tab.linkedBrowser.enterResponsiveMode();
+
+    // If the target follows the window global lifecycle, the configuration was already
+    // restored from the server during target switch, so we can stop here.
+    // This function is still called at startup to restore potential state from previous
+    // RDM session so we only stop here during target switching.
+    if (
+      isTargetSwitching &&
+      this.commands.targetCommand.targetFront.targetForm
+        .followWindowGlobalLifeCycle
+    ) {
+      return;
+    }
+
+    const hasDeviceState = await this.hasDeviceState();
+    if (hasDeviceState) {
+      // Return if there is a device state to restore, this will be done when the
+      // device list is loaded after the post-init.
+      return;
+    }
+
+    const height = Services.prefs.getIntPref(
+      "devtools.responsive.viewport.height",
+      0
+    );
+    const pixelRatio = Services.prefs.getIntPref(
+      "devtools.responsive.viewport.pixelRatio",
+      0
+    );
+    const touchSimulationEnabled = Services.prefs.getBoolPref(
+      "devtools.responsive.touchSimulation.enabled",
+      false
+    );
+    const userAgent = Services.prefs.getCharPref(
+      "devtools.responsive.userAgent",
+      ""
+    );
+    const width = Services.prefs.getIntPref(
+      "devtools.responsive.viewport.width",
+      0
+    );
+
+    // Restore the previously set orientation, or get it from the initial viewport if it
+    // wasn't set yet.
+    const { type, angle } =
+      this.commands.targetConfigurationCommand.configuration
+        .rdmPaneOrientation ||
+      this.getInitialViewportOrientation({
+        width,
+        height,
+      });
+
+    await this.updateDPPX(pixelRatio);
+    await this.updateScreenOrientation(type, angle);
+    await this.updateMaxTouchPointsEnabled(touchSimulationEnabled);
+
+    if (touchSimulationEnabled) {
+      await this.updateTouchSimulation(touchSimulationEnabled);
+    }
+
+    let reloadNeeded = false;
+    if (userAgent) {
+      reloadNeeded |=
+        (await this.updateUserAgent(userAgent)) &&
+        this.reloadOnChange("userAgent");
+    }
+    if (reloadNeeded) {
+      await this.reloadBrowser();
+    }
+  }
+
+  /**
+   * Set or clear the emulated device pixel ratio.
+   *
+   * @param {Number|null} dppx: The ratio to simulate. Set to null to disable the
+   *                      simulation and roll back to the original ratio
+   */
+  async updateDPPX(dppx = null) {
+    await this.commands.targetConfigurationCommand.updateConfiguration({
+      overrideDPPX: dppx,
+    });
+  }
+
+  /**
+   * Set or clear network throttling.
+   *
+   * @return boolean
+   *         Whether a reload is needed to apply the change.
+   *         (This is always immediate, so it's always false.)
+   */
+  async updateNetworkThrottling(enabled, profile) {
+    if (!enabled) {
+      await this.networkFront.clearNetworkThrottling();
+      return false;
+    }
+    const data = throttlingProfiles.find(({ id }) => id == profile);
+    const { download, upload, latency } = data;
+    await this.networkFront.setNetworkThrottling({
+      downloadThroughput: download,
+      uploadThroughput: upload,
+      latency,
+    });
+    return false;
+  }
+
+  /**
+   * Set or clear the emulated user agent.
+   *
+   * @param {String|null} userAgent: The user agent to set on the page. Set to null to revert
+   *                      the user agent to its original value
+   * @return {Boolean} Whether a reload is needed to apply the change.
+   */
+  async updateUserAgent(userAgent) {
+    const getConfigurationCustomUserAgent = () =>
+      this.commands.targetConfigurationCommand.configuration.customUserAgent ||
+      "";
+    const previousCustomUserAgent = getConfigurationCustomUserAgent();
+    await this.commands.targetConfigurationCommand.updateConfiguration({
+      customUserAgent: userAgent,
+    });
+
+    const updatedUserAgent = getConfigurationCustomUserAgent();
+    return previousCustomUserAgent !== updatedUserAgent;
+  }
+
+  /**
+   * Set or clear touch simulation. When setting to true, this method will
+   * additionally set meta viewport override.
+   * When setting to false, this method will clear all touch simulation and meta viewport
+   * overrides, returning to default behavior for both settings.
+   *
+   * @param {boolean} enabled
+   * @param {boolean} reloadOnTouchSimulationToggle: Set to true to trigger a page reload
+   *        if the touch simulation state changes.
+   */
+  async updateTouchSimulation(enabled, reloadOnTouchSimulationToggle) {
+    await this.commands.targetConfigurationCommand.updateConfiguration({
+      touchEventsOverride: enabled ? "enabled" : null,
+      reloadOnTouchSimulationToggle,
+    });
+  }
+
+  /**
+   * Sets the screen orientation values of the simulated device.
+   *
+   * @param {String} type
+   *        The orientation type to update the current device screen to.
+   * @param {Number} angle
+   *        The rotation angle to update the current device screen to.
+   * @param {Boolean} isViewportRotated
+   *        Whether or not the reason for updating the screen orientation is a result
+   *        of actually rotating the device via the RDM toolbar. If true, then an
+   *        "orientationchange" event is simulated. Otherwise, the screen orientation is
+   *        updated because of changing devices, opening RDM, or the page has been
+   *        reloaded/navigated to, so we should not be simulating "orientationchange".
+   */
+  async updateScreenOrientation(type, angle, isViewportRotated = false) {
+    await this.commands.targetConfigurationCommand.simulateScreenOrientationChange(
+      {
+        type,
+        angle,
+        isViewportRotated,
+      }
+    );
+  }
+
+  /**
+   * Sets whether or not maximum touch points are supported for the simulated device.
+   *
+   * @param {Boolean} touchSimulationEnabled
+   *        Whether or not touch is enabled for the simulated device.
+   */
+  async updateMaxTouchPointsEnabled(touchSimulationEnabled) {
+    return this.commands.targetConfigurationCommand.updateConfiguration({
+      rdmPaneMaxTouchPoints: touchSimulationEnabled ? 1 : 0,
+    });
+  }
+
+  /**
+   * Sets whether or not the RDM UI should be left-aligned.
+   *
+   * @param {Boolean} leftAlignmentEnabled
+   *        Whether or not the UI is left-aligned.
+   */
+  updateUIAlignment(leftAlignmentEnabled) {
+    this.browserContainerEl.classList.toggle(
+      "left-aligned",
+      leftAlignmentEnabled
+    );
+  }
+
+  /**
+   * Sets the browser element to be the given width and height.
+   *
+   * @param {Number} width
+   *        The viewport's width.
+   * @param {Number} height
+   *        The viewport's height.
+   */
+  updateViewportSize(width, height) {
+    const zoom = this.tab.linkedBrowser.fullZoom;
+
+    // Setting this with a variable on the stack instead of directly as width/height
+    // on the <browser> because we'll need to use this for the alert dialog as well.
+    this.browserStackEl.style.setProperty("--rdm-width", `${width}px`);
+    this.browserStackEl.style.setProperty("--rdm-height", `${height}px`);
+    this.browserStackEl.style.setProperty("--rdm-zoom", zoom);
+
+    // This is a bit premature, but we emit a content-resize event here. It
+    // would be preferrable to wait until the viewport is actually resized,
+    // but the "resize" event is not triggered by this style change. The
+    // content-resize message is only used by tests, and if needed those tests
+    // can use the testing function setViewportSizeAndAwaitReflow to ensure
+    // the viewport has had time to reach this size.
+    this.emit("content-resize", {
+      width,
+      height,
+    });
+  }
+
+  /**
+   * Helper for tests. Assumes a single viewport for now.
+   */
+  getViewportSize() {
+    // The getViewportSize function is loaded in index.js, and might not be
+    // available yet.
+    if (this.toolWindow.getViewportSize) {
+      return this.toolWindow.getViewportSize();
+    }
+
+    return { width: 0, height: 0 };
+  }
+
+  /**
+   * Helper for tests, etc. Assumes a single viewport for now.
+   */
+  async setViewportSize(size) {
+    await this.inited;
+
+    // Ensure that width and height are valid.
+    let { width, height } = size;
+    if (!size.width) {
+      width = this.getViewportSize().width;
+    }
+
+    if (!size.height) {
+      height = this.getViewportSize().height;
+    }
+
+    this.rdmFrame.contentWindow.setViewportSize({ width, height });
+    this.updateViewportSize(width, height);
+  }
+
+  /**
+   * Helper for tests/reloading the viewport. Assumes a single viewport for now.
+   */
+  getViewportBrowser() {
+    return this.tab.linkedBrowser;
+  }
+
+  /**
+   * Helper for contacting the viewport content. Assumes a single viewport for now.
+   */
+  getViewportMessageManager() {
+    return this.getViewportBrowser().messageManager;
+  }
+
+  /**
+   * Helper for getting the initial viewport orientation.
+   */
+  getInitialViewportOrientation(viewport) {
+    return getOrientation(viewport, viewport);
+  }
+
+  /**
+   * Helper for tests to get the browser's window.
+   */
+  getBrowserWindow() {
+    return this.browserWindow;
+  }
+
+  async onTargetAvailable({ targetFront, isTargetSwitching }) {
+    if (this.destroying) {
+      return;
+    }
+
+    if (targetFront.isTopLevel) {
+      this.responsiveFront = await targetFront.getFront("responsive");
+
+      if (this.destroying) {
+        return;
+      }
+
+      await this.restoreActorState(isTargetSwitching);
+      this.emitForTests("responsive-ui-target-switch-done");
+    }
+  }
+  // This just needed to setup watching for network resources,
+  // to support network throttling.
+  onNetworkResourceAvailable() {}
+
+  /**
+   * Reload the current tab.
+   */
+  async reloadBrowser() {
+    await this.commands.targetCommand.reloadTopLevelTarget();
+  }
+}
+
+module.exports = ResponsiveUI;