From d153c92bde2c7e190a4de43357815cb56cc7886d Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 13 Sep 2018 09:51:21 +0100 Subject: [PATCH] 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 --- .../aboutdebugging-new/aboutdebugging.css | 2 + .../src/components/connect/ConnectPage.css | 33 --------- .../src/components/connect/ConnectPage.js | 72 ++----------------- .../connect/NetworkLocationsForm.css | 21 ++++++ .../connect/NetworkLocationsForm.js | 53 ++++++++++++++ .../connect/NetworkLocationsList.css | 18 +++++ .../connect/NetworkLocationsList.js | 50 +++++++++++++ .../src/components/connect/moz.build | 4 ++ 8 files changed, 153 insertions(+), 100 deletions(-) create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js diff --git a/devtools/client/aboutdebugging-new/aboutdebugging.css b/devtools/client/aboutdebugging-new/aboutdebugging.css index e74b9095c7d1..d31f43a61002 100644 --- a/devtools/client/aboutdebugging-new/aboutdebugging.css +++ b/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"; diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css index 8f87cecfacdd..990fa678db99 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css +++ b/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; -} diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js index c29afefa2bfe..5a9e33ab7c4f 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js +++ b/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(), ); } diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css new file mode 100644 index 000000000000..33eafe3b5d04 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css @@ -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; +} diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js new file mode 100644 index 000000000000..acaaedd3d46e --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.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/. */ + +"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; diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css new file mode 100644 index 000000000000..674204afb2f0 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css @@ -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; +} \ No newline at end of file diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js new file mode 100644 index 000000000000..ad8df59ed673 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js @@ -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; diff --git a/devtools/client/aboutdebugging-new/src/components/connect/moz.build b/devtools/client/aboutdebugging-new/src/components/connect/moz.build index 0c17a0d5b5a8..5f1e81c17908 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/moz.build +++ b/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', )