Bug 1445197 - part 1: Create an application panel for DevTools;r=Honza,nchevobbe,sole

Register a new application panel, disabled by default, with no icon, no shortcut and hidden from the devtools options. Set devtools.application.enabled to true to enable it. MozReview-Commit-ID: L5PXZVDCRlF --HG-- extra : rebase_source : 465dd27241e81ee2f35794ce01cf0d06939e58f6
2018-03-14 21:21:02 +01:00 · 2018-03-14 21:21:02 +01:00 · d8d3951cb5
--- a/devtools/client/application/index.html
+++ b/devtools/client/application/index.html
@ -0,0 +1,13 @@
+<!-- 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/. -->
+<!DOCTYPE html>
+<html dir="">
+  <head>
+  </head>
+  <body class="theme-body" role="application">
+    <div id="mount"></div>
+    <script src="chrome://devtools/content/shared/theme-switching.js"></script>
+    <script src="initializer.js"></script>
+  </body>
+</html>
--- a/devtools/client/application/initializer.js
+++ b/devtools/client/application/initializer.js
@ -0,0 +1,36 @@
+/* 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 { BrowserLoader } = ChromeUtils.import("resource://devtools/client/shared/browser-loader.js", {});
+const require = window.windowRequire = BrowserLoader({
+  baseURI: "resource://devtools/client/application/",
+  window,
+}).require;
+
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const { render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
+
+const App = createFactory(require("./src/components/App"));
+
+/**
+ * Global Application object in this panel. This object is expected by panel.js and is
+ * called to start the UI for the panel.
+ */
+window.Application = {
+  bootstrap({ toolbox, panel }) {
+    this.mount = document.querySelector("#mount");
+
+    // Render the root Application component.
+    const app = App();
+
+    render(app, this.mount);
+  },
+
+  destroy() {
+    unmountComponentAtNode(this.mount);
+    this.mount = null;
+  },
+};
--- a/devtools/client/application/moz.build
+++ b/devtools/client/application/moz.build
@ -0,0 +1,11 @@
+# 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/.
+
+DIRS += [
+    'src',
+]
+
+DevToolsModules(
+    'panel.js'
+)
--- a/devtools/client/application/panel.js
+++ b/devtools/client/application/panel.js
@ -0,0 +1,49 @@
+/* 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";
+
+/**
+ * DevTools panel responsible for the application tool, which lists and allows to debug
+ * service workers.
+ */
+class ApplicationPanel {
+  /**
+   * Constructor.
+   *
+   * @param {Window} panelWin
+   *        The frame/window dedicated to this panel.
+   * @param {Toolbox} toolbox
+   *        The toolbox instance responsible for this panel.
+   */
+  constructor(panelWin, toolbox) {
+    this.panelWin = panelWin;
+    this.toolbox = toolbox;
+  }
+
+  async open() {
+    if (!this.toolbox.target.isRemote) {
+      await this.toolbox.target.makeRemote();
+    }
+
+    this.panelWin.Application.bootstrap({
+      toolbox: this.toolbox,
+      panel: this,
+    });
+    this.emit("ready");
+    this.isReady = true;
+    return this;
+  }
+
+  destroy() {
+    this.panelWin.Application.destroy();
+    this.panelWin = null;
+    this.toolbox = null;
+    this.emit("destroyed");
+
+    return this;
+  }
+}
+
+exports.ApplicationPanel = ApplicationPanel;
--- a/devtools/client/application/src/components/App.js
+++ b/devtools/client/application/src/components/App.js
@ -0,0 +1,18 @@
+/* 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 { Component } = require("devtools/client/shared/vendor/react");
+const { div } = require("devtools/client/shared/vendor/react-dom-factories");
+
+class App extends Component {
+  render() {
+    return (
+      div({className: "application"}, "application panel content")
+    );
+  }
+}
+
+module.exports = App;
--- a/devtools/client/application/src/components/moz.build
+++ b/devtools/client/application/src/components/moz.build
@ -0,0 +1,7 @@
+# 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/.
+
+DevToolsModules(
+    'App.js',
+)
--- a/devtools/client/application/src/moz.build
+++ b/devtools/client/application/src/moz.build
@ -0,0 +1,7 @@
+# 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/.
+
+DIRS += [
+    'components',
+]
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@ -25,6 +25,7 @@ loader.lazyGetter(this, "StoragePanel", () => require("devtools/client/storage/p
 loader.lazyGetter(this, "ScratchpadPanel", () => require("devtools/client/scratchpad/scratchpad-panel").ScratchpadPanel);
 loader.lazyGetter(this, "DomPanel", () => require("devtools/client/dom/dom-panel").DomPanel);
 loader.lazyGetter(this, "AccessibilityPanel", () => require("devtools/client/accessibility/accessibility-panel").AccessibilityPanel);
+loader.lazyGetter(this, "ApplicationPanel", () => require("devtools/client/application/panel").ApplicationPanel);

 // Other dependencies
 loader.lazyRequireGetter(this, "CommandUtils", "devtools/client/shared/developer-toolbar", true);
@ -444,6 +445,26 @@ Tools.accessibility = {
  }
 };

+Tools.application = {
+  id: "application",
+  ordinal: 15,
+  visibilityswitch: "devtools.application.enabled",
+  url: "chrome://devtools/content/application/index.html",
+  label: "Application",
+  panelLabel: "Application",
+  tooltip: "Application",
+  inMenu: false,
+  hiddenInOptions: true,
+
+  isTargetSupported: function(target) {
+    return target.isLocalTab;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new ApplicationPanel(iframeWindow, toolbox);
+  }
+};
+
 var defaultTools = [
  Tools.options,
  Tools.webConsole,
@ -460,6 +481,7 @@ var defaultTools = [
  Tools.memory,
  Tools.dom,
  Tools.accessibility,
+  Tools.application,
 ];

 exports.defaultTools = defaultTools;
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@ -301,6 +301,10 @@ devtools.jar:
    content/netmonitor/index.html (netmonitor/index.html)
    content/netmonitor/initializer.js (netmonitor/initializer.js)

+    # Application panel
+    content/application/index.html (application/index.html)
+    content/application/initializer.js (application/initializer.js)
+
    # Devtools-components
    skin/images/devtools-components/arrow.svg (themes/images/devtools-components/arrow.svg)

--- a/devtools/client/moz.build
+++ b/devtools/client/moz.build
@ -10,6 +10,7 @@ DIRS += [
    'aboutdebugging',
    'accessibility',
    'animationinspector',
+    'application',
    'canvasdebugger',
    'commandline',
    'debugger',
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@ -163,6 +163,9 @@ pref("devtools.serviceWorkers.testing.enabled", false);
 // Enable the Network Monitor
 pref("devtools.netmonitor.enabled", true);

+// Enable the Application panel
+pref("devtools.application.enabled", false);
+
 // The default Network Monitor UI settings
 pref("devtools.netmonitor.panes-network-details-width", 550);
 pref("devtools.netmonitor.panes-network-details-height", 450);