Bug 1427997 - add processes category to about:debugging;r=ochameau draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 04 Jan 2018 12:40:04 +0100
changeset 716376 5987554e6f682e2dab7c7a56e51ba5c3f4153cdf
parent 715663 f78a83244fbebe8a469ae3512fce7f638cab7e1f
child 716377 f27e519f49c854af650849d9018e249eaecaaecb
push id94417
push userjdescottes@mozilla.com
push dateFri, 05 Jan 2018 16:23:46 +0000
reviewersochameau
bugs1427997
milestone59.0a1
Bug 1427997 - add processes category to about:debugging;r=ochameau MozReview-Commit-ID: GDMgX3PGYq3
devtools/client/aboutdebugging/components/Aboutdebugging.js
devtools/client/aboutdebugging/components/moz.build
devtools/client/aboutdebugging/components/processes/Panel.js
devtools/client/aboutdebugging/components/processes/Target.js
devtools/client/aboutdebugging/components/processes/moz.build
devtools/client/jar.mn
devtools/client/locales/en-US/aboutdebugging.properties
devtools/client/themes/images/debugging-processes.svg
--- 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>