From dd55540fd149debb98e9619d36a2c6eafd4d3d12 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 22 Jan 2016 15:11:10 -0600 Subject: [PATCH] Bug 1239437 - Add a basic viewport frame. r=pbrosset --- devtools/client/jar.mn | 2 + devtools/client/responsive.html/index.js | 17 ++++ devtools/client/responsive.html/index.xhtml | 18 +++++ devtools/client/responsive.html/manager.js | 86 +++++++++++++++++++-- 4 files changed, 118 insertions(+), 5 deletions(-) create mode 100644 devtools/client/responsive.html/index.js create mode 100644 devtools/client/responsive.html/index.xhtml diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 6e2abc0f3df..e2b202e9265 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -145,6 +145,8 @@ devtools.jar: content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml) content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css) content/aboutdebugging/aboutdebugging.js (aboutdebugging/aboutdebugging.js) + content/responsive.html/index.xhtml (responsive.html/index.xhtml) + content/responsive.html/index.js (responsive.html/index.js) % skin devtools classic/1.0 %skin/ skin/devtools-browser.css (themes/devtools-browser.css) skin/common.css (themes/common.css) diff --git a/devtools/client/responsive.html/index.js b/devtools/client/responsive.html/index.js new file mode 100644 index 00000000000..8b3a7ade8fa --- /dev/null +++ b/devtools/client/responsive.html/index.js @@ -0,0 +1,17 @@ +/* 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/. */ + +/* eslint-env browser */ + +"use strict"; + +window.addViewport = contentURI => { + try { + let frame = document.createElement("iframe"); + frame.setAttribute("src", contentURI); + document.body.appendChild(frame); + } catch (e) { + console.error(e); + } +}; diff --git a/devtools/client/responsive.html/index.xhtml b/devtools/client/responsive.html/index.xhtml new file mode 100644 index 00000000000..a494b97e4fd --- /dev/null +++ b/devtools/client/responsive.html/index.xhtml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + diff --git a/devtools/client/responsive.html/manager.js b/devtools/client/responsive.html/manager.js index 4db2c1678d5..eb12c13ff6c 100644 --- a/devtools/client/responsive.html/manager.js +++ b/devtools/client/responsive.html/manager.js @@ -5,8 +5,11 @@ "use strict"; const promise = require("promise"); +const { Task } = require("resource://gre/modules/Task.jsm"); const EventEmitter = require("devtools/shared/event-emitter"); +const TOOL_URL = "chrome://devtools/content/responsive.html/index.xhtml"; + /** * ResponsiveUIManager is the external API for the browser UI, etc. to use when * opening and closing the responsive UI. @@ -30,7 +33,8 @@ exports.ResponsiveUIManager = { */ toggle(window, tab) { if (this.isActiveForTab(tab)) { - this.activeTabs.get(tab).close(); + this.activeTabs.get(tab).destroy(); + this.activeTabs.delete(tab); } else { this.runIfNeeded(window, tab); } @@ -48,7 +52,7 @@ exports.ResponsiveUIManager = { */ runIfNeeded(window, tab) { if (!this.isActiveForTab(tab)) { - // TODO: Unimplemented + this.activeTabs.set(tab, new ResponsiveUI(window, tab)); } }, @@ -68,7 +72,8 @@ exports.ResponsiveUIManager = { * * @param tab * The browser tab. - * @return TODO: Some object! + * @return ResponsiveUI + * The UI instance for this tab. */ getResponsiveUIForTab(tab) { return this.activeTabs.get(tab); @@ -98,8 +103,8 @@ exports.ResponsiveUIManager = { break; case "resize off": if (this.isActiveForTab(tab)) { - // TODO: Probably the wrong API - this.activeTabs.get(tab).close(); + this.activeTabs.get(tab).destroy(); + this.activeTabs.delete(tab); } break; case "resize toggle": @@ -113,3 +118,74 @@ exports.ResponsiveUIManager = { // 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(exports.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.window = window; + this.tab = tab; + this.init(); +} + +ResponsiveUI.prototype = { + + /** + * The main browser chrome window (that holds many tabs). + */ + window: null, + + /** + * The specific browser tab this responsive instance is for. + */ + tab: null, + + /** + * For the moment, we open the tool by: + * 1. Recording the tab's URL + * 2. Navigating the tab to the tool + * 3. Passing along the URL to the tool to open in the viewport + * + * This approach is simple, but it also discards the user's state on the page. + * It's just like opening a fresh tab and pasting the URL. + * + * In the future, we can do better by using swapFrameLoaders to preserve the + * state. Platform discussions are in progress to make this happen. See + * bug 1238160 about