Bug 1453010 - Part 3: Select a node by clicking on dom node element in AnimationTargetCompositor. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 27 Apr 2018 15:19:48 +0900
changeset 472315 a1666927ab16389f635786c38ad16a91acef5494
parent 472314 407a33054ca6982ecf4aef9be233854db3a16f56
child 472316 cd392b05865ea0059a8134e57a8db6e6cdf71a8b
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1453010
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1453010 - Part 3: Select a node by clicking on dom node element in AnimationTargetCompositor. r=gl This patch depends on following PR. https://github.com/devtools-html/devtools-core/pull/1028 MozReview-Commit-ID: HNW90OGsX3O
devtools/client/inspector/animation/animation.js
devtools/client/inspector/animation/components/AnimationTarget.js
--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -42,16 +42,17 @@ class AnimationInspector {
       this.removeAnimationsCurrentTimeListener.bind(this);
     this.rewindAnimationsCurrentTime = this.rewindAnimationsCurrentTime.bind(this);
     this.selectAnimation = this.selectAnimation.bind(this);
     this.setAnimationsCurrentTime = this.setAnimationsCurrentTime.bind(this);
     this.setAnimationsPlaybackRate = this.setAnimationsPlaybackRate.bind(this);
     this.setAnimationsPlayState = this.setAnimationsPlayState.bind(this);
     this.setDetailVisibility = this.setDetailVisibility.bind(this);
     this.setHighlightedNode = this.setHighlightedNode.bind(this);
+    this.setSelectedNode = this.setSelectedNode.bind(this);
     this.simulateAnimation = this.simulateAnimation.bind(this);
     this.simulateAnimationForKeyframesProgressBar =
       this.simulateAnimationForKeyframesProgressBar.bind(this);
     this.toggleElementPicker = this.toggleElementPicker.bind(this);
     this.update = this.update.bind(this);
     this.onAnimationStateChanged = this.onAnimationStateChanged.bind(this);
     this.onAnimationsCurrentTimeUpdated = this.onAnimationsCurrentTimeUpdated.bind(this);
     this.onAnimationsMutation = this.onAnimationsMutation.bind(this);
@@ -64,17 +65,16 @@ class AnimationInspector {
     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 {
@@ -88,16 +88,17 @@ class AnimationInspector {
       removeAnimationsCurrentTimeListener,
       rewindAnimationsCurrentTime,
       selectAnimation,
       setAnimationsCurrentTime,
       setAnimationsPlaybackRate,
       setAnimationsPlayState,
       setDetailVisibility,
       setHighlightedNode,
+      setSelectedNode,
       simulateAnimation,
       simulateAnimationForKeyframesProgressBar,
       toggleElementPicker,
     } = this;
 
     const target = this.inspector.target;
     this.animationsFront = new AnimationsFront(target.client, target.form);
 
@@ -348,16 +349,22 @@ class AnimationInspector {
   async rewindAnimationsCurrentTime() {
     await this.setAnimationsCurrentTime(0, true);
   }
 
   selectAnimation(animation) {
     this.inspector.store.dispatch(updateSelectedAnimation(animation));
   }
 
+  async setSelectedNode(nodeFront) {
+    await this.inspector.getCommonComponentProps()
+              .setSelectedNode(nodeFront, { reason: "animation-panel" });
+    await nodeFront.scrollIntoView();
+  }
+
   async setAnimationsCurrentTime(currentTime, shouldRefresh) {
     this.stopAnimationsCurrentTimeTimer();
     this.onAnimationsCurrentTimeUpdated(currentTime);
 
     if (!shouldRefresh && this.isCurrentTimeSet) {
       return;
     }
 
--- a/devtools/client/inspector/animation/components/AnimationTarget.js
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -21,16 +21,17 @@ class AnimationTarget extends Component 
     return {
       animation: PropTypes.object.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
       highlightedNode: PropTypes.string.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       setHighlightedNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       nodeFront: null,
@@ -76,16 +77,17 @@ class AnimationTarget extends Component 
   }
 
   render() {
     const {
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       highlightedNode,
       setHighlightedNode,
+      setSelectedNode,
     } = this.props;
 
     const { nodeFront } = this.state;
 
     if (!nodeFront) {
       return dom.div(
         {
           className: "animation-target"
@@ -101,16 +103,17 @@ class AnimationTarget extends Component 
                    (isHighlighted ? " highlighting" : ""),
       },
       Rep(
         {
           defaultRep: ElementNode,
           mode: MODE.TINY,
           inspectIconTitle: getInspectorStr("inspector.nodePreview.highlightNodeLabel"),
           object: translateNodeFrontToGrip(nodeFront),
+          onDOMNodeClick: () => setSelectedNode(nodeFront),
           onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
           onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
           onInspectIconClick: (_, e) => {
             e.stopPropagation();
             setHighlightedNode(isHighlighted ? null : nodeFront);
           }
         }
       )