[Event Timing] Expose interactionId to Keypress & keydown/up under co…

…mposition This CL changes the logic of generating interaction Id for keyboard events in performance event timing. Non-composition: * Previous behaviour: Interaction id is generated on keyups, and will match the related keydown backwards. * New behaviour: Interaction id is now generated on the keydown entry, and match forward with related keypress and keyup. Composition(IME, virtual keyboard, etc.): * Previous behaviour: Interaction id is assigned to each input event only. * New behaviour: Interaction id is generated on the first input or keydown event (whichever comes first) before the compositionupdate, and any further keydown or input event before the compositionupdate and any number of keyups after compositionupdate will be matched with same interaction id. This may affect the total duration of INP since more events are now being meatured, eg. keypress. Low-Coverage-Reason: OTHER This CL is also covered by wpt manual test. Bug: 1456384 Change-Id: Ie736f3f189e9a349badbe03c4a65627ac491eff4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4632521 Reviewed-by: Robert Flack <[email protected]> Commit-Queue: Aoyuan Zuo <[email protected]> Reviewed-by: Michal Mocny <[email protected]> Reviewed-by: Aoyuan Zuo <[email protected]> Cr-Commit-Position: refs/heads/main@{#1261339}
Tobias710219 · Feb 15, 2024 · efc2d1f · efc2d1f
1 parent 9f74d5a
commit efc2d1f
Show file tree

Hide file tree

Showing 2 changed files with 201 additions and 0 deletions.
diff --git a/event-timing/interactionid-composition-manual.html b/event-timing/interactionid-composition-manual.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html>
+
+<head>
+    <style>
+        table,
+        td {
+            padding: 8px;
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <title>Event Timing: interactionId composition events.</title>
+    <form>
+        <b> Select your Operating System from the list</b>
+        <select id="option" onchange="dropdownMenu()">
+            <option> ---Choose OS--- </option>
+            <option> Linux </option>
+            <option> Windows </option>
+        </select>
+        <p> Your selected OS is:
+            <input type="text" id="os" size="20">
+        </p>
+    </form>
+    <pre>
+    Steps:
+    1) Open <b id = "IMEtype"></b> IME and select Hiragana input method.
+    2) Click at the above textbox and then type 'a' using keyboard.
+    3) Press the '{Enter}' key to complete the IME composition.
+    4) <a href="interactionid-composition-manual.html">Click here</a> to test again if not following the steps exactly.
+
+    <textarea id='test' placeholder="enter 'a'"></textarea>
+
+Expected Result:
+    The test is successful when the sentence "PASS Event Timing: interactionId composition events" is displayed
+    at the bottom of the page after completing all the steps. If there is an indicated Harness Error next to the sentence, the test failed.
+    Moreover, the event log table below provides a summary of the keyboard events processed throughout the test.
+    Here is a breakdown of the columns in the table:
+
+    1. <strong>InteractionId</strong>: Identifies the specific interaction to which an event belongs.
+    2. <strong>EventType</strong>: Specifies the type of event that occurred during a particular interaction. There are
+    seven possible event types:
+    - 'keydown'
+    - 'keypress'
+    - 'input'
+    - 'keyup'
+    - 'compositionupdate'
+    - 'compositionstart'
+    - 'compositionend'
+    3. <strong>NumberOfEvents</strong>: Indicates the number of times a particular type of event was recorded in a single interaction.
+
+</pre>
+
+    <table id="eventLogTable">
+        <tr>
+            <td>InteractionId</td>
+            <td>Event Type</td>
+            <td>Number of Events</td>
+        </tr>
+    </table>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src=resources/event-timing-test-utils.js></script>
+    <script>
+        setup({ explicit_timeout: true, explicit_done: true });
+
+        function dropdownMenu() {
+            var list = document.getElementById("option");
+            document.getElementById("os").value = list.options[list.selectedIndex].text;
+            if (document.getElementById("os").value == "Linux") {
+                document.getElementById("IMEtype").textContent = "Japanese - Mozc";
+            }
+            else if (document.getElementById("os").value == "Windows") {
+                document.getElementById("IMEtype").textContent = "Japanese Microsoft";
+            }
+        }
+
+        function logEventSummary(interactionId, eventType, nrOfEvents) {
+
+            var table = document.getElementById("eventLogTable");
+            var row = table.insertRow();
+
+            // Add values to the table
+            var cell = row.insertCell();
+            cell.innerHTML = interactionId;
+            cell = row.insertCell();
+            cell.innerHTML = eventType;
+            cell = row.insertCell();
+            cell.innerHTML = nrOfEvents;
+        }
+
+        let observedEntries = [];
+        let map = new Map();
+        const events = ['keydown', 'keypress', 'input', 'keyup', 'compositionupdate', 'compositionstart', 'compositionend'];
+
+
+        function eventsForCheck(entry) {
+            if (events.includes(entry.name)) {
+                if (map.has(entry.name)) {
+                    map.get(entry.name).push({ interactionId: entry.interactionId, startTime: entry.startTime });
+                    return true;
+                } else {
+                    map.set(entry.name, [{ interactionId: entry.interactionId, startTime: entry.startTime }]);
+                    return true;
+                }
+            }
+
+            return false;
+        }
+
+        test(function () {
+            assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
+            new PerformanceObserver(entryList => {
+                observedEntries = observedEntries.concat(entryList.getEntries().filter(eventsForCheck));
+
+                if (!observedEntries.find(entry => entry.name === "compositionend"))
+                    return;
+
+                assert_equals(map.get('compositionstart')[0].interactionId, 0, 'Compositionstart should not have an interactionId');
+                logEventSummary(map.get('compositionstart')[0].interactionId, "compositionstart", 1);
+                assert_equals(map.get("input").length, map.get("compositionupdate").length, "For every input there should be exactly one compositionupdate");
+
+                // Create a Set to track seen input values
+                const seenInteractionIds = new Set();
+
+                map.get("input").forEach(value => {
+                    assert_false(seenInteractionIds.has(value.interactionId), "All Inputs shall have unique InteractionIds.");
+                    seenInteractionIds.add(value);
+                    assert_greater_than(value.interactionId, 0, 'Input should have an interactionId greater than 0');
+                    const filteredArrayKeydowns = map.get('keydown').filter(interactionId => interactionId === value.interactionId);
+                    const countKeydowns = filteredArrayKeydowns.length;
+                    logEventSummary(value.interactionId, "keydown", countKeydowns);
+                    assert_true((countKeydowns <= 1), "For each input there should be no more than 1 keydown.");
+
+                    logEventSummary(value.interactionId, "compositionupdate", 1);
+                    logEventSummary(value.interactionId, "input", 1);
+
+                    const filteredArrayKeyups = map.get('keyup').filter(interactionId => interactionId === value.interactionId);
+                    const countKeyups = filteredArrayKeyups.length;
+                    logEventSummary(value.interactionId, "keyup", countKeyups);
+
+                    filteredArrayKeyups.forEach(keyupEntry => {
+                        assert_true(keyupEntry.startTime > value.startTime, 'Keyup start time should be greater than input start time');
+                    });
+
+                });
+
+                assert_equals(map.get('compositionend')[0].interactionId, 0, 'Compositionend should not have an interactionId');
+                logEventSummary(map.get('compositionstart')[0].interactionId, "compositionend", 1);
+                done();
+                observedEntries = [];
+            }).observe({ type: "event" });
+
+            addListeners(document.getElementById('test'), events);
+        });
+
+    </script>
+</body>
+
+</html>
diff --git a/event-timing/interactionid-keypress.html b/event-timing/interactionid-keypress.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8 />
+<meta name="timeout" content="long">
+<title>Event Timing: interactionId-keypress.</title>
+<textarea id='test'></textarea>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/resources/testdriver.js></script>
+<script src=/resources/testdriver-actions.js></script>
+<script src=/resources/testdriver-vendor.js></script>
+<script src=resources/event-timing-test-utils.js></script>
+
+<script>
+  let observedEntries = [];
+  let map = new Map();
+          const events = ['keydown','keypress','keyup'];
+
+  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(filterAndAddToMap(events, map)));
+      if (observedEntries.length < 3)
+        return;
+      assert_greater_than(map.get('keypress'), 0, 'Should have a non-trivial interactionId');
+      assert_equals(map.get('keydown'), map.get('keypress'), 'The keydown and the keypress should have the same interactionId');
+      assert_equals(map.get('keyup'), map.get('keypress'), 'The keyup and the keypress should have the same interactionId');
+      assert_equals('t', document.getElementById('test').value);
+      t.done();
+    })).observe({ type: "event" });
+
+    addListenersAndPress(document.getElementById('test'), 't', events);
+  }, "Event Timing: compare event timing interactionId for keypress.");
+
+
+</script>
+
+</html>