Merge branch 'main' into dbajpeyi/refactor/decouple-import-meta

dbajpeyi · dbajpeyi · commit a4840a2026bc · 2025-03-05T16:32:49.000+01:00
diff --git a/injected/src/content-feature.js b/injected/src/content-feature.js
@@ -50,7 +50,7 @@ class ConfigParser {
     /**
      * @param {import('./content-scope-features.js').LoadArgs} loadArgs
      */
-    initConfig(loadArgs) {
+    initLoadArgs(loadArgs) {
         const { bundledConfig, site, platform } = loadArgs;
         this.#bundledConfig = bundledConfig;
         // If we have a bundled config, treat it as a regular config
@@ -352,7 +352,7 @@ export default class ContentFeature extends ConfigParser {
         const mark = this.monitor.mark(this.name + 'CallLoad');
         this.#args = args;
         this.platform = args.platform;
-        this.initConfig(args);
+        this.initLoadArgs(args);
         this.load(args);
         mark.end();
     }
diff --git a/special-pages/pages/history/app/components/Item.js b/special-pages/pages/history/app/components/Item.js
@@ -13,6 +13,7 @@ export const Item = memo(
      *
      * @param {Object} props - An object containing the properties for the item.
      * @param {string} props.id - A unique identifier for the item.
+     * @param {string} props.viewId - A unique identifier for the item, safe to use in CSS names
      * @param {string} props.title - The text to be displayed for the item.
      * @param {string} props.url - The text to be displayed for the item.
      * @param {string} props.domain - The text to be displayed for the domain
@@ -26,13 +27,14 @@ export const Item = memo(
      * @param {number} props.faviconMax
      */
     function Item(props) {
-        const { title, kind, etldPlusOne, faviconSrc, faviconMax, dateTimeOfDay, dateRelativeDay, index, selected } = props;
+        const { viewId, title, kind, etldPlusOne, faviconSrc, faviconMax, dateTimeOfDay, dateRelativeDay, index, selected } = props;
         const hasFooterGap = kind === END_KIND || kind === BOTH_KIND;
         const hasTitle = kind === TITLE_KIND || kind === BOTH_KIND;
+
         return (
             <Fragment>
                 {hasTitle && (
-                    <div class={cn(styles.title)} style={{ viewTransitionName: `item-title-${props.id}` }}>
+                    <div class={cn(styles.title)} style={{ viewTransitionName: `Item-title-${viewId}` }}>
                         {dateRelativeDay}
                     </div>
                 )}
@@ -41,7 +43,7 @@ export const Item = memo(
                     data-history-entry={props.id}
                     data-index={index}
                     aria-selected={selected}
-                    style={{ viewTransitionName: `item-${props.id}` }}
+                    style={{ viewTransitionName: `Item-item-${viewId}` }}
                 >
                     <div class={styles.favicon}>
                         <FaviconWithState
diff --git a/special-pages/pages/history/app/components/Results.js b/special-pages/pages/history/app/components/Results.js
@@ -65,10 +65,12 @@ export function Results({ results, selected, onChange }) {
                     const isSelected = selected.value.has(index);
                     const faviconMax = item.favicon?.maxAvailableSize ?? DDG_DEFAULT_ICON_SIZE;
                     const favoriteSrc = item.favicon?.src;
+                    const viewId = results.value.viewIds[index];
                     return (
                         <li key={item.id} data-id={item.id} class={cssClassName} style={style} data-is-selected={isSelected}>
                             <Item
                                 id={item.id}
+                                viewId={viewId}
                                 kind={results.value.heights[index]}
                                 url={item.url}
                                 domain={item.domain}
diff --git a/special-pages/pages/history/app/components/Sidebar.js b/special-pages/pages/history/app/components/Sidebar.js
@@ -62,7 +62,7 @@ export function Sidebar({ ranges }) {
      */
     function onClick(range) {
         if (range === 'all') {
-            dispatch({ kind: 'reset' });
+            dispatch({ kind: 'search-by-term', value: '' });
         } else if (range) {
             dispatch({ kind: 'search-by-range', value: range });
         }
diff --git a/special-pages/pages/history/app/global/Providers/HistoryServiceProvider.js b/special-pages/pages/history/app/global/Providers/HistoryServiceProvider.js
@@ -4,10 +4,11 @@ import { paramsToQuery, toRange } from '../../history.service.js';
 import { useCallback, useContext } from 'preact/hooks';
 import { useQueryDispatch } from './QueryProvider.js';
 import { signal, useSignal, useSignalEffect } from '@preact/signals';
-import { generateHeights } from '../../utils.js';
+import { generateHeights, generateViewIds } from '../../utils.js';
 
 /**
- * @typedef {{kind: 'search-commit', params: URLSearchParams}
+ * @typedef {import('../../../types/history.ts').HistoryQuery['source']} Source
+ * @typedef {{kind: 'search-commit', params: URLSearchParams, source: Source}
  * | {kind: 'delete-range'; value: string }
  * | {kind: 'delete-all'; }
  * | {kind: 'delete-term'; term: string }
@@ -31,13 +32,14 @@ const HistoryServiceDispatchContext = createContext(defaultDispatch);
  * @typedef {object} Results
  * @property {import('../../../types/history.ts').HistoryItem[]} items
  * @property {number[]} heights
+ * @property {string[]} viewIds
  */
 /**
  * @typedef {import('../../../types/history.ts').Range} Range
  * @import { ReadonlySignal } from '@preact/signals'
  */
 
-const ResultsContext = createContext(/** @type {ReadonlySignal<Results>} */ (signal({ items: [], heights: [] })));
+const ResultsContext = createContext(/** @type {ReadonlySignal<Results>} */ (signal({ items: [], heights: [], viewIds: [] })));
 const RangesContext = createContext(/** @type {ReadonlySignal<Range[]>} */ (signal([])));
 
 /**
@@ -55,13 +57,15 @@ export function HistoryServiceProvider({ service, children, initial }) {
     const results = useSignal({
         items: initial.query.results,
         heights: generateHeights(initial.query.results),
+        viewIds: generateViewIds(initial.query.results),
     });
 
     useSignalEffect(() => {
         const unsub = service.onResults((data) => {
             results.value = {
                 items: data.results,
                 heights: generateHeights(data.results),
+                viewIds: generateViewIds(data.results),
             };
         });
 
@@ -81,7 +85,7 @@ export function HistoryServiceProvider({ service, children, initial }) {
     function dispatch(action) {
         switch (action.kind) {
             case 'search-commit': {
-                const asQuery = paramsToQuery(action.params);
+                const asQuery = paramsToQuery(action.params, action.source);
                 service.trigger(asQuery);
                 break;
             }
diff --git a/special-pages/pages/history/app/global/Providers/QueryProvider.js b/special-pages/pages/history/app/global/Providers/QueryProvider.js
@@ -5,10 +5,12 @@ import { signal, useSignal } from '@preact/signals';
 /**
  * @typedef {import('../../../types/history.ts').Range} Range
  * @typedef {import('../../../types/history.ts').RangeId} RangeId
+ * @typedef {import('../../../types/history.ts').HistoryQuery['source']} Source
  * @typedef {{
  *   term: string | null,
  *   range: RangeId | null,
  *   domain: string | null,
+ *   source: Source,
  * }} QueryState - this is the value the entire application can read/observe
  */
 
@@ -25,6 +27,7 @@ const QueryContext = createContext(
             term: /** @type {string|null} */ (null),
             range: /** @type {RangeId|null} */ (null),
             domain: /** @type {string|null} */ (null),
+            source: /** @type {Source} */ ('initial'),
         })
     ),
 );
@@ -49,6 +52,7 @@ export function QueryProvider({ children, query = { term: '' } }) {
         term: 'term' in query ? query.term : null,
         range: 'range' in query ? query.range : null,
         domain: 'domain' in query ? query.domain : null,
+        source: /** @type {Source} */ ('initial'),
     };
     const queryState = useSignal(initial);
 
@@ -60,19 +64,24 @@ export function QueryProvider({ children, query = { term: '' } }) {
         queryState.value = (() => {
             switch (action.kind) {
                 case 'reset': {
-                    return { term: '', domain: null, range: null };
+                    return { term: '', domain: null, range: null, source: /** @type {const} */ ('auto') };
                 }
                 case 'search-by-domain': {
-                    return { term: null, domain: action.value, range: null };
+                    return { term: null, domain: action.value, range: null, source: /** @type {const} */ ('user') };
                 }
                 case 'search-by-range': {
-                    return { term: null, domain: null, range: /** @type {RangeId} */ (action.value) };
+                    return {
+                        term: null,
+                        domain: null,
+                        range: /** @type {RangeId} */ (action.value),
+                        source: /** @type {const} */ ('user'),
+                    };
                 }
                 case 'search-by-term': {
-                    return { term: action.value, domain: null, range: null };
+                    return { term: action.value, domain: null, range: null, source: /** @type {const} */ ('user') };
                 }
                 default:
-                    return { term: '', domain: null, range: null };
+                    return { term: '', domain: null, range: null, source: /** @type {const} */ ('auto') };
             }
         })();
     }
diff --git a/special-pages/pages/history/app/global/hooks/useSearchCommit.js b/special-pages/pages/history/app/global/hooks/useSearchCommit.js
@@ -27,16 +27,17 @@ export function useSearchCommit() {
             clearTimeout(timer);
             if (next.term !== null) {
                 const term = next.term;
+                const source = next.source;
                 timer = setTimeout(() => {
                     const params = new URLSearchParams();
                     params.set('q', term);
-                    dispatch({ kind: 'search-commit', params });
+                    dispatch({ kind: 'search-commit', params, source });
                 }, settings.typingDebounce);
             }
             if (next.domain !== null) {
                 const params = new URLSearchParams();
                 params.set('domain', next.domain);
-                dispatch({ kind: 'search-commit', params });
+                dispatch({ kind: 'search-commit', params, source: next.source });
             }
             return null;
         });
diff --git a/special-pages/pages/history/app/global/hooks/useSearchCommitForRange.js b/special-pages/pages/history/app/global/hooks/useSearchCommitForRange.js
@@ -1,6 +1,6 @@
 import { useHistoryServiceDispatch } from '../Providers/HistoryServiceProvider.js';
-import { useComputed, useSignalEffect } from '@preact/signals';
 import { useQueryContext } from '../Providers/QueryProvider.js';
+import { useEffect } from 'preact/hooks';
 
 /**
  * Synchronizes the `derivedRange` signal with the browser's URL and issues a
@@ -10,14 +10,12 @@ import { useQueryContext } from '../Providers/QueryProvider.js';
 export function useSearchCommitForRange() {
     const dispatch = useHistoryServiceDispatch();
     const query = useQueryContext();
-    const derivedRange = useComputed(() => {
-        return query.value.range;
-    });
 
-    useSignalEffect(() => {
+    useEffect(() => {
         let timer;
         let counter = 0;
-        const sub = derivedRange.subscribe((nextRange) => {
+        const sub = query.subscribe((nextQuery) => {
+            const { range } = nextQuery;
             if (counter === 0) {
                 counter += 1;
                 return;
@@ -27,16 +25,16 @@ export function useSearchCommitForRange() {
             url.searchParams.delete('q');
             url.searchParams.delete('range');
 
-            if (nextRange !== null) {
-                url.searchParams.set('range', nextRange);
+            if (range !== null) {
+                url.searchParams.set('range', range);
                 window.history.replaceState(null, '', url.toString());
-                dispatch({ kind: 'search-commit', params: new URLSearchParams(url.searchParams) });
+                dispatch({ kind: 'search-commit', params: new URLSearchParams(url.searchParams), source: 'user' });
             }
         });
 
         return () => {
             sub();
             clearTimeout(timer);
         };
-    });
+    }, [query, dispatch]);
 }
diff --git a/special-pages/pages/history/app/history.service.js b/special-pages/pages/history/app/history.service.js
@@ -89,7 +89,7 @@ export class HistoryService {
                      * concatenate results if this was a 'fetch more' request, or overwrite
                      */
                     let valueToPublish;
-                    if (eq(old.info.query, next.info.query) && next.lastQueryParams?.offset > 0) {
+                    if (queryEq(old.info.query, next.info.query) && next.lastQueryParams?.offset > 0) {
                         const results = old.results.concat(next.results);
                         valueToPublish = { info: next.info, results, lastQueryParams: next.lastQueryParams };
                     } else {
@@ -134,6 +134,7 @@ export class HistoryService {
                     query: lastquery,
                     limit: HistoryService.CHUNK_SIZE,
                     offset: this.data.results.length,
+                    source: 'user',
                 };
                 this.internal.dispatchEvent(new CustomEvent(HistoryService.QUERY_EVENT, { detail: query }));
             }
@@ -156,7 +157,7 @@ export class HistoryService {
      * @param {HistoryQuery} query
      */
     queryFetcher(query) {
-        console.log(`🦻 [query] ${JSON.stringify(query.query)} offset: ${query.offset}, limit: ${query.limit}`);
+        console.log(`🦻 [query] ${JSON.stringify(query.query)} offset: ${query.offset}, limit: ${query.limit} source: ${query.source}`);
         // eslint-disable-next-line promise/prefer-await-to-then
         return this.history.messaging.request('query', query).then((resp) => {
             return { info: resp.info, results: resp.value, lastQueryParams: query };
@@ -374,9 +375,10 @@ function deleteByIndexes(old, indexes) {
 
 /**
  * @param {URLSearchParams} params
+ * @param {HistoryQuery['source']} source
  * @return {HistoryQuery}
  */
-export function paramsToQuery(params) {
+export function paramsToQuery(params, source) {
     /** @type {HistoryQuery['query'] | undefined} */
     let query;
     const range = toRange(params.get('range'));
@@ -396,6 +398,7 @@ export function paramsToQuery(params) {
         query,
         limit: HistoryService.CHUNK_SIZE,
         offset: 0,
+        source,
     };
 }
 
@@ -423,11 +426,27 @@ export function toRange(input) {
 }
 
 /**
- * @param {Record<string, any>|null|undefined} q1
- * @param {Record<string, any>|null|undefined} q2
- * @return {boolean}
+ * @param {HistoryQuery} a
+ * @param {HistoryQuery|null} [b]
+ * @returns {boolean}
  */
-function eq(q1, q2) {
-    if (!q1 || !q2) return false;
-    return JSON.stringify(q1) === JSON.stringify(q2);
+function eq(a, b) {
+    if (!b) return false;
+    if (a.limit !== b.limit) return false;
+    if (a.offset !== b.offset) return false;
+    if (a.source !== b.source) return false;
+    return queryEq(a.query, b.query);
+}
+
+/**
+ * @param {QueryKind} a
+ * @param {QueryKind|null} [b]
+ * @returns {boolean}
+ */
+function queryEq(a, b) {
+    if (!b) return false;
+    const k1 = Object.keys(a)[0];
+    const k2 = Object.keys(b)[0];
+    if (k1 === k2 && a[k1] === b[k2]) return true;
+    return false;
 }
diff --git a/special-pages/pages/history/app/index.js b/special-pages/pages/history/app/index.js
@@ -65,7 +65,7 @@ export async function init(root, messaging, baseEnvironment) {
                   });
 
     const service = new HistoryService(messaging);
-    const query = paramsToQuery(environment.urlParams);
+    const query = paramsToQuery(environment.urlParams, 'initial');
     const initial = await service.getInitial(query);
 
     if (environment.display === 'app') {
diff --git a/special-pages/pages/history/app/utils.js b/special-pages/pages/history/app/utils.js
@@ -31,6 +31,22 @@ export function generateHeights(rows) {
     return heights;
 }
 
+/**
+ * Convert the items 'id' field into something that is safe to use in
+ * things CSS view transition names.
+ *
+ * Note: I am not checking if the generated id starts with a number,
+ * because the names will always be prefixed in the component.
+ *
+ * @param {import("../types/history").HistoryItem[]} rows
+ * @return {string[]}
+ */
+export function generateViewIds(rows) {
+    return rows.map((row) => {
+        return btoa(row.id).replace(/=/g, '');
+    });
+}
+
 /**
  * @typedef {'ctrl+click' | 'shift+click' | 'click' | 'escape' | 'delete' | 'shift+up' | 'shift+down' | 'up' | 'down' | 'unknown'} Intention
  */
diff --git a/special-pages/pages/history/integration-tests/history-selections.spec.js b/special-pages/pages/history/integration-tests/history-selections.spec.js
@@ -155,7 +155,7 @@ test.describe('history selections', () => {
     test('`deleteAll` during search (no selections)', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
         await hp.openPage({});
-        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' }, source: 'initial' });
 
         // do the search
         await hp.types('example.com');
@@ -165,7 +165,7 @@ test.describe('history selections', () => {
         await hp.deletesAllForTerm('example.com', { action: 'delete' });
 
         // should have reset the UI now
-        await hp.didMakeNthQuery({ nth: 2, query: { term: '' } });
+        await hp.didMakeNthQuery({ nth: 2, query: { term: '' }, source: 'auto' });
     });
     test('removes all selections with ESC key', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
diff --git a/special-pages/pages/history/integration-tests/history.page.js b/special-pages/pages/history/integration-tests/history.page.js
diff --git a/special-pages/pages/history/integration-tests/history.spec.js b/special-pages/pages/history/integration-tests/history.spec.js
diff --git a/special-pages/pages/history/messages/query.request.json b/special-pages/pages/history/messages/query.request.json
diff --git a/special-pages/pages/history/types/history.ts b/special-pages/pages/history/types/history.ts

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ export function Sidebar({ ranges }) {`
`62`	`62`	`*/`
`63`	`63`	`function onClick(range) {`
`64`	`64`	`if (range === 'all') {`
`65`		`- dispatch({ kind: 'reset' });`
	`65`	`+ dispatch({ kind: 'search-by-term', value: '' });`
`66`	`66`	`} else if (range) {`
`67`	`67`	`dispatch({ kind: 'search-by-range', value: range });`
`68`	`68`	`}`