diff options
author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
---|---|---|
committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
tree | 10027f336435511475e392454359edea8e25895d /devtools/client/framework/toolbox-hosts.js | |
parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip |
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/framework/toolbox-hosts.js')
-rw-r--r-- | devtools/client/framework/toolbox-hosts.js | 425 |
1 files changed, 425 insertions, 0 deletions
diff --git a/devtools/client/framework/toolbox-hosts.js b/devtools/client/framework/toolbox-hosts.js new file mode 100644 index 000000000..ea774549a --- /dev/null +++ b/devtools/client/framework/toolbox-hosts.js @@ -0,0 +1,425 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* 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("devtools/shared/event-emitter"); +const promise = require("promise"); +const defer = require("devtools/shared/defer"); +const Services = require("Services"); +const {DOMHelpers} = require("resource://devtools/client/shared/DOMHelpers.jsm"); + +loader.lazyRequireGetter(this, "system", "devtools/shared/system"); + +/* A host should always allow this much space for the page to be displayed. + * There is also a min-height on the browser, but we still don't want to set + * frame.height to be larger than that, since it can cause problems with + * resizing the toolbox and panel layout. */ +const MIN_PAGE_SIZE = 25; + +/** + * A toolbox host represents an object that contains a toolbox (e.g. the + * sidebar or a separate window). Any host object should implement the + * following functions: + * + * create() - create the UI and emit a 'ready' event when the UI is ready to use + * destroy() - destroy the host's UI + */ + +exports.Hosts = { + "bottom": BottomHost, + "side": SidebarHost, + "window": WindowHost, + "custom": CustomHost +}; + +/** + * Host object for the dock on the bottom of the browser + */ +function BottomHost(hostTab) { + this.hostTab = hostTab; + + EventEmitter.decorate(this); +} + +BottomHost.prototype = { + type: "bottom", + + heightPref: "devtools.toolbox.footer.height", + + /** + * Create a box at the bottom of the host tab. + */ + create: function () { + let deferred = defer(); + + let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser; + let ownerDocument = gBrowser.ownerDocument; + this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser); + + this._splitter = ownerDocument.createElement("splitter"); + this._splitter.setAttribute("class", "devtools-horizontal-splitter"); + // Avoid resizing notification containers + this._splitter.setAttribute("resizebefore", "flex"); + + this.frame = ownerDocument.createElement("iframe"); + this.frame.className = "devtools-toolbox-bottom-iframe"; + this.frame.height = Math.min( + Services.prefs.getIntPref(this.heightPref), + this._nbox.clientHeight - MIN_PAGE_SIZE + ); + + this._nbox.appendChild(this._splitter); + this._nbox.appendChild(this.frame); + + let frameLoad = () => { + this.emit("ready", this.frame); + deferred.resolve(this.frame); + }; + + this.frame.tooltip = "aHTMLTooltip"; + + // we have to load something so we can switch documents if we have to + this.frame.setAttribute("src", "about:blank"); + + let domHelper = new DOMHelpers(this.frame.contentWindow); + domHelper.onceDOMReady(frameLoad); + + focusTab(this.hostTab); + + return deferred.promise; + }, + + /** + * Raise the host. + */ + raise: function () { + focusTab(this.hostTab); + }, + + /** + * Minimize this host so that only the toolbox tabbar remains visible. + * @param {Number} height The height to minimize to. Defaults to 0, which + * means that the toolbox won't be visible at all once minimized. + */ + minimize: function (height = 0) { + if (this.isMinimized) { + return; + } + this.isMinimized = true; + + let onTransitionEnd = event => { + if (event.propertyName !== "margin-bottom") { + // Ignore transitionend on unrelated properties. + return; + } + + this.frame.removeEventListener("transitionend", onTransitionEnd); + this.emit("minimized"); + }; + this.frame.addEventListener("transitionend", onTransitionEnd); + this.frame.style.marginBottom = -this.frame.height + height + "px"; + this._splitter.classList.add("disabled"); + }, + + /** + * If the host was minimized before, maximize it again (the host will be + * maximized to the height it previously had). + */ + maximize: function () { + if (!this.isMinimized) { + return; + } + this.isMinimized = false; + + let onTransitionEnd = event => { + if (event.propertyName !== "margin-bottom") { + // Ignore transitionend on unrelated properties. + return; + } + + this.frame.removeEventListener("transitionend", onTransitionEnd); + this.emit("maximized"); + }; + this.frame.addEventListener("transitionend", onTransitionEnd); + this.frame.style.marginBottom = "0"; + this._splitter.classList.remove("disabled"); + }, + + /** + * Toggle the minimize mode. + * @param {Number} minHeight The height to minimize to. + */ + toggleMinimizeMode: function (minHeight) { + this.isMinimized ? this.maximize() : this.minimize(minHeight); + }, + + /** + * Set the toolbox title. + * Nothing to do for this host type. + */ + setTitle: function () {}, + + /** + * Destroy the bottom dock. + */ + destroy: function () { + if (!this._destroyed) { + this._destroyed = true; + + Services.prefs.setIntPref(this.heightPref, this.frame.height); + this._nbox.removeChild(this._splitter); + this._nbox.removeChild(this.frame); + this.frame = null; + this._nbox = null; + this._splitter = null; + } + + return promise.resolve(null); + } +}; + +/** + * Host object for the in-browser sidebar + */ +function SidebarHost(hostTab) { + this.hostTab = hostTab; + + EventEmitter.decorate(this); +} + +SidebarHost.prototype = { + type: "side", + + widthPref: "devtools.toolbox.sidebar.width", + + /** + * Create a box in the sidebar of the host tab. + */ + create: function () { + let deferred = defer(); + + let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser; + let ownerDocument = gBrowser.ownerDocument; + this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser); + + this._splitter = ownerDocument.createElement("splitter"); + this._splitter.setAttribute("class", "devtools-side-splitter"); + + this.frame = ownerDocument.createElement("iframe"); + this.frame.className = "devtools-toolbox-side-iframe"; + + this.frame.width = Math.min( + Services.prefs.getIntPref(this.widthPref), + this._sidebar.clientWidth - MIN_PAGE_SIZE + ); + + this._sidebar.appendChild(this._splitter); + this._sidebar.appendChild(this.frame); + + let frameLoad = () => { + this.emit("ready", this.frame); + deferred.resolve(this.frame); + }; + + this.frame.tooltip = "aHTMLTooltip"; + this.frame.setAttribute("src", "about:blank"); + + let domHelper = new DOMHelpers(this.frame.contentWindow); + domHelper.onceDOMReady(frameLoad); + + focusTab(this.hostTab); + + return deferred.promise; + }, + + /** + * Raise the host. + */ + raise: function () { + focusTab(this.hostTab); + }, + + /** + * Set the toolbox title. + * Nothing to do for this host type. + */ + setTitle: function () {}, + + /** + * Destroy the sidebar. + */ + destroy: function () { + if (!this._destroyed) { + this._destroyed = true; + + Services.prefs.setIntPref(this.widthPref, this.frame.width); + this._sidebar.removeChild(this._splitter); + this._sidebar.removeChild(this.frame); + } + + return promise.resolve(null); + } +}; + +/** + * Host object for the toolbox in a separate window + */ +function WindowHost() { + this._boundUnload = this._boundUnload.bind(this); + + EventEmitter.decorate(this); +} + +WindowHost.prototype = { + type: "window", + + WINDOW_URL: "chrome://devtools/content/framework/toolbox-window.xul", + + /** + * Create a new xul window to contain the toolbox. + */ + create: function () { + let deferred = defer(); + + let flags = "chrome,centerscreen,resizable,dialog=no"; + let win = Services.ww.openWindow(null, this.WINDOW_URL, "_blank", + flags, null); + + let frameLoad = () => { + win.removeEventListener("load", frameLoad, true); + win.focus(); + + let key; + if (system.constants.platform === "macosx") { + key = win.document.getElementById("toolbox-key-toggle-osx"); + } else { + key = win.document.getElementById("toolbox-key-toggle"); + } + key.removeAttribute("disabled"); + + this.frame = win.document.getElementById("toolbox-iframe"); + this.emit("ready", this.frame); + + deferred.resolve(this.frame); + }; + + win.addEventListener("load", frameLoad, true); + win.addEventListener("unload", this._boundUnload); + + this._window = win; + + return deferred.promise; + }, + + /** + * Catch the user closing the window. + */ + _boundUnload: function (event) { + if (event.target.location != this.WINDOW_URL) { + return; + } + this._window.removeEventListener("unload", this._boundUnload); + + this.emit("window-closed"); + }, + + /** + * Raise the host. + */ + raise: function () { + this._window.focus(); + }, + + /** + * Set the toolbox title. + */ + setTitle: function (title) { + this._window.document.title = title; + }, + + /** + * Destroy the window. + */ + destroy: function () { + if (!this._destroyed) { + this._destroyed = true; + + this._window.removeEventListener("unload", this._boundUnload); + this._window.close(); + } + + return promise.resolve(null); + } +}; + +/** + * Host object for the toolbox in its own tab + */ +function CustomHost(hostTab, options) { + this.frame = options.customIframe; + this.uid = options.uid; + EventEmitter.decorate(this); +} + +CustomHost.prototype = { + type: "custom", + + _sendMessageToTopWindow: function (msg, data) { + // It's up to the custom frame owner (parent window) to honor + // "close" or "raise" instructions. + let topWindow = this.frame.ownerDocument.defaultView; + if (!topWindow) { + return; + } + let json = {name: "toolbox-" + msg, uid: this.uid}; + if (data) { + json.data = data; + } + topWindow.postMessage(JSON.stringify(json), "*"); + }, + + /** + * Create a new xul window to contain the toolbox. + */ + create: function () { + return promise.resolve(this.frame); + }, + + /** + * Raise the host. + */ + raise: function () { + this._sendMessageToTopWindow("raise"); + }, + + /** + * Set the toolbox title. + */ + setTitle: function (title) { + this._sendMessageToTopWindow("title", { value: title }); + }, + + /** + * Destroy the window. + */ + destroy: function () { + if (!this._destroyed) { + this._destroyed = true; + this._sendMessageToTopWindow("close"); + } + return promise.resolve(null); + } +}; + +/** + * Switch to the given tab in a browser and focus the browser window + */ +function focusTab(tab) { + let browserWindow = tab.ownerDocument.defaultView; + browserWindow.focus(); + browserWindow.gBrowser.selectedTab = tab; +} |