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
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\"]"
);