mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1489872 - Extract network locations list and form to dedicated components;r=daisuke,ladybenko 

Summary:
Depends on D5384. Straightforward extraction of networks list and form as
dedicated components. Related CSS extracted as well.

Reviewers: daisuke, ladybenko

Reviewed By: daisuke, ladybenko

Bug #: 1489872

Differential Revision: https://phabricator.services.mozilla.com/D5385

--HG--
extra : rebase_source : 20faf1cb920005374427af7e159a163bfff7bf7f
This commit is contained in:
Julian Descottes 2018-09-13 09:51:21 +01:00
Родитель 610cdb2857
Коммит d153c92bde
8 изменённых файлов: 153 добавлений и 100 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
devtools/client/aboutdebugging-new/aboutdebugging.css
Просмотреть файл

@ -9,6 +9,8 @@
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.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/debugtarget/DebugTargetPane.css";

33
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
Просмотреть файл

@ -10,36 +10,3 @@
margin-block-start: 20px;
margin-block-end: 20px;
}
/*
* Layout of a network location item
*
* +-------------------------------------+---------------+
* | Location (eg localhost:8080) | Remove button |
* +-------------------------------------+---------------+
*/
.connect-page__network-location {
display: grid;
grid-template-columns: auto max-content;
line-height: 36px;
margin-block-start: 4px;
margin-block-end: 4px;
}
/*
* Layout of a network location form
*
* +-------------+--------------------+------------+
* | "Host:port" | Input | Add button |
* +-------------+--------------------+------------+
*/
.connect-page__network-form {
display: grid;
grid-column-gap: 10px;
grid-template-columns: 100px auto max-content;
line-height: 36px;
}
.connect-page__network-form__input {
box-sizing: border-box;
}

72
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
Просмотреть файл

@ -8,13 +8,10 @@ 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 {
addNetworkLocation,
removeNetworkLocation
} = require("../../modules/network-locations");
const ConnectSection = createFactory(require("./ConnectSection"));
const ConnectSteps = createFactory(require("./ConnectSteps"));
const NetworkLocationsForm = createFactory(require("./NetworkLocationsForm"));
const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
const WIFI_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
@ -27,13 +24,6 @@ class ConnectPage extends PureComponent {
};
}
constructor(props) {
super(props);
this.state = {
locationInputValue: ""
};
}
renderWifi() {
return ConnectSection(
{
@ -75,61 +65,9 @@ class ConnectPage extends PureComponent {
icon: GLOBE_ICON_SRC,
title: "Via Network Location",
},
dom.ul(
{},
networkLocations.map(location =>
dom.li(
{
className: "connect-page__network-location"
},
dom.span(
{
className: "ellipsis-text"
},
location
),
dom.button(
{
className: "aboutdebugging-button",
onClick: () => removeNetworkLocation(location)
},
"Remove"
)
)
)
),
dom.hr(
{
className: "connect-page__network__separator"
}
),
dom.form(
{
className: "connect-page__network-form",
onSubmit: (e) => {
const locationInputValue = this.state.locationInputValue;
if (locationInputValue) {
addNetworkLocation(locationInputValue);
this.setState({ locationInputValue: "" });
}
e.preventDefault();
}
},
dom.span({}, "Host:port"),
dom.input({
className: "connect-page__network-form__input",
placeholder: "localhost:6080",
type: "text",
value: this.state.locationInputValue,
onChange: (e) => {
const locationInputValue = e.target.value;
this.setState({ locationInputValue });
}
}),
dom.button({
className: "aboutdebugging-button"
}, "Add")
)
NetworkLocationsList({ networkLocations }),
dom.hr({ className: "connect-page__network__separator" }),
NetworkLocationsForm(),
);
}

21
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css Normal file
Просмотреть файл

@ -0,0 +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/. */
/*
* Layout of a network location form
*
* +-------------+--------------------+------------+
* | "Host:port" | Input | Add button |
* +-------------+--------------------+------------+
*/
.connect-page__network-form {
display: grid;
grid-column-gap: 10px;
grid-template-columns: 100px auto max-content;
line-height: 36px;
}
.connect-page__network-form__input {
box-sizing: border-box;
}

53
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js Normal file
Просмотреть файл

@ -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/. */
"use strict";
const { PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const {
addNetworkLocation
} = require("../../modules/network-locations");
class NetworkLocationsForm extends PureComponent {
constructor(props) {
super(props);
this.state = {
value: ""
};
}
render() {
return dom.form(
{
className: "connect-page__network-form",
onSubmit: (e) => {
const { value } = this.state;
if (value) {
addNetworkLocation(value);
this.setState({ value: "" });
}
e.preventDefault();
}
},
dom.span({}, "Host:port"),
dom.input({
className: "connect-page__network-form__input",
placeholder: "localhost:6080",
type: "text",
value: this.state.value,
onChange: (e) => {
const value = e.target.value;
this.setState({ value });
}
}),
dom.button({
className: "aboutdebugging-button"
}, "Add")
);
}
}
module.exports = NetworkLocationsForm;

18
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css Normal file
Просмотреть файл

@ -0,0 +1,18 @@
/* 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/. */
/*
* Layout of a network location item
*
* +-------------------------------------+---------------+
* | Location (eg localhost:8080) | Remove button |
* +-------------------------------------+---------------+
*/
.connect-page__network-location {
display: grid;
grid-template-columns: auto max-content;
line-height: 36px;
margin-block-start: 4px;
margin-block-end: 4px;
}

50
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js Normal file
Просмотреть файл

@ -0,0 +1,50 @@
/* 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 {
removeNetworkLocation
} = require("../../modules/network-locations");
class NetworkLocationsList extends PureComponent {
static get propTypes() {
return {
dispatch: PropTypes.func.isRequired,
networkLocations: PropTypes.arrayOf(PropTypes.object).isRequired,
};
}
render() {
return dom.ul(
{},
this.props.networkLocations.map(location =>
dom.li(
{
className: "connect-page__network-location"
},
dom.span(
{
className: "ellipsis-text"
},
location
),
dom.button(
{
className: "aboutdebugging-button",
onClick: () => removeNetworkLocation(location)
},
"Remove"
)
)
)
);
}
}
module.exports = NetworkLocationsList;

4
devtools/client/aboutdebugging-new/src/components/connect/moz.build
Просмотреть файл

@ -9,4 +9,8 @@ DevToolsModules(
'ConnectSection.js',
'ConnectSteps.css',
'ConnectSteps.js',
'NetworkLocationsForm.css',
'NetworkLocationsForm.js',
'NetworkLocationsList.css',
'NetworkLocationsList.js',
)