Event Timing reports EventTarget for more pointer events

Only in cases where there is not a single pointer event registered on a page, blink may entirely optimize out EventDispatch steps, since there are no observers anyway.  This optimization should not normally be detectable.

However, the Event Timing API still measures these events and reports them to the performance timeline.  Because the EventDispatch steps are where we assign EventTarget to Event objects, the Event Timing API was effectively missing the target value whenever we skipped this step.

This patch plumbs the original HitTest target which we fall back to under such situations.

Bug: 1367329
Change-Id: Icf21e6103c98261e9f6e88cef1ac09f3a683751b

event-timing/buffered-and-duration-threshold.html

@@ -19,7 +19,7 @@
       new PerformanceObserver(() => {
         resolve2();
       }).observe({type: "event", durationThreshold: 16});
-      await clickOnElementAndDelay('myDiv', 30);
+      await clickAndBlockMain('myDiv', { duration: 30 });
     });
     const afterFirstClick = performance.now();
     new PerformanceObserver(t.step_func(list => {
@@ -37,7 +37,7 @@
       });
     })).observe({type: 'event', durationThreshold: 16, buffered: true});
     // This should be the only click observed since the other one would not be buffered.
-    await clickOnElementAndDelay('myDiv', 30);
+    await clickAndBlockMain('myDiv', { duration: 30 } );
   });
 }, "PerformanceObserver buffering independent of durationThreshold");
 </script>

event-timing/click-timing.html

@@ -19,44 +19,53 @@
   let timeBeforeFirstClick;
   let timeAfterFirstClick;
   let timeAfterSecondClick;
