Bug 1445197 - part 1: Create an application panel for DevTools;r=sole,nchevobbe,Honza draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 14 Mar 2018 21:21:02 +0100
changeset 785643 d7a8bdf5c58a485d8fdbc6d28a97edec1d1a12be
parent 785642 a7a1f359bc1324fe654b9b0c0de41d067b62e3e8
child 785644 419901fa6c9d503d460b878f555e1ef40cc19208
push id107291
push userjdescottes@mozilla.com
push dateFri, 20 Apr 2018 15:42:35 +0000
reviewerssole, nchevobbe, Honza
bugs1445197
milestone61.0a1
Bug 1445197 - part 1: Create an application panel for DevTools;r=sole,nchevobbe,Honza 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
devtools/client/application/index.html
devtools/client/application/initializer.js
devtools/client/application/moz.build
devtools/client/application/panel.js
devtools/client/application/src/components/App.js
devtools/client/application/src/components/moz.build
devtools/client/application/src/moz.build
devtools/client/definitions.js
devtools/client/jar.mn
devtools/client/moz.build
devtools/client/preferences/devtools-client.js
new file mode 100644
--- /dev/null
+++ 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>
new file mode 100644
--- /dev/null
+++ 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;
+  },
+};
new file mode 100644
--- /dev/null
+++ 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'
+)
new file mode 100644
--- /dev/null
+++ 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;
new file mode 100644
--- /dev/null
+++ 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;
new file mode 100644
--- /dev/null
+++ 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',
+)
new file mode 100644
--- /dev/null
+++ 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',
+]
\ No newline at end of file
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -20,16 +20,17 @@ loader.lazyGetter(this, "WebAudioEditorP
 loader.lazyGetter(this, "MemoryPanel", () => require("devtools/client/memory/panel").MemoryPanel);
 loader.lazyGetter(this, "PerformancePanel", () => require("devtools/client/performance/panel").PerformancePanel);
 loader.lazyGetter(this, "NewPerformancePanel", () => require("devtools/client/performance-new/panel").PerformancePanel);
 loader.lazyGetter(this, "NetMonitorPanel", () => require("devtools/client/netmonitor/panel").NetMonitorPanel);
 loader.lazyGetter(this, "StoragePanel", () => require("devtools/client/storage/panel").StoragePanel);
 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);
 loader.lazyRequireGetter(this, "CommandState", "devtools/shared/gcli/command-state", true);
 loader.lazyRequireGetter(this, "ResponsiveUIManager", "devtools/client/responsive.html/manager", true);
 loader.lazyImporter(this, "ScratchpadManager", "resource://devtools/client/scratchpad/scratchpad-manager.jsm");
 
 const {MultiLocalizationHelper} = require("devtools/shared/l10n");
@@ -439,32 +440,53 @@ Tools.accessibility = {
     return target.hasActor("accessibility");
   },
 
   build(iframeWindow, toolbox) {
     return new AccessibilityPanel(iframeWindow, toolbox);
   }
 };
 
+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,
   Tools.inspector,
   Tools.jsdebugger,
   Tools.styleEditor,
   Tools.shaderEditor,
   Tools.canvasDebugger,
   Tools.webAudioEditor,
   Tools.performance,
   Tools.netMonitor,
   Tools.storage,
   Tools.scratchpad,
   Tools.memory,
   Tools.dom,
   Tools.accessibility,
+  Tools.application,
 ];
 
 exports.defaultTools = defaultTools;
 
 Tools.darkTheme = {
   id: "dark",
   label: l10n("options.darkTheme.label2"),
   ordinal: 1,
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -296,14 +296,18 @@ devtools.jar:
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
     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)
 
     # Devtools-reps
     skin/images/devtools-reps/jump-definition.svg (themes/images/devtools-reps/jump-definition.svg)
     skin/images/devtools-reps/open-inspector.svg (themes/images/devtools-reps/open-inspector.svg)
--- a/devtools/client/moz.build
+++ b/devtools/client/moz.build
@@ -5,16 +5,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 include('../templates.mozbuild')
 
 DIRS += [
     'aboutdebugging',
     'accessibility',
     'animationinspector',
+    'application',
     'canvasdebugger',
     'commandline',
     'debugger',
     'dom',
     'framework',
     'inspector',
     'jsonview',
     'locales',
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -158,16 +158,19 @@ pref("devtools.performance.ui.experiment
 pref("devtools.cache.disabled", false);
 
 // The default service workers UI setting
 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);
 pref("devtools.netmonitor.filters", "[\"all\"]");
 pref("devtools.netmonitor.visibleColumns",
   "[\"status\",\"method\",\"file\",\"domain\",\"cause\",\"type\",\"transferred\",\"contentSize\",\"waterfall\"]"
 );