124.0b8

firefox-src-part/browser/app/profile/firefox.js

@@ -648,6 +648,17 @@ pref("browser.urlbar.suggest.mdn", true);
 // Feature gate pref for Yelp suggestions in the urlbar.
 pref("browser.urlbar.yelp.featureGate", false);
 
+// The minimum prefix length of yelp query the user must type to trigger
+// the suggestion.
+pref("browser.urlbar.yelp.minKeywordLength", 5);
+
+// Whether Yelp suggestions should be shown as top picks.
+pref("browser.urlbar.yelp.priority", false);
+
+// The group-relative suggestedIndex of Yelp suggestions within the Firefox
+// Suggest section. Ignored when Yelp suggestions are shown as top picks.
+pref("browser.urlbar.yelp.suggestedIndex", 0);
+
 // If `browser.urlbar.yelp.featureGate` is true, this controls whether
 // Yelp suggestions are turned on.
 pref("browser.urlbar.suggest.yelp", true);

firefox-src-part/browser/base/content/browser-fullScreenAndPointerLock.js

@@ -275,11 +275,24 @@ var PointerlockFsWarning = {
 };
 
 var PointerLock = {
+  _isActive: false,
+
+  /**
+   * @returns {boolean} - true if pointer lock is currently active for the
+   * associated window.
+   */
+  get isActive() {
+    return this._isActive;
+  },
+
   entered(originNoSuffix) {
+    this._isActive = true;
+    Services.obs.notifyObservers(null, "pointer-lock-entered");
     PointerlockFsWarning.showPointerLock(originNoSuffix);
   },
 
   exited() {
+    this._isActive = false;
     PointerlockFsWarning.close("pointerlock-warning");
   },
 };

firefox-src-part/browser/base/content/browser-sync.js

@@ -837,10 +837,20 @@ var gSync = {
         this.updateFxAPanel(UIState.get());
         this.updateCTAPanel();
         PanelUI.showSubView("PanelUI-fxa", anchor, aEvent);
-      } else {
+      } else if (anchor == document.getElementById("fxa-toolbar-menu-button")) {
+        // The fxa toolbar button doesn't have much context before the user
+        // clicks it so instead of going straight to the login page,
+        // we take them to a page that has more information
         this.emitFxaToolbarTelemetry("toolbar_icon", anchor);
         openTrustedLinkIn("about:preferences#sync", "tab");
         PanelUI.hide();
+      } else {
+        let panel =
+          anchor.id == "appMenu-fxa-label2"
+            ? PanelMultiView.getViewNode(document, "PanelUI-fxa")
+            : undefined;
+        this.openFxAEmailFirstPageFromFxaMenu(panel);
+        PanelUI.hide();
       }
       return;
     }

firefox-src-part/browser/base/content/sanitizeDialog.js

@@ -219,11 +219,11 @@ var gSanitizePromptDialog = {
       this.warningBox.hidden = true;
     }
 
-    await this.dataSizesFinishedUpdatingPromise;
-
     if (!lazy.USE_OLD_DIALOG) {
       this.reportTelemetry("open");
     }
