Bug 1406285 - Part 1: Implement animation target node. r=gl

MozReview-Commit-ID: ERQPDce3vjo

--HG--
extra : rebase_source : 2fa9d559a12c7312cde2e65c5759e49e6e4ae0fa

devtools/client/inspector/animation/animation.js

@@ -8,17 +8,20 @@ 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 EventEmitter = require("devtools/shared/event-emitter");
+
 const App = createFactory(require("./components/App"));
-const { isAllTimingEffectEqual } = require("./utils/utils");
 
 const { updateAnimations } = require("./actions/animations");
 const { updateElementPickerEnabled } = require("./actions/element-picker");
 const { updateSidebarSize } = require("./actions/sidebar");
+const { isAllAnimationEqual } = require("./utils/utils");
 
 class AnimationInspector {
   constructor(inspector) {
     this.inspector = inspector;
 
+    this.getNodeFromActor = this.getNodeFromActor.bind(this);
     this.toggleElementPicker = this.toggleElementPicker.bind(this);
     this.update = this.update.bind(this);
     this.onElementPickerStarted = this.onElementPickerStarted.bind(this);
@@ -26,10 +29,28 @@ class AnimationInspector {
     this.onSidebarResized = this.onSidebarResized.bind(this);
     this.onSidebarSelect = this.onSidebarSelect.bind(this);
 
+    EventEmitter.decorate(this);
+    this.emit = this.emit.bind(this);
+
     this.init();
   }
 
   init() {
+    const {
+      setSelectedNode,
+      onShowBoxModelHighlighterForNode,
+    } = this.inspector.getCommonComponentProps();
+
+    const {
+      onHideBoxModelHighlighter,
+    } = this.inspector.getPanel("boxmodel").getComponentProps();
+
+    const {
+      emit: emitEventForTest,
+      getNodeFromActor,
+      toggleElementPicker,
+    } = this;
+
     const target = this.inspector.target;
     this.animationsFront = new AnimationsFront(target.client, target.form);
 
@@ -41,7 +62,12 @@ class AnimationInspector {
       },
       App(
         {
-          toggleElementPicker: this.toggleElementPicker
+          emitEventForTest,
+          getNodeFromActor,
+          onHideBoxModelHighlighter,
+          onShowBoxModelHighlighterForNode,
+          setSelectedNode,
+          toggleElementPicker,
         }
       )
     );
@@ -78,7 +104,7 @@ class AnimationInspector {
       ? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
       : [];
 
-    if (!this.animations || !isAllTimingEffectEqual(animations, this.animations)) {
+    if (!this.animations || !isAllAnimationEqual(animations, this.animations)) {
       this.inspector.store.dispatch(updateAnimations(animations));
       this.animations = animations;
     }
@@ -92,6 +118,10 @@ class AnimationInspector {
            this.inspector.sidebar.getCurrentTabID() === "newanimationinspector";
   }
 
+  getNodeFromActor(actorID) {
+    return this.inspector.walker.getNodeFromActor(actorID, ["node"]);
+  }
+
   toggleElementPicker() {
     this.inspector.toolbox.highlighterUtils.togglePicker();
   }

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

@@ -4,22 +4,48 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+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 AnimationTarget = createFactory(require("./AnimationTarget"));
+
 class AnimationItem extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
+    const {
+      animation,
+      emitEventForTest,
+      getNodeFromActor,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+    } = this.props;
+
     return dom.li(
       {
         className: "animation-item"
-      }
+      },
+      AnimationTarget(
+        {
+          animation,
+          emitEventForTest,
+          getNodeFromActor,
+          onHideBoxModelHighlighter,
+          onShowBoxModelHighlighterForNode,
+          setSelectedNode,
+        }
+      )
     );
   }
 }

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

@@ -14,15 +14,40 @@ class AnimationList extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
+    const {
+      animations,
+      emitEventForTest,
+      getNodeFromActor,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+    } = this.props;
+
     return dom.ul(
       {
         className: "animation-list"
       },
-      this.props.animations.map(animation => AnimationItem({ animation }))
+      animations.map(animation =>
+        AnimationItem(
+          {
+            animation,
+            emitEventForTest,
+            getNodeFromActor,
+            onHideBoxModelHighlighter,
+            onShowBoxModelHighlighterForNode,
+            setSelectedNode,
+          }
+        )
+      )
     );
   }
 }

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

