Bug 1308260 - Part 3: Dispatch the new grid data and update the store with the new grid state. r=jryans
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 22 Nov 2016 02:07:09 +0800
changeset 323717 ca96b9d71ca33da24f09310c8df84125dbacd1b9
parent 323716 8423ee15c2f0d080a152454082863d8246d33adc
child 323718 b5541adf77a4eeb1f237828e1bd6b8076bafd1f3
push id21
push usermaklebus@msu.edu
push dateThu, 01 Dec 2016 06:22:08 +0000
reviewersjryans
bugs1308260
milestone53.0a1
Bug 1308260 - Part 3: Dispatch the new grid data and update the store with the new grid state. r=jryans
devtools/client/inspector/layout/actions/grids.js
devtools/client/inspector/layout/actions/index.js
devtools/client/inspector/layout/actions/moz.build
devtools/client/inspector/layout/layout.js
devtools/client/inspector/layout/reducers/grids.js
devtools/client/inspector/layout/types.js
devtools/client/responsive.html/actions/index.js
devtools/client/responsive.html/types.js
devtools/client/responsive.html/utils/enum.js
devtools/client/responsive.html/utils/moz.build
devtools/client/shared/enum.js
devtools/client/shared/moz.build
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/actions/grids.js
@@ -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/. */
+
+"use strict";
+
+const { UPDATE_GRIDS } = require("./index");
+
+module.exports = {
+
+  /**
+   * Update the grid state with the new list of grids.
+   */
+  updateGrids(grids) {
+    return {
+      type: UPDATE_GRIDS,
+      grids,
+    };
+  },
+
+};
--- a/devtools/client/inspector/layout/actions/index.js
+++ b/devtools/client/inspector/layout/actions/index.js
@@ -1,5 +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/. */
 
 "use strict";
+
+const { createEnum } = require("devtools/client/shared/enum");
+
+createEnum([
+
+  // Update the entire grids state with the new list of grids.
+  "UPDATE_GRIDS",
+
+], module.exports);
--- a/devtools/client/inspector/layout/actions/moz.build
+++ b/devtools/client/inspector/layout/actions/moz.build
@@ -1,5 +1,10 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # 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(
+    'grids.js',
+    'index.js',
+)
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -4,16 +4,17 @@
 
 "use strict";
 
 const Services = require("Services");
 const { Task } = require("devtools/shared/task");
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
+const { updateGrids } = require("./actions/grids");
 const App = createFactory(require("./components/app"));
 const Store = require("./store");
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
 function LayoutView(inspector, window) {
@@ -81,18 +82,18 @@ LayoutView.prototype = {
    */
   isPanelVisible() {
     return this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar &&
            this.inspector.sidebar.getCurrentTabID() === "layoutview";
   },
 
   /**
-   * Refresh the layout view. This is called when the layout view becomes visible or
-   * the view needs to be updated with new grid data.
+   * Refreshes the layout view by dispatching the new grid data. This is called when the
+   * layout view becomes visible or the view needs to be updated with new grid data.
    *
    * @param {Array|null} gridFronts
    *        Optional array of all GridFront in the current page.
    */
   refresh: Task.async(function* (gridFronts) {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
       return;
@@ -110,17 +111,17 @@ LayoutView.prototype = {
 
       grids.push({
         id: i,
         nodeFront,
         gridFragments: grid.gridFragments
       });
     }
 
-    // TODO - Part 3: Dispatch and update the redux store with the grids data.
+    this.store.dispatch(updateGrids(grids));
   }),
 
   /**
    * Handler for 'grid-layout-changed' events emitted from the LayoutActor.
    *
    * @param  {Array} grids
    *         Array of all GridFront in the current page.
    */
--- a/devtools/client/inspector/layout/reducers/grids.js
+++ b/devtools/client/inspector/layout/reducers/grids.js
@@ -1,20 +1,26 @@
 /* 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 INITIAL_GRIDS = {
+const {
+  UPDATE_GRIDS,
+} = require("../actions/index");
 
-};
+const INITIAL_GRIDS = [];
 
 let reducers = {
 
+  [UPDATE_GRIDS](_, { grids }) {
+    return grids;
+  },
+
 };
 
 module.exports = function (grids = INITIAL_GRIDS, action) {
   let reducer = reducers[action.type];
   if (!reducer) {
     return grids;
   }
   return reducer(grids, action);
--- a/devtools/client/inspector/layout/types.js
+++ b/devtools/client/inspector/layout/types.js
@@ -1,5 +1,23 @@
 /* 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");
+
+/**
+ * A single grid container in the document.
+ */
+exports.grid = {
+
+  // The id of the grid
+  id: PropTypes.number,
+
+  // The node front of the grid container
+  nodeFront: PropTypes.object,
+
+  // The grid fragment object of the grid container
+  gridFragments: PropTypes.object
+
+};
--- a/devtools/client/responsive.html/actions/index.js
+++ b/devtools/client/responsive.html/actions/index.js
@@ -3,17 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // This file lists all of the actions available in responsive design.  This
 // central list of constants makes it easy to see all possible action names at
 // a glance.  Please add a comment with each new action type.
 
-const { createEnum } = require("../utils/enum");
+const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
 
   // Add a new device.
   "ADD_DEVICE",
 
   // Add a new device type.
   "ADD_DEVICE_TYPE",
--- a/devtools/client/responsive.html/types.js
+++ b/devtools/client/responsive.html/types.js
@@ -1,16 +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 { PropTypes } = require("devtools/client/shared/vendor/react");
-const { createEnum } = require("./utils/enum");
+const { createEnum } = require("devtools/client/shared/enum");
 
 // React PropTypes are used to describe the expected "shape" of various common
 // objects that get passed down as props to components.
 
 /**
  * A single device that can be displayed in the viewport.
  */
 const device = {
--- a/devtools/client/responsive.html/utils/moz.build
+++ b/devtools/client/responsive.html/utils/moz.build
@@ -1,12 +1,11 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # 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(
     'e10s.js',
-    'enum.js',
     'l10n.js',
     'message.js',
 )
rename from devtools/client/responsive.html/utils/enum.js
rename to devtools/client/shared/enum.js
--- a/devtools/client/shared/moz.build
+++ b/devtools/client/shared/moz.build
@@ -23,16 +23,17 @@ DevToolsModules(
     'css-reload.js',
     'curl.js',
     'demangle.js',
     'developer-toolbar.js',
     'devices.js',
     'devtools-file-watcher.js',
     'DOMHelpers.jsm',
     'doorhanger.js',
+    'enum.js',
     'file-watcher-worker.js',
     'file-watcher.js',
     'getjson.js',
     'inplace-editor.js',
     'Jsbeautify.jsm',
     'key-shortcuts.js',
     'keycodes.js',
     'network-throttling-profiles.js',