Use runtime.onPerformanceWarning event for breakage reports (#2462)

The new runtime.onPerformanceWarning event is fired for extensions
when the browser detects a runtime performance issue. This is so that
extension developers can be notified and proactively investigate
performance issues in their extensions.

Initially, the event will be available with Firefox 124 and will fire
only for serious content-script hangs[1]. (For those hangs, the user is
also shown a warning banner[2].) In the future, the event will
hopefully be available on more browsers, will include stack traces
where possible and will fire under more conditions.

For now, let's just include a basic `performanceWarning` flag with
breakage reports, that indicates if the event fired for the tab in
question. In the future, we can expand this as necessary to include
details of stack traces and warning type and category.

1 - https://bugzilla.mozilla.org/show_bug.cgi?id=1861445
2 - "EXTENSION NAME" is slowing down Firefox. To speed up your browser, stop that extension. Learn more <Stop>

shared/js/background/broken-site-report.js

@@ -183,6 +183,7 @@ export async function breakageReportForTab ({
     const ctlYouTube = tab.ctlYouTube ? 'true' : 'false'
     const ctlFacebookPlaceholderShown = tab.ctlFacebookPlaceholderShown ? 'true' : 'false'
     const ctlFacebookLogin = tab.ctlFacebookLogin ? 'true' : 'false'
+    const performanceWarning = tab.performanceWarning ? 'true' : 'false'
     const ampUrl = tab.ampUrl ? getURLWithoutQueryString(tab.ampUrl).split('#')[0] : undefined
     const upgradedHttps = tab.upgradedHttps
     const debugFlags = tab.debugFlags.join(',')
@@ -200,6 +201,7 @@ export async function breakageReportForTab ({
         ctlYouTube,
         ctlFacebookPlaceholderShown,
         ctlFacebookLogin,
+        performanceWarning,
         protectionsState: tab.site.isFeatureEnabled('contentBlocking')
     })
 

shared/js/background/classes/tab-state.js

@@ -54,6 +54,8 @@ export class TabState {
         this.errorDescriptions = []
         /** @type {number[]} */
         this.httpErrorCodes = []
+        /** @type {boolean} */
+        this.performanceWarning = false // True when the runtime.onPerformanceWarning event fired for the tab.
         // Whilst restoring, prevent the tab data being stored
         if (!restoring) {
             Storage.backup(this)

shared/js/background/classes/tab.js

@@ -234,6 +234,14 @@ class Tab {
         this._tabState.setValue('httpErrorCodes', value)
     }
 
+    get performanceWarning () {
+        return this._tabState.performanceWarning
+    }
+
+    set performanceWarning (value) {
+        this._tabState.setValue('performanceWarning', value)
+    }
+
     /**
      * If given a valid adClick redirect, set the adClick to the tab.
      * @param {string} requestURL

shared/js/background/events.js

@@ -274,6 +274,18 @@ browser.tabs.onActivated.addListener(() => {
     browserWrapper.notifyPopup({ closePopup: true })
 })
 
+// Include the performanceWarning flag in breakage reports.
+if (browser.runtime.onPerformanceWarning) {
+    browser.runtime.onPerformanceWarning.addListener(({ tabId }) => {
+        if (tabId && tabId > 0) {
+            const tab = tabManager.get({ tabId })
+            if (tab) {
+                tab.performanceWarning = true
+            }
+        }
+    })
+}
+
 /**
  * MESSAGES
  */

unit-test/README.md

@@ -1,7 +1,7 @@
 # Unit tests
 
 This folder contains unit-tests, which test individual components and functions in the source code. These tests
-are written using the [Jasmine](https://jasmine.github.io/) testing framework. 
+are written using the [Jasmine](https://jasmine.github.io/) testing framework.
 Tests are bundled with `esbuild` (with the exception of tests in the `legacy` folder, which still use `browserify`), then run in one of two test environments:
  1. Node: these tests run in a plain node process. Tests placed in the `node` folder will be run in this environment.
  2. Browser: the rest of the tests are run in a headless chrome browser (using `karma`'s test runner).
@@ -10,5 +10,5 @@ Tests are bundled with `esbuild` (with the exception of tests in the `legacy` fo
 
 Tests can be run as follows:
  - `npm test`: Run all tests (both node and browser).
- - `npm test.unit`: Run only browser-based unit tests.
- - `npm test.node`: Run only node-based unit tests.
+ - `npm run test.unit`: Run only browser-based unit tests.
+ - `npm run test.node`: Run only node-based unit tests.

unit-test/background/classes/tab.js

@@ -117,7 +117,8 @@ describe('Tab', () => {
                 ctlFacebookLogin: false,
                 debugFlags: [],
                 errorDescriptions: [],
-                httpErrorCodes: []
+                httpErrorCodes: [],
+                performanceWarning: false
             }
             expect(tabClone.site.enabledFeatures.length).toBe(14)
             expect(JSON.stringify(tabClone, null, 4)).toEqual(JSON.stringify(tabSnapshot, null, 4))

unit-test/background/events/performance-warning.js

@@ -0,0 +1,66 @@
+import browser from 'webextension-polyfill'
+import tabManager from '../../../shared/js/background/tab-manager'
+import { TabState } from '../../../shared/js/background/classes/tab-state'
+import '../../../shared/js/background/events'
+
+async function createTab (id, url) {
+    const tab = tabManager.create({
+        id,
+        requestId: 123,
+        url,
+        status: 200
+    })
+    await TabState.done()
+    return tab
+}
+
+describe('onPerformanceWarning event handler', () => {
+    it('Sets the performanceWarning flag correctly', async () => {
+        expect(
+            browser.runtime.onPerformanceWarning._listeners.length
+        ).toEqual(1)
+        const fireEvent = browser.runtime.onPerformanceWarning._listeners[0]
+
+        let tab1 = await createTab(1, 'https://1.example')
+        let tab2 = await createTab(2, 'https://2.example')
+
+        // Flags should be false initially.
+        expect(tab1.performanceWarning).toEqual(false)
+        expect(tab2.performanceWarning).toEqual(false)
+
+        // Flags should remain false if event fires for unknown/different tabs.
+        fireEvent({ tabId: 99 })
+        fireEvent({ tabId: -1 })
+        fireEvent({ tabId: 0 })
+        fireEvent({})
+
+        expect(tab1.performanceWarning).toEqual(false)
+        expect(tab2.performanceWarning).toEqual(false)
+
+        // Flags should be set to true for the correct tab when the event fires.
+        fireEvent({ tabId: 1 })
+        expect(tab1.performanceWarning).toEqual(true)
+        expect(tab2.performanceWarning).toEqual(false)
+
+        fireEvent({ tabId: 2 })
+        expect(tab1.performanceWarning).toEqual(true)
+        expect(tab2.performanceWarning).toEqual(true)
+
+        // Flags should be cleared when the tabs are navigated.
+        tab1 = await createTab(1, 'https://second-1.example')
+        expect(tab1.performanceWarning).toEqual(false)
+        expect(tab2.performanceWarning).toEqual(true)
+
+        tab2 = await createTab(2, 'https://second-2.example')
+        expect(tab1.performanceWarning).toEqual(false)
+        expect(tab2.performanceWarning).toEqual(false)
+
+        // The flags should be set again when fired again after navigation.
+        fireEvent({ tabId: 1 })
+        expect(tab1.performanceWarning).toEqual(true)
+        expect(tab2.performanceWarning).toEqual(false)
+        fireEvent({ tabId: 2 })
+        expect(tab1.performanceWarning).toEqual(true)
+        expect(tab2.performanceWarning).toEqual(true)
+    })
+})

unit-test/inject-chrome-shim.js

@@ -1,20 +1,8 @@
 const chrome = {
-    storage: {
-        local: {
-            set: (value) => {
-                chrome.storage.local._setCalls.push(value)
-            },
-            get: (args, cb) => {
-                // eslint-disable-next-line n/no-callback-literal
-                cb({})
-            },
-            _setCalls: []
-        },
-        managed: {
-            get: (args, cb) => {
-                // eslint-disable-next-line n/no-callback-literal
-                cb({})
-            }
+    alarms: {
+        onAlarm: {
+            addListener () { },
+            removeListener () { }
         }
     },
     browserAction: {
@@ -26,25 +14,107 @@ const chrome = {
             addListener: () => {}
         }
     },
+    declarativeNetRequest: {
+        isRegexSupported () { return { isSupported: true } },
+        getDynamicRules () { },
+        getSessionRules () { },
+        updateDynamicRules () { },
+        updateSessionRules () { }
+    },
     runtime: {
         id: '577dc9b9-c381-115a-2246-3f95fe0e6ffe',
         sendMessage: () => {},
         getManifest: () => {
             return { version: '1234.56' }
         },
         setUninstallURL: () => {},
-        getURL: path => path
+        getURL: path => path,
+        onConnect: {
+            addListener () { },
+            removeListener () { }
+        },
+        onInstalled: {
+            addListener () { },
+            removeListener () { }
+        },
+        onMessage: {
+            addListener () { },
+            removeListener () { }
+        },
+        onPerformanceWarning: {
+            addListener (listener) {
+                chrome.runtime.onPerformanceWarning._listeners.push(listener)
+            },
+            _listeners: []
+        },
+        onStartup: {
+            addListener () { },
+            removeListener () { }
+        }
+    },
+    storage: {
+        local: {
+            set: (value) => {
+                chrome.storage.local._setCalls.push(value)
+            },
+            get: (args, cb) => {
+                // eslint-disable-next-line n/no-callback-literal
+                cb({})
+            },
+            _setCalls: []
+        },
+        managed: {
+            get: (args, cb) => {
+                // eslint-disable-next-line n/no-callback-literal
+                cb({})
+            }
+        }
     },
     tabs: {
+        onActivated: {
+            addListener () { },
+            removeListener () { }
+        },
         sendMessage: () => {},
         query: () => Promise.resolve([])
     },
-    declarativeNetRequest: {
-        isRegexSupported () { return { isSupported: true } },
-        getDynamicRules () { },
-        getSessionRules () { },
-        updateDynamicRules () { },
-        updateSessionRules () { }
+    webNavigation: {
+        onCommitted: {
+            addListener () { },
+            removeListener () { }
+        },
+        onCompleted: {
+            addListener () { },
+            removeListener () { }
+        },
+        onErrorOccurred: {
+            addListener () { },
+            removeListener () { }
+        }
+    },
+    webRequest: {
+        OnBeforeSendHeadersOptions: { },
+        OnHeadersReceivedOptions: { },
+        onBeforeRequest: {
+            addListener () { },
+            removeListener () { }
+        },
+        onBeforeSendHeaders: {
+            addListener () { },
+            removeListener () { }
+        },
+        onCompleted: {
+            addListener () { },
+            removeListener () { }
+        },
+        onErrorOccurred: {
+            addListener () { },
+            removeListener () { }
+        },
+        onHeadersReceived: {
+            addListener () { },
+            removeListener () { }
+        }
     }
 }
 export {