Bug 1876880 - put the randomization of Report Broken Site reason-dropdown behind a pref, and base its ordering on ClientEnvironment.randomizationId; r=Gijs

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

Author: wisniewskit

browser/app/profile/firefox.js

@@ -2973,6 +2973,8 @@ pref("ui.new-webcompat-reporter.send-more-info-link", false);
 # 0 = disabled, 1 = reason optional, 2 = reason required.
 pref("ui.new-webcompat-reporter.reason-dropdown", 0);
 
+pref("ui.new-webcompat-reporter.reason-dropdown.randomized", true);
+
 // Reset Private Browsing Session feature
 #if defined(NIGHTLY_BUILD)
   pref("browser.privatebrowsing.resetPBM.enabled", true);

browser/components/reportbrokensite/ReportBrokenSite.sys.mjs

@@ -8,12 +8,20 @@ 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/;
 
 class ViewState {
   #doc;
   #mainView;
   #reportSentView;
+  #reasonOptions;
+  #randomizeReasons = false;
 
   currentTabURI;
   currentTabWebcompatDetailsPromise;
@@ -29,6 +37,11 @@ class ViewState {
       "report-broken-site-popup-reportSentView"
     );
     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(`menuitem:not(:first-of-type)`)
+    );
   }
 
   static #cache = new WeakMap();
@@ -102,6 +115,46 @@ class ViewState {
     );
   }
 
+  #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);
+  }
+
   static CHOOSE_A_REASON_OPT_ID = "report-broken-site-popup-reason-choose";
 
   get chooseAReasonOption() {
@@ -119,6 +172,19 @@ class ViewState {
     this.showOrHideReasonValidationMessage(false);
   }
 
+  ensureReasonOrderingMatchesPref() {
+    const randomizeReasons =
+      this.#doc.ownerGlobal.ReportBrokenSite.randomizeReasons;
+    if (randomizeReasons != this.#randomizeReasons) {
+      if (randomizeReasons) {
+        this.#randomizeReasonsOrdering();
+      } else {
+        this.#restoreReasonsOrdering();
+      }
+      this.#randomizeReasons = randomizeReasons;
+    }
+  }
+
   get isURLValid() {
     return this.urlInput.checkValidity();
   }
@@ -245,6 +311,8 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
     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";
@@ -260,6 +328,7 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
 
   #reasonEnabled = false;
   #reasonIsOptional = true;
+  #randomizeReasons = false;
   #descriptionIsOptional = true;
   #sendMoreInfoEnabled = true;
 
@@ -271,6 +340,10 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
     return this.#reasonIsOptional;
   }
 
+  get randomizeReasons() {
+    return this.#randomizeReasons;
+  }
+
   get descriptionIsOptional() {
     return this.#descriptionIsOptional;
   }
@@ -279,6 +352,7 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
     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,
@@ -440,32 +514,8 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
 
     this.#sendMoreInfoEnabled = this.sendMoreInfoPref;
     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);
+    this.#randomizeReasons = this.reasonRandomizedPref;
   }
 
   #initMainView(state) {
@@ -499,8 +549,6 @@ 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
@@ -542,6 +590,8 @@ export var ReportBrokenSite = new (class ReportBrokenSite {
 
     state.reasonInput.hidden = !this.#reasonEnabled;
 
+    state.ensureReasonOrderingMatchesPref();
+
     state.reasonLabelRequired.hidden =
       !this.#reasonEnabled || this.#reasonIsOptional;
     state.reasonLabelOptional.hidden =

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

@@ -67,30 +67,92 @@ add_task(async function testReasonDropdown() {
   );
 });
 
-async function getListItems() {
-  const win = await BrowserTestUtils.openNewBrowserWindow();
-  const rbs = new ReportBrokenSiteHelper(AppMenu(win));
+async function getListItems(rbs) {
   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;
+  return items.join(",");
 }
 
 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;
+  const USER_ID_PREF = "app.normandy.user_id";
+  const RANDOMIZE_PREF = "ui.new-webcompat-reporter.reason-dropdown.randomized";
+
+  const origNormandyUserID = Services.prefs.getCharPref(
+    USER_ID_PREF,
+    undefined
+  );
+
+  await BrowserTestUtils.withNewTab(
+    REPORTABLE_PAGE_URL,
+    async function (browser) {
+      // confirm that the default order is initially used
+      Services.prefs.setBoolPref(RANDOMIZE_PREF, false);
+      const rbs = await AppMenu().openReportBrokenSite();
+      const defaultOrder = [
+        "choose",
+        "slow",
+        "media",
+        "content",
+        "account",
+        "adblockers",
+        "other",
+      ];
+      Assert.deepEqual(
+        await getListItems(rbs),
+        defaultOrder,
+        "non-random order is correct"
+      );
+
+      // confirm that a random order happens per user
+      let randomOrder;
+      let isRandomized = false;
+      Services.prefs.setBoolPref(RANDOMIZE_PREF, true);
+
+      // This becomes ClientEnvironment.randomizationId, which we can set to
+      // any value which results in a different order from the default ordering.
+      Services.prefs.setCharPref("app.normandy.user_id", "dummy");
+
+      // clicking cancel triggers a reset, which is when the randomization
+      // logic is called. so we must click cancel after pref-changes here.
+      rbs.clickCancel();
+      await AppMenu().openReportBrokenSite();
+      randomOrder = await getListItems(rbs);
+      Assert.ok(
+        randomOrder != defaultOrder,
+        "options are randomized with pref on"
+      );
+
+      // confirm that the order doesn't change per user
+      isRandomized = false;
+      for (let attempt = 0; attempt < 5; ++attempt) {
+        rbs.clickCancel();
+        await AppMenu().openReportBrokenSite();
+        const order = await getListItems(rbs);
+
+        if (order != randomOrder) {
+          isRandomized = true;
+          break;
+        }
+      }
+      Assert.ok(!isRandomized, "options keep the same order per user");
+
+      // confirm that the order reverts to the default if pref flipped to false
+      Services.prefs.setBoolPref(RANDOMIZE_PREF, false);
+      rbs.clickCancel();
+      await AppMenu().openReportBrokenSite();
+      Assert.deepEqual(
+        defaultOrder,
+        await getListItems(rbs),
+        "reverts to non-random order correctly"
+      );
+      rbs.clickCancel();
     }
-  }
-  Assert.ok(isRandomized, "Downdown options are randomized");
+  );
+
+  Services.prefs.setCharPref(USER_ID_PREF, origNormandyUserID);
 });