Bug 1876333 - randomize the order of the items in the Report Broken Site 'choose reason' dropdown; r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D199598

Author: wisniewskit

browser/components/reportbrokensite/ReportBrokenSite.sys.mjs

@@ -442,6 +442,32 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
     this.#newReportEndpoint = this.newReportEndpointPref;
   }
 
+  #random(seed) {
+    let x = Math.sin(seed) * 10000;
+    return x - Math.floor(x);
+  }
+
+  #shuffleArray(array) {
+    const seed = Math.round(new Date().getTime());
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(this.#random(seed) * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+  }
+
+  #randomizeDropdownItems(dropdown) {
+    if (!dropdown) {
+      return;
+    }
+
+    // Leave the first option ("choose reason") at the start
+    const items = Array.from(
+      dropdown.querySelectorAll(`menuitem:not(:first-of-type)`)
+    );
+    this.#shuffleArray(items);
+    items[0].parentNode.append(...items);
+  }
+
   #initMainView(state) {
     state.sendButton.addEventListener("command", async ({ target }) => {
       if (state.checkAndShowInputValidity()) {
@@ -473,6 +499,8 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
       state.showOrHideReasonValidationMessage();
     });
 
+    this.#randomizeDropdownItems(reasonDropdown);
+
     const menupopup = reasonDropdown.querySelector("menupopup");
     const onDropDownShowOrHide = ({ type }) => {
       // Hide "choose a reason" while the user has the reason dropdown open

browser/components/reportbrokensite/test/browser/browser_reason_dropdown.js

@@ -66,3 +66,31 @@ add_task(async function testReasonDropdown() {
     }
   );
 });
+
+async function getListItems() {
+  const win = await BrowserTestUtils.openNewBrowserWindow();
+  const rbs = new ReportBrokenSiteHelper(AppMenu(win));
+  const items = Array.from(rbs.reasonInput.querySelectorAll("menuitem")).map(
+    i => i.id.replace("report-broken-site-popup-reason-", "")
+  );
+  Assert.equal(items[0], "choose", "First option is always 'choose'");
+  await BrowserTestUtils.closeWindow(win);
+  return items;
+}
+
+add_task(async function testReasonDropdownRandomized() {
+  ensureReportBrokenSitePreffedOn();
+  ensureReasonOptional();
+
+  let isRandomized = false;
+  const list1 = await getListItems();
+  for (let attempt = 0; attempt < 100; ++attempt) {
+    // try up to 100 times
+    const list = await getListItems();
+    if (!areObjectsEqual(list, list1)) {
+      isRandomized = true;
+      break;
+    }
+  }
+  Assert.ok(isRandomized, "Downdown options are randomized");
+});