1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/framework/toolbox-hosts.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,337 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +const {Cu} = require("chrome");
1.11 +const EventEmitter = require("devtools/toolkit/event-emitter");
1.12 +const {Promise: promise} = require("resource://gre/modules/Promise.jsm");
1.13 +Cu.import("resource://gre/modules/Services.jsm");
1.14 +Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
1.15 +
1.16 +/**
1.17 + * A toolbox host represents an object that contains a toolbox (e.g. the
1.18 + * sidebar or a separate window). Any host object should implement the
1.19 + * following functions:
1.20 + *
1.21 + * create() - create the UI and emit a 'ready' event when the UI is ready to use
1.22 + * destroy() - destroy the host's UI
1.23 + */
1.24 +
1.25 +exports.Hosts = {
1.26 + "bottom": BottomHost,
1.27 + "side": SidebarHost,
1.28 + "window": WindowHost,
1.29 + "custom": CustomHost
1.30 +};
1.31 +
1.32 +/**
1.33 + * Host object for the dock on the bottom of the browser
1.34 + */
1.35 +function BottomHost(hostTab) {
1.36 + this.hostTab = hostTab;
1.37 +
1.38 + EventEmitter.decorate(this);
1.39 +}
1.40 +
1.41 +BottomHost.prototype = {
1.42 + type: "bottom",
1.43 +
1.44 + heightPref: "devtools.toolbox.footer.height",
1.45 +
1.46 + /**
1.47 + * Create a box at the bottom of the host tab.
1.48 + */
1.49 + create: function BH_create() {
1.50 + let deferred = promise.defer();
1.51 +
1.52 + let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
1.53 + let ownerDocument = gBrowser.ownerDocument;
1.54 +
1.55 + this._splitter = ownerDocument.createElement("splitter");
1.56 + this._splitter.setAttribute("class", "devtools-horizontal-splitter");
1.57 +
1.58 + this.frame = ownerDocument.createElement("iframe");
1.59 + this.frame.className = "devtools-toolbox-bottom-iframe";
1.60 + this.frame.height = Services.prefs.getIntPref(this.heightPref);
1.61 +
1.62 + this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
1.63 + this._nbox.appendChild(this._splitter);
1.64 + this._nbox.appendChild(this.frame);
1.65 +
1.66 + let frameLoad = function() {
1.67 + this.emit("ready", this.frame);
1.68 + deferred.resolve(this.frame);
1.69 + }.bind(this);
1.70 +
1.71 + this.frame.tooltip = "aHTMLTooltip";
1.72 +
1.73 + // we have to load something so we can switch documents if we have to
1.74 + this.frame.setAttribute("src", "about:blank");
1.75 +
1.76 + let domHelper = new DOMHelpers(this.frame.contentWindow);
1.77 + domHelper.onceDOMReady(frameLoad);
1.78 +
1.79 + focusTab(this.hostTab);
1.80 +
1.81 + return deferred.promise;
1.82 + },
1.83 +
1.84 + /**
1.85 + * Raise the host.
1.86 + */
1.87 + raise: function BH_raise() {
1.88 + focusTab(this.hostTab);
1.89 + },
1.90 +
1.91 + /**
1.92 + * Set the toolbox title.
1.93 + */
1.94 + setTitle: function BH_setTitle(title) {
1.95 + // Nothing to do for this host type.
1.96 + },
1.97 +
1.98 + /**
1.99 + * Destroy the bottom dock.
1.100 + */
1.101 + destroy: function BH_destroy() {
1.102 + if (!this._destroyed) {
1.103 + this._destroyed = true;
1.104 +
1.105 + Services.prefs.setIntPref(this.heightPref, this.frame.height);
1.106 + this._nbox.removeChild(this._splitter);
1.107 + this._nbox.removeChild(this.frame);
1.108 + }
1.109 +
1.110 + return promise.resolve(null);
1.111 + }
1.112 +}
1.113 +
1.114 +
1.115 +/**
1.116 + * Host object for the in-browser sidebar
1.117 + */
1.118 +function SidebarHost(hostTab) {
1.119 + this.hostTab = hostTab;
1.120 +
1.121 + EventEmitter.decorate(this);
1.122 +}
1.123 +
1.124 +SidebarHost.prototype = {
1.125 + type: "side",
1.126 +
1.127 + widthPref: "devtools.toolbox.sidebar.width",
1.128 +
1.129 + /**
1.130 + * Create a box in the sidebar of the host tab.
1.131 + */
1.132 + create: function SH_create() {
1.133 + let deferred = promise.defer();
1.134 +
1.135 + let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
1.136 + let ownerDocument = gBrowser.ownerDocument;
1.137 +
1.138 + this._splitter = ownerDocument.createElement("splitter");
1.139 + this._splitter.setAttribute("class", "devtools-side-splitter");
1.140 +
1.141 + this.frame = ownerDocument.createElement("iframe");
1.142 + this.frame.className = "devtools-toolbox-side-iframe";
1.143 + this.frame.width = Services.prefs.getIntPref(this.widthPref);
1.144 +
1.145 + this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
1.146 + this._sidebar.appendChild(this._splitter);
1.147 + this._sidebar.appendChild(this.frame);
1.148 +
1.149 + let frameLoad = function() {
1.150 + this.emit("ready", this.frame);
1.151 + deferred.resolve(this.frame);
1.152 + }.bind(this);
1.153 +
1.154 + this.frame.tooltip = "aHTMLTooltip";
1.155 + this.frame.setAttribute("src", "about:blank");
1.156 +
1.157 + let domHelper = new DOMHelpers(this.frame.contentWindow);
1.158 + domHelper.onceDOMReady(frameLoad);
1.159 +
1.160 + focusTab(this.hostTab);
1.161 +
1.162 + return deferred.promise;
1.163 + },
1.164 +
1.165 + /**
1.166 + * Raise the host.
1.167 + */
1.168 + raise: function SH_raise() {
1.169 + focusTab(this.hostTab);
1.170 + },
1.171 +
1.172 + /**
1.173 + * Set the toolbox title.
1.174 + */
1.175 + setTitle: function SH_setTitle(title) {
1.176 + // Nothing to do for this host type.
1.177 + },
1.178 +
1.179 + /**
1.180 + * Destroy the sidebar.
1.181 + */
1.182 + destroy: function SH_destroy() {
1.183 + if (!this._destroyed) {
1.184 + this._destroyed = true;
1.185 +
1.186 + Services.prefs.setIntPref(this.widthPref, this.frame.width);
1.187 + this._sidebar.removeChild(this._splitter);
1.188 + this._sidebar.removeChild(this.frame);
1.189 + }
1.190 +
1.191 + return promise.resolve(null);
1.192 + }
1.193 +}
1.194 +
1.195 +/**
1.196 + * Host object for the toolbox in a separate window
1.197 + */
1.198 +function WindowHost() {
1.199 + this._boundUnload = this._boundUnload.bind(this);
1.200 +
1.201 + EventEmitter.decorate(this);
1.202 +}
1.203 +
1.204 +WindowHost.prototype = {
1.205 + type: "window",
1.206 +
1.207 + WINDOW_URL: "chrome://browser/content/devtools/framework/toolbox-window.xul",
1.208 +
1.209 + /**
1.210 + * Create a new xul window to contain the toolbox.
1.211 + */
1.212 + create: function WH_create() {
1.213 + let deferred = promise.defer();
1.214 +
1.215 + let flags = "chrome,centerscreen,resizable,dialog=no";
1.216 + let win = Services.ww.openWindow(null, this.WINDOW_URL, "_blank",
1.217 + flags, null);
1.218 +
1.219 + let frameLoad = function(event) {
1.220 + win.removeEventListener("load", frameLoad, true);
1.221 + win.focus();
1.222 + this.frame = win.document.getElementById("toolbox-iframe");
1.223 + this.emit("ready", this.frame);
1.224 +
1.225 + deferred.resolve(this.frame);
1.226 + }.bind(this);
1.227 +
1.228 + win.addEventListener("load", frameLoad, true);
1.229 + win.addEventListener("unload", this._boundUnload);
1.230 +
1.231 + this._window = win;
1.232 +
1.233 + return deferred.promise;
1.234 + },
1.235 +
1.236 + /**
1.237 + * Catch the user closing the window.
1.238 + */
1.239 + _boundUnload: function(event) {
1.240 + if (event.target.location != this.WINDOW_URL) {
1.241 + return;
1.242 + }
1.243 + this._window.removeEventListener("unload", this._boundUnload);
1.244 +
1.245 + this.emit("window-closed");
1.246 + },
1.247 +
1.248 + /**
1.249 + * Raise the host.
1.250 + */
1.251 + raise: function RH_raise() {
1.252 + this._window.focus();
1.253 + },
1.254 +
1.255 + /**
1.256 + * Set the toolbox title.
1.257 + */
1.258 + setTitle: function WH_setTitle(title) {
1.259 + this._window.document.title = title;
1.260 + },
1.261 +
1.262 + /**
1.263 + * Destroy the window.
1.264 + */
1.265 + destroy: function WH_destroy() {
1.266 + if (!this._destroyed) {
1.267 + this._destroyed = true;
1.268 +
1.269 + this._window.removeEventListener("unload", this._boundUnload);
1.270 + this._window.close();
1.271 + }
1.272 +
1.273 + return promise.resolve(null);
1.274 + }
1.275 +};
1.276 +
1.277 +/**
1.278 + * Host object for the toolbox in its own tab
1.279 + */
1.280 +function CustomHost(hostTab, options) {
1.281 + this.frame = options.customIframe;
1.282 + this.uid = options.uid;
1.283 + EventEmitter.decorate(this);
1.284 +}
1.285 +
1.286 +CustomHost.prototype = {
1.287 + type: "custom",
1.288 +
1.289 + _sendMessageToTopWindow: function CH__sendMessageToTopWindow(msg, data) {
1.290 + // It's up to the custom frame owner (parent window) to honor
1.291 + // "close" or "raise" instructions.
1.292 + let topWindow = this.frame.ownerDocument.defaultView;
1.293 + let json = {name:"toolbox-" + msg, uid: this.uid};
1.294 + if (data) {
1.295 + json.data = data;
1.296 + }
1.297 + topWindow.postMessage(JSON.stringify(json), "*");
1.298 + },
1.299 +
1.300 + /**
1.301 + * Create a new xul window to contain the toolbox.
1.302 + */
1.303 + create: function CH_create() {
1.304 + return promise.resolve(this.frame);
1.305 + },
1.306 +
1.307 + /**
1.308 + * Raise the host.
1.309 + */
1.310 + raise: function CH_raise() {
1.311 + this._sendMessageToTopWindow("raise");
1.312 + },
1.313 +
1.314 + /**
1.315 + * Set the toolbox title.
1.316 + */
1.317 + setTitle: function CH_setTitle(title) {
1.318 + this._sendMessageToTopWindow("title", { value: title });
1.319 + },
1.320 +
1.321 + /**
1.322 + * Destroy the window.
1.323 + */
1.324 + destroy: function WH_destroy() {
1.325 + if (!this._destroyed) {
1.326 + this._destroyed = true;
1.327 + this._sendMessageToTopWindow("close");
1.328 + }
1.329 + return promise.resolve(null);
1.330 + }
1.331 +}
1.332 +
1.333 +/**
1.334 + * Switch to the given tab in a browser and focus the browser window
1.335 + */
1.336 +function focusTab(tab) {
1.337 + let browserWindow = tab.ownerDocument.defaultView;
1.338 + browserWindow.focus();
1.339 + browserWindow.gBrowser.selectedTab = tab;
1.340 +}