-  let observedEntries = [];
-  async_test(function(t) {
-    assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
-    new PerformanceObserver(t.step_func(entryList => {
-      observedEntries = observedEntries.concat(entryList.getEntries().filter(
-        entry => entry.name === 'pointerdown'));
-      if (observedEntries.length < 2)
-        return;
-
-      assert_not_equals(timeBeforeFirstClick, undefined);
-      assert_not_equals(timeAfterFirstClick, undefined);
-      assert_not_equals(timeAfterSecondClick, undefined);
-      // First click.
-      verifyClickEvent(observedEntries[0], 'button');
-      assert_between_exclusive(observedEntries[0].processingStart,
-          timeBeforeFirstClick,
-          timeAfterFirstClick,
-          "First click's processingStart");
-      assert_greater_than(timeAfterFirstClick, observedEntries[0].startTime,
-          "timeAfterFirstClick should be later than first click's start time.");
-
-      // Second click.
-      verifyClickEvent(observedEntries[1], 'button');
-      assert_between_exclusive(observedEntries[1].processingStart,
-          timeAfterFirstClick,
-          timeAfterSecondClick,
-          "Second click's processingStart");
-      assert_greater_than(timeAfterSecondClick, observedEntries[1].startTime,
+
+  function testExpectations(observedEntries) {
+    assert_not_equals(timeBeforeFirstClick, undefined);
+    assert_not_equals(timeAfterFirstClick, undefined);
+    assert_not_equals(timeAfterSecondClick, undefined);
+
+    // First click.
+    verifyClickEvent(observedEntries[0], 'button');
+    assert_between_exclusive(observedEntries[0].processingStart,
+        timeBeforeFirstClick,
+        timeAfterFirstClick,
+        "First click's processingStart");
+    assert_greater_than(timeAfterFirstClick, observedEntries[0].startTime,
+        "timeAfterFirstClick should be later than first click's start time.");
+
+    // Second click.
+    verifyClickEvent(observedEntries[1], 'button');
+    assert_between_exclusive(observedEntries[1].processingStart,
+        timeAfterFirstClick,
+        timeAfterSecondClick,
+        "Second click's processingStart");
+    assert_greater_than(timeAfterSecondClick, observedEntries[1].startTime,
           "timeAfterSecondClick should be later than second click's start time.");
-      t.done();
-    })).observe({type: 'event'});
+  }
+
+  promise_test(async function(t) {
+    assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
+
+    const observerPromise = new Promise(resolve => {
+      const observedEntries = [];
+      new PerformanceObserver(entryList => {
+        observedEntries.push(...entryList.getEntriesByName("pointerdown"));
+        if (observedEntries.length < 2)
+          return;
+        resolve(observedEntries);
+      }).observe({type: 'event'});
+    })
+
     timeBeforeFirstClick = performance.now();
-    clickAndBlockMain('button').then( () => {
-      timeAfterFirstClick = performance.now();
-      clickAndBlockMain('button').then(() => {
-        timeAfterSecondClick = performance.now();
-      })
-    });
+    await clickAndBlockMain('button');
+    timeAfterFirstClick = performance.now();
+    await clickAndBlockMain('button');
+    timeAfterSecondClick = performance.now();
+
+    const observedEntries = await observerPromise;
+    testExpectations(observedEntries);
+
   }, "Event Timing: compare click timings.");
 </script>
 </html>

event-timing/crossiframe.html

@@ -46,11 +46,14 @@
 
   promise_test(async t => {
     assert_implements(window.PerformanceEventTiming, "Event Timing is not supported");
+
     // Wait for load event so we can interact with the iframe.
     await new Promise(resolve => {
       window.addEventListener('load', resolve);
     });
+
     clickTimeMin = performance.now();
+
     let observedPointerDown = false;
     const observerPromise = new Promise(resolve => {
       new PerformanceObserver(t.step_func(entries => {
@@ -61,14 +64,16 @@
 
         assert_false(observedPointerDown,
             "Observer of main frames should only capture main-frame event-timing entries");
-        validateEntries(pointerDowns);
         observedPointerDown = true;
-        resolve();
+        resolve(pointerDowns);
       })).observe({type: 'event'});
     });
-    clickAndBlockMain('button').then(() => {
-      clickDone = performance.now();
-    });
+
+    await clickAndBlockMain('button');
+    clickDone = performance.now();
+    const pointerDowns = await observerPromise;
+    validateEntries(pointerDowns);
+
     const childFrameEntriesPromise = new Promise(resolve => {
       window.addEventListener("message", (event) => {
         // testdriver-complete is a webdriver internal event
@@ -80,13 +85,15 @@
         }
       }, false);
     });
+
     // Tap on the iframe, with an offset of 10 to target the div inside it.
     const actions = new test_driver.Actions()
         .pointerMove(10, 10, { origin: document.getElementById("iframe") })
         .pointerDown()
         .pointerUp();
     actions.send();
-    return Promise.all([observerPromise, childFrameEntriesPromise]);
+
+    await childFrameEntriesPromise;
   }, "Event Timing: entries should only be observable by its own frame.");
 
 </script>

event-timing/first-input-interactionid-tap.html

@@ -45,6 +45,8 @@
 
     assert_greater_than(firstInputInteractionId, 0, 'The first input entry should have a non-trivial interactionId');
     assert_equals(firstInputInteractionId, eventTimingPointerDownInteractionId, 'The first input entry should have the same interactionId as the event timing pointerdown entry');
+    assert_equals(firstInputInteractionId.target, eventTimingPointerDownInteractionId.target, 'The first input entry should have the same target as the event timing pointerdown entry');
+    assert_not_equals(firstInputInteractionId.target, null, 'The first input entry should have a non-null target');
 
   }, "The interactionId of the first input entry should match the same pointerdown entry of event timing when tap.");
 </script>

event-timing/resources/event-timing-test-utils.js

