Bug 1497099: Use common runtime PropTypes. r=jdescottes
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 18 Oct 2018 00:48:54 +0000
changeset 490210 32cff4bae8200974970704733601e14345058a6f
parent 490209 0e8706e5d2ffc8a43f45ae6a7f6e6b286e44e3ca
child 490211 7e125b229e2990eeeae27927415ca5ea4a9ed77e
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersjdescottes
bugs1497099
milestone64.0a1
Bug 1497099: Use common runtime PropTypes. r=jdescottes Differential Revision: https://phabricator.services.mozilla.com/D8795
devtools/client/aboutdebugging-new/src/components/App.js
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/src/moz.build
devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
devtools/client/aboutdebugging-new/src/types.js
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -8,33 +8,35 @@ const { connect } = require("devtools/cl
 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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
 
 const { PAGES } = require("../constants");
+const Types = require("../types");
 
 const ConnectPage = createFactory(require("./connect/ConnectPage"));
 const RuntimePage = createFactory(require("./RuntimePage"));
 const Sidebar = createFactory(require("./sidebar/Sidebar"));
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       adbAddonStatus: PropTypes.string,
       // The "dispatch" helper is forwarded to the App component via connect.
       // From that point, components are responsible for forwarding the dispatch
       // property to all components who need to dispatch actions.
       dispatch: PropTypes.func.isRequired,
       messageContexts: PropTypes.arrayOf(PropTypes.object).isRequired,
       networkLocations: PropTypes.arrayOf(PropTypes.string).isRequired,
-      runtimes: PropTypes.object.isRequired,
+      networkRuntimes: PropTypes.arrayOf(Types.runtime).isRequired,
       selectedPage: PropTypes.string,
+      usbRuntimes: PropTypes.arrayOf(Types.runtime).isRequired,
     };
   }
 
   getSelectedPageComponent() {
     const { dispatch, networkLocations, selectedPage } = this.props;
 
     if (!selectedPage) {
       // No page selected.
@@ -50,48 +52,51 @@ class App extends PureComponent {
     }
   }
 
   render() {
     const {
       adbAddonStatus,
       dispatch,
       messageContexts,
-      runtimes,
+      networkRuntimes,
       selectedPage,
+      usbRuntimes,
     } = this.props;
 
     return LocalizationProvider(
       { messages: messageContexts },
       dom.div(
         { className: "app" },
         Sidebar(
           {
             adbAddonStatus,
             className: "app__sidebar",
             dispatch,
-            runtimes,
-            selectedPage
+            networkRuntimes,
+            selectedPage,
+            usbRuntimes,
           }
         ),
         dom.main(
           { className: "app__content" },
           this.getSelectedPageComponent()
         )
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
     adbAddonStatus: state.ui.adbAddonStatus,
-    runtimes: state.runtimes,
     networkLocations: state.ui.networkLocations,
+    networkRuntimes: state.runtimes.networkRuntimes,
     selectedPage: state.ui.selectedPage,
+    usbRuntimes: state.runtimes.usbRuntimes,
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   dispatch,
 });
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(App);
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -7,33 +7,35 @@
 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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
 const { PAGES, RUNTIMES } = require("../../constants");
+const Types = require("../../types");
 loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
 
 const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
 const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
 const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
 const CONNECT_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 const GLOBE_ICON = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 const USB_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 
 class Sidebar extends PureComponent {
   static get propTypes() {
     return {
       adbAddonStatus: PropTypes.string,
       className: PropTypes.string,
       dispatch: PropTypes.func.isRequired,
-      runtimes: PropTypes.object.isRequired,
+      networkRuntimes: PropTypes.arrayOf(Types.runtime).isRequired,
       selectedPage: PropTypes.string,
+      usbRuntimes: PropTypes.arrayOf(Types.runtime).isRequired,
     };
   }
 
   renderAdbAddonStatus() {
     const isAddonInstalled = this.props.adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
     const localizationId = isAddonInstalled ? "about-debugging-sidebar-usb-enabled" :
                                               "about-debugging-sidebar-usb-disabled";
     return Localized(
@@ -44,33 +46,33 @@ class Sidebar extends PureComponent {
           className: "sidebar__devices__message js-sidebar-usb-status"
         },
         localizationId
       )
     );
   }
 
   renderDevices() {
-    const { runtimes } = this.props;
-    if (!runtimes.networkRuntimes.length && !runtimes.usbRuntimes.length) {
+    const { networkRuntimes, usbRuntimes } = this.props;
+    if (!networkRuntimes.length && !usbRuntimes.length) {
       return Localized(
         {
           id: "about-debugging-sidebar-no-devices"
         }, dom.aside(
           {
             className: "sidebar__devices__message js-sidebar-no-devices"
           },
           "No devices discovered"
         )
       );
     }
 
     return [
-      ...this.renderSidebarItems(GLOBE_ICON, runtimes.networkRuntimes),
-      ...this.renderSidebarItems(USB_ICON, runtimes.usbRuntimes),
+      ...this.renderSidebarItems(GLOBE_ICON, networkRuntimes),
+      ...this.renderSidebarItems(USB_ICON, usbRuntimes),
     ];
   }
 
   renderSidebarItems(icon, runtimes) {
     const { dispatch, selectedPage } = this.props;
 
     return runtimes.map(runtime => {
       const pageId = runtime.type + "-" + runtime.id;
--- a/devtools/client/aboutdebugging-new/src/moz.build
+++ b/devtools/client/aboutdebugging-new/src/moz.build
@@ -8,9 +8,10 @@ DIRS += [
     'middleware',
     'modules',
     'reducers',
 ]
 
 DevToolsModules(
     'constants.js',
     'create-store.js',
+    'types.js',
 )
--- a/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
+++ b/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
@@ -26,16 +26,17 @@ const TYPE_TO_RUNTIMES_KEY = {
 };
 
 function RuntimesState() {
   return {
     networkRuntimes: [],
     selectedRuntimeId: null,
     thisFirefoxRuntimes: [{
       id: RUNTIMES.THIS_FIREFOX,
+      name: "This Firefox",
       type: RUNTIMES.THIS_FIREFOX,
     }],
     usbRuntimes: [],
   };
 }
 
 /**
  * Update the runtime matching the provided runtimeId with the content of updatedRuntime,
@@ -79,17 +80,17 @@ function runtimesReducer(state = Runtime
 
     case NETWORK_LOCATIONS_UPDATED: {
       const { locations } = action;
       const networkRuntimes = locations.map(location => {
         const [ host, port ] = location.split(":");
         return {
           id: location,
           extra: {
-            connectionParameters: { host, port },
+            connectionParameters: { host, port: parseInt(port, 10) },
           },
           name: location,
           type: RUNTIMES.NETWORK,
         };
       });
       return Object.assign({}, state, { networkRuntimes });
     }
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/types.js
@@ -0,0 +1,89 @@
+/* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const runtimeInfo = {
+  // device name which is running the runtime,
+  // unavailable on this-firefox runtime
+  deviceName: PropTypes.string,
+
+  // icon which represents the kind of runtime
+  icon: PropTypes.string.isRequired,
+
+  // name of runtime such as "Firefox Nightly"
+  name: PropTypes.string.isRequired,
+
+  // version of runtime
+  version: PropTypes.string.isRequired,
+};
+
+const runtimeTransportDetails = {
+  // host name of tcp connection to debugger server
+  host: PropTypes.string.isRequired,
+
+  // port number of tcp connection to debugger server
+  port: PropTypes.number.isRequired,
+};
+
+const runtimeConnection = {
+  // debugger client instance
+  client: PropTypes.object.isRequired,
+
+  // runtime information
+  info: PropTypes.shape(runtimeInfo).isRequired,
+
+  // tcp connection information,
+  // unavailable on this-firefox runtime
+  transportDetails: PropTypes.shape(runtimeTransportDetails),
+};
+
+const networkRuntimeConnectionParameter = {
+  // host name of debugger server to connect
+  host: PropTypes.string.isRequired,
+
+  // port number of debugger server to connect
+  port: PropTypes.number.isRequired,
+};
+
+const usbRuntimeConnectionParameter = {
+  // socket path to connect debugger server
+  socketPath: PropTypes.string.isRequired,
+};
+
+const runtimeExtra = {
+  // parameter to connect to debugger server
+  connectionParameters: PropTypes.oneOfType([
+    PropTypes.shape(networkRuntimeConnectionParameter),
+    PropTypes.shape(usbRuntimeConnectionParameter)
+  ]).isRequired,
+
+  // device name, only available on USB devices
+  deviceName: PropTypes.string,
+};
+
+const runtime = {
+  // unique id for the runtime
+  id: PropTypes.string.isRequired,
+
+  // available after the connection to the runtime is established
+  connection: PropTypes.shape(runtimeConnection),
+
+  // object containing non standard properties that depend on the runtime type,
+  // unavailable on this-firefox runtime
+  extra: PropTypes.shape(runtimeExtra),
+
+  // display name of the runtime
+  name: PropTypes.string.isRequired,
+
+  // runtime type, for instance "network", "usb" ...
+  type: PropTypes.string.isRequired,
+};
+
+/**
+ * Export type of runtime
+ */
+exports.runtime = PropTypes.shape(runtime);