sample instead of debouncing

shakyShane · shakyShane · commit 6795a0d2fe57 · 2025-03-19T12:15:53.000Z
diff --git a/injected/integration-test/favicon.spec.js b/injected/integration-test/favicon.spec.js
@@ -42,6 +42,48 @@ test('favicon + monitor', async ({ page }, testInfo) => {
     });
 });
 
+test('favicon + monitor (many updates)', async ({ page }, testInfo) => {
+    const favicon = ResultsCollector.create(page, testInfo.project.use);
+    await page.clock.install();
+    await favicon.load(HTML, CONFIG);
+
+    // ensure first favicon item was sent
+    await favicon.waitForMessage('faviconFound', 1);
+
+    // now update it
+    await page.getByRole('button', { name: 'Set many overrides' }).click();
+    await page.clock.fastForward(20);
+
+    const messages = await favicon.outgoingMessages();
+    expect(messages).toHaveLength(1);
+
+    await page.clock.fastForward(60);
+    await page.clock.fastForward(100);
+
+    {
+        const messages = await favicon.outgoingMessages();
+        expect(messages).toHaveLength(3);
+    }
+
+    {
+        const messages = await favicon.outgoingMessages();
+        expect(messages.map((x) => /** @type {{params: any}} */ (x.payload).params)).toStrictEqual([
+            {
+                favicons: [{ href: './favicon.png', rel: 'shortcut icon' }],
+                documentUrl: 'http://localhost:3220/favicon/index.html',
+            },
+            {
+                favicons: [{ href: './new_favicon.png?count=0', rel: 'shortcut icon' }],
+                documentUrl: 'http://localhost:3220/favicon/index.html',
+            },
+            {
+                favicons: [{ href: './new_favicon.png?count=1', rel: 'shortcut icon' }],
+                documentUrl: 'http://localhost:3220/favicon/index.html',
+            },
+        ]);
+    }
+});
+
 test('favicon + monitor disabled', async ({ page }, testInfo) => {
     const CONFIG = './integration-test/test-pages/favicon/config/favicon-monitor-disabled.json';
     const favicon = ResultsCollector.create(page, testInfo.project.use);
diff --git a/injected/integration-test/test-pages/favicon/index.html b/injected/integration-test/test-pages/favicon/index.html
@@ -8,10 +8,21 @@
 </head>
 <body>
 <button onclick="setOverride()">Set override</button>
+<button onclick="setManyOverrides()">Set many overrides</button>
 <script>
     function setOverride() {
         document.querySelector("link[rel='shortcut icon']").href = "./new_favicon.png";
     }
+    async function setManyOverrides() {
+        const elem = document.querySelector("link[rel='shortcut icon']");
+        for (let i = 0; i < 100; i++) {
+            await new Promise(resolve => {
+                setTimeout(resolve, 40);
+            })
+            const path = `./new_favicon.png?count=${i}`
+            elem.href = path
+        }
+    }
 </script>
 </body>
 </html>
diff --git a/injected/src/features/favicon.js b/injected/src/features/favicon.js
@@ -1,8 +1,6 @@
 import ContentFeature from '../content-feature.js';
 
 export class Favicon extends ContentFeature {
-    /** @type {undefined|number} */
-    #debounce = undefined;
     init() {
         window.addEventListener('DOMContentLoaded', () => {
             // send once, immediately
@@ -17,15 +15,28 @@ export class Favicon extends ContentFeature {
         // if there was an explicit opt-out, do nothing
         if (this.getFeatureSetting('monitor') === false) return;
 
+        let trailing;
+        let lastEmitTime = performance.now();
+        const interval = 50;
+
         // otherwise, monitor and send updates
         monitor(() => {
-            clearTimeout(this.#debounce);
-            const id = setTimeout(() => this.send(), 100);
-            this.#debounce = /** @type {any} */ (id);
+            clearTimeout(trailing);
+            const currentTime = performance.now();
+            const delta = currentTime - lastEmitTime;
+            if (delta >= interval) {
+                this.send();
+            } else {
+                trailing = setTimeout(() => {
+                    this.send();
+                }, 50);
+            }
+            lastEmitTime = currentTime;
         });
     }
 
     send() {
+        console.log('📤 sending');
         const favicons = getFaviconList();
         this.notify('faviconFound', { favicons, documentUrl: document.URL });
     }
