tor-browser

ReportBrokenSite.sys.mjs (28220B)

---

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

const DEFAULT_NEW_REPORT_ENDPOINT = "https://webcompat.com/issues/new";

import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";

const lazy = {};

ChromeUtils.defineESModuleGetters(lazy, {
 ClientEnvironment: "resource://normandy/lib/ClientEnvironment.sys.mjs",
});

const gDescriptionCheckRE = /\S/;

export class ViewState {
 #doc;
 #mainView;
 #previewView;
 #reportSentView;
 #formElement;
 #reasonOptions;
 #randomizeReasons = false;

 currentTabURI;
 currentTabWebcompatDetailsPromise;

 constructor(doc) {
   this.#doc = doc;
   this.#mainView = doc.ownerGlobal.PanelMultiView.getViewNode(
     this.#doc,
     "report-broken-site-popup-mainView"
   );
   this.#previewView = doc.ownerGlobal.PanelMultiView.getViewNode(
     this.#doc,
     "report-broken-site-popup-previewView"
   );
   this.#reportSentView = doc.ownerGlobal.PanelMultiView.getViewNode(
     this.#doc,
     "report-broken-site-popup-reportSentView"
   );
   this.#formElement = doc.ownerGlobal.PanelMultiView.getViewNode(
     this.#doc,
     "report-broken-site-panel-form"
   );
   ViewState.#cache.set(doc, this);

   this.#reasonOptions = Array.from(
     // Skip the first option ("choose reason"), since it always stays at the top
     this.reasonInput.querySelectorAll(`option:not(:first-of-type)`)
   );
 }

 static #cache = new WeakMap();
 static get(doc) {
   return ViewState.#cache.get(doc) ?? new ViewState(doc);
 }

 get mainPanelview() {
   return this.#mainView;
 }

 get previewPanelview() {
   return this.#mainView;
 }

 get reportSentPanelview() {
   return this.#reportSentView;
 }

 get urlInput() {
   return this.#mainView.querySelector("#report-broken-site-popup-url");
 }

 get url() {
   return this.urlInput.value;
 }

 set url(spec) {
   this.urlInput.value = spec;
 }

 resetURLToCurrentTab() {
   const { currentURI } = this.#doc.ownerGlobal.gBrowser.selectedBrowser;
   this.currentTabURI = currentURI;
   this.urlInput.value = currentURI.spec;
 }

 get descriptionInput() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-description"
   );
 }

 get description() {
   return this.descriptionInput.value;
 }

 set description(value) {
   this.descriptionInput.value = value;
 }

 static REASON_CHOICES_ID_PREFIX = "report-broken-site-popup-reason-";

 get blockedTrackersCheckbox() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-blocked-trackers-checkbox"
   );
 }

 get reasonInput() {
   return this.#mainView.querySelector("#report-broken-site-popup-reason");
 }

 get reason() {
   const reason = this.reasonInput.selectedOptions[0].id.replace(
     ViewState.REASON_CHOICES_ID_PREFIX,
     ""
   );
   return reason == "choose" ? undefined : reason;
 }

 get reasonText() {
   const { reasonInput } = this;
   if (!reasonInput.selectedIndex) {
     return "";
   }
   return reasonInput.selectedOptions[0]?.label;
 }

 set reason(value) {
   this.reasonInput.selectedIndex = this.#mainView.querySelector(
     `#${ViewState.REASON_CHOICES_ID_PREFIX}${value}`
   ).index;
 }

 #randomizeReasonsOrdering() {
   // As with QuickActionsLoaderDefault, we use the Normandy
   // randomizationId as our PRNG seed to ensure that the same
   // user should always get the same sequence.
   const seed = [...lazy.ClientEnvironment.randomizationId]
     .map(x => x.charCodeAt(0))
     .reduce((sum, a) => sum + a, 0);

   const items = [...this.#reasonOptions];
   this.#shuffleArray(items, seed);
   items[0].parentNode.append(...items);
 }

 #shuffleArray(array, seed) {
   // We use SplitMix as it is reputed to have a strong distribution of values.
   const prng = this.#getSplitMix32PRNG(seed);
   for (let i = array.length - 1; i > 0; i--) {
     const j = Math.floor(prng() * (i + 1));
     [array[i], array[j]] = [array[j], array[i]];
   }
 }

 // SplitMix32 is a splittable pseudorandom number generator (PRNG).
 // License: MIT (https://github.com/attilabuti/SimplexNoise)
 #getSplitMix32PRNG(a) {
   return () => {
     a |= 0;
     a = (a + 0x9e3779b9) | 0;
     var t = a ^ (a >>> 16);
     t = Math.imul(t, 0x21f0aaad);
     t = t ^ (t >>> 15);
     t = Math.imul(t, 0x735a2d97);
     return ((t = t ^ (t >>> 15)) >>> 0) / 4294967296;
   };
 }

 #restoreReasonsOrdering() {
   this.#reasonOptions[0].parentNode.append(...this.#reasonOptions);
 }

 get form() {
   return this.#formElement;
 }

 reset() {
   this.currentTabWebcompatDetailsPromise = undefined;
   this.form.reset();
   this.blockedTrackersCheckbox.checked = false;
   delete this.cachedPreviewData;

   this.resetURLToCurrentTab();
 }

 ensureReasonOrderingMatchesPref() {
   const { randomizeReasons } = ReportBrokenSite;
   if (randomizeReasons != this.#randomizeReasons) {
     if (randomizeReasons) {
       this.#randomizeReasonsOrdering();
     } else {
       this.#restoreReasonsOrdering();
     }
     this.#randomizeReasons = randomizeReasons;
   }
 }

 get isURLValid() {
   return this.urlInput.checkValidity();
 }

 get isReasonValid() {
   const { reasonEnabled, reasonIsOptional } = ReportBrokenSite;
   return (
     !reasonEnabled || reasonIsOptional || this.reasonInput.checkValidity()
   );
 }

 get isDescriptionValid() {
   return (
     ReportBrokenSite.descriptionIsOptional ||
     gDescriptionCheckRE.test(this.descriptionInput.value)
   );
 }

 createElement(name) {
   return this.#doc.createElement(name);
 }

 #focusMainViewElement(toFocus) {
   const panelview = this.#doc.ownerGlobal.PanelView.forNode(this.#mainView);
   panelview.selectedElement = toFocus;
   panelview.focusSelectedElement();
 }

 focusFirstInvalidElement() {
   if (!this.isURLValid) {
     this.#focusMainViewElement(this.urlInput);
   } else if (!this.isReasonValid) {
     this.#focusMainViewElement(this.reasonInput);
     this.reasonInput.showPicker();
   } else if (!this.isDescriptionValid) {
     this.#focusMainViewElement(this.descriptionInput);
   }
 }

 get learnMoreLink() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-learn-more-link"
   );
 }

 get sendMoreInfoLink() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-send-more-info-link"
   );
 }

 get reasonLabelRequired() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-reason-label"
   );
 }

 get reasonLabelOptional() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-reason-optional-label"
   );
 }

 get descriptionLabelRequired() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-description-label"
   );
 }

 get descriptionLabelOptional() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-description-optional-label"
   );
 }

 get sendButton() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-send-button"
   );
 }

 get cancelButton() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-cancel-button"
   );
 }

 get mainView() {
   return this.#mainView;
 }

 get reportSentView() {
   return this.#reportSentView;
 }

 get okayButton() {
   return this.#reportSentView.querySelector(
     "#report-broken-site-popup-okay-button"
   );
 }

 get previewCancelButton() {
   return this.#previewView.querySelector(
     "#report-broken-site-popup-preview-cancel-button"
   );
 }

 get previewSendButton() {
   return this.#previewView.querySelector(
     "#report-broken-site-popup-preview-send-button"
   );
 }

 get previewBox() {
   return this.#previewView.querySelector(
     "#report-broken-site-panel-preview-items"
   );
 }

 get previewButton() {
   return this.#mainView.querySelector(
     "#report-broken-site-popup-preview-button"
   );
 }
}

