From 610cdb2857f6c26b7aac426723fe429daf04d2b1 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 13 Sep 2018 09:51:17 +0100 Subject: [PATCH] Bug 1489872 - Extract Steps and Section as components from ConnectPage;r=daisuke,ladybenko Summary: Depends on D5383. Section markup was duplicated for USB, WiFi and Network sections. Steps markup was duplicated for USB and WiFi sections. Extracted both as components, using props.children to pass their content. Extracted associated CSS. Reviewers: daisuke, ladybenko! Reviewed By: daisuke Bug #: 1489872 Differential Revision: https://phabricator.services.mozilla.com/D5384 --HG-- extra : rebase_source : 9ff87cd91d5dcdb4e1a78d226d0d7bdd440f7f64 --- .../aboutdebugging-new/aboutdebugging.css | 2 + .../src/components/connect/ConnectPage.css | 23 ---- .../src/components/connect/ConnectPage.js | 101 ++++++------------ .../src/components/connect/ConnectSection.css | 15 +++ .../src/components/connect/ConnectSection.js | 43 ++++++++ .../src/components/connect/ConnectSteps.css | 14 +++ .../src/components/connect/ConnectSteps.js | 33 ++++++ .../src/components/connect/moz.build | 4 + 8 files changed, 144 insertions(+), 91 deletions(-) create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css create mode 100644 devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js diff --git a/devtools/client/aboutdebugging-new/aboutdebugging.css b/devtools/client/aboutdebugging-new/aboutdebugging.css index c8ab3461474d..e74b9095c7d1 100644 --- a/devtools/client/aboutdebugging-new/aboutdebugging.css +++ b/devtools/client/aboutdebugging-new/aboutdebugging.css @@ -7,6 +7,8 @@ @import "resource://devtools/client/aboutdebugging-new/src/components/App.css"; @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css"; @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/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 d5a0605d0a13..8f87cecfacdd 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css @@ -2,29 +2,6 @@ * 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/. */ -.connect-page__steps { - line-height: 1.5em; - list-style-type: decimal; - margin-block-end: 20px; - margin-inline-start: 40px; -} - -.connect-page__step { - padding-inline-start: 20px; -} - -.connect-page__section__title { - display: flex; -} - -.connect-page__section__icon { - fill: currentColor; - height: 32px; - margin-inline-end: 5px; - width: 32px; - -moz-context-properties: fill; -} - .connect-page__network { max-width: 600px; } diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js index 669dbf19f75f..c29afefa2bfe 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js @@ -4,7 +4,7 @@ "use strict"; -const { PureComponent } = require("devtools/client/shared/vendor/react"); +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"); @@ -13,6 +13,9 @@ const { removeNetworkLocation } = require("../../modules/network-locations"); +const ConnectSection = createFactory(require("./ConnectSection")); +const ConnectSteps = createFactory(require("./ConnectSteps")); + const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg"; const WIFI_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg"; const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"; @@ -31,85 +34,47 @@ class ConnectPage extends PureComponent { }; } - renderSteps(steps) { - return dom.ul( - { - className: "connect-page__steps" - }, - steps.map(step => dom.li( - { - className: "connect-page__step" - }, - step) - ) - ); - } - renderWifi() { - return dom.section( - {}, - dom.h2( - { - className: "connect-page__section__title" - }, - dom.img( - { - className: "connect-page__section__icon", - src: WIFI_ICON_SRC - } - ), - "Via WiFi (Recommended)" - ), - this.renderSteps([ - "Ensure that your browser and device are on the same network", - "Open Firefox for Android", - "Go to Options -> Settings -> Advanced", - "Enable Remote Debugging via WiFi in the Developer Tools section", - ]) + return ConnectSection( + { + icon: WIFI_ICON_SRC, + title: "Via WiFi (Recommended)", + }, + ConnectSteps({ + steps: [ + "Ensure that your browser and device are on the same network", + "Open Firefox for Android", + "Go to Options -> Settings -> Advanced", + "Enable Remote Debugging via WiFi in the Developer Tools section", + ] + }) ); } renderUsb() { - return dom.section( - {}, - dom.h2( - { - className: "connect-page__section__title" - }, - dom.img( - { - className: "connect-page__section__icon", - src: USB_ICON_SRC - } - ), - "Via USB" - ), - this.renderSteps([ - "Enable Developer menu on your Android device", - "Enable USB Debugging on the Android Developer Menu", - "Connect the USB Device to your computer", - ]) + return ConnectSection( + { + icon: USB_ICON_SRC, + title: "Via USB", + }, + ConnectSteps({ + steps: [ + "Enable Developer menu on your Android device", + "Enable USB Debugging on the Android Developer Menu", + "Connect the USB Device to your computer", + ] + }) ); } renderNetwork() { const { networkLocations } = this.props; - return dom.section( + return ConnectSection( { - className: "connect-page__network" + className: "connect-page__network", + icon: GLOBE_ICON_SRC, + title: "Via Network Location", }, - dom.h2( - { - className: "connect-page__section__title" - }, - dom.img( - { - className: "connect-page__section__icon", - src: GLOBE_ICON_SRC - } - ), - "Via Network Location" - ), dom.ul( {}, networkLocations.map(location => diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css new file mode 100644 index 000000000000..24e632d0af7a --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css @@ -0,0 +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/. */ + +.connect-page__section__title { + display: flex; +} + +.connect-page__section__icon { + fill: currentColor; + height: 32px; + margin-inline-end: 5px; + width: 32px; + -moz-context-properties: fill; +} diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js new file mode 100644 index 000000000000..edc2f7e10eb5 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js @@ -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/. */ + +"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"); + +class ConnectSection extends PureComponent { + static get propTypes() { + return { + children: PropTypes.any.isRequired, + className: PropTypes.string, + icon: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + }; + } + + render() { + return dom.section( + { + className: this.props.className, + }, + dom.h2( + { + className: "connect-page__section__title" + }, + dom.img( + { + className: "connect-page__section__icon", + src: this.props.icon + } + ), + this.props.title + ), + this.props.children + ); + } +} + +module.exports = ConnectSection; diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css new file mode 100644 index 000000000000..653d5d2d6ab6 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css @@ -0,0 +1,14 @@ +/* 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/. */ + +.connect-page__steps { + line-height: 1.5em; + list-style-type: decimal; + margin-block-end: 20px; + margin-inline-start: 40px; +} + +.connect-page__step { + padding-inline-start: 20px; +} diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js new file mode 100644 index 000000000000..d9f026426cb3 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js @@ -0,0 +1,33 @@ +/* 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"); + +class ConnectSteps extends PureComponent { + static get propTypes() { + return { + steps: PropTypes.arrayOf(PropTypes.string).isRequired, + }; + } + + render() { + return dom.ul( + { + className: "connect-page__steps" + }, + this.props.steps.map(step => dom.li( + { + className: "connect-page__step" + }, + step) + ) + ); + } +} + +module.exports = ConnectSteps; diff --git a/devtools/client/aboutdebugging-new/src/components/connect/moz.build b/devtools/client/aboutdebugging-new/src/components/connect/moz.build index d10734af7dea..0c17a0d5b5a8 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/moz.build +++ b/devtools/client/aboutdebugging-new/src/components/connect/moz.build @@ -5,4 +5,8 @@ DevToolsModules( 'ConnectPage.css', 'ConnectPage.js', + 'ConnectSection.css', + 'ConnectSection.js', + 'ConnectSteps.css', + 'ConnectSteps.js', )