Bug 1445197 - part 1: Create an application panel for DevTools;r=Honza,nchevobbe,sole
☠☠ backed out by 582de61479ed ☠ ☠
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 14 Mar 2018 21:21:02 +0100
changeset 414354 eae47509bc27180cb10e993325ea3a127256c590
parent 414353 924aabc981b6136cf09cfc8df170ffd882dde8a3
child 414355 11f5214dc193f122ef4baea7ecaff19f315fdd59
push id62856
push userjdescottes@mozilla.com
push dateWed, 18 Apr 2018 20:27:44 +0000
treeherderautoland@422bbd33b4e3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, nchevobbe, sole
bugs1445197
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
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\"]"
 );