Bug 1471795 - Part 5: Implement basis of DebugTargetsPanel. r?jdescottes, r?ladybenko draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 19 Jul 2018 15:17:17 +0900
changeset 820254 e7f11f4d838358ac6a96e06dfe586fca64015f39
parent 820253 ef0cf97ad9a6078964bc378c7fbc6f83ec2dd337
child 820255 3c24193c4d06cf211fb4c134133acefda34318c2
push id116772
push userbmo:dakatsuka@mozilla.com
push dateThu, 19 Jul 2018 09:51:56 +0000
reviewersjdescottes, ladybenko
bugs1471795
milestone63.0a1
Bug 1471795 - Part 5: Implement basis of DebugTargetsPanel. r?jdescottes, r?ladybenko MozReview-Commit-ID: HCzaxmm9vR
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.css
devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
devtools/client/aboutdebugging-new/src/components/moz.build
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -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/. */
 
 @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/RuntimesPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/runtime/ThisFirefoxItem.css";
 
 html, body, #mount {
   font-size: 15px;
   height: 100%;
   margin: 0;
   padding: 0;
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -4,11 +4,12 @@
 
 ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .app {
+  display: flex;
   height: 100%;
   width: 100%;
 }
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -7,16 +7,17 @@
 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 ThisFirefox = require("../runtimes/this-firefox");
 
+const DebugTargetsPane = createFactory(require("./DebugTargetsPane"));
 const RuntimesPane = createFactory(require("./RuntimesPane"));
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       selectedRuntime: PropTypes.instanceOf(Runtime),
       thisFirefox: PropTypes.instanceOf(ThisFirefox).isRequired,
     };
@@ -24,17 +25,18 @@ class App extends PureComponent {
 
   render() {
     const { selectedRuntime, thisFirefox } = this.props;
 
     return dom.div(
       {
         className: "app",
       },
-      RuntimesPane({ selectedRuntime, thisFirefox })
+      RuntimesPane({ selectedRuntime, thisFirefox }),
+      selectedRuntime ? DebugTargetsPane({ runtime: selectedRuntime }) : null
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
     selectedRuntime: state.runtimes.selectedRuntime,
   };
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.css
@@ -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/. */
+
+.debug-targets-pane {
+  flex: 1;
+  max-width: 800px;
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
@@ -0,0 +1,29 @@
+/* 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");
+
+class DebugTargetsPane extends PureComponent {
+  static get propTypes() {
+    return {
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
+    };
+  }
+
+  render() {
+    return dom.div(
+      {
+        className: "debug-targets-pane",
+      },
+    );
+  }
+}
+
+module.exports = DebugTargetsPane;
--- a/devtools/client/aboutdebugging-new/src/components/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/moz.build
@@ -4,11 +4,13 @@
 
 DIRS += [
     'runtime',
 ]
 
 DevToolsModules(
     'App.css',
     'App.js',
+    'DebugTargetsPane.css',
+    'DebugTargetsPane.js',
     'RuntimesPane.css',
     'RuntimesPane.js'
 )