Bug 1489872 - Extract network locations list and form to dedicated components;r=daisuke,ladybenko
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 13 Sep 2018 09:51:21 +0100
changeset 436140 a166a2766049928b7abbb326c72cb0bfa01430a8
parent 436139 71e883e80098866cfd4c40b7a5f375011f784888
child 436141 bed00eac89ba8935969fe4fe0e89d9fbe71eccee
push id107792
push userjdescottes@mozilla.com
push dateThu, 13 Sep 2018 10:19:47 +0000
treeherdermozilla-inbound@bed00eac89ba [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaisuke, ladybenko
bugs1489872
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
devtools/client/aboutdebugging-new/src/components/connect/moz.build
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -4,16 +4,18 @@
 
 @import "chrome://global/skin/in-content/common.css";
 @import "resource://devtools/client/themes/variables.css";
 @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/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";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
 
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
@@ -5,41 +5,8 @@
 .connect-page__network {
   max-width: 600px;
 }
 
 .connect-page__network__separator {
   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;
-}
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -3,42 +3,32 @@
  * 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 {
-  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";
 const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
 class ConnectPage extends PureComponent {
   static get propTypes() {
     return {
       networkLocations: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      locationInputValue: ""
-    };
-  }
-
   renderWifi() {
     return ConnectSection(
       {
         icon: WIFI_ICON_SRC,
         title: "Via WiFi (Recommended)",
       },
       ConnectSteps({
         steps: [
@@ -70,71 +60,19 @@ class ConnectPage extends PureComponent 
   renderNetwork() {
     const { networkLocations } = this.props;
     return ConnectSection(
       {
         className: "connect-page__network",
         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(),
     );
   }
 
   render() {
     return dom.article(
       {
         className: "page connect-page",
       },
new file mode 100644
--- /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;
+}
new file mode 100644
--- /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;
new file mode 100644
--- /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
new file mode 100644
--- /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;
--- a/devtools/client/aboutdebugging-new/src/components/connect/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/connect/moz.build
@@ -4,9 +4,13 @@
 
 DevToolsModules(
     'ConnectPage.css',
     'ConnectPage.js',
     'ConnectSection.css',
     'ConnectSection.js',
     'ConnectSteps.css',
     'ConnectSteps.js',
+    'NetworkLocationsForm.css',
+    'NetworkLocationsForm.js',
+    'NetworkLocationsList.css',
+    'NetworkLocationsList.js',
 )