Bug 1448732 - Part 2: Open detail pane by clicking on summary graph instead of selecting the node. r=pbro

MozReview-Commit-ID: CeMj2VJwRR5 --HG-- extra : rebase_source : 98a9bb6339d34872009ce6e57fc81f36b415fa7e
2018-04-03 12:26:36 +09:00 · 2018-04-03 12:26:36 +09:00 · b7f7bcc74d
--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@ -21,7 +21,7 @@ const TEST_DATA = [
 add_task(async function() {
  await addTab(URL_ROOT + "doc_simple_animation.html");
  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
-  const { inspector, panel } = await openAnimationInspector();
+  const { animationInspector, panel } = await openAnimationInspector();

  info("Checking animated property list and items existence at initial");
  ok(!panel.querySelector(".animated-property-list"),
@ -29,7 +29,8 @@ add_task(async function() {

  for (const { targetClass, expectedNumber } of TEST_DATA) {
    info(`Checking animated-property-list and items existence at ${ targetClass }`);
-    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
+    await clickOnAnimationByTargetSelector(animationInspector,
+                                           panel, `.${ targetClass }`);
    ok(panel.querySelector(".animated-property-list"),
      `The animated-property-list should be in the DOM at ${ targetClass }`);
    const itemEls =
--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
@ -23,13 +23,14 @@ const TEST_DATA = [
 add_task(async function() {
  await addTab(URL_ROOT + "doc_multi_timings.html");
  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
-  const { inspector, panel } = await openAnimationInspector();
+  const { animationInspector, panel } = await openAnimationInspector();

  info("Checking title in each header of animation detail");

  for (const { targetClass, expectedTitle } of TEST_DATA) {
    info(`Checking title at ${ targetClass }`);
-    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
+    await clickOnAnimationByTargetSelector(animationInspector,
+                                           panel, `.${ targetClass }`);
    const titleEl = panel.querySelector(".animation-detail-title");
    is(titleEl.textContent, expectedTitle,
      `Title of "${ targetClass }" should be "${ expectedTitle }"`);
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
@ -412,11 +412,12 @@ const TEST_DATA = [

 add_task(async function() {
  await addTab(URL_ROOT + "doc_multi_keyframes.html");
-  const { inspector, panel } = await openAnimationInspector();
+  const { animationInspector, panel } = await openAnimationInspector();

  for (const { properties, targetClass } of TEST_DATA) {
    info(`Checking keyframes graph for ${ targetClass }`);
-    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
+    await clickOnAnimationByTargetSelector(animationInspector,
+                                           panel, `.${ targetClass }`);

    for (const property of properties) {
      const {
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@ -192,11 +192,12 @@ const TEST_DATA = [
 add_task(async function() {
  await addTab(URL_ROOT + "doc_multi_easings.html");
  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
-  const { inspector, panel } = await openAnimationInspector();
+  const { animationInspector, panel } = await openAnimationInspector();

  for (const { properties, targetClass } of TEST_DATA) {
    info(`Checking keyframes graph for ${ targetClass }`);
-    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
+    await clickOnAnimationByTargetSelector(animationInspector,
+                                           panel, `.${ targetClass }`);

    for (const { name, expectedHints } of properties) {
      const testTarget = `${ name } in ${ targetClass }`;
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@ -136,11 +136,12 @@ const TEST_DATA = [
 add_task(async function() {
  await addTab(URL_ROOT + "doc_multi_keyframes.html");
  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
-  const { inspector, panel } = await openAnimationInspector();
+  const { animationInspector, panel } = await openAnimationInspector();

  for (const { properties, targetClass } of TEST_DATA) {
    info(`Checking keyframe marker for ${ targetClass }`);
-    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
+    await clickOnAnimationByTargetSelector(animationInspector,
+                                           panel, `.${ targetClass }`);

    for (const { name, expectedValues } of properties) {
      const testTarget = `${ name } in ${ targetClass }`;
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
@ -36,7 +36,7 @@ add_task(async function() {

  for (const { targetClass, expectedLabel } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking animation name element existance for ${ targetClass }`);
    const animationNameEl = animationItemEl.querySelector(".animation-name");
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@ -404,7 +404,7 @@ add_task(async function() {
    } = testData;

    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking computed timing path existance for ${ targetClass }`);
    const computedTimingPathEl =
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
@ -56,7 +56,7 @@ add_task(async function() {

  for (const { targetClass, expectedResult } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking delay sign existance for ${ targetClass }`);
    const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
@ -36,7 +36,7 @@ add_task(async function() {

  for (const { targetClass, expectedPath } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking effect timing path existance for ${ targetClass }`);
    const effectTimingPathEl =
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
@ -48,7 +48,7 @@ add_task(async function() {

  for (const { targetClass, expectedResult } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking endDelay sign existance for ${ targetClass }`);
    const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign");
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
@ -29,7 +29,7 @@ add_task(async function() {

  for (const { targetClass, expectedPath } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking negative delay path existence for ${ targetClass }`);
    const negativeDelayPathEl =
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
@ -30,7 +30,7 @@ add_task(async function() {

  for (const { targetClass, expectedPath } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);

    info(`Checking negative endDelay path existance for ${ targetClass }`);
    const negativeEndDelayPathEl =
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@ -181,7 +181,7 @@ add_task(async function() {

  for (const { targetClass, expectedResult } of TEST_DATA) {
    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClass);
+      findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);
    const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");

    info(`Checking tooltip for ${ targetClass }`);
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@ -106,14 +106,24 @@ const removeAnimatedElementsExcept = async function(selectors) {
 const clickOnAnimation = async function(animationInspector, panel, index) {
  info("Click on animation " + index + " in the timeline");
  const summaryGraphEl = panel.querySelectorAll(".animation-summary-graph")[index];
-  // Scroll to show the timeBlock since the element may be out of displayed area.
-  summaryGraphEl.scrollIntoView(false);
-  const bounds = summaryGraphEl.getBoundingClientRect();
-  const x = bounds.width / 2;
-  const y = bounds.height / 2;
-  EventUtils.synthesizeMouse(summaryGraphEl, x, y, {}, summaryGraphEl.ownerGlobal);
+  await clickOnSummaryGraph(animationInspector, panel, summaryGraphEl);
+};

-  await waitForAnimationDetail(animationInspector);
+/**
+ * Click on an animation by given selector of node which is target element of animation.
+ *
+ * @param {AnimationInspector} animationInspector.
+ * @param {AnimationsPanel} panel
+ *        The panel instance.
+ * @param {String} selector
+ *        Selector of node which is target element of animation.
+ */
+const clickOnAnimationByTargetSelector = async function(animationInspector,
+                                                        panel, selector) {
+  info(`Click on animation whose selector of target element is '${ selector }'`);
+  const animationItemEl = findAnimationItemElementsByTargetSelector(panel, selector);
+  const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
+  await clickOnSummaryGraph(animationInspector, panel, summaryGraphEl);
 };

 /**
@ -212,6 +222,25 @@ const clickOnPlaybackRateSelector = async function(animationInspector, panel, ra
  await waitForSummaryAndDetail(animationInspector);
 };

+/**
+ * Click on given summary graph element.
+ *
+ * @param {AnimationInspector} animationInspector
+ * @param {AnimationsPanel} panel
+ * @param {Element} summaryGraphEl
+ */
+const clickOnSummaryGraph = async function(animationInspector, panel, summaryGraphEl) {
+  // Disable pointer-events of the scrubber in order to avoid to click accidently.
+  const scrubberEl = panel.querySelector(".current-time-scrubber");
+  scrubberEl.style.pointerEvents = "none";
+  // Scroll to show the timeBlock since the element may be out of displayed area.
+  summaryGraphEl.scrollIntoView(false);
+  EventUtils.synthesizeMouseAtCenter(summaryGraphEl, {}, summaryGraphEl.ownerGlobal);
+  await waitForAnimationDetail(animationInspector);
+  // Restore the scrubber style.
+  scrubberEl.style.pointerEvents = "unset";
+};
+
 /**
 * Drag on the scrubber to update the animation current time.
 *
@ -600,22 +629,21 @@ function isPassingThrough(pathSegList, x, y) {
 }

 /**
- * Return animation item element by target node class.
- * This function compares betweem animation-target textContent and given className.
- * Also, this function premises one class name.
+ * Return animation item element by target node selector.
+ * This function compares betweem animation-target textContent and given selector.
+ * Then returns matched first item.
 *
 * @param {Element} panel - root element of animation inspector.
- * @param {String} targetClassName - class name of tested element.
+ * @param {String} selector - selector of tested element.
 * @return {Element} animation item element.
 */
-function findAnimationItemElementsByTargetClassName(panel, targetClassName) {
-  const animationTargetEls = panel.querySelectorAll(".animation-target");
+function findAnimationItemElementsByTargetSelector(panel, selector) {
+  const attrNameEls = panel.querySelectorAll(".animation-target .attrName");
+  const regexp = new RegExp(`\\${ selector }(\\.|$)`, "gi");

-  for (const animationTargetEl of animationTargetEls) {
-    const className = animationTargetEl.textContent.split(".")[1];
-
-    if (className === targetClassName) {
-      return animationTargetEl.closest(".animation-item");
+  for (const attrNameEl of attrNameEls) {
+    if (regexp.exec(attrNameEl.textContent)) {
+      return attrNameEl.closest(".animation-item");
    }
  }