Bug 1411160 - Adds an initial react/redux template for loading a Changes View in the inspector sidebar. r=pbro

--HG--
rename : devtools/client/inspector/fonts/components/App.js => devtools/client/inspector/fonts/components/FontsApp.js
rename : devtools/client/inspector/layout/components/App.js => devtools/client/inspector/layout/components/LayoutApp.js

devtools/client/inspector/changes/actions/index.js

@@ -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/. */
+
+"use strict";
+
+const { createEnum } = require("devtools/client/shared/enum");
+
+createEnum([
+
+  // Update the entire changes state with the new list of changes.
+  "UPDATE_CHANGES",
+
+], module.exports);

devtools/client/inspector/changes/actions/moz.build

@@ -0,0 +1,9 @@
+# -*- 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(
+    'index.js',
+)

devtools/client/inspector/changes/changes.js

@@ -0,0 +1,52 @@
+/* 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 { createFactory, createElement } = require("devtools/client/shared/vendor/react");
+const { Provider } = require("devtools/client/shared/vendor/react-redux");
+
+const ChangesApp = createFactory(require("./components/ChangesApp"));
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const INSPECTOR_L10N =
+  new LocalizationHelper("devtools/client/locales/inspector.properties");
+
+class ChangesView {
+
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = inspector.store;
+
+    this.init();
+  }
+
+  init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    let changesApp = ChangesApp({});
+
+    let provider = createElement(Provider, {
+      id: "changesview",
+      key: "changesview",
+      store: this.store,
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle")
+    }, changesApp);
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = provider;
+  }
+
+  destroy() {
+    this.document = null;
+    this.inspector = null;
+    this.store = null;
+  }
+
+}
+
+module.exports = ChangesView;

devtools/client/inspector/changes/components/ChangesApp.js

@@ -0,0 +1,27 @@
+/* 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 {
+  DOM: dom,
+  PureComponent,
+} = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+class ChangesApp extends PureComponent {
+  static get propTypes() {
+    return {};
+  }
+
+  render() {
+    return dom.div(
+      {
+        id: "changes-container",
+      }
+    );
+  }
+}
+
+module.exports = connect(state => state)(ChangesApp);

devtools/client/inspector/changes/components/moz.build

@@ -0,0 +1,9 @@
+# -*- 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(
+    'ChangesApp.js',
+)

devtools/client/inspector/changes/moz.build

@@ -0,0 +1,16 @@
+# -*- 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/.
+
+DIRS += [
+    'actions',
+    'components',
+    'reducers',
+]
+
+DevToolsModules(
+    'changes.js',
+    'types.js',
+)

devtools/client/inspector/changes/reducers/changes.js

@@ -0,0 +1,19 @@
+/* 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_CHANGES = [];
+
+let reducers = {
+
+};
+
+module.exports = function (changes = INITIAL_CHANGES, action) {
+  let reducer = reducers[action.type];
+  if (!reducer) {
+    return changes;
+  }
+  return reducer(changes, action);
+};

devtools/client/inspector/changes/reducers/index.js

@@ -0,0 +1,7 @@
+/* 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";
+
+exports.changes = require("./changes");

devtools/client/inspector/changes/reducers/moz.build

@@ -0,0 +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(
+    'changes.js',
+    'index.js',
+)

devtools/client/inspector/changes/types.js

@@ -0,0 +1,9 @@
+/* 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";
+
+exports.changes = {
+
+};

devtools/client/inspector/extensions/extension-sidebar.js

@@ -4,10 +4,7 @@
 
 "use strict";
 
-const {
-  createElement, createFactory,
-} = require("devtools/client/shared/vendor/react");
-
+const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const ExtensionSidebarComponent = createFactory(require("./components/ExtensionSidebar"));

devtools/client/inspector/flexbox/actions/index.js

@@ -8,4 +8,7 @@ const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
 
+  // Update the entire flexboxes state with the new list of flexboxes.
+  "UPDATE_FLEXBOXES",
+
 ], module.exports);

devtools/client/inspector/fonts/components/FontsApp.js

@@ -20,7 +20,7 @@ const Types = require("../types");
 
 const PREVIEW_UPDATE_DELAY = 150;
 
-class App extends PureComponent {
+class FontsApp extends PureComponent {
   static get propTypes() {
     return {
       fonts: PropTypes.arrayOf(PropTypes.shape(Types.font)).isRequired,
@@ -74,4 +74,4 @@ class App extends PureComponent {
   }
 }
 
-module.exports = connect(state => state)(App);
+module.exports = connect(state => state)(FontsApp);

devtools/client/inspector/fonts/components/moz.build

@@ -5,7 +5,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'App.js',
     'Font.js',
     'FontList.js',
+    'FontsApp.js',
 )

devtools/client/inspector/fonts/fonts.js

@@ -6,7 +6,6 @@
 
 "use strict";
 
-const { Task } = require("devtools/shared/task");
 const { getColor } = require("devtools/client/shared/theme");
 
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
@@ -14,7 +13,7 @@ const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const { gDevTools } = require("devtools/client/framework/devtools");
 
-const App = createFactory(require("./components/App"));
+const FontsApp = createFactory(require("./components/FontsApp"));
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
@@ -23,29 +22,30 @@ const INSPECTOR_L10N =
 const { updateFonts } = require("./actions/fonts");
 const { updatePreviewText, updateShowAllFonts } = require("./actions/font-options");
 
-function FontInspector(inspector, window) {
-  this.document = window.document;
-  this.inspector = inspector;
-  this.pageStyle = this.inspector.pageStyle;
-  this.store = this.inspector.store;
+class FontInspector {
 
-  this.update = this.update.bind(this);
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.pageStyle = this.inspector.pageStyle;
+    this.store = this.inspector.store;
 
-  this.onNewNode = this.onNewNode.bind(this);
-  this.onPreviewFonts = this.onPreviewFonts.bind(this);
-  this.onShowAllFont = this.onShowAllFont.bind(this);
-  this.onThemeChanged = this.onThemeChanged.bind(this);
+    this.update = this.update.bind(this);
 
-  this.init();
-}
+    this.onNewNode = this.onNewNode.bind(this);
+    this.onPreviewFonts = this.onPreviewFonts.bind(this);
+    this.onShowAllFont = this.onShowAllFont.bind(this);
+    this.onThemeChanged = this.onThemeChanged.bind(this);
+
+    this.init();
+  }
 
-FontInspector.prototype = {
   init() {
     if (!this.inspector) {
       return;
     }
 
-    let app = App({
+    let fontsApp = FontsApp({
       onPreviewFonts: this.onPreviewFonts,
       onShowAllFont: this.onShowAllFont,
     });
@@ -55,7 +55,7 @@ FontInspector.prototype = {
       key: "fontinspector",
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
-    }, app);
+    }, fontsApp);
 
     // Expose the provider to let inspector.js use it in setupSidebar.
     this.provider = provider;
@@ -69,13 +69,13 @@ FontInspector.prototype = {
     this.store.dispatch(updatePreviewText(""));
     this.store.dispatch(updateShowAllFonts(false));
     this.update(false, "");
-  },
+  }
 
   /**
    * Destruction function called when the inspector is destroyed. Removes event listeners
    * and cleans up references.
    */