@@ -16,11 +16,23 @@ class AnimationListContainer extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
-    const { animations } = this.props;
+    const {
+      animations,
+      emitEventForTest,
+      getNodeFromActor,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+    } = this.props;
 
     return dom.div(
       {
@@ -33,7 +45,12 @@ class AnimationListContainer extends PureComponent {
       ),
       AnimationList(
         {
-          animations
+          animations,
+          emitEventForTest,
+          getNodeFromActor,
+          onHideBoxModelHighlighter,
+          onShowBoxModelHighlighterForNode,
+          setSelectedNode,
         }
       )
     );

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

@@ -0,0 +1,137 @@
+/* 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 { PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
+const { Rep } = REPS;
+const ElementNode = REPS.ElementNode;
+
+class AnimationTarget extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      nodeFront: null,
+    };
+  }
+
+  componentWillMount() {
+    this.updateNodeFront(this.props.animation);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.animation.actorID !== nextProps.animation.actorID) {
+      this.updateNodeFront(nextProps.animation);
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.nodeFront !== nextState.nodeFront;
+  }
+
+  /**
+   * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
+   * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
+   *
+   * @params  {NodeFront} nodeFront
+   *          The NodeFront for which we want to create a grip-like object.
+   * @returns {Object} a grip-like object that can be used with Reps.
+   */
+  translateNodeFrontToGrip(nodeFront) {
+    let { attributes } = nodeFront;
+
+    // The main difference between NodeFront and grips is that attributes are treated as
+    // a map in grips and as an array in NodeFronts.
+    let attributesMap = {};
+    for (let {name, value} of attributes) {
+      attributesMap[name] = value;
+    }
+
+    return {
+      actor: nodeFront.actorID,
+      preview: {
+        attributes: attributesMap,
+        attributesLength: attributes.length,
+        isConnected: true,
+        nodeName: nodeFront.nodeName.toLowerCase(),
+        nodeType: nodeFront.nodeType,
+      }
+    };
+  }
+
+  async updateNodeFront(animation) {
+    const { emitEventForTest, getNodeFromActor } = this.props;
+
+    // Try and get it from the playerFront directly.
+    let nodeFront = animation.animationTargetNodeFront;
+
+    // Next, get it from the walkerActor if it wasn't found.
+    if (!nodeFront) {
+      try {
+        nodeFront = await getNodeFromActor(animation.actorID);
+      } catch (e) {
+        // If an error occured while getting the nodeFront and if it can't be
+        // attributed to the panel having been destroyed in the meantime, this
+        // error needs to be logged and render needs to stop.
+        console.error(e);
+        return;
+      }
+    }
+
+    this.setState({ nodeFront });
+    emitEventForTest("animation-target-rendered");
+  }
+
+  render() {
+    const {
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+    } = this.props;
+
+    const { nodeFront } = this.state;
+
+    if (!nodeFront) {
+      return dom.div(
+        {
+          className: "animation-target"
+        }
+      );
+    }
+
+    return dom.div(
+      {
+        className: "animation-target"
+      },
+      Rep(
+        {
+          defaultRep: ElementNode,
+          mode: MODE.TINY,
+          object: this.translateNodeFrontToGrip(nodeFront),
+          onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+          onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+          onInspectIconClick: () => setSelectedNode(nodeFront, "animation-panel"),
+        }
+      )
+    );
+  }
+}
+
+module.exports = AnimationTarget;

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

@@ -16,6 +16,11 @@ class App extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      emitEventForTest: PropTypes.func.isRequired,
+      getNodeFromActor: PropTypes.func.isRequired,
+      onHideBoxModelHighlighter: PropTypes.func.isRequired,
+      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
       toggleElementPicker: PropTypes.func.isRequired,
     };
   }
