Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reland: [soft navigations] Enable keyboard shortcuts as soft navigation triggers #42213

Merged
merged 1 commit into from
Oct 2, 2023
Merged

Reland: [soft navigations] Enable keyboard shortcuts as soft navigation triggers #42213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions soft-navigation-heuristics/image-lcp-followed-by-two-image-softnavs-lcp.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

const first_click_paint_promise = waitOnPaintEntriesPromise();

click(link);
interact(link);
await new Promise(resolve => {
(new PerformanceObserver(resolve)).observe({
type: 'soft-navigation'
Expand All @@ -54,7 +54,7 @@

const second_click_paint_promise = waitOnPaintEntriesPromise();
const preClickLcp2 = await getLcpEntries();
click(link);
interact(link);
await new Promise(resolve => {
(new PerformanceObserver(() => resolve())).observe({
type: 'soft-navigation'
Expand Down
30 changes: 30 additions & 0 deletions soft-navigation-heuristics/keydown.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Detect hashchange event.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/soft-navigation-helper.js"></script>
</head>
<!-- Not including a body element to ensure the keydown heuristic works on
malformed HTML -->
<main id=main>
<div>
First LCP!
</div>
</main>
<script>
testSoftNavigation({
addContent: () => {
addTextToDivOnMain();
},
link: document.body,
interactionType: "keydown",
eventType: "keydown",
test: "Keydown on body triggers SoftNavigationHeuristics"});
</script>
</html>

2 changes: 1 addition & 1 deletion soft-navigation-heuristics/navigate-child.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
await new Promise(r => t.step_timeout(r, 10));
}
const link = document.getElementById("link");
click(link);
interact(link);
while (!child.location.href.includes("2")) {
await new Promise(r => t.step_timeout(r, 10));
}
Expand Down
36 changes: 21 additions & 15 deletions soft-navigation-heuristics/resources/soft-navigation-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var counter = 0;
var clicked;
var interacted;
var timestamps = []
const MAX_CLICKS = 50;
// Entries for one hard navigation + 50 soft navigations.
Expand All @@ -20,6 +20,7 @@ const testSoftNavigation =
const testName = options.testName;
const pushUrl = readValue(options.pushUrl, true);
const eventType = readValue(options.eventType, "click");
const interactionType = readValue(options.interactionType, 'click');
const expectLCP = options.validate != 'no-lcp';
const eventPrepWork = options.eventPrepWork;
promise_test(async t => {
Expand All @@ -30,8 +31,8 @@ const testSoftNavigation =
const firstClick = (i === 0);
let paint_entries_promise =
waitOnPaintEntriesPromise(expectLCP && firstClick);
clicked = false;
click(link);
interacted = false;
interact(link, interactionType);

await new Promise(resolve => {
(new PerformanceObserver(() => resolve())).observe({
Expand Down Expand Up @@ -62,7 +63,7 @@ const testNavigationApi = (testName, navigateEventHandler, link) => {
await waitInitialLCP();
const preClickLcp = await getLcpEntries();
let paint_entries_promise = waitOnPaintEntriesPromise();
click(link);
interact(link);
await new Promise(resolve => {
(new PerformanceObserver(() => resolve())).observe({
type: 'soft-navigation'
Expand All @@ -81,7 +82,7 @@ const testSoftNavigationNotDetected = options => {
promise_test(async t => {
const preClickLcp = await getLcpEntries();
options.eventTarget.addEventListener(options.eventName, options.eventHandler);
click(options.link);
interact(options.link);
await new Promise((resolve, reject) => {
(new PerformanceObserver(() =>
reject("Soft navigation should not be triggered"))).observe({
Expand Down Expand Up @@ -129,16 +130,21 @@ const runEntryValidations =
}
};

const click = link => {
if (test_driver) {
test_driver.click(link);
timestamps[counter] = {"syncPostClick": performance.now()};
}
}
const interact =
(link, interactionType = 'click') => {
if (test_driver) {
if (interactionType == 'click') {
test_driver.click(link);
} else {
test_driver.send_keys(link, 'j');
}
timestamps[counter] = {"syncPostInteraction": performance.now()};
}
}

const setEvent = (t, button, pushState, addContent, pushUrl, eventType, prepWork) => {
const eventObject = (eventType == "click") ? button : window;

const eventObject =
(eventType == 'click' || eventType == 'keydown') ? button : window;
eventObject.addEventListener(eventType, async e => {
if (prepWork &&!prepWork(t)) {
return;
Expand All @@ -163,7 +169,7 @@ const setEvent = (t, button, pushState, addContent, pushUrl, eventType, prepWork
await addContent(url);
++counter;

clicked = true;
interacted = true;
});
};

Expand All @@ -183,7 +189,7 @@ const validateSoftNavigationEntry = async (clicks, extraValidations,
assert_true(entry.name.includes(pushUrl ? URL : document.location.href),
"The soft navigation name is properly set");
const entryTimestamp = entry.startTime;
assert_less_than_equal(timestamps[i]["syncPostClick"], entryTimestamp);
assert_less_than_equal(timestamps[i]["syncPostInteraction"], entryTimestamp);
assert_greater_than_equal(
timestamps[i]['eventStart'], entryTimestamp,
'Event start timestamp matches');
Expand Down