Bug 1427997 - add processes category to about:debugging;r=ochameau
MozReview-Commit-ID: GDMgX3PGYq3
--- a/devtools/client/aboutdebugging/components/Aboutdebugging.js
+++ b/devtools/client/aboutdebugging/components/Aboutdebugging.js
@@ -12,16 +12,18 @@ const dom = require("devtools/client/sha
const Services = require("Services");
const PanelMenu = createFactory(require("./PanelMenu"));
loader.lazyGetter(this, "AddonsPanel",
() => createFactory(require("./addons/Panel")));
loader.lazyGetter(this, "TabsPanel",
() => createFactory(require("./tabs/Panel")));
+loader.lazyGetter(this, "ProcessesPanel",
+ () => createFactory(require("./processes/Panel")));
loader.lazyGetter(this, "WorkersPanel",
() => createFactory(require("./workers/Panel")));
loader.lazyRequireGetter(this, "DebuggerClient",
"devtools/shared/client/debugger-client", true);
loader.lazyRequireGetter(this, "Telemetry",
"devtools/client/shared/telemetry");
@@ -29,16 +31,21 @@ const Strings = Services.strings.createB
"chrome://devtools/locale/aboutdebugging.properties");
const panels = [{
id: "addons",
name: Strings.GetStringFromName("addons"),
icon: "chrome://devtools/skin/images/debugging-addons.svg",
component: AddonsPanel
}, {
+ id: "processes",
+ name: Strings.GetStringFromName("processes"),
+ icon: "chrome://devtools/skin/images/debugging-processes.svg",
+ component: ProcessesPanel
+}, {
id: "tabs",
name: Strings.GetStringFromName("tabs"),
icon: "chrome://devtools/skin/images/debugging-tabs.svg",
component: TabsPanel
}, {
id: "workers",
name: Strings.GetStringFromName("workers"),
icon: "chrome://devtools/skin/images/debugging-workers.svg",
--- a/devtools/client/aboutdebugging/components/moz.build
+++ b/devtools/client/aboutdebugging/components/moz.build
@@ -1,14 +1,15 @@
# 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 += [
'addons',
+ 'processes',
'tabs',
'workers',
]
DevToolsModules(
'Aboutdebugging.js',
'PanelHeader.js',
'PanelMenu.js',
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/processes/Panel.js
@@ -0,0 +1,88 @@
+/* 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";
+
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const Services = require("Services");
+
+const PanelHeader = createFactory(require("../PanelHeader"));
+const TargetList = createFactory(require("../TargetList"));
+const ProcessTarget = createFactory(require("./Target"));
+
+loader.lazyRequireGetter(this, "DebuggerClient",
+ "devtools/shared/client/debugger-client", true);
+
+const Strings = Services.strings.createBundle(
+ "chrome://devtools/locale/aboutdebugging.properties");
+
+class TabsPanel extends Component {
+ static get propTypes() {
+ return {
+ client: PropTypes.instanceOf(DebuggerClient).isRequired,
+ connect: PropTypes.object,
+ id: PropTypes.string.isRequired
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ processes: []
+ };
+
+ this.update = this.update.bind(this);
+ }
+
+ componentDidMount() {
+ let { client } = this.props;
+ client.addListener("processListChanged", this.update);
+ this.update();
+ }
+
+ componentWillUnmount() {
+ let { client } = this.props;
+ client.removeListener("processListChanged", this.update);
+ }
+
+ async update() {
+ let { processes } = await this.props.client.mainRoot.listProcesses();
+ this.setState({ processes });
+ }
+
+ render() {
+ let { client, connect, id } = this.props;
+ let { processes } = this.state;
+
+ return dom.div({
+ id: id + "-panel",
+ className: "panel",
+ role: "tabpanel",
+ "aria-labelledby": id + "-header"
+ },
+ PanelHeader({
+ id: id + "-header",
+ name: Strings.GetStringFromName("processes")
+ }),
+ dom.div({
+ className: "inverted-icons"
+ },
+ TargetList({
+ client,
+ connect,
+ id: "processes",
+ sort: false,
+ targetClass: ProcessTarget,
+ targets: processes
+ })
+ ));
+ }
+}
+
+module.exports = TabsPanel;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/processes/Target.js
@@ -0,0 +1,69 @@
+/* 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";
+
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const Services = require("Services");
+
+const Strings = Services.strings.createBundle(
+ "chrome://devtools/locale/aboutdebugging.properties");
+
+class ProcessTarget extends Component {
+ static get propTypes() {
+ return {
+ connect: PropTypes.object,
+ target: PropTypes.shape({
+ id: PropTypes.number,
+ }).isRequired
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.debug = this.debug.bind(this);
+ }
+
+ debug() {
+ let { target, connect } = this.props;
+ let url = "about:devtools-toolbox?type=process&id=" + target.id;
+ if (connect.type == "REMOTE") {
+ let {host, port} = connect.params;
+ url += `&host=${encodeURIComponent(host)}&port=${encodeURIComponent(port)}`;
+ }
+ window.open(url);
+ }
+
+ render() {
+ let { target } = this.props;
+
+ let type = target.parent ? Strings.GetStringFromName("processes.process.parentType") :
+ Strings.GetStringFromName("processes.process.contentType");
+
+ let name = Strings.formatStringFromName("processes.process.label",
+ [target.id, type], 2);
+
+ return dom.li({ className: "target-container" },
+ dom.img({
+ className: "target-icon",
+ role: "presentation",
+ src: "chrome://devtools/skin/images/debugging-processes.svg"
+ }),
+ dom.div({ className: "target" },
+ dom.div({ className: "target-name", title: name }, name)
+ ),
+ dom.button({
+ className: "debug-button",
+ onClick: this.debug,
+ }, Strings.GetStringFromName("debug"))
+ );
+ }
+}
+
+module.exports = ProcessTarget;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/processes/moz.build
@@ -0,0 +1,8 @@
+# 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(
+ 'Panel.js',
+ 'Target.js',
+)
\ No newline at end of file
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -194,16 +194,17 @@ devtools.jar:
skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
skin/images/dock-side.svg (themes/images/dock-side.svg)
skin/images/dock-undock.svg (themes/images/dock-undock.svg)
skin/floating-scrollbars-dark-theme.css (themes/floating-scrollbars-dark-theme.css)
skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
skin/inspector.css (themes/inspector.css)
skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)
+ skin/images/debugging-processes.svg (themes/images/debugging-processes.svg)
skin/images/debugging-tabs.svg (themes/images/debugging-tabs.svg)
skin/images/debugging-workers.svg (themes/images/debugging-workers.svg)
skin/images/gcli_sec_bad.svg (themes/images/gcli_sec_bad.svg)
skin/images/gcli_sec_good.svg (themes/images/gcli_sec_good.svg)
skin/images/gcli_sec_moderate.svg (themes/images/gcli_sec_moderate.svg)
skin/images/globe.svg (themes/images/globe.svg)
skin/images/sad-face.svg (themes/images/sad-face.svg)
skin/images/tool-options.svg (themes/images/tool-options.svg)
--- a/devtools/client/locales/en-US/aboutdebugging.properties
+++ b/devtools/client/locales/en-US/aboutdebugging.properties
@@ -149,16 +149,25 @@ running = Running
stopped = Stopped
# LOCALIZATION NOTE (registering):
# This string is displayed as the state of a service worker for which no service worker
# registration could be found yet. Only active registrations are visible from
# about:debugging, so such service workers are considered as registering.
registering = Registering
+# LOCALIZATION NOTE (processes):
+# This string is displayed as a header of the about:debugging#processes page.
+processes = Processes
+
+processes.process.label = Process #%S (%S)
+
+processes.process.parentType = Parent
+processes.process.contentType = Content
+
# LOCALIZATION NOTE (tabs):
# This string is displayed as a header of the about:debugging#tabs page.
tabs = Tabs
# LOCALIZATION NOTE (pageNotFound):
# This string is displayed as the main message at any error/invalid page.
pageNotFound = Page not found
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/debugging-processes.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M14 1a1 1 0 0 0-1 1v1.146A6.948 6.948 0 0 0 1.227 6.307a1 1 0 1 0 1.94.484A4.983 4.983 0 0 1 8 3a4.919 4.919 0 0 1 3.967 2H10a1 1 0 0 0 0 2h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm.046 7.481a1 1 0 0 0-1.213.728A4.983 4.983 0 0 1 8 13a4.919 4.919 0 0 1-3.967-2H6a1 1 0 0 0 0-2H2a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0v-1.146a6.948 6.948 0 0 0 11.773-3.161 1 1 0 0 0-.727-1.212z"></path>
+</svg>