mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 19:25:43 +00:00
Bug 1477597 - Part 2: Show tabs. r=jdescottes
Differential Revision: https://phabricator.services.mozilla.com/D2763 --HG-- extra : rebase_source : 941023f857ec2e6ac907c6ad4a74260d66b73f65
This commit is contained in:
parent
671f2d73bd
commit
e6ba0ba4c2
@ -4,6 +4,8 @@
|
||||
|
||||
@import "chrome://global/skin/in-content/common.css";
|
||||
@import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
|
||||
@import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetItem.css";
|
||||
@import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetList.css";
|
||||
@import "resource://devtools/client/aboutdebugging-new/src/components/ConnectPage.css";
|
||||
@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
|
||||
@import "resource://devtools/client/aboutdebugging-new/src/components/Sidebar.css";
|
||||
@ -24,4 +26,4 @@ ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
@ -23,4 +23,5 @@
|
||||
|
||||
.page {
|
||||
padding-block-start: 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
@ -0,0 +1,43 @@
|
||||
/* 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/. */
|
||||
|
||||
.ellipsis-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*
|
||||
* The current layout of debug target item is
|
||||
*
|
||||
* +--------+--------------------+
|
||||
* | Icon | Information |
|
||||
* | |+------------------+|
|
||||
* | || Name ||
|
||||
* | |+------------------+|
|
||||
* | || Detail ||
|
||||
* | |+------------------+|
|
||||
* +--------+--------------------+
|
||||
*/
|
||||
.debug-target-item {
|
||||
display: grid;
|
||||
grid-template-columns: 54px auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
|
||||
.debug-target-item__icon {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.debug-target-item__info {
|
||||
/* so as to ellipsis */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.debug-target-item__info__name {
|
||||
font-size: 20px;
|
||||
margin-block-end: 2px;
|
||||
}
|
@ -0,0 +1,62 @@
|
||||
/* 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");
|
||||
|
||||
/**
|
||||
* This component displays debug target.
|
||||
*/
|
||||
class DebugTargetItem extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
icon: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
renderIcon() {
|
||||
return dom.img({
|
||||
className: "debug-target-item__icon",
|
||||
src: this.props.icon,
|
||||
});
|
||||
}
|
||||
|
||||
renderInfo() {
|
||||
return dom.div(
|
||||
{
|
||||
className: "debug-target-item__info",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "debug-target-item__info__name ellipsis-text",
|
||||
title: this.props.name,
|
||||
},
|
||||
this.props.name
|
||||
),
|
||||
dom.div(
|
||||
{
|
||||
className: "debug-target-item__info__url ellipsis-text",
|
||||
},
|
||||
this.props.url
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return dom.li(
|
||||
{
|
||||
className: "debug-target-item",
|
||||
},
|
||||
this.renderIcon(),
|
||||
this.renderInfo(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DebugTargetItem;
|
@ -0,0 +1,7 @@
|
||||
/* 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-list {
|
||||
margin-inline-start: 60px;
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
/* 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 { 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 DebugTargetItem = createFactory(require("./DebugTargetItem"));
|
||||
|
||||
/**
|
||||
* This component displays list of debug target.
|
||||
*/
|
||||
class DebugTargetList extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
targets: PropTypes.arrayOf(PropTypes.Object).isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { targets } = this.props;
|
||||
|
||||
return dom.ul(
|
||||
{
|
||||
className: "debug-target-list",
|
||||
},
|
||||
targets.map(target =>
|
||||
DebugTargetItem({
|
||||
icon: target.icon,
|
||||
name: target.name,
|
||||
url: target.url,
|
||||
})
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DebugTargetList;
|
@ -0,0 +1,35 @@
|
||||
/* 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 { 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 DebugTargetList = createFactory(require("./DebugTargetList"));
|
||||
|
||||
/**
|
||||
* This component provides list for debug target and name area.
|
||||
*/
|
||||
class DebugTargetPane extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
name: PropTypes.string.isRequired,
|
||||
targets: PropTypes.arrayOf(PropTypes.Object).isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { name, targets } = this.props;
|
||||
|
||||
return dom.section(
|
||||
{},
|
||||
dom.h2({}, name),
|
||||
DebugTargetList({ targets }),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DebugTargetPane;
|
@ -5,6 +5,7 @@
|
||||
.runtime-info {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-block-end: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
@ -9,6 +9,7 @@ const { createFactory, PureComponent } = require("devtools/client/shared/vendor/
|
||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
|
||||
const DebugTargetPane = createFactory(require("./DebugTargetPane"));
|
||||
const RuntimeInfo = createFactory(require("./RuntimeInfo"));
|
||||
|
||||
const Services = require("Services");
|
||||
@ -21,6 +22,8 @@ class RuntimePage extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { tabs } = this.props;
|
||||
|
||||
return dom.article(
|
||||
{
|
||||
className: "page",
|
||||
@ -30,6 +33,10 @@ class RuntimePage extends PureComponent {
|
||||
name: Services.appinfo.name,
|
||||
version: Services.appinfo.version,
|
||||
}),
|
||||
DebugTargetPane({
|
||||
name: "Tabs",
|
||||
targets: tabs
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -7,6 +7,11 @@ DevToolsModules(
|
||||
'App.js',
|
||||
'ConnectPage.css',
|
||||
'ConnectPage.js',
|
||||
'DebugTargetItem.css',
|
||||
'DebugTargetItem.js',
|
||||
'DebugTargetList.css',
|
||||
'DebugTargetList.js',
|
||||
'DebugTargetPane.js',
|
||||
'RuntimeInfo.css',
|
||||
'RuntimeInfo.js',
|
||||
'RuntimePage.js',
|
||||
|
@ -20,7 +20,7 @@ function runtimeReducer(state = RuntimeState(), action) {
|
||||
switch (action.type) {
|
||||
case CONNECT_RUNTIME_SUCCESS: {
|
||||
const { client, tabs } = action;
|
||||
return { client, tabs };
|
||||
return { client, tabs: toTabComponentData(tabs) };
|
||||
}
|
||||
case DISCONNECT_RUNTIME_SUCCESS: {
|
||||
return RuntimeState();
|
||||
@ -31,6 +31,17 @@ function runtimeReducer(state = RuntimeState(), action) {
|
||||
}
|
||||
}
|
||||
|
||||
function toTabComponentData(tabs) {
|
||||
return tabs.map(tab => {
|
||||
const icon = tab.favicon
|
||||
? `data:image/png;base64,${ btoa(String.fromCharCode.apply(String, tab.favicon)) }`
|
||||
: "chrome://devtools/skin/images/globe.svg";
|
||||
const name = tab.title || tab.url;
|
||||
const url = tab.url;
|
||||
return { icon, name, url };
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
RuntimeState,
|
||||
runtimeReducer,
|
||||
|
Loading…
Reference in New Issue
Block a user