ntp: support scroll restoration

Author: shakyShane

special-pages/01.png

@@ -18,6 +18,7 @@ import { DocumentVisibilityProvider } from '../../../shared/components/DocumentV
 import { applyDefaultStyles } from './customizer/utils.js';
 import { TabsService } from './tabs/tabs.service.js';
 import { TabsDebug, TabsProvider } from './tabs/TabsProvider.js';
+import { PersistentScrollProvider } from './tabs/ScrollRestore.js';
 
 /**
  * @import {Telemetry} from "./telemetry/telemetry.js"
@@ -133,6 +134,7 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
                                                 entryPoints={entryPoints}
                                             >
                                                 <TabsProvider service={tabs}>
+                                                    <PersistentScrollProvider />
                                                     {environment.urlParams.has('tabs.debug') && <TabsDebug />}
                                                     <App />
                                                 </TabsProvider>

special-pages/02.png

@@ -3,6 +3,7 @@ import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
 import { OmnibarContext, useOmnibarService } from './OmnibarProvider.js';
 import { useTabState } from '../../tabs/TabsProvider.js';
 import { PersistentValue } from '../../tabs/PersistentValue.js';
+import { invariant } from '../../utils.js';
 
 /**
  * @typedef {import("../../../types/new-tab.js").OmnibarConfig["mode"]} Mode
@@ -119,14 +120,3 @@ export function useModeWithLocalPersistence(tabId, defaultMode) {
 
     return mode;
 }
-
-/**
- * @param {any} condition
- * @param {string} [message]
- * @return {asserts condition}
- */
-export function invariant(condition, message) {
-    if (condition) return;
-    if (message) throw new Error('Invariant failed: ' + message);
-    throw new Error('Invariant failed');
-}

special-pages/03.png

@@ -15,18 +15,18 @@ test.describe('omnibar widget persistence', () => {
         await omnibar.types({ mode: 'search', value: 'shoes' });
 
         // switch
-        await omnibar.didSwitchToTab('02', ['01', '02']);
+        await ntp.didSwitchToTab('02', ['01', '02']);
         await omnibar.expectInputValue('');
 
         // second fill
         await omnibar.types({ mode: 'search', value: 'dresses' });
 
         // back to first
-        await omnibar.didSwitchToTab('01', ['01', '02']);
+        await ntp.didSwitchToTab('01', ['01', '02']);
         await omnibar.expectInputValue('shoes');
 
         // back to second again
-        await omnibar.didSwitchToTab('02', ['01', '02']);
+        await ntp.didSwitchToTab('02', ['01', '02']);
         await omnibar.expectInputValue('dresses');
     });
     test('remembers `mode` across tabs', async ({ page }, workerInfo) => {
@@ -41,11 +41,11 @@ test.describe('omnibar widget persistence', () => {
         await page.getByRole('tab', { name: 'Duck.ai' }).click();
 
         // new tab, should be opened with duck.ai input still visible
-        await omnibar.didSwitchToTab('02', ['01', '02']);
+        await ntp.didSwitchToTab('02', ['01', '02']);
         await omnibar.expectChatValue('');
 
         // switch back
-        await omnibar.didSwitchToTab('01', ['01', '02']);
+        await ntp.didSwitchToTab('01', ['01', '02']);
         await omnibar.expectChatValue('shoes');
     });
     test('adjusts mode of other tabs when duck.ai is disabled', async ({ page }, workerInfo) => {

special-pages/end.png

@@ -1,5 +1,5 @@
 /**
- * @template {string} T - the value to hold.
+ * @template {string|number} T - the value to hold.
  */
 export class PersistentValue {
     /** @type {Map<string, T>} */
@@ -17,7 +17,7 @@ export class PersistentValue {
      * @param {T} args.value
      */
     update({ id, value }) {
-        if (string(id) && string(value)) {
+        if (string(id) && value !== null && value !== undefined) {
             this.#values.set(id, value);
         }
     }
@@ -63,20 +63,20 @@ export class PersistentValue {
     byId(id) {
         if (typeof id !== 'string') return null;
         const value = this.#values.get(id);
-        if (!value || !string(value)) return null;
+        if (value === null || value === undefined) return null;
         return value;
     }
 
     print() {
         for (const [key, value] of this.#values) {
             console.log(`key: ${key}, value: ${value}`);
         }
-        console.log('--');
     }
 }
 
 /**
  * @param {unknown} input
+ * @returns {string}
  */
 function string(input) {
     if (typeof input !== 'string') return '';

special-pages/end2.png

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'preact/hooks';
+import { useTabState } from './TabsProvider.js';
+import { PersistentValue } from './PersistentValue.js';
+import { invariant } from '../utils.js';
+
+const SCROLLER = '[data-main-scroller]';
+
+/**
+ * Allow recording and restoring of the scroll position
+ */
+export function PersistentScrollProvider() {
+    const [value] = useState(() => /** @type {PersistentValue<number>} */ (new PersistentValue()));
+    const { all, current } = useTabState();
+    useEffect(() => {
+        let last = current.peek();
+        const elem = document.querySelector(SCROLLER);
+        invariant(elem, 'must have access to scroller here');
+
+        /**
+         * Subscribe to changes in available tab IDs to prune stored scroll positions
+         * for tabs that no longer exist
+         */
+        const unsub1 = all.subscribe((tabIds) => {
+            value?.prune({ preserve: tabIds });
+        });
+        /**
+         * Subscribe to changes in the current tab to restore the saved scroll position
+         * when switching between tabs. If no scroll position is saved, defaults to 0.
+         */
+        const unsub2 = current.subscribe((tabId) => {
+            last = tabId;
+            const restore = value.byId(last);
+            const nextY = restore ?? 0;
+
+            elem.scrollTop = nextY;
+        });
+
+        const controller = new AbortController();
+        elem.addEventListener(
+            'scroll',
+            (e) => {
+                if (!(e.target instanceof HTMLElement)) throw new Error('unreachable');
+                value.update({ id: last, value: e.target.scrollTop });
+            },
+            { signal: controller.signal },
+        );
+
+        return () => {
+            unsub1();
+            unsub2();
+            controller.abort();
+        };
+    }, [all, current, value]);
+    return null;
+}