Skip to content

Commit e08b8d5

Browse files
shakyShanegithub-actions[bot]
shakyShane
authored and
github-actions[bot]
committed
Release build 7.21.0 [ci release]
1 parent 695df49 commit e08b8d5

File tree

8 files changed

+100
-40
lines changed

8 files changed

+100
-40
lines changed

‎CHANGELOG.txt

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
- Duck Player Custom Error Translations (#1500)
2-
- Custom error messages for Duck Player (#1421)
1+
- ntp: expanded favorites widget can accept large updates in place (#1501)

‎Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24283,7 +24283,7 @@
2428324283
const rec = safeAreaRef.current.getBoundingClientRect();
2428424284
gridOffsetRef.current = rec.y + mainScrollerRef.current?.scrollTop;
2428524285
}
24286-
function setVisibleRowsForOffset() {
24286+
function setVisibleRowsForOffset(rowCount) {
2428724287
if (!safeAreaRef.current) return console.warn("cannot access ref");
2428824288
const scrollY = mainScrollerRef.current?.scrollTop ?? 0;
2428924289
const offset = gridOffsetRef.current;
@@ -24295,7 +24295,7 @@
2429524295
start3 = scrollY - offset;
2429624296
}
2429724297
const startIndex = Math.floor(start3 / rowHeight);
24298-
const endIndex = Math.min(Math.ceil(end2 / rowHeight), rows.length);
24298+
const endIndex = Math.min(Math.ceil(end2 / rowHeight), rowCount);
2429924299
setVisibleRange((prev) => {
2430024300
if (startIndex !== prev.start || endIndex !== prev.end) {
2430124301
return { start: startIndex, end: endIndex };
@@ -24309,9 +24309,15 @@
2430924309
contentTubeRef.current = document.querySelector("[data-content-tube]") || document.body;
2431024310
if (!contentTubeRef.current || !mainScrollerRef.current) console.warn("missing elements");
2431124311
updateGlobals();
24312-
setVisibleRowsForOffset();
24312+
setVisibleRowsForOffset(rows.length);
2431324313
const controller = new AbortController();
24314-
mainScrollerRef.current?.addEventListener("scroll", setVisibleRowsForOffset, { signal: controller.signal });
24314+
mainScrollerRef.current?.addEventListener(
24315+
"scroll",
24316+
() => {
24317+
setVisibleRowsForOffset(rows.length);
24318+
},
24319+
{ signal: controller.signal }
24320+
);
2431524321
return () => {
2431624322
controller.abort();
2431724323
};
@@ -24322,13 +24328,13 @@
2432224328
if (lastWindowHeight === window.innerHeight) return;
2432324329
lastWindowHeight = window.innerHeight;
2432424330
updateGlobals();
24325-
setVisibleRowsForOffset();
24331+
setVisibleRowsForOffset(rows.length);
2432624332
}
2432724333
window.addEventListener("resize", handler);
2432824334
return () => {
2432924335
return window.removeEventListener("resize", handler);
2433024336
};
24331-
}, []);
24337+
}, [rows.length]);
2433224338
y2(() => {
2433324339
if (!contentTubeRef.current) return console.warn("cannot find content tube");
2433424340
let lastHeight;
@@ -24341,7 +24347,7 @@
2434124347
clearTimeout(debounceTimer);
2434224348
debounceTimer = setTimeout(() => {
2434324349
updateGlobals();
24344-
setVisibleRowsForOffset();
24350+
setVisibleRowsForOffset(rows.length);
2434524351
}, 50);
2434624352
}
2434724353
});
@@ -24350,7 +24356,7 @@
2435024356
resizer.disconnect();
2435124357
clearTimeout(debounceTimer);
2435224358
};
24353-
}, []);
24359+
}, [rows.length]);
2435424360
return { start: start2, end };
2435524361
}
2435624362
function getContextMenuHandler(openContextMenu) {

‎build/integration/pages/new-tab/dist/index.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24293,7 +24293,7 @@
2429324293
const rec = safeAreaRef.current.getBoundingClientRect();
2429424294
gridOffsetRef.current = rec.y + mainScrollerRef.current?.scrollTop;
2429524295
}
24296-
function setVisibleRowsForOffset() {
24296+
function setVisibleRowsForOffset(rowCount) {
2429724297
if (!safeAreaRef.current) return console.warn("cannot access ref");
2429824298
const scrollY = mainScrollerRef.current?.scrollTop ?? 0;
2429924299
const offset = gridOffsetRef.current;
@@ -24305,7 +24305,7 @@
2430524305
start3 = scrollY - offset;
2430624306
}
2430724307
const startIndex = Math.floor(start3 / rowHeight);
24308-
const endIndex = Math.min(Math.ceil(end2 / rowHeight), rows.length);
24308+
const endIndex = Math.min(Math.ceil(end2 / rowHeight), rowCount);
2430924309
setVisibleRange((prev) => {
2431024310
if (startIndex !== prev.start || endIndex !== prev.end) {
2431124311
return { start: startIndex, end: endIndex };
@@ -24319,9 +24319,15 @@
2431924319
contentTubeRef.current = document.querySelector("[data-content-tube]") || document.body;
2432024320
if (!contentTubeRef.current || !mainScrollerRef.current) console.warn("missing elements");
2432124321
updateGlobals();
24322-
setVisibleRowsForOffset();
24322+
setVisibleRowsForOffset(rows.length);
2432324323
const controller = new AbortController();
24324-
mainScrollerRef.current?.addEventListener("scroll", setVisibleRowsForOffset, { signal: controller.signal });
24324+
mainScrollerRef.current?.addEventListener(
24325+
"scroll",
24326+
() => {
24327+
setVisibleRowsForOffset(rows.length);
24328+
},
24329+
{ signal: controller.signal }
24330+
);
2432524331
return () => {
2432624332
controller.abort();
2432724333
};
@@ -24332,13 +24338,13 @@
2433224338
if (lastWindowHeight === window.innerHeight) return;
2433324339
lastWindowHeight = window.innerHeight;
2433424340
updateGlobals();
24335-
setVisibleRowsForOffset();
24341+
setVisibleRowsForOffset(rows.length);
2433624342
}
2433724343
window.addEventListener("resize", handler);
2433824344
return () => {
2433924345
return window.removeEventListener("resize", handler);
2434024346
};
24341-
}, []);
24347+
}, [rows.length]);
2434224348
y2(() => {
2434324349
if (!contentTubeRef.current) return console.warn("cannot find content tube");
2434424350
let lastHeight;
@@ -24351,7 +24357,7 @@
2435124357
clearTimeout(debounceTimer);
2435224358
debounceTimer = setTimeout(() => {
2435324359
updateGlobals();
24354-
setVisibleRowsForOffset();
24360+
setVisibleRowsForOffset(rows.length);
2435524361
}, 50);
2435624362
}
2435724363
});
@@ -24360,7 +24366,7 @@
2436024366
resizer.disconnect();
2436124367
clearTimeout(debounceTimer);
2436224368
};
24363-
}, []);
24369+
}, [rows.length]);
2436424370
return { start: start2, end };
2436524371
}
2436624372
function getContextMenuHandler(openContextMenu) {
@@ -31188,10 +31194,10 @@
3118831194
return Promise.resolve(data2);
3118931195
}
3119031196
case "favorites_getConfig": {
31191-
const defaultConfig = { expansion: "collapsed", animation: { kind: "none" } };
31197+
const defaultConfig = { expansion: "collapsed", animation: { kind: "view-transitions" } };
3119231198
const fromStorage = read("favorites_config") || defaultConfig;
31193-
if (url4.searchParams.get("favorites.animation") === "view-transitions") {
31194-
fromStorage.animation = { kind: "view-transitions" };
31199+
if (url4.searchParams.get("favorites.config.expansion") === "expanded") {
31200+
defaultConfig.expansion = "expanded";
3119531201
}
3119631202
return Promise.resolve(fromStorage);
3119731203
}

‎build/windows/pages/new-tab/dist/index.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24283,7 +24283,7 @@
2428324283
const rec = safeAreaRef.current.getBoundingClientRect();
2428424284
gridOffsetRef.current = rec.y + mainScrollerRef.current?.scrollTop;
2428524285
}
24286-
function setVisibleRowsForOffset() {
24286+
function setVisibleRowsForOffset(rowCount) {
2428724287
if (!safeAreaRef.current) return console.warn("cannot access ref");
2428824288
const scrollY = mainScrollerRef.current?.scrollTop ?? 0;
2428924289
const offset = gridOffsetRef.current;
@@ -24295,7 +24295,7 @@
2429524295
start3 = scrollY - offset;
2429624296
}
2429724297
const startIndex = Math.floor(start3 / rowHeight);
24298-
const endIndex = Math.min(Math.ceil(end2 / rowHeight), rows.length);
24298+
const endIndex = Math.min(Math.ceil(end2 / rowHeight), rowCount);
2429924299
setVisibleRange((prev) => {
2430024300
if (startIndex !== prev.start || endIndex !== prev.end) {
2430124301
return { start: startIndex, end: endIndex };
@@ -24309,9 +24309,15 @@
2430924309
contentTubeRef.current = document.querySelector("[data-content-tube]") || document.body;
2431024310
if (!contentTubeRef.current || !mainScrollerRef.current) console.warn("missing elements");
2431124311
updateGlobals();
24312-
setVisibleRowsForOffset();
24312+
setVisibleRowsForOffset(rows.length);
2431324313
const controller = new AbortController();
24314-
mainScrollerRef.current?.addEventListener("scroll", setVisibleRowsForOffset, { signal: controller.signal });
24314+
mainScrollerRef.current?.addEventListener(
24315+
"scroll",
24316+
() => {
24317+
setVisibleRowsForOffset(rows.length);
24318+
},
24319+
{ signal: controller.signal }
24320+
);
2431524321
return () => {
2431624322
controller.abort();
2431724323
};
@@ -24322,13 +24328,13 @@
2432224328
if (lastWindowHeight === window.innerHeight) return;
2432324329
lastWindowHeight = window.innerHeight;
2432424330
updateGlobals();
24325-
setVisibleRowsForOffset();
24331+
setVisibleRowsForOffset(rows.length);
2432624332
}
2432724333
window.addEventListener("resize", handler);
2432824334
return () => {
2432924335
return window.removeEventListener("resize", handler);
2433024336
};
24331-
}, []);
24337+
}, [rows.length]);
2433224338
y2(() => {
2433324339
if (!contentTubeRef.current) return console.warn("cannot find content tube");
2433424340
let lastHeight;
@@ -24341,7 +24347,7 @@
2434124347
clearTimeout(debounceTimer);
2434224348
debounceTimer = setTimeout(() => {
2434324349
updateGlobals();
24344-
setVisibleRowsForOffset();
24350+
setVisibleRowsForOffset(rows.length);
2434524351
}, 50);
2434624352
}
2434724353
});
@@ -24350,7 +24356,7 @@
2435024356
resizer.disconnect();
2435124357
clearTimeout(debounceTimer);
2435224358
};
24353-
}, []);
24359+
}, [rows.length]);
2435424360
return { start: start2, end };
2435524361
}
2435624362
function getContextMenuHandler(openContextMenu) {

‎special-pages/pages/new-tab/app/favorites/components/Favorites.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,9 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
257257
/**
258258
* decide which the start/end indexes should be, based on scroll position.
259259
* NOTE: this is called on scroll, so must not incur expensive checks/measurements - math only!
260+
* @param {number} rowCount - the number of rows in the dataset
260261
*/
261-
function setVisibleRowsForOffset() {
262+
function setVisibleRowsForOffset(rowCount) {
262263
if (!safeAreaRef.current) return console.warn('cannot access ref');
263264
const scrollY = mainScrollerRef.current?.scrollTop ?? 0;
264265
const offset = gridOffsetRef.current;
@@ -270,7 +271,7 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
270271
start = scrollY - offset;
271272
}
272273
const startIndex = Math.floor(start / rowHeight);
273-
const endIndex = Math.min(Math.ceil(end / rowHeight), rows.length);
274+
const endIndex = Math.min(Math.ceil(end / rowHeight), rowCount);
274275

275276
// don't set state if the offset didn't change
276277
setVisibleRange((prev) => {
@@ -293,12 +294,18 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
293294
updateGlobals();
294295

295296
// and set visible rows once the size is known
296-
setVisibleRowsForOffset();
297+
setVisibleRowsForOffset(rows.length);
297298

298299
const controller = new AbortController();
299300

300301
// when the main area is scrolled, update the visible offset for the rows.
301-
mainScrollerRef.current?.addEventListener('scroll', setVisibleRowsForOffset, { signal: controller.signal });
302+
mainScrollerRef.current?.addEventListener(
303+
'scroll',
304+
() => {
305+
setVisibleRowsForOffset(rows.length);
306+
},
307+
{ signal: controller.signal },
308+
);
302309

303310
return () => {
304311
controller.abort();
@@ -311,13 +318,13 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
311318
if (lastWindowHeight === window.innerHeight) return;
312319
lastWindowHeight = window.innerHeight;
313320
updateGlobals();
314-
setVisibleRowsForOffset();
321+
setVisibleRowsForOffset(rows.length);
315322
}
316323
window.addEventListener('resize', handler);
317324
return () => {
318325
return window.removeEventListener('resize', handler);
319326
};
320-
}, []);
327+
}, [rows.length]);
321328

