ntp: accepting a new message to re-fetch favicons (#1775)

* ntp: accepting a new message to re-fetch favicons

* add mock support

Author: shakyShane

special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js

@@ -1,9 +1,10 @@
 import { createContext, h } from 'preact';
-import { useCallback, useEffect, useReducer, useRef } from 'preact/hooks';
+import { useCallback, useContext, useEffect, useReducer, useRef } from 'preact/hooks';
 
 import { FavoritesService } from '../favorites.service.js';
 import { useMessaging } from '../../types.js';
 import { reducer, useConfigSubscription, useDataSubscription, useInitialDataAndConfig } from '../../service.hooks.js';
+import { signal, useSignal } from '@preact/signals';
 
 /**
  * @typedef {import('../../../types/new-tab.ts').Favorite} Favorite
@@ -54,6 +55,12 @@ export const FavoritesContext = createContext({
 
 export const FavoritesDispatchContext = createContext(/** @type {import("preact/hooks").Dispatch<Events>} */ ({}));
 
+/**
+ * A simple counter than can be used to invalidate a tree. For example, to force the browser
+ * to re-fetch icons that previously gave a 404 response
+ */
+export const FaviconsRefreshedCount = createContext(signal(0));
+
 /**
  * @param {object} props
  * @param {import("preact").ComponentChild} props.children
@@ -122,9 +129,19 @@ export function FavoritesProvider({ children }) {
         [service],
     );
 
+    const faviconsRefreshedCount = useSignal(0);
+    useEffect(() => {
+        if (!service.current) return;
+        return service.current.onFaviconsRefreshed(() => {
+            faviconsRefreshedCount.value = faviconsRefreshedCount.value += 1;
+        });
+    }, []);
+
     return (
         <FavoritesContext.Provider value={{ state, toggle, favoritesDidReOrder, openFavorite, openContextMenu, add, onConfigChanged }}>
-            <FavoritesDispatchContext.Provider value={dispatch}>{children}</FavoritesDispatchContext.Provider>
+            <FaviconsRefreshedCount.Provider value={faviconsRefreshedCount}>
+                <FavoritesDispatchContext.Provider value={dispatch}>{children}</FavoritesDispatchContext.Provider>
+            </FaviconsRefreshedCount.Provider>
         </FavoritesContext.Provider>
     );
 }
@@ -141,3 +158,7 @@ export function useService() {
     }, [ntp]);
     return service;
 }
+
+export function useFaviconRefreshedCount() {
+    return useContext(FaviconsRefreshedCount);
+}

special-pages/pages/new-tab/app/favorites/components/TileRow.js

@@ -4,6 +4,7 @@ import { h } from 'preact';
 import { memo } from 'preact/compat';
 import { FavoritesThemeContext, ROW_CAPACITY } from './Favorites.js';
 import { useContext } from 'preact/hooks';
+import { useFaviconRefreshedCount } from './FavoritesProvider.js';
 
 /**
  * @typedef {import('../../../types/new-tab.js').Favorite} Favorite
@@ -21,6 +22,7 @@ export const TileRow = memo(
     function TileRow({ topOffset, items, add, visibility }) {
         const fillers = ROW_CAPACITY - items.length;
         const { theme, animateItems } = useContext(FavoritesThemeContext);
+        const count = useFaviconRefreshedCount();
         return (
             <ul className={styles.gridRow} style={{ transform: `translateY(${topOffset}px)` }}>
                 {items.map((item, index) => {
@@ -31,7 +33,7 @@ export const TileRow = memo(
                             faviconSrc={item.favicon?.src}
                             faviconMax={item.favicon?.maxAvailableSize}
                             title={item.title}
-                            key={item.id + item.favicon?.src + item.favicon?.maxAvailableSize + visibility}
+                            key={item.id + item.favicon?.src + item.favicon?.maxAvailableSize + visibility + count.value}
                             id={item.id}
                             index={index}
                             visibility={visibility}

special-pages/pages/new-tab/app/favorites/favorites.md

@@ -43,6 +43,11 @@ There are three representations of a favicon: image source, letters, or fallback
 - The widget config
 - returns {@link "NewTab Messages".FavoritesConfig}
 
+### `favorites_onRefresh`
+- {@link "NewTab Messages".FavoritesOnRefreshSubscription}.
+- Used to indicate potential updates, like when a favicon DB is ready
+- returns {@link "NewTab Messages".FavoritesRefresh}
+
 
 ## Notifications:
 

special-pages/pages/new-tab/app/favorites/favorites.service.js

@@ -68,6 +68,14 @@ export class FavoritesService {
         return this.configService.onData(cb);
     }
 
+    onFaviconsRefreshed(cb) {
+        return this.ntp.messaging.subscribe('favorites_onRefresh', (data) => {
+            if (data.items.some((item) => item.kind === 'favicons')) {
+                cb();
+            }
+        });
+    }
+
     /**
      * Update the in-memory data immediate and persist.
      * Any state changes will be broadcast to consumers synchronously

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

@@ -354,4 +354,8 @@ export class FavoritesPage {
         // Every tile should be shown
         await this.waitForNumFavorites(count);
     }
+
+    async receivesRefresh() {
+        await this.ntp.mocks.simulateSubscriptionMessage('favorites_onRefresh', { items: [{ kind: 'favicons' }] });
+    }
 }

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

@@ -122,6 +122,25 @@ test.describe('newtab favorites', () => {
         await ntp.reducedMotion();
         await favorites.hasFallbackIcons(() => ntp.openPage({ favorites: 'fallbacks' }));
     });
+    test('handling missing icons (responding to a "refresh" message)', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const favorites = new FavoritesPage(ntp);
+        await ntp.reducedMotion();
+
+        // wait for the first failed request
+        const firstRequest = page.waitForResponse((res) => {
+            return res.url().includes('this-does-note-exist');
+        });
+        await ntp.openPage({ favorites: 'missing' });
+        await firstRequest;
+
+        // now, we set another wait, assuming this request is re-tried as expected
+        const secondRequest = page.waitForResponse((res) => res.url().includes('this-does-note-exist'));
+
+        // comment out this line to see that the test can fail
+        await favorites.receivesRefresh();
+        await secondRequest;
+    });
     test('expansion works with expanded items above', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         await ntp.reducedMotion();

special-pages/pages/new-tab/app/favorites/mocks/favorites.data.js

@@ -12,6 +12,7 @@
  *    "small-icon": {favorites: Favorite[]};
  *    "fallbacks": {favorites: Favorite[]};
  *    "titles": {favorites: Favorite[]};
+ *    "missing": {favorites: Favorite[]};
  * }}
  */
 export const favorites = {
@@ -53,6 +54,18 @@ export const favorites = {
         /** @type {Favorite[]} */
         favorites: [],
     },
+    missing: {
+        /** @type {Favorite[]} */
+        favorites: [
+            {
+                id: 'id-missing-1',
+                etldPlusOne: 'adobe.com',
+                url: 'https://adobe.com?id=id-many-3',
+                title: 'Adobe',
+                favicon: { src: './this-does-note-exist', maxAvailableSize: 16 },
+            },
+        ],
+    },
     titles: {
         /** @type {Favorite[]} */
         favorites: [

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

@@ -374,6 +374,22 @@ export function mockTransport() {
                     );
                     return () => controller.abort();
                 }
+                case 'favorites_onRefresh': {
+                    if (url.searchParams.get('favoriteRefresh') === 'favicons') {
+                        const timer = setTimeout(() => {
+                            /** @type {import('../types/new-tab').FavoritesRefresh} */
+                            const payload = {
+                                items: [{ kind: 'favicons' }],
+                            };
+                            cb(payload);
+                        }, 1000);
+                        return () => {
+                            clearTimeout(timer);
+                        };
+                    } else {
+                        return () => {};
+                    }
+                }
             }
             return () => {};
         },