-  destroy: function () {
+  destroy() {
     this.inspector.selection.off("new-node-front", this.onNewNode);
     this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
     gDevTools.off("theme-switched", this.onThemeChanged);
@@ -84,7 +84,7 @@ FontInspector.prototype = {
     this.inspector = null;
     this.pageStyle = null;
     this.store = null;
-  },
+  }
 
   /**
    * Returns true if the font inspector panel is visible, and false otherwise.
@@ -92,7 +92,7 @@ FontInspector.prototype = {
   isPanelVisible() {
     return this.inspector.sidebar &&
            this.inspector.sidebar.getCurrentTabID() === "fontinspector";
-  },
+  }
 
   /**
    * Selection 'new-node' event handler.
@@ -102,7 +102,23 @@ FontInspector.prototype = {
       this.store.dispatch(updateShowAllFonts(false));
       this.update();
     }
-  },
+  }
+
+  /**
+   * Handler for change in preview input.
+   */
+  onPreviewFonts(value) {
+    this.store.dispatch(updatePreviewText(value));
+    this.update();
+  }
+
+  /**
+   * Handler for click on show all fonts button.
+   */
+  onShowAllFont() {
+    this.store.dispatch(updateShowAllFonts(true));
+    this.update();
+  }
 
   /**
    * Handler for the "theme-switched" event.
@@ -111,25 +127,9 @@ FontInspector.prototype = {
     if (frame === this.document.defaultView) {
       this.update();
     }
-  },
+  }
 
-  /**
-   * Handler for change in preview input.
-   */
-  onPreviewFonts(value) {
-    this.store.dispatch(updatePreviewText(value));
-    this.update();
-  },
-
-  /**
-   * Handler for click on show all fonts button.
-   */
-  onShowAllFont() {
-    this.store.dispatch(updateShowAllFonts(true));
-    this.update();
-  },
-
-  update: Task.async(function* () {
+  async update() {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
       return;
@@ -158,10 +158,10 @@ FontInspector.prototype = {
     };
 
     if (showAllFonts) {
-      fonts = yield this.pageStyle.getAllUsedFontFaces(options)
+      fonts = await this.pageStyle.getAllUsedFontFaces(options)
                       .catch(console.error);
     } else {
-      fonts = yield this.pageStyle.getUsedFontFaces(node, options)
+      fonts = await this.pageStyle.getUsedFontFaces(node, options)
                       .catch(console.error);
     }
 
@@ -172,7 +172,7 @@ FontInspector.prototype = {
     }
 
     for (let font of fonts) {
-      font.previewUrl = yield font.preview.data.string();
+      font.previewUrl = await font.preview.data.string();
     }
 
     // in case we've been destroyed in the meantime
@@ -183,7 +183,8 @@ FontInspector.prototype = {
     this.store.dispatch(updateFonts(fonts));
 
     this.inspector.emit("fontinspector-updated");
-  })
-};
+  }
+
+}
 
 module.exports = FontInspector;

