Handle debug flags sent from C-S-S

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

@@ -70,6 +70,10 @@ function constructUrl (querystring, truncate) {
             searchParams.delete(key)
         }
     })
+    if (searchParams.has('debugFlags')) {
+        extraParams += `&debugFlags=${searchParams.get('debugFlags')}`
+        searchParams.delete('debugFlags')
+    }
     url += `${searchParams.toString()}${extraParams}`
     return url
 }
@@ -134,6 +138,7 @@ export function breakageReportForTab ({
     const ctlFacebookLogin = tab.ctlFacebookLogin ? 'true' : 'false'
     const ampUrl = tab.ampUrl || undefined
     const upgradedHttps = tab.upgradedHttps
+    const debugFlags = tab.debugFlags.map(encodeURIComponent).join(',')
 
     const brokenSiteParams = new URLSearchParams({
         siteUrl,
@@ -153,6 +158,7 @@ export function breakageReportForTab ({
 
     if (ampUrl) brokenSiteParams.set('ampUrl', ampUrl)
     if (category) brokenSiteParams.set('category', category)
+    if (debugFlags) brokenSiteParams.set('debugFlags', debugFlags)
     if (description) brokenSiteParams.set('description', description)
 
     return fire(brokenSiteParams.toString())

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

@@ -48,6 +48,8 @@ export class TabState {
         this.allowlistOptIn = false
         /** @type {boolean} */
         this.denylisted = false
+        /** @type {string[]} */
+        this.debugFlags = []
         // Whilst restoring, prevent the tab data being stored
         if (!restoring) {
             Storage.backup(this)

shared/js/background/classes/tab.js

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

shared/js/background/message-handlers.js

@@ -464,6 +464,13 @@ export async function isClickToLoadYoutubeEnabled () {
     )
 }
 
+export function addDebugFlag (message, sender, req) {
+    const tab = tabManager.get({ tabId: sender.tab.id })
+    const flags = new Set(tab.debugFlags)
+    flags.add(message.flag)
+    tab.debugFlags = [...flags]
+}
+
 /**
  * Add a new message handler.
  * @param {string} name
@@ -522,6 +529,7 @@ const messageHandlers = {
     debuggerMessage,
     search,
     openShareFeedbackPage,
-    isClickToLoadYoutubeEnabled
+    isClickToLoadYoutubeEnabled,
+    addDebugFlag
 }
 export default messageHandlers

shared/js/content-scripts/content-scope-messaging.js

@@ -2,6 +2,7 @@ const allowedMessages = [
     'getClickToLoadState',
     'getYouTubeVideoDetails',
     'openShareFeedbackPage',
+    'addDebugFlag',
     'setYoutubePreviewsEnabled',
     'unblockClickToLoadContent',
     'updateYouTubeCTLAddedFlag',

unit-test/background/classes/tab.js

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