special-pages/pages/new-tab/messages/favorites_onRefresh.subscribe.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "Favorites Refresh",
+  "required": ["items"],
+  "properties": {
+    "items": {
+      "type": "array",
+      "items": {
+        "oneOf": [
+          {
+            "type": "object",
+            "required": ["kind"],
+            "properties": {
+              "kind": {
+                "type": "string",
+                "const": "favicons"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}

special-pages/pages/new-tab/types/new-tab.ts

@@ -149,6 +149,7 @@ export interface NewTabMessages {
     | CustomizerOnThemeUpdateSubscription
     | FavoritesOnConfigUpdateSubscription
     | FavoritesOnDataUpdateSubscription
+    | FavoritesOnRefreshSubscription
     | FreemiumPIRBannerOnDataUpdateSubscription
     | NextStepsOnConfigUpdateSubscription
     | NextStepsOnDataUpdateSubscription
@@ -936,6 +937,18 @@ export interface FavoritesOnDataUpdateSubscription {
   subscriptionEvent: "favorites_onDataUpdate";
   params: FavoritesData;
 }
+/**
+ * Generated from @see "../messages/favorites_onRefresh.subscribe.json"
+ */
+export interface FavoritesOnRefreshSubscription {
+  subscriptionEvent: "favorites_onRefresh";
+  params: FavoritesRefresh;
+}
+export interface FavoritesRefresh {
+  items: {
+    kind: "favicons";
+  }[];
+}
 /**
  * Generated from @see "../messages/freemiumPIRBanner_onDataUpdate.subscribe.json"
  */