Bug 1483497 - Store network runtimes in the state;r=daisuke,ladybenko
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 30 Aug 2018 19:05:55 +0200
changeset 484999 b9f9a083733e2c39ade69b0c3e684000bd8a3f2e
parent 484998 b8885c91286377615d7417aa8a7432b01172116e
child 485000 1c60dbe0176e7801714caeee8c6f805d3c9e5c2d
push id241
push userfmarier@mozilla.com
push dateMon, 24 Sep 2018 21:48:02 +0000
reviewersdaisuke, ladybenko
bugs1483497
milestone64.0a1
Bug 1483497 - Store network runtimes in the state;r=daisuke,ladybenko
devtools/client/aboutdebugging-new/aboutdebugging.js
devtools/client/aboutdebugging-new/src/components/App.js
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/src/constants.js
devtools/client/aboutdebugging-new/src/create-store.js
devtools/client/aboutdebugging-new/src/reducers/index.js
devtools/client/aboutdebugging-new/src/reducers/moz.build
devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
--- a/devtools/client/aboutdebugging-new/aboutdebugging.js
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.js
@@ -53,16 +53,18 @@ const AboutDebugging = {
     const messageContexts = await this.createMessageContexts();
 
     render(
       Provider({ store: this.store }, App({ messageContexts })),
       this.mount
     );
 
     this.actions.selectPage(PAGES.THIS_FIREFOX);
+    this.actions.updateNetworkLocations(getNetworkLocations());
+
     addNetworkLocationsObserver(this.onNetworkLocationsUpdated);
   },
 
   async createMessageContexts() {
     // XXX Until the strings for the updated about:debugging stabilize, we
     // locate them outside the regular directory for locale resources so that
     // they don't get picked up by localization tools.
     if (!L10nRegistry.sources.has("aboutdebugging")) {
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -22,16 +22,17 @@ class App extends PureComponent {
   static get propTypes() {
     return {
       // 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.array.isRequired,
       selectedPage: PropTypes.string.isRequired,
     };
   }
 
   getSelectedPageComponent() {
     const { dispatch, networkLocations, selectedPage } = this.props;
 
     switch (selectedPage) {
@@ -44,33 +45,34 @@ class App extends PureComponent {
         return null;
     }
   }
 
   render() {
     const {
       dispatch,
       messageContexts,
-      networkLocations,
+      runtimes,
       selectedPage,
     } = this.props;
 
     return LocalizationProvider(
       { messages: messageContexts },
       dom.div(
         { className: "app" },
-        Sidebar({ dispatch, networkLocations, selectedPage }),
+        Sidebar({ dispatch, runtimes, selectedPage }),
         this.getSelectedPageComponent()
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
+    runtimes: state.runtimes,
     networkLocations: state.ui.networkLocations,
     selectedPage: state.ui.selectedPage,
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   dispatch,
 });
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -17,49 +17,49 @@ const DeviceSidebarItemAction = createFa
 const SidebarItem = createFactory(require("./SidebarItem"));
 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";
 
 class Sidebar extends PureComponent {
   static get propTypes() {
     return {
-      networkLocations: PropTypes.array.isRequired,
       dispatch: PropTypes.func.isRequired,
+      runtimes: PropTypes.array.isRequired,
       selectedPage: PropTypes.string.isRequired,
     };
   }
 
   renderDevices() {
-    const { dispatch, networkLocations } = this.props;
-    if (!networkLocations.length) {
+    const { dispatch, runtimes } = this.props;
+    if (!runtimes.networkRuntimes.length) {
       return Localized(
         {
           id: "about-debugging-sidebar-no-devices"
         }, dom.span(
           {
             className: "sidebar__devices__no-devices-message"
           },
           "No devices discovered"
         )
       );
     }
 
-    return networkLocations.map(location => {
+    return runtimes.networkRuntimes.map(runtime => {
       const connectComponent = DeviceSidebarItemAction({
-        connected: false
+        connected: false,
       });
 
       return SidebarItem({
         connectComponent,
-        id: "networklocation-" + location,
+        id: "networklocation-" + runtime.id,
         dispatch,
         icon: GLOBE_ICON,
         isSelected: false,
-        name: location,
+        name: runtime.id,
         selectable: false,
       });
     });
   }
 
   render() {
     const { dispatch, selectedPage } = this.props;
 
--- a/devtools/client/aboutdebugging-new/src/constants.js
+++ b/devtools/client/aboutdebugging-new/src/constants.js
@@ -40,27 +40,32 @@ const DEBUG_TARGET_PANE = {
   TEMPORARY_EXTENSION: "temporaryExtension",
 };
 
 const PAGES = {
   THIS_FIREFOX: "this-firefox",
   CONNECT: "connect",
 };
 
+const RUNTIMES = {
+  NETWORK: "network",
+};
+
 const SERVICE_WORKER_FETCH_STATES = {
   LISTENING: "LISTENING",
   NOT_LISTENING: "NOT_LISTENING",
 };
 
 const SERVICE_WORKER_STATUSES = {
   RUNNING: "RUNNING",
   REGISTERING: "REGISTERING",
   STOPPED: "STOPPED",
 };
 
 // flatten constants
 module.exports = Object.assign({}, {
   DEBUG_TARGETS,
   DEBUG_TARGET_PANE,
   PAGES,
+  RUNTIMES,
   SERVICE_WORKER_FETCH_STATES,
   SERVICE_WORKER_STATUSES,
 }, actionTypes);
--- a/devtools/client/aboutdebugging-new/src/create-store.js
+++ b/devtools/client/aboutdebugging-new/src/create-store.js
@@ -4,28 +4,30 @@
 
 "use strict";
 
 const { applyMiddleware, createStore } = require("devtools/client/shared/vendor/redux");
 const { thunk } = require("devtools/client/shared/redux/middleware/thunk.js");
 
 const rootReducer = require("./reducers/index");
 const { RuntimeState } = require("./reducers/runtime-state");
+const { RuntimesState } = require("./reducers/runtimes-state");
 const { UiState } = require("./reducers/ui-state");
 const debugTargetListenerMiddleware = require("./middleware/debug-target-listener");
 const extensionComponentDataMiddleware = require("./middleware/extension-component-data");
 const tabComponentDataMiddleware = require("./middleware/tab-component-data");
 const workerComponentDataMiddleware = require("./middleware/worker-component-data");
 const { getDebugTargetCollapsibilities } = require("./modules/debug-target-collapsibilities");
 const { getNetworkLocations } = require("./modules/network-locations");
 
 function configureStore() {
   const initialState = {
     runtime: new RuntimeState(),
-    ui: getUiState()
+    runtimes: new RuntimesState(),
+    ui: getUiState(),
   };
 
   const middleware = applyMiddleware(thunk,
                                      debugTargetListenerMiddleware,
                                      extensionComponentDataMiddleware,
                                      tabComponentDataMiddleware,
                                      workerComponentDataMiddleware);
 
--- a/devtools/client/aboutdebugging-new/src/reducers/index.js
+++ b/devtools/client/aboutdebugging-new/src/reducers/index.js
@@ -1,14 +1,16 @@
 /* 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 { combineReducers } = require("devtools/client/shared/vendor/redux");
 const { runtimeReducer } = require("./runtime-state");
+const { runtimesReducer } = require("./runtimes-state");
 const { uiReducer } = require("./ui-state");
 
 module.exports = combineReducers({
   runtime: runtimeReducer,
+  runtimes: runtimesReducer,
   ui: uiReducer
 });
--- a/devtools/client/aboutdebugging-new/src/reducers/moz.build
+++ b/devtools/client/aboutdebugging-new/src/reducers/moz.build
@@ -1,9 +1,10 @@
 # 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/.
 
 DevToolsModules(
     'index.js',
     'runtime-state.js',
+    'runtimes-state.js',
     'ui-state.js',
 )
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
@@ -0,0 +1,39 @@
+/* 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 {
+  NETWORK_LOCATIONS_UPDATED,
+  RUNTIMES,
+} = require("../constants");
+
+function RuntimesState(networkRuntimes = []) {
+  return {
+    networkRuntimes
+  };
+}
+
+function runtimesReducer(state = RuntimesState(), action) {
+  switch (action.type) {
+    case NETWORK_LOCATIONS_UPDATED: {
+      const { locations } = action;
+      const networkRuntimes = locations.map(location => {
+        return {
+          id: location,
+          type: RUNTIMES.NETWORK,
+        };
+      });
+      return Object.assign({}, state, { networkRuntimes });
+    }
+
+    default:
+      return state;
+  }
+}
+
+module.exports = {
+  RuntimesState,
+  runtimesReducer,
+};