Bug 1210796 - Part 11: Disable clicking on keyframes because we can’t calculate correct current time since the animation detail handles the animation progress not time. r=pbro

MozReview-Commit-ID: JhXNREIyH9X

--HG--
extra : rebase_source : e6c77e396241049ef3d0203a3629e758351c878e

devtools/client/animationinspector/components/animation-details.js

@@ -26,8 +26,6 @@ const L10N =
 function AnimationDetails(serverTraits) {
   EventEmitter.decorate(this);
 
-  this.onFrameSelected = this.onFrameSelected.bind(this);
-
   this.keyframeComponents = [];
   this.serverTraits = serverTraits;
 }
@@ -53,7 +51,6 @@ AnimationDetails.prototype = {
 
   unrender: function () {
     for (let component of this.keyframeComponents) {
-      component.off("frame-selected", this.onFrameSelected);
       component.destroy();
     }
     this.keyframeComponents = [];
@@ -207,11 +204,6 @@ AnimationDetails.prototype = {
     this.emit("animation-detail-rendering-completed");
   }),
 
-  onFrameSelected: function (e, args) {
-    // Relay the event up, it's needed in parents too.
-    this.emit(e, args);
-  },
-
   renderAnimatedPropertiesHeader: function () {
     // Add animated property header.
     const headerEl = createNode({
@@ -294,7 +286,6 @@ AnimationDetails.prototype = {
         animation: this.animation,
         animationType: animationTypes[propertyName]
       });
-      keyframesComponent.on("frame-selected", this.onFrameSelected);
       this.keyframeComponents.push(keyframesComponent);
     }
   },

devtools/client/animationinspector/components/animation-timeline.js

@@ -58,7 +58,6 @@ function AnimationsTimeline(inspector, serverTraits) {
   this.onScrubberMouseMove = this.onScrubberMouseMove.bind(this);
   this.onAnimationSelected = this.onAnimationSelected.bind(this);
   this.onWindowResize = this.onWindowResize.bind(this);
-  this.onFrameSelected = this.onFrameSelected.bind(this);
   this.onTimelineDataChanged = this.onTimelineDataChanged.bind(this);
 
   EventEmitter.decorate(this);
@@ -272,7 +271,6 @@ AnimationsTimeline.prototype = {
     TimeScale.reset();
     this.destroySubComponents("targetNodes");
     this.destroySubComponents("timeBlocks");
-    this.details.off("frame-selected", this.onFrameSelected);
     this.details.unrender();
     this.animationsEl.innerHTML = "";
     this.off("timeline-data-changed", this.onTimelineDataChanged);
@@ -334,12 +332,8 @@ AnimationsTimeline.prototype = {
   }),
 
   /**
-   * When a frame gets selected, move the scrubber to the corresponding position
+   * When move the scrubber to the corresponding position
    */
-  onFrameSelected: function (e, {x}) {
-    this.moveScrubberTo(x, true);
-  },
-
   onScrubberMouseDown: function (e) {
     this.moveScrubberTo(e.pageX);
     this.win.addEventListener("mouseup", this.onScrubberMouseUp);
@@ -473,7 +467,6 @@ AnimationsTimeline.prototype = {
 
       timeBlock.on("selected", this.onAnimationSelected);
     }
-    this.details.on("frame-selected", this.onFrameSelected);
 
     // Use the document's current time to position the scrubber (if the server
     // doesn't provide it, hide the scrubber entirely).

devtools/client/animationinspector/components/keyframes.js

@@ -21,7 +21,6 @@ let LINEAR_GRADIENT_ID_COUNTER = 0;
  */
 function Keyframes() {
   EventEmitter.decorate(this);
-  this.onClick = this.onClick.bind(this);
 }
 
 exports.Keyframes = Keyframes;
@@ -34,12 +33,9 @@ Keyframes.prototype = {
       parent: this.containerEl,
       attributes: {"class": "keyframes"}
     });
-
-    this.containerEl.addEventListener("click", this.onClick);
   },
 
   destroy: function () {
-    this.containerEl.removeEventListener("click", this.onClick);
     this.keyframesEl.remove();
     this.containerEl = this.keyframesEl = this.animation = null;
   },
@@ -99,22 +95,6 @@ Keyframes.prototype = {
         }
       });
     }
-  },
-
-  onClick: function (e) {
-    // If the click happened on a frame, tell our parent about it.
-    if (!e.target.classList.contains("frame")) {
-      return;
-    }
-
-    e.stopPropagation();
-    this.emit("frame-selected", {
-      animation: this.animation,
-      propertyName: this.propertyName,
-      offset: parseFloat(e.target.dataset.offset),
-      value: e.target.getAttribute("title"),
-      x: e.target.offsetLeft + e.target.closest(".frames").offsetLeft
-    });
   }
 };
 

devtools/client/animationinspector/test/browser.ini

@@ -27,7 +27,6 @@ support-files =
 [browser_animation_controller_exposes_document_currentTime.js]
 skip-if = os == "linux" && !debug # Bug 1234567
 [browser_animation_empty_on_invalid_nodes.js]
-[browser_animation_keyframe_click_to_set_time.js]
 [browser_animation_keyframe_markers.js]
 [browser_animation_mutations_with_same_names.js]
 [browser_animation_panel_exists.js]

devtools/client/animationinspector/test/browser_animation_keyframe_click_to_set_time.js

@@ -1,49 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that animated properties' keyframes can be clicked, and that doing so
-// sets the current time in the timeline.
-
-add_task(function* () {
-  yield addTab(URL_ROOT + "doc_keyframes.html");
-  let {panel} = yield openAnimationInspector();
-  let timeline = panel.animationsTimelineComponent;
-  let {scrubberEl} = timeline;
-
-  // XXX: The scrollbar is placed in the timeline in such a way that it causes
-  // the animations to be slightly offset with the header when it appears.
-  // So for now, let's hide the scrollbar. Bug 1229340 should fix this.
-  timeline.animationsEl.style.overflow = "hidden";
-
-  info("Click on the first keyframe of the first animated property");
-  yield clickKeyframe(panel, "background-color", 0);
-
-  info("Make sure the scrubber stopped moving and is at the right position");
-  yield assertScrubberMoving(panel, false);
-  checkScrubberPos(scrubberEl, 0);
-
-  info("Click on a keyframe in the middle");
-  yield clickKeyframe(panel, "transform", 2);
-
-  info("Make sure the scrubber is at the right position");
-  checkScrubberPos(scrubberEl, 50);
-});
-
-function* clickKeyframe(panel, property, index) {
-  let keyframeComponent = getKeyframeComponent(panel, property);
-  let keyframeEl = getKeyframeEl(panel, property, index);
-
-  let onSelect = keyframeComponent.once("frame-selected");
-  EventUtils.sendMouseEvent({type: "click"}, keyframeEl,
-                            keyframeEl.ownerDocument.defaultView);
-  yield onSelect;
-}
-
-function checkScrubberPos(scrubberEl, pos) {
-  let newPos = Math.round(parseFloat(scrubberEl.style.left));
-  let expectedPos = Math.round(pos);
-  is(newPos, expectedPos, `The scrubber is at ${pos}%`);
-}

devtools/client/themes/animationinspector.css

@@ -624,7 +624,6 @@ body {
   width: 0;
   height: 0;
   background-color: inherit;
-  cursor: pointer;
 }
 
 .keyframes .frame::before {