Add m-esr52 at 52.6.0

1 files changed, 597 insertions, 0 deletions

diff --git a/devtools/client/responsive.html/manager.js b/devtools/client/responsive.html/manager.js
new file mode 100644
index 000000000..a3fbed366
--- /dev/null
+++ b/devtools/client/responsive.html/manager.js
@@ -0,0 +1,597 @@
+/* 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 { Ci } = require("chrome");
+const promise = require("promise");
+const { Task } = require("devtools/shared/task");
+const EventEmitter = require("devtools/shared/event-emitter");
+const { getOwnerWindow } = require("sdk/tabs/utils");
+const { startup } = require("sdk/window/helpers");
+const message = require("./utils/message");
+const { swapToInnerBrowser } = require("./browser/swap");
+const { EmulationFront } = require("devtools/shared/fronts/emulation");
+const { getStr } = require("./utils/l10n");
+
+const TOOL_URL = "chrome://devtools/content/responsive.html/index.xhtml";
+
+loader.lazyRequireGetter(this, "DebuggerClient", "devtools/shared/client/main", true);
+loader.lazyRequireGetter(this, "DebuggerServer", "devtools/server/main", true);
+loader.lazyRequireGetter(this, "TargetFactory", "devtools/client/framework/target", true);
+loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true);
+loader.lazyRequireGetter(this, "throttlingProfiles",
+  "devtools/client/shared/network-throttling-profiles");
+
+/**
+ * ResponsiveUIManager is the external API for the browser UI, etc. to use when
+ * opening and closing the responsive UI.
+ *
+ * While the HTML UI is in an experimental stage, the older ResponsiveUIManager
+ * from devtools/client/responsivedesign/responsivedesign.jsm delegates to this
+ * object when the pref "devtools.responsive.html.enabled" is true.
+ */
+const ResponsiveUIManager = exports.ResponsiveUIManager = {
+  activeTabs: new Map(),
+
+  /**
+   * Toggle the responsive UI for a tab.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   * @param options
+   *        Other options associated with toggling.  Currently includes:
+   *        - `command`: Whether initiated via GCLI command bar or toolbox button
+   * @return Promise
+   *         Resolved when the toggling has completed.  If the UI has opened,
+   *         it is resolved to the ResponsiveUI instance for this tab.  If the
+   *         the UI has closed, there is no resolution value.
+   */
+  toggle(window, tab, options) {
+    let action = this.isActiveForTab(tab) ? "close" : "open";
+    let completed = this[action + "IfNeeded"](window, tab, options);
+    completed.catch(console.error);
+    return completed;
+  },
+
+  /**
+   * Opens the responsive UI, if not already open.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   * @param options
+   *        Other options associated with opening.  Currently includes:
+   *        - `command`: Whether initiated via GCLI command bar or toolbox button
+   * @return Promise
+   *         Resolved to the ResponsiveUI instance for this tab when opening is
+   *         complete.
+   */
+  openIfNeeded: Task.async(function* (window, tab, options) {
+    if (!tab.linkedBrowser.isRemoteBrowser) {
+      this.showRemoteOnlyNotification(window, tab, options);
+      return promise.reject(new Error("RDM only available for remote tabs."));
+    }
+    // Remove this once we support this case in bug 1306975.
+    if (tab.linkedBrowser.hasAttribute("usercontextid")) {
+      this.showNoContainerTabsNotification(window, tab, options);
+      return promise.reject(new Error("RDM not available for container tabs."));
+    }
+    if (!this.isActiveForTab(tab)) {
+      this.initMenuCheckListenerFor(window);
+
+      let ui = new ResponsiveUI(window, tab);
+      this.activeTabs.set(tab, ui);
+      yield this.setMenuCheckFor(tab, window);
+      yield ui.inited;
+      this.emit("on", { tab });
+    }
+
+    return this.getResponsiveUIForTab(tab);
+  }),
+
+  /**
+   * Closes the responsive UI, if not already closed.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   * @param options
+   *        Other options associated with closing.  Currently includes:
+   *        - `command`: Whether initiated via GCLI command bar or toolbox button
+   *        - `reason`: String detailing the specific cause for closing
+   * @return Promise
+   *         Resolved (with no value) when closing is complete.
+   */
+  closeIfNeeded: Task.async(function* (window, tab, options) {
+    if (this.isActiveForTab(tab)) {
+      let ui = this.activeTabs.get(tab);
+      let destroyed = yield ui.destroy(options);
+      if (!destroyed) {
+        // Already in the process of destroying, abort.
+        return;
+      }
+      this.activeTabs.delete(tab);
+
+      if (!this.isActiveForWindow(window)) {
+        this.removeMenuCheckListenerFor(window);
+      }
+      this.emit("off", { tab });
+      yield this.setMenuCheckFor(tab, window);
+    }
+  }),
+
+  /**
+   * Returns true if responsive UI is active for a given tab.
+   *
+   * @param tab
+   *        The browser tab.
+   * @return boolean
+   */
+  isActiveForTab(tab) {
+    return this.activeTabs.has(tab);
+  },
+
+  /**
+   * Returns true if responsive UI is active in any tab in the given window.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @return boolean
+   */
+  isActiveForWindow(window) {
+    return [...this.activeTabs.keys()].some(t => getOwnerWindow(t) === window);
+  },
+
+  /**
+   * Return the responsive UI controller for a tab.
+   *
+   * @param tab
+   *        The browser tab.
+   * @return ResponsiveUI
+   *         The UI instance for this tab.
+   */
+  getResponsiveUIForTab(tab) {
+    return this.activeTabs.get(tab);
+  },
+
+  /**
+   * Handle GCLI commands.
+   *
+   * @param window
+   *        The main browser chrome window.
+   * @param tab
+   *        The browser tab.
+   * @param command
+   *        The GCLI command name.
+   * @param args
+   *        The GCLI command arguments.
+   */
+  handleGcliCommand(window, tab, command, args) {
+    let completed;
+    switch (command) {
+      case "resize to":
+        completed = this.openIfNeeded(window, tab, { command: true });
+        this.activeTabs.get(tab).setViewportSize(args);
+        break;
+      case "resize on":
+        completed = this.openIfNeeded(window, tab, { command: true });
+        break;
+      case "resize off":
+        completed = this.closeIfNeeded(window, tab, { command: true });
+        break;
+      case "resize toggle":
+        completed = this.toggle(window, tab, { command: true });
+        break;
+      default:
+    }
+    completed.catch(e => console.error(e));
+  },
+
+  handleMenuCheck({target}) {
+    ResponsiveUIManager.setMenuCheckFor(target);
+  },
+
+  initMenuCheckListenerFor(window) {
+    let { tabContainer } = window.gBrowser;
+    tabContainer.addEventListener("TabSelect", this.handleMenuCheck);
+  },
+
+  removeMenuCheckListenerFor(window) {
+    if (window && window.gBrowser && window.gBrowser.tabContainer) {
+      let { tabContainer } = window.gBrowser;
+      tabContainer.removeEventListener("TabSelect", this.handleMenuCheck);
+    }
+  },
+
+  setMenuCheckFor: Task.async(function* (tab, window = getOwnerWindow(tab)) {
+    yield startup(window);
+
+    let menu = window.document.getElementById("menu_responsiveUI");
+    if (menu) {
+      menu.setAttribute("checked", this.isActiveForTab(tab));
+    }
+  }),
+
+  showRemoteOnlyNotification(window, tab, options) {
+    this.showErrorNotification(window, tab, options, getStr("responsive.remoteOnly"));
+  },
+
+  showNoContainerTabsNotification(window, tab, options) {
+    this.showErrorNotification(window, tab, options,
+                               getStr("responsive.noContainerTabs"));
+  },
+
+  showErrorNotification(window, tab, { command } = {}, msg) {
+    // Default to using the browser's per-tab notification box
+    let nbox = window.gBrowser.getNotificationBox(tab.linkedBrowser);
+
+    // If opening was initiated by GCLI command bar or toolbox button, check for an open
+    // toolbox for the tab.  If one exists, use the toolbox's notification box so that the
+    // message is placed closer to the action taken by the user.
+    if (command) {
+      let target = TargetFactory.forTab(tab);
+      let toolbox = gDevTools.getToolbox(target);
+      if (toolbox) {
+        nbox = toolbox.notificationBox;
+      }
+    }
+
+    let value = "devtools-responsive-error";
+    if (nbox.getNotificationWithValue(value)) {
+      // Notification already displayed
+      return;
+    }
+
+    nbox.appendNotification(
+       msg,
+       value,
+       null,
+       nbox.PRIORITY_CRITICAL_MEDIUM,
+       []);
+  },
+};
+
+// GCLI commands in ../responsivedesign/resize-commands.js listen for events
+// from this object to know when the UI for a tab has opened or closed.
+EventEmitter.decorate(ResponsiveUIManager);
+
+/**
+ * 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.
+ */
+function ResponsiveUI(window, tab) {
+  this.browserWindow = window;
+  this.tab = tab;
+  this.inited = this.init();
+}
+
+ResponsiveUI.prototype = {
+
+  /**
+   * The main browser chrome window (that holds many tabs).
+   */
+  browserWindow: null,
+
+  /**
+   * The specific browser tab this responsive instance is for.
+   */
+  tab: null,
+
+  /**
+   * Promise resovled when the UI init has completed.
+   */
+  inited: null,
+
+  /**
+   * Flag set when destruction has begun.
+   */
+  destroying: false,
+
+  /**
+   * Flag set when destruction has ended.
+   */
+  destroyed: false,
+
+  /**
+   * A window reference for the chrome:// document that displays the responsive
+   * design tool.  It is safe to reference this window directly even with e10s,
+   * as the tool UI is always loaded in the parent process.  The web content
+   * contained *within* the tool UI on the other hand is loaded in the child
+   * process.
+   */
+  toolWindow: null,
+
+  /**
+   * Open RDM while preserving the state of the page.  We use `swapFrameLoaders`
+   * to ensure all in-page state is preserved, just like when you move a tab to
+   * a new window.
+   *
+   * For more details, see /devtools/docs/responsive-design-mode.md.
+   */
+  init: Task.async(function* () {
+    let ui = this;
+
+    // Watch for tab close and window close so we can clean up RDM synchronously
+    this.tab.addEventListener("TabClose", this);
+    this.browserWindow.addEventListener("unload", this);
+
+    // Swap page content from the current tab into a viewport within RDM
+    this.swap = swapToInnerBrowser({
+      tab: this.tab,
+      containerURL: TOOL_URL,
+      getInnerBrowser: Task.async(function* (containerBrowser) {
+        let toolWindow = ui.toolWindow = containerBrowser.contentWindow;
+        toolWindow.addEventListener("message", ui);
+        yield message.request(toolWindow, "init");
+        toolWindow.addInitialViewport("about:blank");
+        yield message.wait(toolWindow, "browser-mounted");
+        return ui.getViewportBrowser();
+      })
+    });
+    yield this.swap.start();
+
+    this.tab.addEventListener("BeforeTabRemotenessChange", this);
+
+    // Notify the inner browser to start the frame script
+    yield message.request(this.toolWindow, "start-frame-script");
+
+    // Get the protocol ready to speak with emulation actor
+    yield this.connectToServer();
+
+    // Non-blocking message to tool UI to start any delayed init activities
+    message.post(this.toolWindow, "post-init");
+  }),
+
+  /**
+   * 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.
+   */
+  destroy: Task.async(function* (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 yielding when we're about to close the tab.
+    let isWindowClosing = options && options.reason === "unload";
+    let isTabContentDestroying =
+      isWindowClosing || (options && (options.reason === "TabClose" ||
+                                      options.reason === "BeforeTabRemotenessChange"));
+
+    // Ensure init has finished before starting destroy
+    if (!isTabContentDestroying) {
+      yield this.inited;
+    }
+
+    this.tab.removeEventListener("TabClose", this);
+    this.tab.removeEventListener("BeforeTabRemotenessChange", this);
+    this.browserWindow.removeEventListener("unload", this);
+    this.toolWindow.removeEventListener("message", this);
+
+    if (!isTabContentDestroying) {
+      // Notify the inner browser to stop the frame script
+      yield message.request(this.toolWindow, "stop-frame-script");
+    }
+
+    // Destroy local state
+    let swap = this.swap;
+    this.browserWindow = null;
+    this.tab = null;
+    this.inited = null;
+    this.toolWindow = null;
+    this.swap = null;
+
+    // Close the debugger client used to speak with emulation actor.
+    // The actor handles clearing any overrides itself, so it's not necessary to clear
+    // anything on shutdown client side.
+    let clientClosed = this.client.close();
+    if (!isTabContentDestroying) {
+      yield clientClosed;
+    }
+    this.client = this.emulationFront = null;
+
+    if (!isWindowClosing) {
+      // Undo the swap and return the content back to a normal tab
+      swap.stop();
+    }
+
+    this.destroyed = true;
+
+    return true;
+  }),
+
+  connectToServer: Task.async(function* () {
+    if (!DebuggerServer.initialized) {
+      DebuggerServer.init();
+      DebuggerServer.addBrowserActors();
+    }
+    this.client = new DebuggerClient(DebuggerServer.connectPipe());
+    yield this.client.connect();
+    let { tab } = yield this.client.getTab();
+    this.emulationFront = EmulationFront(this.client, tab);
+  }),
+
+  handleEvent(event) {
+    let { browserWindow, tab } = this;
+
+    switch (event.type) {
+      case "message":
+        this.handleMessage(event);
+        break;
+      case "BeforeTabRemotenessChange":
+      case "TabClose":
+      case "unload":
+        ResponsiveUIManager.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-throtting":
+        this.onChangeNetworkThrottling(event);
+        break;
+      case "change-pixel-ratio":
+        this.onChangePixelRatio(event);
+        break;
+      case "change-touch-simulation":
+        this.onChangeTouchSimulation(event);
+        break;
+      case "content-resize":
+        this.onContentResize(event);
+        break;
+      case "exit":
+        this.onExit();
+        break;
+      case "remove-device":
+        this.onRemoveDevice(event);
+        break;
+    }
+  },
+
+  onChangeDevice: Task.async(function* (event) {
+    let { userAgent, pixelRatio, touch } = event.data.device;
+    yield this.updateUserAgent(userAgent);
+    yield this.updateDPPX(pixelRatio);
+    yield this.updateTouchSimulation(touch);
+    // Used by tests
+    this.emit("device-changed");
+  }),
+
+  onChangeNetworkThrottling: Task.async(function* (event) {
+    let { enabled, profile } = event.data;
+    yield this.updateNetworkThrottling(enabled, profile);
+    // Used by tests
+    this.emit("network-throttling-changed");
+  }),
+
+  onChangePixelRatio(event) {
+    let { pixelRatio } = event.data;
+    this.updateDPPX(pixelRatio);
+  },
+
+  onChangeTouchSimulation(event) {
+    let { enabled } = event.data;
+    this.updateTouchSimulation(enabled);
+  },
+
+  onContentResize(event) {
+    let { width, height } = event.data;
+    this.emit("content-resize", {
+      width,
+      height,
+    });
+  },
+
+  onExit() {
+    let { browserWindow, tab } = this;
+    ResponsiveUIManager.closeIfNeeded(browserWindow, tab);
+  },
+
+  onRemoveDevice: Task.async(function* (event) {
+    yield this.updateUserAgent();
+    yield this.updateDPPX();
+    yield this.updateTouchSimulation();
+    // Used by tests
+    this.emit("device-removed");
+  }),
+
+  updateDPPX: Task.async(function* (dppx) {
+    if (!dppx) {
+      yield this.emulationFront.clearDPPXOverride();
+      return;
+    }
+    yield this.emulationFront.setDPPXOverride(dppx);
+  }),
+
+  updateNetworkThrottling: Task.async(function* (enabled, profile) {
+    if (!enabled) {
+      yield this.emulationFront.clearNetworkThrottling();
+      return;
+    }
+    let data = throttlingProfiles.find(({ id }) => id == profile);
+    let { download, upload, latency } = data;
+    yield this.emulationFront.setNetworkThrottling({
+      downloadThroughput: download,
+      uploadThroughput: upload,
+      latency,
+    });
+  }),
+
+  updateUserAgent: Task.async(function* (userAgent) {
+    if (!userAgent) {
+      yield this.emulationFront.clearUserAgentOverride();
+      return;
+    }
+    yield this.emulationFront.setUserAgentOverride(userAgent);
+  }),
+
+  updateTouchSimulation: Task.async(function* (enabled) {
+    if (!enabled) {
+      yield this.emulationFront.clearTouchEventsOverride();
+      return;
+    }
+    let reloadNeeded = yield this.emulationFront.setTouchEventsOverride(
+      Ci.nsIDocShell.TOUCHEVENTS_OVERRIDE_ENABLED
+    );
+    if (reloadNeeded) {
+      this.getViewportBrowser().reload();
+    }
+  }),
+
+  /**
+   * Helper for tests. Assumes a single viewport for now.
+   */
+  getViewportSize() {
+    return this.toolWindow.getViewportSize();
+  },
+
+  /**
+   * Helper for tests, GCLI, etc. Assumes a single viewport for now.
+   */
+  setViewportSize: Task.async(function* (size) {
+    yield this.inited;
+    this.toolWindow.setViewportSize(size);
+  }),
+
+  /**
+   * Helper for tests/reloading the viewport. Assumes a single viewport for now.
+   */
+  getViewportBrowser() {
+    return this.toolWindow.getViewportBrowser();
+  },
+
+  /**
+   * Helper for contacting the viewport content. Assumes a single viewport for now.
+   */
+  getViewportMessageManager() {
+    return this.getViewportBrowser().messageManager;
+  },
+
+};
+
+EventEmitter.decorate(ResponsiveUI.prototype);