Bug 1404801 - Part 1: Implement basic flow for animation list. r=gl

MozReview-Commit-ID: 88qdmj2oIoZ

--HG--
extra : rebase_source : 0682be5a4402dfca590f5d33c66c5581ba3c3bd9

devtools/client/inspector/animation/actions/animations.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 { UPDATE_ANIMATIONS } = require("./index");
+
+module.exports = {
+  /**
+   * Update the list of animation in the animation inspector.
+   */
+  updateAnimations(animations) {
+    return {
+      type: UPDATE_ANIMATIONS,
+      animations,
+    };
+  }
+};

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

@@ -0,0 +1,12 @@
+/* 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 list of animation.
+  "UPDATE_ANIMATIONS",
+], module.exports);

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

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

devtools/client/inspector/animation/animation.js

@@ -4,17 +4,51 @@
 
 "use strict";
 
-const { createElement } = require("devtools/client/shared/vendor/react");
+const { AnimationsFront } = require("devtools/shared/fronts/animation");
+const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
+const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
-const App = require("./components/App");
+const App = createFactory(require("./components/App"));
+const { updateAnimations } = require("./actions/animations");
 
 class AnimationInspector {
-  constructor() {
+  constructor(inspector) {
+    this.inspector = inspector;
+    this.update = this.update.bind(this);
+
     this.init();
   }
 
   init() {
-    this.provider = createElement(App);
+    const target = this.inspector.target;
+    this.animationsFront = new AnimationsFront(target.client, target.form);
+
+    const provider = createElement(Provider, {
+      id: "newanimationinspector",
+      key: "newanimationinspector",
+      store: this.inspector.store
+    }, App());
+    this.provider = provider;
+
+    this.inspector.selection.on("new-node-front", this.update);
+    this.inspector.sidebar.on("newanimationinspector-selected", this.update);
+  }
+
+  destroy() {
+    this.inspector.selection.off("new-node-front", this.update);
+    this.inspector.sidebar.off("newanimationinspector-selected", this.update);
+
+    this.inspector = null;
+  }
+
+  async update() {
+    const selection = this.inspector.selection;
+    const animations =
+      selection.isConnected() && selection.isElementNode()
+      ? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
+      : [];
+
+    this.inspector.store.dispatch(updateAnimations(animations));
   }
 }
 

devtools/client/inspector/animation/components/App.js

@@ -4,9 +4,16 @@
 
 "use strict";
 
-const { DOM: dom, PureComponent } = require("devtools/client/shared/vendor/react");
+const { DOM: dom, PropTypes, PureComponent } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 class App extends PureComponent {
+  static get propTypes() {
+    return {
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+    };
+  }
+
   render() {
     return dom.div(
       {
@@ -16,4 +23,4 @@ class App extends PureComponent {
   }
 }
 
-module.exports = App;
+module.exports = connect(state => state)(App);

devtools/client/inspector/animation/moz.build

@@ -3,7 +3,9 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
-    'components'
+    'actions',
+    'components',
+    'reducers'
 ]
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

devtools/client/inspector/animation/reducers/animations.js

@@ -0,0 +1,20 @@
+/* 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_ANIMATIONS } = require("../actions/index");
+
+const INITIAL_ANIMATIONS = [];
+
+const reducers = {
+  [UPDATE_ANIMATIONS](_, { animations }) {
+    return animations;
+  }
+};
+
+module.exports = function (animations = INITIAL_ANIMATIONS, action) {
+  const reducer = reducers[action.type];
+  return reducer ? reducer(animations, action) : animations;
+};

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

@@ -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/.
+
+DevToolsModules(
+    'animations.js'
+)

devtools/client/inspector/inspector.js

@@ -722,7 +722,7 @@ Inspector.prototype = {
             panel: () => {
               const AnimationInspector =
                 this.browserRequire("devtools/client/inspector/animation/animation");
-              this.animationinspector = new AnimationInspector();
+              this.animationinspector = new AnimationInspector(this);
               return this.animationinspector.provider;
             }
           },
@@ -1180,6 +1180,10 @@ Inspector.prototype = {
       this.fontinspector.destroy();
     }
 
+    if (this.animationinspector) {
+      this.animationinspector.destroy();
+    }
+
     let cssPropertiesDestroyer = this._cssPropertiesLoaded.then(({front}) => {
       if (front) {
         front.destroy();

devtools/client/inspector/reducers.js

@@ -7,6 +7,7 @@
 // This file exposes the Redux reducers of the box model, grid and grid highlighter
 // settings.
 
+exports.animations = require("devtools/client/inspector/animation/reducers/animations");
 exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model");
 exports.changes = require("devtools/client/inspector/changes/reducers/changes");
 exports.events = require("devtools/client/inspector/events/reducers/events");