summaryrefslogtreecommitdiffstats
path: root/devtools/client/aboutdebugging/components/tabs
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/aboutdebugging/components/tabs')
-rw-r--r--devtools/client/aboutdebugging/components/tabs/moz.build8
-rw-r--r--devtools/client/aboutdebugging/components/tabs/panel.js98
-rw-r--r--devtools/client/aboutdebugging/components/tabs/target.js53
3 files changed, 159 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/components/tabs/moz.build b/devtools/client/aboutdebugging/components/tabs/moz.build
new file mode 100644
index 000000000..ee6a89e37
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/tabs/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',
+)
diff --git a/devtools/client/aboutdebugging/components/tabs/panel.js b/devtools/client/aboutdebugging/components/tabs/panel.js
new file mode 100644
index 000000000..e280ce7f1
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/tabs/panel.js
@@ -0,0 +1,98 @@
+/* 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 { createClass, createFactory, DOM: dom, PropTypes } =
+ require("devtools/client/shared/vendor/react");
+const Services = require("Services");
+
+const PanelHeader = createFactory(require("../panel-header"));
+const TargetList = createFactory(require("../target-list"));
+const TabTarget = createFactory(require("./target"));
+
+loader.lazyRequireGetter(this, "DebuggerClient",
+ "devtools/shared/client/main", true);
+
+const Strings = Services.strings.createBundle(
+ "chrome://devtools/locale/aboutdebugging.properties");
+
+module.exports = createClass({
+ displayName: "TabsPanel",
+
+ propTypes: {
+ client: PropTypes.instanceOf(DebuggerClient).isRequired,
+ id: PropTypes.string.isRequired
+ },
+
+ getInitialState() {
+ return {
+ tabs: []
+ };
+ },
+
+ componentDidMount() {
+ let { client } = this.props;
+ client.addListener("tabListChanged", this.update);
+ this.update();
+ },
+
+ componentWillUnmount() {
+ let { client } = this.props;
+ client.removeListener("tabListChanged", this.update);
+ },
+
+ update() {
+ this.props.client.mainRoot.listTabs().then(({ tabs }) => {
+ // Filter out closed tabs (represented as `null`).
+ tabs = tabs.filter(tab => !!tab);
+ tabs.forEach(tab => {
+ // FIXME Also try to fetch low-res favicon. But we should use actor
+ // support for this to get the high-res one (bug 1061654).
+ let url = new URL(tab.url);
+ if (url.protocol.startsWith("http")) {
+ let prePath = url.origin;
+ let idx = url.pathname.lastIndexOf("/");
+ if (idx === -1) {
+ prePath += url.pathname;
+ } else {
+ prePath += url.pathname.substr(0, idx);
+ }
+ tab.icon = prePath + "/favicon.ico";
+ } else {
+ tab.icon = "chrome://devtools/skin/images/globe.svg";
+ }
+ });
+ this.setState({ tabs });
+ });
+ },
+
+ render() {
+ let { client, id } = this.props;
+ let { tabs } = this.state;
+
+ return dom.div({
+ id: id + "-panel",
+ className: "panel",
+ role: "tabpanel",
+ "aria-labelledby": id + "-header"
+ },
+ PanelHeader({
+ id: id + "-header",
+ name: Strings.GetStringFromName("tabs")
+ }),
+ dom.div({},
+ TargetList({
+ client,
+ id: "tabs",
+ name: Strings.GetStringFromName("tabs"),
+ sort: false,
+ targetClass: TabTarget,
+ targets: tabs
+ })
+ ));
+ }
+});
diff --git a/devtools/client/aboutdebugging/components/tabs/target.js b/devtools/client/aboutdebugging/components/tabs/target.js
new file mode 100644
index 000000000..d946f8f61
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/tabs/target.js
@@ -0,0 +1,53 @@
+/* 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 { createClass, DOM: dom, PropTypes } =
+ require("devtools/client/shared/vendor/react");
+const Services = require("Services");
+
+const Strings = Services.strings.createBundle(
+ "chrome://devtools/locale/aboutdebugging.properties");
+
+module.exports = createClass({
+ displayName: "TabTarget",
+
+ propTypes: {
+ target: PropTypes.shape({
+ icon: PropTypes.string,
+ outerWindowID: PropTypes.number.isRequired,
+ title: PropTypes.string,
+ url: PropTypes.string.isRequired
+ }).isRequired
+ },
+
+ debug() {
+ let { target } = this.props;
+ window.open("about:devtools-toolbox?type=tab&id=" + target.outerWindowID);
+ },
+
+ render() {
+ let { target } = this.props;
+
+ return dom.div({ className: "target-container" },
+ dom.img({
+ className: "target-icon",
+ role: "presentation",
+ src: target.icon
+ }),
+ dom.div({ className: "target" },
+ // If the title is empty, display the url instead.
+ dom.div({ className: "target-name", title: target.url },
+ target.title || target.url)
+ ),
+ dom.button({
+ className: "debug-button",
+ onClick: this.debug,
+ }, Strings.GetStringFromName("debug"))
+ );
+ }
+});