+
+    await this.dataSizesFinishedUpdatingPromise;
   },
 
   updateAcceptButtonState() {

firefox-src-part/browser/components/aboutwelcome/actors/AboutWelcomeChild.sys.mjs

@@ -473,9 +473,6 @@ const SHOPPING_MICROSURVEY = {
         title: {
           string_id: "shopping-survey-headline",
         },
-        subtitle: {
-          string_id: "shopping-survey-question-one",
-        },
         primary_button: {
           label: {
             string_id: "shopping-survey-next-button-label",
@@ -520,6 +517,9 @@ const SHOPPING_MICROSURVEY = {
             flexDirection: "column",
             alignItems: "flex-start",
           },
+          label: {
+            string_id: "shopping-survey-question-one",
+          },
           data: [
             {
               id: "radio-1",
@@ -572,9 +572,6 @@ const SHOPPING_MICROSURVEY = {
         title: {
           string_id: "shopping-survey-headline",
         },
-        subtitle: {
-          string_id: "shopping-survey-question-two",
-        },
         primary_button: {
           label: {
             string_id: "shopping-survey-submit-button-label",
@@ -619,6 +616,9 @@ const SHOPPING_MICROSURVEY = {
             flexDirection: "column",
             alignItems: "flex-start",
           },
+          label: {
+            string_id: "shopping-survey-question-two",
+          },
           data: [
             {
               id: "radio-1",

firefox-src-part/browser/components/aboutwelcome/content-src/aboutwelcome.scss

@@ -1337,13 +1337,44 @@ html {
     align-items: flex-start;
     gap: 16px;
     margin-block: -1em 2em;
+    margin-inline: 1em;
     color: #5B5B66;
     font-weight: 400;
     font-size: 14px;
     text-align: initial;
     transition: var(--transition);
     z-index: 1;
 
+    #multi-stage-multi-select-label {
+      // These styles are based on .welcome-text>h2 (subtitle).
+      color: var(--in-content-page-color);
+      line-height: 1.5;
+      font-size: 16px;
+      font-weight: normal;
+      letter-spacing: -0.01em;
+      // Try to get the label positioned the same way it would be if it was a
+      // subtitle. -0.5em for the welcome-text margin, 1em for the
+      // multi-select-container margin, and 10px for the desired margin between
+      // the label and the title.
+      margin: calc(-0.5em + 1em + 10px) 6px 0;
+      max-width: 750px;
+    }
+
+    @at-root .onboardingContainer .screen[pos='split'] .multi-select-container #multi-stage-multi-select-label {
+      margin: calc(-35px + 1em + 10px) 0 0;
+      min-height: 1em;
+      font-size: 15px;
+      line-height: 1.5;
+
+      @media (prefers-contrast: no-preference) {
+        color: #5B5B66;
+      }
+
+      @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+        color: #CFCFD8;
+      }
+    }
+
     .checkbox-container {
       display: flex;
     }

firefox-src-part/browser/components/aboutwelcome/content-src/components/MultiSelect.jsx

@@ -55,10 +55,12 @@ function getValidStyle(style, validStyles, allowVars) {
 
 export const MultiSelect = ({
   content,
+  screenMultiSelects,
+  setScreenMultiSelects,
   activeMultiSelect,
   setActiveMultiSelect,
 }) => {
-  const { data, randomize } = content.tiles;
+  const { data } = content.tiles;
 
   const refs = useRef({});
 
@@ -73,7 +75,23 @@ export const MultiSelect = ({
   }, [setActiveMultiSelect]);
 
   const items = useMemo(
-    () => (randomize ? data.sort(() => 0.5 - Math.random()) : data),
+    () => {
+      function getOrderedIds() {
+        if (screenMultiSelects) {
+          return screenMultiSelects;
+        }
+        let orderedIds = data
+          .map(item => ({
+            id: item.id,
+            rank: item.randomize ? Math.random() : NaN,
+          }))
+          .sort((a, b) => b.rank - a.rank)
+          .map(({ id }) => id);
+        setScreenMultiSelects(orderedIds);
+        return orderedIds;
+      }
+      return getOrderedIds().map(id => data.find(item => item.id === id));
+    },
     [] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
@@ -97,7 +115,21 @@ export const MultiSelect = ({
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div className="multi-select-container" style={containerStyle}>
+    <div
+      className="multi-select-container"
+      style={containerStyle}
+      role={
+        items.some(({ type, group }) => type === "radio" && group)
+          ? "radiogroup"
+          : "group"
+      }
+      aria-labelledby="multi-stage-multi-select-label"
+    >
+      {content.tiles.label ? (
+        <Localized text={content.tiles.label}>
+          <h2 id="multi-stage-multi-select-label" />
+        </Localized>
+      ) : null}
       {items.map(({ id, label, icon, type = "checkbox", group, style }) => (
         <div
           key={id + label}

firefox-src-part/browser/components/aboutwelcome/content-src/components/MultiStageAboutWelcome.jsx

@@ -171,6 +171,8 @@ export const MultiStageAboutWelcome = props => {
     return false;
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const [multiSelects, setMultiSelects] = useState({});
+
   // Save the active multi select state for each screen as an object keyed by
   // screen id. Each screen id has an array containing checkbox ids used in
   // handleAction to update MULTI_ACTION data. This allows us to remember the
@@ -223,6 +225,14 @@ export const MultiStageAboutWelcome = props => {
                   ? valueOrFn(prevState[screen.id])
                   : valueOrFn,
             }));
+          const setScreenMultiSelects = valueOrFn =>
+            setMultiSelects(prevState => ({
+              ...prevState,
+              [screen.id]:
+                typeof valueOrFn === "function"
+                  ? valueOrFn(prevState[screen.id])
+                  : valueOrFn,
+            }));
 
           return index === order ? (
             <WelcomeScreen
@@ -243,6 +253,8 @@ export const MultiStageAboutWelcome = props => {
               initialTheme={initialTheme}
               setActiveTheme={setActiveTheme}
               setInitialTheme={setInitialTheme}
+              screenMultiSelects={multiSelects[screen.id]}
+              setScreenMultiSelects={setScreenMultiSelects}
               activeMultiSelect={activeMultiSelects[screen.id]}
               setActiveMultiSelect={setActiveMultiSelect}
               autoAdvance={screen.auto_advance}
@@ -532,6 +544,8 @@ export class WelcomeScreen extends React.PureComponent {
         order={this.props.order}
         previousOrder={this.props.previousOrder}
         activeTheme={this.props.activeTheme}
+        screenMultiSelects={this.props.screenMultiSelects}
+        setScreenMultiSelects={this.props.setScreenMultiSelects}
         activeMultiSelect={this.props.activeMultiSelect}
         setActiveMultiSelect={this.props.setActiveMultiSelect}
         totalNumberOfScreens={this.props.totalNumberOfScreens}

firefox-src-part/browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx

@@ -45,6 +45,8 @@ export const MultiStageProtonScreen = props => {
       id={props.id}
       order={props.order}
       activeTheme={props.activeTheme}
+      screenMultiSelects={props.screenMultiSelects}
+      setScreenMultiSelects={props.setScreenMultiSelects}
       activeMultiSelect={props.activeMultiSelect}
       setActiveMultiSelect={props.setActiveMultiSelect}
       totalNumberOfScreens={props.totalNumberOfScreens}
@@ -302,6 +304,8 @@ export class ProtonScreen extends React.PureComponent {
         content.tiles.data ? (
           <MultiSelect
             content={content}
+            screenMultiSelects={this.props.screenMultiSelects}
+            setScreenMultiSelects={this.props.setScreenMultiSelects}
             activeMultiSelect={this.props.activeMultiSelect}
             setActiveMultiSelect={this.props.setActiveMultiSelect}
           />