322329
useEffect(() => {
323330
if (!contentTubeRef.current) return console.warn('cannot find content tube');
@@ -331,7 +338,7 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
331338
clearTimeout(debounceTimer);
332339
debounceTimer = setTimeout(() => {
333340
updateGlobals();
334-
setVisibleRowsForOffset();
341+
setVisibleRowsForOffset(rows.length);
335342
}, 50);
336343
}
337344
});
@@ -341,7 +348,7 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
341348
resizer.disconnect();
342349
clearTimeout(debounceTimer);
343350
};
344-
}, []);
351+
}, [rows.length]);
345352

346353
return { start, end };
347354
}

‎special-pages/pages/new-tab/app/favorites/integration-tests/favorites.page.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,4 +339,20 @@ export class FavoritesPage {
339339
// verify the DOM is updated
340340
await expect(page.getByTestId('FavoritesConfigured').locator('a[href]')).toHaveCount(to);
341341
}
342+
343+
/**
344+
* Simulate getting entirely fresh data
345+
*/
346+
async receivesNewDataAndShowsAll(count) {
347+
const { page } = this.ntp;
348+
349+
const items = gen(count);
350+
await this.ntp.mocks.simulateSubscriptionMessage('favorites_onDataUpdate', items);
351+
352+
// The bug occurred after a debounced timer, so this timer reproduces it
353+
await page.waitForTimeout(100);
354+
355+
// Every tile should be shown
356+
await this.waitForNumFavorites(count);
357+
}
342358
}