export var ReportBrokenSite = new (class ReportBrokenSite {
 #newReportEndpoint = undefined;

 get sendMoreInfoEndpoint() {
   return this.#newReportEndpoint || DEFAULT_NEW_REPORT_ENDPOINT;
 }

 static WEBCOMPAT_REPORTER_CONFIG = {
   src: "desktop-reporter",
   utm_campaign: "report-broken-site",
   utm_source: "desktop-reporter",
 };

 static DATAREPORTING_PREF = "datareporting.healthreport.uploadEnabled";
 static REPORTER_ENABLED_PREF = "ui.new-webcompat-reporter.enabled";

 static REASON_PREF = "ui.new-webcompat-reporter.reason-dropdown";
 static REASON_PREF_VALUES = {
   0: "disabled",
   1: "optional",
   2: "required",
 };
 static REASON_RANDOMIZED_PREF =
   "ui.new-webcompat-reporter.reason-dropdown.randomized";
 static SEND_MORE_INFO_PREF = "ui.new-webcompat-reporter.send-more-info-link";
 static NEW_REPORT_ENDPOINT_PREF =
   "ui.new-webcompat-reporter.new-report-endpoint";

 static MAIN_PANELVIEW_ID = "report-broken-site-popup-mainView";
 static SENT_PANELVIEW_ID = "report-broken-site-popup-reportSentView";
 static PREVIEW_PANELVIEW_ID = "report-broken-site-popup-previewView";

 #_enabled = false;
 get enabled() {
   return this.#_enabled;
 }

 #reasonEnabled = false;
 #reasonIsOptional = true;
 #randomizeReasons = false;
 #descriptionIsOptional = true;
 #sendMoreInfoEnabled = true;

 get reasonEnabled() {
   return this.#reasonEnabled;
 }

 get reasonIsOptional() {
   return this.#reasonIsOptional;
 }

 get randomizeReasons() {
   return this.#randomizeReasons;
 }

 get descriptionIsOptional() {
   return this.#descriptionIsOptional;
 }

 constructor() {
   for (const [name, [pref, dflt]] of Object.entries({
     dataReportingPref: [ReportBrokenSite.DATAREPORTING_PREF, false],
     reasonPref: [ReportBrokenSite.REASON_PREF, 0],
     reasonRandomizedPref: [ReportBrokenSite.REASON_RANDOMIZED_PREF, false],
     sendMoreInfoPref: [ReportBrokenSite.SEND_MORE_INFO_PREF, false],
     newReportEndpointPref: [
       ReportBrokenSite.NEW_REPORT_ENDPOINT_PREF,
       DEFAULT_NEW_REPORT_ENDPOINT,
     ],
     enabledPref: [ReportBrokenSite.REPORTER_ENABLED_PREF, true],
   })) {
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       name,
       pref,
       dflt,
       this.#checkPrefs.bind(this)
     );
   }
   this.#checkPrefs();
 }

 canReportURI(uri) {
   return uri && (uri.schemeIs("http") || uri.schemeIs("https"));
 }

 #recordGleanEvent(name, extra) {
   Glean.webcompatreporting[name].record(extra);
 }

 updateParentMenu(event) {
   // We need to make sure that the Report Broken Site menu item
   // is disabled if the tab's location changes to a non-reportable
   // one while the menu is open.
   const tabbrowser = event.target.ownerGlobal.gBrowser;
   this.enableOrDisableMenuitems(tabbrowser.selectedBrowser);

   tabbrowser.addTabsProgressListener(this);
   event.target.addEventListener(
     "popuphidden",
     () => {
       tabbrowser.removeTabsProgressListener(this);
     },
     { once: true }
   );
 }

 init(win) {
   // Called in browser-init.js via the category manager registration
   // in BrowserComponents.manifest
   const { document } = win;

   const state = ViewState.get(document);

   this.#initMainView(state);
   this.#initPreviewView(state);
   this.#initReportSentView(state);

   for (const id of ["menu_HelpPopup", "appMenu-popup"]) {
     document
       .getElementById(id)
       .addEventListener("popupshown", this.updateParentMenu.bind(this));
   }

   state.mainPanelview.addEventListener("ViewShowing", ({ target }) => {
     const { selectedBrowser } = target.ownerGlobal.gBrowser;
     let source = "helpMenu";
     switch (target.closest("panelmultiview")?.id) {
       case "appMenu-multiView":
         source = "hamburgerMenu";
         break;
       case "protections-popup-multiView":
         source = "ETPShieldIconMenu";
         break;
     }
     this.#onMainViewShown(source, selectedBrowser);
   });

   // Make sure the URL input is focused when the main view pops up.
   state.mainPanelview.addEventListener("ViewShown", () => {
     const panelview = win.PanelView.forNode(state.mainPanelview);
     panelview.selectedElement = state.urlInput;
     panelview.focusSelectedElement();
     Services.focus
       .getFocusedElementForWindow(win, true, {})
       ?.setSelectionRange(0, 0);
   });

   // Make sure the Okay button is focused when the report sent view pops up.
   state.reportSentPanelview.addEventListener("ViewShown", () => {
     const panelview = win.PanelView.forNode(state.reportSentPanelview);
     panelview.selectedElement = state.okayButton;
     panelview.focusSelectedElement();
   });

   win.document
     .getElementById("cmd_reportBrokenSite")
     .addEventListener("command", e => {
       if (this.enabled) {
         this.open(e);
       } else {
         const tabbrowser = e.target.ownerGlobal.gBrowser;
         state.resetURLToCurrentTab();
         this.promiseWebCompatInfo(state, tabbrowser.selectedBrowser);
         this.#openWebCompatTab(tabbrowser)
           .catch(err => {
             console.error("Report Broken Site: unexpected error", err);
           })
           .finally(() => {
             state.reset();
           });
       }
     });
 }

 enableOrDisableMenuitems(selectedbrowser) {
   // Ensures that the various Report Broken Site menu items and
   // toolbar buttons are enabled/hidden when appropriate.

   const canReportUrl = this.canReportURI(selectedbrowser.currentURI);

   const { document } = selectedbrowser.ownerGlobal;

   // Altering the disabled attribute on the command does not propagate
   // the change to the related menuitems (see bug 805653), so we change them all.
   const cmd = document.getElementById("cmd_reportBrokenSite");
   // Hide the items in base-browser. tor-browser#43903.
   const allowedByPolicy = false;
   cmd.toggleAttribute("hidden", !allowedByPolicy);
   const app = document.ownerGlobal.PanelMultiView.getViewNode(
     document,
     "appMenu-report-broken-site-button"
   );
   // Note that this element does not exist until the protections popup is actually opened.
   const prot = document.getElementById(
     "protections-popup-report-broken-site-button"
   );
   if (canReportUrl) {
     cmd.removeAttribute("disabled");
     app.removeAttribute("disabled");
     prot?.removeAttribute("disabled");
   } else {
     cmd.setAttribute("disabled", "true");
     app.setAttribute("disabled", "true");
     prot?.setAttribute("disabled", "true");
   }

   // Changes to the "hidden" and "disabled" state of the command aren't reliably
   // reflected on the main menu unless we open it twice, or do it manually.
   // (See bug 1864953).
   const mainmenuItem = document.getElementById("help_reportBrokenSite");
   if (mainmenuItem) {
     mainmenuItem.hidden = !allowedByPolicy;
     mainmenuItem.disabled = !canReportUrl;
   }
 }

 #checkPrefs(whichChanged) {
   // No breakage reports can be sent by Glean if it's disabled, so we also
   // disable the broken site reporter. We also have our own pref.
   this.#_enabled =
     Services.policies.isAllowed("feedbackCommands") &&
     this.dataReportingPref &&
     this.enabledPref;

   this.#reasonEnabled = this.reasonPref == 1 || this.reasonPref == 2;
   this.#reasonIsOptional = this.reasonPref == 1;
   if (!whichChanged || whichChanged == ReportBrokenSite.REASON_PREF) {
     const setting = ReportBrokenSite.REASON_PREF_VALUES[this.reasonPref];
     this.#recordGleanEvent("reasonDropdown", { setting });
   }

   this.#sendMoreInfoEnabled = this.sendMoreInfoPref;
   this.#newReportEndpoint = this.newReportEndpointPref;

   this.#randomizeReasons = this.reasonRandomizedPref;
 }

 #initMainView(state) {
   state.sendButton.addEventListener("command", () => {
     state.form.requestSubmit();
   });

   state.form.addEventListener("submit", async event => {
     event.preventDefault();
     if (!state.form.checkValidity()) {
       state.focusFirstInvalidElement();
       return;
     }
     const multiview = event.target.closest("panelmultiview");
     this.#recordGleanEvent("send", {
       sent_with_blocked_trackers: !!state.blockedTrackersCheckbox.checked,
     });
     await this.#sendReportAsGleanPing(state);
     multiview.showSubView("report-broken-site-popup-reportSentView");
     state.reset();
   });

   state.cancelButton.addEventListener("command", ({ target }) => {
     target.ownerGlobal.CustomizableUI.hidePanelForNode(target);
     state.reset();
   });

   state.sendMoreInfoLink.addEventListener("click", async event => {
     event.preventDefault();
     const tabbrowser = event.target.ownerGlobal.gBrowser;
     this.#recordGleanEvent("sendMoreInfo");
     event.target.ownerGlobal.CustomizableUI.hidePanelForNode(event.target);
     await this.#openWebCompatTab(tabbrowser);
     state.reset();
   });

   state.learnMoreLink.addEventListener("click", async event => {
     this.#recordGleanEvent("learnMore");
     event.target.ownerGlobal.requestAnimationFrame(() => {
       event.target.ownerGlobal.CustomizableUI.hidePanelForNode(event.target);
     });
   });

   state.previewButton.addEventListener("click", event => {
     state.currentTabWebcompatDetailsPromise
       ?.catch(_ => {})
       .then(info => {
         this.generatePreviewMarkup(state, info);

         // Update the live data on the preview which the user can edit in the reporter.
         const { description, previewBox, reasonText } = state;
         if (state.cachedPreviewData) {
           state.cachedPreviewData.basic.description = description;
           state.cachedPreviewData.basic.reason = reasonText;
         }
         previewBox.querySelector(
           ".preview_description"
         ).nextSibling.innerText = JSON.stringify(description);
         previewBox.querySelector(".preview_reason").nextSibling.innerText =
           JSON.stringify(reasonText ?? "");

         const multiview = event.target.closest("panelmultiview");
         multiview.showSubView(
           ReportBrokenSite.PREVIEW_PANELVIEW_ID,
           event.target
         );
         this.#recordGleanEvent("previewed");
       });
   });
 }

 #initPreviewView(state) {
   state.previewSendButton.addEventListener("command", event => {
     // If the user has not entered a reason yet, then the form's validity
     // check will bring up the reason dropdown, despite it being out of view
     // (since we're looking at the preview panel, not the main one). This is
     // confusing, so we instead go back to the main view first if there is a
     // validity check failure (we also have to be careful to avoid possibly
     // racing with the user if they close the popup during this sequence, so
     // we don't leak any event listeners and world with them).
     if (!state.form.checkValidity()) {
       const view = event.target.closest("panelview").panelMultiView;
       const { document } = event.target.ownerGlobal;
       const listener = event => {
         document.removeEventListener("popuphiding", listener);
         view.removeEventListener("ViewShown", listener);
         if (event.type == "ViewShown") {
           state.form.requestSubmit();
         }
       };
       document.addEventListener("popuphiding", listener);
       view.addEventListener("ViewShown", listener);
       view.goBack();
     } else {
       state.form.requestSubmit();
     }
   });

   state.previewCancelButton.addEventListener("command", ({ target }) => {
     target.ownerGlobal.CustomizableUI.hidePanelForNode(target);
     state.reset();
   });
 }

 #initReportSentView(state) {
   state.okayButton.addEventListener("command", ({ target }) => {
     target.ownerGlobal.CustomizableUI.hidePanelForNode(target);
   });
 }

 async #onMainViewShown(source, selectedBrowser) {
   const { document } = selectedBrowser.ownerGlobal;

   let didReset = false;
   const state = ViewState.get(document);
   const uri = selectedBrowser.currentURI;
   if (!state.isURLValid && !state.isDescriptionValid) {
     state.reset();
     didReset = true;
   } else if (!state.currentTabURI || !uri.equals(state.currentTabURI)) {
     state.reset();
     didReset = true;
   } else if (!state.url) {
     state.resetURLToCurrentTab();
   }

   const { sendMoreInfoLink } = state;
   const { sendMoreInfoEndpoint } = this;
   if (sendMoreInfoLink.href !== sendMoreInfoEndpoint) {
     sendMoreInfoLink.href = sendMoreInfoEndpoint;
   }
   sendMoreInfoLink.hidden = !this.#sendMoreInfoEnabled;

   state.reasonInput.hidden = !this.#reasonEnabled;
   state.reasonInput.required = this.#reasonEnabled && !this.#reasonIsOptional;

   state.ensureReasonOrderingMatchesPref();

   state.reasonLabelRequired.hidden =
     !this.#reasonEnabled || this.#reasonIsOptional;
   state.reasonLabelOptional.hidden =
     !this.#reasonEnabled || !this.#reasonIsOptional;

   state.descriptionLabelRequired.hidden = this.#descriptionIsOptional;
   state.descriptionLabelOptional.hidden = !this.#descriptionIsOptional;

   this.#recordGleanEvent("opened", { source });

   if (didReset || !state.currentTabWebcompatDetailsPromise) {
     this.promiseWebCompatInfo(state, selectedBrowser);
   }
 }

 promiseWebCompatInfo(state, selectedBrowser) {
   state.currentTabWebcompatDetailsPromise = this.#queryActor(
     "GetBrokenSiteReport",
     undefined,
     selectedBrowser
   ).catch(err => {
     console.error("Report Broken Site: unexpected error", err);
     state.currentTabWebcompatDetailsPromise = undefined;
   });
 }

 cachePreviewData(state, brokenSiteReportData) {
   const { blockedTrackersCheckbox, description, reasonText, url } = state;

   const previewData = Object.assign({
     basic: {
       description,
       reason: reasonText,
       url,
     },
   });

   if (brokenSiteReportData) {
     for (const [category, values] of Object.entries(brokenSiteReportData)) {
       previewData[category] = Object.fromEntries(
         Object.entries(values)
           .filter(([_, { do_not_preview }]) => !do_not_preview)
           .map(([name, { value }]) => [name, value])
       );
     }
   }

   if (!blockedTrackersCheckbox.checked && previewData.antitracking) {
     delete previewData.antitracking.blockedOrigins;
   }

   state.cachedPreviewData = previewData;
   return previewData;
 }

 generatePreviewMarkup(state, reportData) {
   // If we have already cached preview data, we have already generated the markup as well.
   if (this.cachedPreviewData) {
     return;
   }
   const previewData = this.cachePreviewData(state, reportData);
   const preview = state.previewBox;
   preview.innerHTML = "";
   for (const [name, value] of Object.entries(previewData)) {
     const details = state.createElement("details");

     const summary = state.createElement("summary");
     summary.innerText = name;
     summary.dataset.capturesFocus = "true";
     details.appendChild(summary);

     const info = state.createElement("div");
     info.className = "data";
     for (const [k, v] of Object.entries(value)) {
       const div = state.createElement("div");
       div.className = "entry";
       const span_name = state.createElement("span");
       const span_value = state.createElement("span");
       span_name.className = `preview_${k}`;
       span_name.innerText = `${k}:`;
       // Add some extra word-wrapping opportunities to the data by adding spaces,
       // so users don't have to horizontally scroll as much.
       span_value.innerText = JSON.stringify(v)?.replace(/[,:]/g, "$& ") ?? "";
       div.append(span_name, span_value);
       info.appendChild(div);
     }
     details.appendChild(info);

     preview.appendChild(details);
   }
   const first = preview.querySelector("details");
   if (first) {
     first.setAttribute("open", "");
   }
 }

 async #queryActor(msg, params, browser) {
   const actor =
     browser.browsingContext.currentWindowGlobal.getActor("ReportBrokenSite");
   return actor.sendQuery(msg, params);
 }

 async #loadTab(tabbrowser, url, triggeringPrincipal) {
   const tab = tabbrowser.addTab(url, {
     inBackground: false,
     triggeringPrincipal,
   });
   const expectedBrowser = tabbrowser.getBrowserForTab(tab);
   return new Promise(resolve => {
     const listener = {
       onLocationChange(browser, webProgress, request, uri) {
         if (
           browser == expectedBrowser &&
           uri.spec == url &&
           webProgress.isTopLevel
         ) {
           resolve(tab);
           tabbrowser.removeTabsProgressListener(listener);
         }
       },
     };
     tabbrowser.addTabsProgressListener(listener);
   });
 }

 async #openWebCompatTab(tabbrowser) {
   const endpointUrl = this.sendMoreInfoEndpoint;
   const principal = Services.scriptSecurityManager.createNullPrincipal({});
   const tab = await this.#loadTab(tabbrowser, endpointUrl, principal);
   const { document } = tabbrowser.selectedBrowser.ownerGlobal;
   const { description, reason, url, currentTabWebcompatDetailsPromise } =
     ViewState.get(document);

   return this.#queryActor(
     "SendDataToWebcompatCom",
     {
       reason,
       description,
       endpointUrl,
       reportUrl: url,
       reporterConfig: ReportBrokenSite.WEBCOMPAT_REPORTER_CONFIG,
       webcompatInfo: await currentTabWebcompatDetailsPromise,
     },
     tab.linkedBrowser
   ).catch(err => {
     console.error("Report Broken Site: unexpected error", err);
   });
 }

 async #sendReportAsGleanPing({
   blockedTrackersCheckbox,
   currentTabWebcompatDetailsPromise,
   description,
   reason,
   url,
 }) {
   const gBase = Glean.brokenSiteReport;

   if (reason) {
     gBase.breakageCategory.set(reason);
   }

   gBase.description.set(description);
   gBase.url.set(url);

   const details = await currentTabWebcompatDetailsPromise;

   if (!details) {
     GleanPings.brokenSiteReport.submit();
     return;
   }

   if (!blockedTrackersCheckbox.checked) {
     delete details.antitracking.blockedOrigins;
   }

   for (const categoryItems of Object.values(details)) {
     for (let [name, { glean, json, value }] of Object.entries(
       categoryItems
     )) {
       if (!glean) {
         continue;
       }
       // Transform glean=xx.yy.zz to brokenSiteReportXxYyZz.
       glean =
         "brokenSiteReport" +
         glean
           .split(".")
           .map(v => `${v[0].toUpperCase()}${v.substr(1)}`)
           .join("");
       if (json) {
         name = `${name}Json`;
         value = JSON.stringify(value);
       }
       Glean[glean][name].set(value);
     }
   }

   GleanPings.brokenSiteReport.submit();
 }

 open(event) {
   const { target } = event.sourceEvent;
   const { selectedBrowser } = target.ownerGlobal.gBrowser;
   const { ownerGlobal } = selectedBrowser;
   const { document } = ownerGlobal;

   switch (target.id) {
     case "appMenu-report-broken-site-button":
       ownerGlobal.PanelUI.showSubView(
         ReportBrokenSite.MAIN_PANELVIEW_ID,
         target
       );
       break;
     case "protections-popup-report-broken-site-button":
       document
         .getElementById("protections-popup-multiView")
         .showSubView(ReportBrokenSite.MAIN_PANELVIEW_ID);
       break;
     case "help_reportBrokenSite": {
       // hide the hamburger menu first, as we overlap with it.
       const appMenuPopup = document.getElementById("appMenu-popup");
       appMenuPopup?.hidePopup();

       ownerGlobal.PanelUI.showSubView(
         ReportBrokenSite.MAIN_PANELVIEW_ID,
         ownerGlobal.PanelUI.menuButton
       );
       break;
     }
   }
 }
})();