devtools/client/inspector/grids/grid-inspector.js

@@ -5,7 +5,6 @@
 "use strict";
 
 const Services = require("Services");
-const { Task } = require("devtools/shared/task");
 
 const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
 const { throttle } = require("devtools/client/inspector/shared/utils");
@@ -44,45 +43,45 @@ const GRID_COLORS = [
   "#005A71"
 ];
 
-function GridInspector(inspector, window) {
-  this.document = window.document;
-  this.highlighters = inspector.highlighters;
-  this.inspector = inspector;
-  this.store = inspector.store;
-  this.telemetry = inspector.telemetry;
-  this.walker = this.inspector.walker;
+class GridInspector {
 
-  this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
-  this.updateGridPanel = this.updateGridPanel.bind(this);
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.highlighters = inspector.highlighters;
+    this.inspector = inspector;
+    this.store = inspector.store;
+    this.telemetry = inspector.telemetry;
+    this.walker = this.inspector.walker;
 
-  this.onHighlighterChange = this.onHighlighterChange.bind(this);
-  this.onNavigate = this.onNavigate.bind(this);
-  this.onReflow = throttle(this.onReflow, 500, this);
-  this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
-  this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
-  this.onShowGridCellHighlight = this.onShowGridCellHighlight.bind(this);
-  this.onShowGridLineNamesHighlight = this.onShowGridLineNamesHighlight.bind(this);
-  this.onSidebarSelect = this.onSidebarSelect.bind(this);
-  this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
-  this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
-  this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
-  this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
+    this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
+    this.updateGridPanel = this.updateGridPanel.bind(this);
 
-  this.init();
-}
+    this.onHighlighterChange = this.onHighlighterChange.bind(this);
+    this.onNavigate = this.onNavigate.bind(this);
+    this.onReflow = throttle(this.onReflow, 500, this);
+    this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
+    this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
+    this.onShowGridCellHighlight = this.onShowGridCellHighlight.bind(this);
+    this.onShowGridLineNamesHighlight = this.onShowGridLineNamesHighlight.bind(this);
+    this.onSidebarSelect = this.onSidebarSelect.bind(this);
+    this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
+    this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
+    this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
+    this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
 
-GridInspector.prototype = {
+    this.init();
+  }
 
   /**
    * Initializes the grid inspector by fetching the LayoutFront from the walker, loading
    * the highlighter settings and initalizing the SwatchColorPicker instance.
    */
-  init: Task.async(function* () {
+  async init() {
     if (!this.inspector) {
       return;
     }
 
-    this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
+    this.layoutInspector = await this.inspector.walker.getLayoutInspector();
 
     this.loadHighlighterSettings();
 
@@ -101,7 +100,7 @@ GridInspector.prototype = {
     this.inspector.on("new-root", this.onNavigate);
 
     this.onSidebarSelect();
-  }),
+  }
 
   /**
    * Destruction function called when the inspector is destroyed. Removes event listeners
@@ -128,7 +127,7 @@ GridInspector.prototype = {
     this.store = null;
     this.swatchColorPickerTooltip = null;
     this.walker = null;
-  },
+  }
 
   getComponentProps() {
     return {
@@ -142,7 +141,7 @@ GridInspector.prototype = {
       onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
     };
-  },
+  }
 
   /**
    * Returns the initial color linked to a grid container. Will attempt to check the
@@ -169,7 +168,7 @@ GridInspector.prototype = {
     }
 
     return color || fallbackColor;
-  },
+  }
 
   /**
    * Returns the color set for the grid highlighter associated with the provided
@@ -188,7 +187,7 @@ GridInspector.prototype = {
     }
 
     return null;
-  },
+  }
 
   /**
    * Create a highlighter settings object for the provided nodeFront.
@@ -206,14 +205,14 @@ GridInspector.prototype = {
     return Object.assign({}, highlighterSettings, {
       color
     });
-  },
+  }
 
   /**
    * Retrieve the shared SwatchColorPicker instance.
    */
   getSwatchColorPickerTooltip() {
     return this.swatchColorPickerTooltip;
-  },
+  }
 
   /**
    * Given a list of new grid fronts, and if we have a currently highlighted grid, check
@@ -239,7 +238,7 @@ GridInspector.prototype = {
     const newFragments = newGridFront.gridFragments;
 
     return !compareFragmentsGeometry(oldFragments, newFragments);
-  },
+  }
 
   /**
    * Returns true if the layout panel is visible, and false otherwise.
@@ -248,7 +247,7 @@ GridInspector.prototype = {
     return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
            this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar.getCurrentTabID() === "layoutview";
-  },
+  }
 
   /**
    * Load the grid highligher display settings into the store from the stored preferences.
@@ -263,7 +262,7 @@ GridInspector.prototype = {
     dispatch(updateShowGridAreas(showGridAreas));
     dispatch(updateShowGridLineNumbers(showGridLineNumbers));
     dispatch(updateShowInfiniteLines(showInfinteLines));
-  },
+  }
 
   showGridHighlighter(node, settings) {
     this.lastHighlighterColor = settings.color;
@@ -271,7 +270,7 @@ GridInspector.prototype = {
     this.lastHighlighterState = true;
 
     this.highlighters.showGridHighlighter(node, settings);
-  },
+  }
 
   toggleGridHighlighter(node, settings) {
     this.lastHighlighterColor = settings.color;
@@ -279,13 +278,13 @@ GridInspector.prototype = {
     this.lastHighlighterState = node !== this.highlighters.gridHighlighterShown;
 
     this.highlighters.toggleGridHighlighter(node, settings, "grid");
-  },
+  }
 
   /**
    * Updates the grid panel 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.
    */
-  updateGridPanel: Task.async(function* () {
+  async updateGridPanel() {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
       return;
@@ -294,7 +293,7 @@ GridInspector.prototype = {
     // Get all the GridFront from the server if no gridFronts were provided.
     let gridFronts;
     try {
-      gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
+      gridFronts = await this.layoutInspector.getAllGrids(this.walker.rootNode);
     } catch (e) {
       // This call might fail if called asynchrously after the toolbox is finished
       // closing.
@@ -319,7 +318,7 @@ GridInspector.prototype = {
       // particular DOM Node in the tree yet, or when we are connected to an older server.
       if (!nodeFront) {
         try {
-          nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
+          nodeFront = await this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
         } catch (e) {
           // This call might fail if called asynchrously after the toolbox is finished
           // closing.
@@ -341,7 +340,7 @@ GridInspector.prototype = {
     }
 
     this.store.dispatch(updateGrids(grids));
-  }),
+  }
 
   /**
    * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
@@ -374,7 +373,7 @@ GridInspector.prototype = {
     this.lastHighlighterColor = null;
     this.lastHighlighterNode = null;
     this.lastHighlighterState = null;
-  },
+  }
 
   /**
    * Handler for "new-root" event fired by the inspector, which indicates a page
@@ -384,7 +383,7 @@ GridInspector.prototype = {
     if (this.isPanelVisible()) {
       this.updateGridPanel();
     }
-  },
+  }
 
   /**
    * Handler for the "reflow" event fired by the inspector's reflow tracker. On reflows,
@@ -399,7 +398,7 @@ GridInspector.prototype = {
    * after the reflow, as well as the grid fragment data on the currently highlighted
    * grid.
    */
-  onReflow: Task.async(function* () {
+  async onReflow() {
     if (!this.isPanelVisible()) {
       return;
     }
@@ -410,7 +409,7 @@ GridInspector.prototype = {
     // The new list of grids from the server.
     let newGridFronts;
     try {
-      newGridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
+      newGridFronts = await this.layoutInspector.getAllGrids(this.walker.rootNode);
     } catch (e) {
       // This call might fail if called asynchrously after the toolbox is finished
       // closing.
@@ -444,7 +443,7 @@ GridInspector.prototype = {
 
     // Either the list of containers or the current fragments have changed, do update.
     this.updateGridPanel(newGridFronts);
-  }),
+  }
 
   /**
    * Handler for a change in the grid overlay color picker for a grid container.
@@ -467,7 +466,7 @@ GridInspector.prototype = {
         this.showGridHighlighter(node, highlighterSettings);
       }
     }
-  },
+  }
 
   /**
    * Highlights the grid area in the CSS Grid Highlighter for the given grid.
@@ -491,7 +490,7 @@ GridInspector.prototype = {
     this.showGridHighlighter(node, highlighterSettings);
 
     this.store.dispatch(updateGridHighlighted(node, true));
-  },
+  }
 
   /**
    * Highlights the grid cell in the CSS Grid Highlighter for the given grid.
@@ -521,7 +520,7 @@ GridInspector.prototype = {
     this.showGridHighlighter(node, highlighterSettings);
 
     this.store.dispatch(updateGridHighlighted(node, true));
-  },
+  }
 
   /**
    * Highlights the grid line in the CSS Grid Highlighter for the given grid.
@@ -554,7 +553,7 @@ GridInspector.prototype = {
     this.showGridHighlighter(node, highlighterSettings);
 
     this.store.dispatch(updateGridHighlighted(node, true));
-  },
+  }
 
   /**
    * Handler for the inspector sidebar "select" event. Starts tracking reflows
@@ -569,7 +568,7 @@ GridInspector.prototype = {
 
     this.inspector.reflowTracker.trackReflows(this, this.onReflow);
     this.updateGridPanel();
-  },
+  }
 
   /**
    * Handler for a change in the input checkboxes in the GridList component.
@@ -585,7 +584,7 @@ GridInspector.prototype = {
 
     this.store.dispatch(updateGridHighlighted(node,
       node !== this.highlighters.gridHighlighterShown));
-  },
+  }
 
   /**
     * Handler for a change in the show grid areas checkbox in the GridDisplaySettings
@@ -611,7 +610,7 @@ GridInspector.prototype = {
         this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
       }
     }
-  },
+  }
 
   /**
    * Handler for a change in the show grid line numbers checkbox in the
@@ -638,7 +637,7 @@ GridInspector.prototype = {
         this.showGridHighlighter(grid.nodeFront, highlighterSettings);
       }
     }
-  },
+  }
 
   /**
    * Handler for a change in the extend grid lines infinitely checkbox in the
@@ -665,8 +664,8 @@ GridInspector.prototype = {
         this.showGridHighlighter(grid.nodeFront, highlighterSettings);
       }
     }
-  },
+  }
 
-};
+}
 
 module.exports = GridInspector;

devtools/client/inspector/inspector.js

@@ -646,11 +646,38 @@ Inspector.prototype = {
               this.browserRequire("devtools/client/inspector/layout/layout");
             this.layoutview = new LayoutView(this, this.panelWin);
           }
+
           return this.layoutview.provider;
         }
       },
       defaultTab == layoutId);
 
+    if (Services.prefs.getBoolPref("devtools.changesview.enabled")) {
+      // Inject a lazy loaded react tab by exposing a fake React object
+      // with a lazy defined Tab thanks to `panel` being a function
+      let changesId = "changesview";
+      let changesTitle = INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle");
+      this.sidebar.addTab(
+        changesId,
+        changesTitle,
+        {
+          props: {
+            id: changesId,
+            title: changesTitle
+          },
+          panel: () => {
+            if (!this.changesview) {
+              const ChangesView =
+                this.browserRequire("devtools/client/inspector/changes/changes");
+              this.changesview = new ChangesView(this, this.panelWin);
+            }
+
+            return this.changesview.provider;
+          }
+        },
+        defaultTab == changesId);
+    }
+
     if (this.target.form.animationsActor) {
       this.sidebar.addFrameTab(
         "animationinspector",
@@ -678,6 +705,7 @@ Inspector.prototype = {
                 this.browserRequire("devtools/client/inspector/fonts/fonts");
               this.fontinspector = new FontInspector(this, this.panelWin);
             }
+
             return this.fontinspector.provider;
           }
         },

devtools/client/inspector/layout/components/LayoutApp.js

@@ -35,7 +35,7 @@ const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
 const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
 const GRID_OPENED_PREF = "devtools.layout.grid.opened";
 
-class App extends PureComponent {
+class LayoutApp extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
@@ -102,4 +102,4 @@ class App extends PureComponent {
   }
 }
 
-module.exports = connect(state => state)(App);
+module.exports = connect(state => state)(LayoutApp);

devtools/client/inspector/layout/components/moz.build

@@ -7,5 +7,5 @@
 DevToolsModules(
     'Accordion.css',
     'Accordion.js',
-    'App.js',
+    'LayoutApp.js',
 )

devtools/client/inspector/layout/layout.js

@@ -7,7 +7,7 @@
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
-const App = createFactory(require("./components/App"));
+const LayoutApp = createFactory(require("./components/LayoutApp"));
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
@@ -16,15 +16,15 @@ const INSPECTOR_L10N =
 loader.lazyRequireGetter(this, "FlexboxInspector", "devtools/client/inspector/flexbox/flexbox");
 loader.lazyRequireGetter(this, "GridInspector", "devtools/client/inspector/grids/grid-inspector");
 
-function LayoutView(inspector, window) {
-  this.document = window.document;
-  this.inspector = inspector;
-  this.store = inspector.store;
+class LayoutView {
 
-  this.init();
-}
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = inspector.store;
 
-LayoutView.prototype = {
+    this.init();
+  }
 
   init() {
     if (!this.inspector) {
@@ -56,7 +56,7 @@ LayoutView.prototype = {
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
-    let app = App({
+    let layoutApp = LayoutApp({
       getSwatchColorPickerTooltip,
       setSelectedNode,
       /**
@@ -84,11 +84,11 @@ LayoutView.prototype = {
       key: "layoutview",
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
-    }, app);
+    }, layoutApp);
 
     // Expose the provider to let inspector.js use it in setupSidebar.
     this.provider = provider;
-  },
+  }
 
   /**
    * Destruction function called when the inspector is destroyed. Cleans up references.
@@ -99,8 +99,8 @@ LayoutView.prototype = {
     this.document = null;
     this.inspector = null;
     this.store = null;
-  },
+  }
 
-};
+}
 
 module.exports = LayoutView;

devtools/client/inspector/moz.build

@@ -4,6 +4,7 @@
 
 DIRS += [
     'boxmodel',
+    'changes',
     'components',
     'computed',
     'extensions',

devtools/client/inspector/reducers.js

@@ -8,6 +8,7 @@
 // settings.
 
 exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model");
+exports.changes = require("devtools/client/inspector/changes/reducers/changes");
 exports.extensionsSidebar = require("devtools/client/inspector/extensions/reducers/sidebar");
 exports.flexboxes = require("devtools/client/inspector/flexbox/reducers/flexboxes");
 exports.fontOptions = require("devtools/client/inspector/fonts/reducers/font-options");

devtools/client/locales/en-US/inspector.properties

@@ -349,6 +349,11 @@ inspector.sidebar.layoutViewTitle2=Layout
 # name. Used to promote new/recent panels such as the layout panel.
 inspector.sidebar.newBadge=new!
 
+# LOCALIZATION NOTE (inspector.sidebar.changesViewTitle):
+# This is the title shown in a tab in the side panel of the Inspector panel
+# that corresponds to the tool displaying CSS changes.
+inspector.sidebar.changesViewTitle=Changes
+
 # LOCALIZATION NOTE (inspector.sidebar.animationInspectorTitle):
 # This is the title shown in a tab in the side panel of the Inspector panel
 # that corresponds to the tool displaying animations defined in the page.

devtools/client/preferences/devtools.js

@@ -60,7 +60,8 @@ pref("devtools.inspector.showAllAnonymousContent", false);
 pref("devtools.inspector.colorWidget.enabled", false);
 // Enable the CSS shapes highlighter
 pref("devtools.inspector.shapesHighlighter.enabled", true);
-
+// Enable the Changes View
+pref("devtools.changesview.enabled", false);
 // Enable the Flexbox Inspector
 pref("devtools.flexboxinspector.enabled", false);
 

devtools/client/shared/browser-loader.js

@@ -12,6 +12,7 @@ const { AppConstants } = devtools.require("resource://gre/modules/AppConstants.j
 
 const BROWSER_BASED_DIRS = [
   "resource://devtools/client/inspector/boxmodel",
+  "resource://devtools/client/inspector/changes",
   "resource://devtools/client/inspector/computed",
   "resource://devtools/client/inspector/flexbox",
   "resource://devtools/client/inspector/fonts",