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

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";

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;
 }

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 =>

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;
+}

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;

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;
+}

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;

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',
 )