Bug 1471795 - Part 5: Implement basis of DebugTargetsPanel. r?jdescottes, r?ladybenko
MozReview-Commit-ID: HCzaxmm9vR
--- 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'
)