@@ -1,25 +1,45 @@
-// Clicks on the element with the given ID. It adds an event handler to the element which
-// ensures that the events have a duration of at least |delay|. Calls |callback| during
-// event handler if |callback| is provided.
-async function clickOnElementAndDelay(id, delay, callback) {
-  const element = document.getElementById(id);
-  const pointerdownHandler = () => {
-    mainThreadBusy(delay);
-    if (callback) {
-      callback();
-    }
-    element.removeEventListener("pointerdown", pointerdownHandler);
-  };
+function mainThreadBusy(ms) {
+  const target = performance.now() + ms;
+  while (performance.now() < target);
+}
+
+async function wait() {
+  return new Promise(resolve => step_timeout(resolve, 0));
+}
+
+async function raf() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
 
-  element.addEventListener("pointerdown", pointerdownHandler);
-  await click(element);
+async function afterNextPaint() {
+  await raf();
+  await wait();
 }
 
-function mainThreadBusy(duration) {
-  const now = performance.now();
-  while (performance.now() < now + duration);
+async function blockNextEventListener(target, eventType, duration = 120) {
+  return new Promise(resolve => {
+    target.addEventListener(eventType, () => {
+      mainThreadBusy(duration);
+      resolve();
+    }, { once: true });
+  });
 }
 
+async function clickAndBlockMain(id, options = {}) {
+  options = {
+    eventType: "pointerdown",
+    duration: 120,
+    ...options
+  };
+  const element = document.getElementById(id);
+
+  await Promise.all([
+    blockNextEventListener(element, options.eventType, options.duration),
+    click(element),
+  ]);
+}
+
+
 // This method should receive an entry of type 'event'. |isFirst| is true only when we want
 // to check that the event also happens to correspond to the first event. In this case, the
 // timings of the 'first-input' entry should be equal to those of this entry. |minDuration|
@@ -58,27 +78,7 @@ function verifyClickEvent(entry, targetId, isFirst=false, minDuration=104, event
   verifyEvent(entry, event, targetId, isFirst, minDuration);
 }
 
-function wait() {
-  return new Promise((resolve, reject) => {
-    step_timeout(() => {
-      resolve();
-    }, 0);
-  });
-}
 
-function clickAndBlockMain(id) {
-  return new Promise((resolve, reject) => {
-    clickOnElementAndDelay(id, 120, resolve);
-  });
-}
-
-function waitForTick() {
-  return new Promise(resolve => {
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(resolve);
-    });
-  });
-}
   // Add a PerformanceObserver and observe with a durationThreshold of |dur|. This test will
   // attempt to check that the duration is appropriately checked by:
   // * Asserting that entries received have a duration which is the smallest multiple of 8
@@ -115,7 +115,7 @@ async function testDuration(t, id, numEntries, dur, slowDur) {
   const clicksPromise = new Promise(async resolve => {
     for (let index = 0; index < numEntries; index++) {
       // Add some click events that has at least slowDur for duration.
-      await clickOnElementAndDelay(id, slowDur);
+      await clickAndBlockMain(id, { duration: slowDur });
     }
     resolve();
   });
@@ -154,11 +154,11 @@ async function testDuration(t, id, numEntries, dur, slowDur) {
       // These clicks are expected to be ignored, unless the test has some extra delays.
       // In that case, the test will verify the event duration to ensure the event duration is
       // greater than the duration threshold
-      await clickOnElementAndDelay(id, processingDelay);
+      await clickAndBlockMain(id, { duration: processingDelay });
     }
     // Send click with event duration equals to or greater than |durThreshold|, so the
     // observer promise can be resolved
-    await clickOnElementAndDelay(id, durThreshold);
+    await clickAndBlockMain(id, { duration: durThreshold });
     return observerPromise;
   }
 
@@ -269,7 +269,7 @@ async function testEventType(t, eventType, looseCount=false) {
   // Trigger two 'fast' events of the type.
   await applyAction(eventType, target);
   await applyAction(eventType, target);
-  await waitForTick();
+  await afterNextPaint();
   await new Promise(t.step_func(resolve => {
     testCounts(t, resolve, looseCount, eventType, initialCount + 2);
   }));
@@ -313,7 +313,7 @@ async function testEventType(t, eventType, looseCount=false) {
   // Cause a slow event.
   await applyAction(eventType, target);
 
-  await waitForTick();
+  await afterNextPaint();
 
   await observerPromise;
 }

event-timing/shadow-dom-null-target.html

@@ -42,7 +42,7 @@
     Math.ceil(span1Rect.y + span1Rect.height / 2)
   ).send();
 
-  await waitForTick();
+  await afterNextPaint();
 
   const observerPromise = new Promise(resolve => {
     new PerformanceObserver(t.step_func(entryList => {
@@ -60,7 +60,7 @@
     Math.ceil(span2Rect.y + span2Rect.height / 2)
   ).send();
 
-  await waitForTick();
+  await afterNextPaint();
 
   await observerPromise;
 }, "Event Timing: Move pointer within shadow DOM should create event-timing entry with null target.");