‎special-pages/pages/new-tab/app/favorites/integration-tests/favorites.spec.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,24 @@ test.describe('newtab favorites', () => {
153153
// assert there's still 16 showing
154154
await favorites.waitForNumFavorites(16);
155155
});
156+
test('accepts new data when already expanded', async ({ page }, workerInfo) => {
157+
const ntp = NewtabPage.create(page, workerInfo);
158+
await ntp.reducedMotion();
159+
160+
const favorites = new FavoritesPage(ntp);
161+
162+
// open the page with enough next-step + favorites for both to be expanded
163+
await ntp.openPage({
164+
favorites: '12',
165+
additional: {
166+
'favorites.config.expansion': 'expanded',
167+
},
168+
});
169+
170+
// control: ensure it's just the expected start amount
171+
await favorites.waitForNumFavorites(12);
172+
173+
// then, assert all further elements are shown
174+
await favorites.receivesNewDataAndShowsAll(26);
175+
});
156176
});

‎special-pages/pages/new-tab/app/mock-transport.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -466,10 +466,10 @@ export function mockTransport() {
466466
}
467467
case 'favorites_getConfig': {
468468
/** @type {FavoritesConfig} */
469-
const defaultConfig = { expansion: 'collapsed', animation: { kind: 'none' } };
469+
const defaultConfig = { expansion: 'collapsed', animation: { kind: 'view-transitions' } };
470470
const fromStorage = read('favorites_config') || defaultConfig;
471-
if (url.searchParams.get('favorites.animation') === 'view-transitions') {
472-
fromStorage.animation = { kind: 'view-transitions' };
471+
if (url.searchParams.get('favorites.config.expansion') === 'expanded') {
472+
defaultConfig.expansion = 'expanded';
473473
}
474474
return Promise.resolve(fromStorage);
475475
}

0 commit comments

Comments
 (0)