From d1cb6da26d902dbbd51fc2c0b5e64b8217d5f855 Mon Sep 17 00:00:00 2001 From: Michal Mocny Date: Fri, 2 Feb 2024 08:42:58 -0800 Subject: [PATCH] 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 --- .../buffered-and-duration-threshold.html | 4 +- event-timing/click-timing.html | 81 ++++++++++-------- event-timing/crossiframe.html | 19 +++-- .../first-input-interactionid-tap.html | 2 + .../resources/event-timing-test-utils.js | 84 +++++++++---------- event-timing/shadow-dom-null-target.html | 4 +- 6 files changed, 106 insertions(+), 88 deletions(-) diff --git a/event-timing/buffered-and-duration-threshold.html b/event-timing/buffered-and-duration-threshold.html index 4a7a63f59afccf7..5f8d27c03457011 100644 --- a/event-timing/buffered-and-duration-threshold.html +++ b/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"); diff --git a/event-timing/click-timing.html b/event-timing/click-timing.html index 24bad0aedca88c0..f2b6922f5e58506 100644 --- a/event-timing/click-timing.html +++ b/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."); diff --git a/event-timing/crossiframe.html b/event-timing/crossiframe.html index df4d94f09aef1d5..c307028c4139291 100644 --- a/event-timing/crossiframe.html +++ b/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."); diff --git a/event-timing/first-input-interactionid-tap.html b/event-timing/first-input-interactionid-tap.html index f5e080eb1652e55..17d9a5e9812b8cf 100644 --- a/event-timing/first-input-interactionid-tap.html +++ b/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."); diff --git a/event-timing/resources/event-timing-test-utils.js b/event-timing/resources/event-timing-test-utils.js index 859bc0f7bf501de..9670d8d26f8bd9e 100644 --- a/event-timing/resources/event-timing-test-utils.js +++ b/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; } diff --git a/event-timing/shadow-dom-null-target.html b/event-timing/shadow-dom-null-target.html index 89587312c89ba20..0872e4e8faf0c65 100644 --- a/event-timing/shadow-dom-null-target.html +++ b/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.");