Bug 1477597 - Part 3: Add debug button to tab list. r?jdescottes, r?ladybenko draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 25 Jul 2018 18:41:46 +0900
changeset 822435 bbf5b5448a01bfe843d8cffdf3ab625272614235
parent 822434 16c2c7fabe174774a8b170823c2c917a64c71c2b
child 822436 d1e03135f83e593680c782fa3edf0e1fba406057
push id117371
push userbmo:dakatsuka@mozilla.com
push dateWed, 25 Jul 2018 09:46:37 +0000
reviewersjdescottes, ladybenko
bugs1477597
milestone63.0a1
Bug 1477597 - Part 3: Add debug button to tab list. r?jdescottes, r?ladybenko MozReview-Commit-ID: 4N68cS2Cubu
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/App.js
devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TabAction.js
devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
devtools/client/aboutdebugging-new/src/runtimes/runtime.js
devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -1,12 +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/. */
 
+@import "chrome://global/skin/in-content/common.css";
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimesPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/runtime/RuntimeItem.css";
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -1,12 +1,21 @@
 /* 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/. */
 
+button {
+  height: 36px;
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  min-width: 100px;
+  padding-inline-start: 20px;
+  padding-inline-end: 20px;
+}
+
 ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .app {
   display: grid;
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -26,17 +26,17 @@ class App extends PureComponent {
   render() {
     const { selectedRuntime, thisFirefox } = this.props;
 
     return dom.div(
       {
         className: "app",
       },
       RuntimesPane({ selectedRuntime, thisFirefox }),
-      selectedRuntime ? DebugTargetsPane() : null
+      selectedRuntime ? DebugTargetsPane({ runtime: selectedRuntime }) : null
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
     selectedRuntime: state.runtimes.selectedRuntime,
   };
--- a/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
@@ -4,45 +4,50 @@
 
 "use strict";
 
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const Runtime = require("../runtimes/runtime");
 const Tab = require("../debugtargets/tab");
 
 const DebugTargetList = createFactory(require("./debugtarget/DebugTargetList"));
 const RuntimeInfo = createFactory(require("./RuntimeInfo"));
+const TabAction = createFactory(require("./debugtarget/TabAction"));
 const TabView = createFactory(require("./debugtarget/TabView"));
 
 class DebugTargetsPane extends PureComponent {
   static get propTypes() {
     return {
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
       runtimeInfo: PropTypes.object.isRequired,
       tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
     };
   }
 
   render() {
-    const { runtimeInfo, tabs } = this.props;
+    const { runtime, runtimeInfo, tabs } = this.props;
 
     return dom.section(
       {
         className: "debug-targets-pane",
       },
       dom.div(
         {
           className: "debug-targets-pane__contents",
         },
         RuntimeInfo({ runtimeInfo }),
         DebugTargetList({
           debugTargets: tabs,
+          debugTargetActionComponent: TabAction,
           debugTargetViewComponent: TabView,
+          runtime,
           title: "Tabs",
         }),
       )
     );
   }
 }
 
 const mapStateToProps = state => {
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -1,15 +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/. */
 
 .debug-target-item {
   display: grid;
-  grid-template-columns: 54px auto;
+  grid-template-columns: 54px auto max-content;
   margin-block-end: 20px;
 }
 
 .debug-target-item__icon {
   height: 36px;
   width: 36px;
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
@@ -4,28 +4,42 @@
 
 "use strict";
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const DebutTarget = require("../../debugtargets/debug-target");
+const Runtime = require("../../runtimes/runtime");
 
 /**
  * This component shows the debug target as item in DebugTargetsPane.
  */
 class DebugTargetItem extends PureComponent {
   static get propTypes() {
     return {
       debugTarget: PropTypes.instanceOf(DebutTarget).isRequired,
+      debugTargetActionComponent: PropTypes.any.isRequired,
       debugTargetViewComponent: PropTypes.any.isRequired,
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
     };
   }
 
+  renderAction() {
+    const { debugTarget, debugTargetActionComponent, runtime } = this.props;
+
+    return dom.div(
+      {
+        className: "debug-target-item__action",
+      },
+      debugTargetActionComponent({ debugTarget, runtime })
+    );
+  }
+
   renderIcon() {
     const { debugTarget } = this.props;
 
     return dom.img({
       className: "debug-target-item__icon",
       src: debugTarget.getIcon(),
     });
   }
@@ -55,13 +69,14 @@ class DebugTargetItem extends PureCompon
 
   render() {
     return dom.li(
       {
         className: "debug-target-item",
       },
       this.renderIcon(),
       this.renderInfo(),
+      this.renderAction(),
     );
   }
 }
 
 module.exports = DebugTargetItem;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
@@ -4,33 +4,42 @@
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const DebutTarget = require("../../debugtargets/debug-target");
+const Runtime = require("../../runtimes/runtime");
 
 const DebutTargetItem = createFactory(require("./DebugTargetItem"));
 
 /**
  * This component shows the debug target as list in DebugTargetsPane.
  */
 class DebugTargetList extends PureComponent {
   static get propTypes() {
     return {
+      debugTargetActionComponent: PropTypes.any.isRequired,
       debugTargetViewComponent: PropTypes.any.isRequired,
       debugTargets: PropTypes.arrayOf(PropTypes.instanceOf(DebutTarget)).isRequired,
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
       title: PropTypes.string.isRequired,
     };
   }
 
   render() {
-    const { debugTargetViewComponent, debugTargets, title } = this.props;
+    const {
+      debugTargetActionComponent,
+      debugTargetViewComponent,
+      debugTargets,
+      runtime,
+      title,
+    } = this.props;
 
     return dom.section(
       {
         className: "debug-target-list",
       },
       dom.h2(
         {
           className: "debug-target-list__title",
@@ -39,17 +48,19 @@ class DebugTargetList extends PureCompon
       ),
       dom.ul(
         {
           className: "debug-target-list__ul",
         },
         debugTargets.map(
           debugTarget => DebutTargetItem({
             debugTarget,
+            debugTargetActionComponent,
             debugTargetViewComponent,
+            runtime,
           })
         )
       )
     );
   }
 }
 
 module.exports = DebugTargetList;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TabAction.js
@@ -0,0 +1,40 @@
+/* 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 { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const Runtime = require("../../runtimes/runtime");
+const Tab = require("../../debugtargets/tab");
+
+/**
+ * This component provides inspect button for tab.
+ */
+class TabAction extends PureComponent {
+  static get propTypes() {
+    return {
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
+      debugTarget: PropTypes.instanceOf(Tab).isRequired,
+    };
+  }
+
+  inspect() {
+    const { debugTarget, runtime } = this.props;
+    runtime.inspectTab(debugTarget);
+  }
+
+  render() {
+    return dom.button(
+      {
+        onClick: e => this.inspect(),
+      },
+      "Inspect"
+    );
+  }
+}
+
+module.exports = TabAction;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/moz.build
@@ -2,10 +2,11 @@
 # 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(
     'DebugTargetItem.css',
     'DebugTargetItem.js',
     'DebugTargetList.css',
     'DebugTargetList.js',
+    'TabAction.js',
     'TabView.js',
 )
--- a/devtools/client/aboutdebugging-new/src/runtimes/runtime.js
+++ b/devtools/client/aboutdebugging-new/src/runtimes/runtime.js
@@ -54,11 +54,20 @@ class Runtime {
   /**
    * Return tabs on this runtime.
    * Subclass should override this method.
    * @return {Array}
    */
   async getTabs() {
     throw new Error("Subclass of Runtime should override getTabs()");
   }
+
+  /**
+   * Inspect the provided tab target which can get by getTabs().
+   * Subclass should override this method.
+   * @param {Tab} - debug target
+   */
+  async inspectTab(_) {
+    throw new Error("Subclass of Runtime should override inspectTab()");
+  }
 }
 
 module.exports = Runtime;
--- a/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
+++ b/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
@@ -40,11 +40,15 @@ class ThisFirefox extends Runtime {
       version: Services.appinfo.version,
     };
   }
 
   async getTabs() {
     const { tabs } = await this.client.listTabs({ favicons: true });
     return tabs.map(t => new Tab(t));
   }
+
+  async inspectTab(tab) {
+    window.open(`about:devtools-toolbox?type=tab&id=${ tab.target.outerWindowID }`);
+  }
 }
 
 module.exports = ThisFirefox;