@@ -25,7 +30,15 @@ class App extends PureComponent {
   }
 
   render() {
-    const { animations, toggleElementPicker } = this.props;
+    const {
+      animations,
+      emitEventForTest,
+      getNodeFromActor,
+      onHideBoxModelHighlighter,
+      onShowBoxModelHighlighterForNode,
+      setSelectedNode,
+      toggleElementPicker,
+    } = this.props;
 
     return dom.div(
       {
@@ -34,7 +47,12 @@ class App extends PureComponent {
       animations.length ?
       AnimationListContainer(
         {
-          animations
+          animations,
+          emitEventForTest,
+          getNodeFromActor,
+          onHideBoxModelHighlighter,
+          onShowBoxModelHighlighterForNode,
+          setSelectedNode,
         }
       )
       :

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

@@ -7,8 +7,9 @@ DevToolsModules(
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationListHeader.js',
+    'AnimationTarget.js',
     'AnimationTimelineTickItem.js',
     'AnimationTimelineTickList.js',
     'App.js',
-    'NoAnimationPanel.js'
+    'NoAnimationPanel.js',
 )

devtools/client/inspector/animation/test/head.js

@@ -36,6 +36,7 @@ registerCleanupFunction(() => {
 const openAnimationInspector = async function () {
   const { inspector, toolbox } = await openInspectorSidebarTab(TAB_NAME);
   await inspector.once("inspector-updated");
+  await waitForAllAnimationTargets(inspector);
   const { animationinspector: animationInspector } = inspector;
   const panel = inspector.panelWin.document.getElementById("animation-container");
   return { animationInspector, toolbox, inspector, panel };
@@ -104,6 +105,7 @@ const selectNodeAndWaitForAnimations = async function (data, inspector, reason =
   const onUpdated = inspector.once("inspector-updated");
   await selectNode(data, inspector, reason);
   await onUpdated;
+  await waitForAllAnimationTargets(inspector);
 };
 
 /**
@@ -120,3 +122,17 @@ const setSidebarWidth = async function (width, inspector) {
   inspector.splitBox.setState({ width });
   await onUpdated;
 };
+
+/**
+ * Wait for all AnimationTarget components to be fully loaded
+ * (fetched their related actor and rendered).
+ *
+ * @param {Inspector} inspector
+ */
+const waitForAllAnimationTargets = async function (inspector) {
+  const { animationinspector: animationInspector } = inspector;
+
+  for (let i = 0; i < animationInspector.animations.length; i++) {
+    await animationInspector.once("animation-target-rendered");
+  }
+};

devtools/client/inspector/animation/utils/utils.js

@@ -45,19 +45,23 @@ function findOptimalTimeInterval(minTimeInterval) {
 }
 
 /**
- * Check the equality timing effects from given animations.
+ * Check the equality of the given animations.
  *
  * @param {Array} animations.
- * @param {Array} same to avobe.
- * @return {Boolean} true: same timing effects
+ * @param {Array} same to above.
+ * @return {Boolean} true: same animations
  */
-function isAllTimingEffectEqual(animationsA, animationsB) {
+function isAllAnimationEqual(animationsA, animationsB) {
   if (animationsA.length !== animationsB.length) {
     return false;
   }
 
   for (let i = 0; i < animationsA.length; i++) {
-    if (!isTimingEffectEqual(animationsA[i].state, animationsB[i].state)) {
+    const animationA = animationsA[i];
+    const animationB = animationsB[i];
+
+    if (animationA.actorID !== animationB.actorID ||
+        !isTimingEffectEqual(animationsA[i].state, animationsB[i].state)) {
       return false;
     }
   }
@@ -84,5 +88,5 @@ function isTimingEffectEqual(stateA, stateB) {
 }
 
 exports.findOptimalTimeInterval = findOptimalTimeInterval;
-exports.isAllTimingEffectEqual = isAllTimingEffectEqual;
+exports.isAllAnimationEqual = isAllAnimationEqual;
 exports.isTimingEffectEqual = isTimingEffectEqual;

devtools/client/themes/animation.css

@@ -7,6 +7,7 @@
 :root {
   --animation-even-background-color: rgba(0, 0, 0, 0.05);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
+  --sidebar-width: 200px;
 }
 
 :root.theme-dark {
@@ -28,7 +29,7 @@
 .animation-timeline-tick-list {
   margin-right: 10px;
   position: relative;
-  width: calc(100% - 210px);
+  width: calc(100% - var(--sidebar-width) - 10px);
 }
 
 .animation-timeline-tick-item {
@@ -53,6 +54,19 @@
   background-color: var(--animation-even-background-color);
 }
 
+/* Animation Target */
+.animation-target {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  padding-left: 4px;
+  width: var(--sidebar-width);
+}
+
+.animation-target .tag-name {
+  cursor: default;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;