Bug 1477597 - Part 3: Add debug button to tab list. r?jdescottes, r?ladybenko
MozReview-Commit-ID: 4N68cS2Cubu
--- 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;