Bug 1880656 - Add font weight and font type controls in Reader menu. r=reader-mode-reviewers,fluent-reviewers,desktop-theme-reviewers,flod,cmkm,Itiel

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

modules/libpref/init/all.js

@@ -3543,6 +3543,18 @@ pref("reader.errors.includeURLs", false);
 // The default relative font size in reader mode (1-9)
 pref("reader.font_size", 5);
 
+// The font type in reader (sans-serif, serif, monospace)
+pref("reader.font_type", "sans-serif");
+
+// Default font types available in reader mode.
+pref("reader.font_type.values", "[\"sans-serif\",\"serif\",\"monospace\"]");
+
+// The default font weight in reader mode (regular, light, bold)
+pref("reader.font_weight", "regular");
+
+// Font weight values available in reader mode.
+pref("reader.font_weight.values", "[\"regular\",\"light\",\"bold\"]");
+
 // The default relative content width in reader mode (1-9)
 pref("reader.content_width", 3);
 
@@ -3553,15 +3565,15 @@ pref("reader.line_height", 4);
 pref("reader.improved_text_menu.enabled", false);
 
 // The default character spacing in reader mode (1-9)
-pref("reader.character_spacing", "");
+pref("reader.character_spacing", 0);
 
 // The default word spacing in reader mode (1-9)
-pref("reader.word_spacing", "");
+pref("reader.word_spacing", 0);
 
 // The default text alignment direction in reader mode
 pref("reader.text_alignment", "start");
 
-// The default color scheme in reader mode (light, dark, sepia, auto)
+// The default color scheme in reader mode (light, dark, sepia, auto, contrast, gray)
 // auto = color automatically adjusts according to ambient light level
 // (auto only works on platforms where the 'devicelight' event is enabled)
 pref("reader.color_scheme", "auto");
@@ -3581,9 +3593,6 @@ pref("reader.custom_colors.visited-links", "");
 
 pref("reader.custom_colors.selection-highlight", "");
 
-// The font type in reader (sans-serif, serif)
-pref("reader.font_type", "sans-serif");
-
 // Whether to use a vertical or horizontal toolbar.
 pref("reader.toolbar.vertical", true);
 

toolkit/components/reader/AboutReader.sys.mjs

@@ -9,6 +9,10 @@ import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
 const lazy = {};
 let gScrollPositions = new Map();
 let lastSelectedTheme = "auto";
+let improvedTextMenuEnabled = Services.prefs.getBoolPref(
+  "reader.improved_text_menu.enabled",
+  false
+);
 
 ChromeUtils.defineESModuleGetters(lazy, {
   AsyncPrefs: "resource://gre/modules/AsyncPrefs.sys.mjs",
@@ -31,6 +35,29 @@ ChromeUtils.defineLazyGetter(
   () => new Localization(["toolkit/about/aboutReader.ftl"], true)
 );
 
+const FONT_TYPE_L10N_IDS = {
+  serif: "about-reader-font-type-serif",
+  "sans-serif": "about-reader-font-type-sans-serif",
+  monospace: "about-reader-font-type-monospace",
+};
+
+const FONT_WEIGHT_L10N_IDS = {
+  light: "about-reader-font-weight-light",
+  regular: "about-reader-font-weight-regular",
+  bold: "about-reader-font-weight-bold",
+};
+
+const DEFAULT_TEXT_LAYOUT = {
+  fontSize: 5,
+  fontType: "sans-serif",
+  fontWeight: "regular",
+  contentWidth: 3,
+  lineSpacing: 4,
+  characterSpacing: 0,
+  wordSpacing: 0,
+  textAlignment: "start",
+};
+
 const COLORSCHEME_L10N_IDS = {
   auto: "about-reader-color-auto-theme",
   light: "about-reader-color-light-theme",
@@ -251,22 +278,18 @@ export var AboutReader = function (
 
   // Differentiates between the tick mark labels for width vs spacing controls
   // for localization purposes.
-  const [narrowWidthLabel, wideWidthLabel] = lazy.l10n.formatMessagesSync([
-    "about-reader-slider-label-width-narrow",
-    "about-reader-slider-label-width-wide",
-  ]);
-  const [narrowSpacingLabel, standardSpacingLabel, wideSpacingLabel] =
-    lazy.l10n.formatMessagesSync([
-      "about-reader-slider-label-spacing-narrow",
+  const [standardSpacingLabel, wideSpacingLabel] = lazy.l10n.formatMessagesSync(
+    [
       "about-reader-slider-label-spacing-standard",
       "about-reader-slider-label-spacing-wide",
-    ]);
+    ]
+  );
 
   let contentWidthSliderOptions = {
     min: 1,
     max: 9,
     ticks: 9,
-    tickLabels: `["${narrowWidthLabel.value}", "${wideWidthLabel.value}"]`,
+    tickLabels: `[]`,
     l10nId: "about-reader-content-width-label",
     icon: "chrome://global/skin/reader/content-width-20.svg",
   };
@@ -275,7 +298,7 @@ export var AboutReader = function (
     min: 1,
     max: 9,
     ticks: 9,
-    tickLabels: `["${narrowSpacingLabel.value}", "${wideSpacingLabel.value}"]`,
+    tickLabels: `[]`,
     l10nId: "about-reader-line-spacing-label",
     icon: "chrome://global/skin/reader/line-spacing-20.svg",
   };
@@ -324,10 +347,47 @@ export var AboutReader = function (
     textAlignmentOptions = textAlignmentOptions.reverse();
   }
 
-  if (Services.prefs.getBoolPref("reader.improved_text_menu.enabled", false)) {
+  if (improvedTextMenuEnabled) {
     doc.getElementById("regular-text-menu").hidden = true;
     doc.getElementById("improved-text-menu").hidden = false;
 
+    let selectorFontTypeValues;
+    try {
+      selectorFontTypeValues = JSON.parse(
+        Services.prefs.getCharPref("reader.font_type.values")
+      );
+    } catch (e) {
+      selectorFontTypeValues = ["sans-serif", "serif", "monospace"];
+    }
+
+    this._setupSelector(
+      "font-type",
+      selectorFontTypeValues,
+      fontType,
+      this._setFontTypeSelector.bind(this),
+      FONT_TYPE_L10N_IDS
+    );
+    this._setFontTypeSelector(fontType);
+
+    let fontWeightValues;
+    try {
+      fontWeightValues = JSON.parse(
+        Services.prefs.getCharPref("reader.font_weight.values")
+      );
+    } catch (e) {
+      fontWeightValues = ["regular", "light", "bold"];
+    }
+
+    let fontWeight = Services.prefs.getCharPref("reader.font_weight");
+    this._setupSelector(
+      "font-weight",
+      fontWeightValues,
+      fontWeight,
+      this._setFontWeight.bind(this),
+      FONT_WEIGHT_L10N_IDS
+    );
+    this._setFontWeight(fontWeight);
+
     let contentWidth = Services.prefs.getIntPref("reader.content_width");
     this._setupSlider(
       "content-width",
@@ -346,7 +406,7 @@ export var AboutReader = function (
     );
     this._setLineSpacing(lineSpacing);
 
-    let characterSpacing = Services.prefs.getStringPref(
+    let characterSpacing = Services.prefs.getIntPref(
       "reader.character_spacing"
     );
     this._setupSlider(
@@ -357,7 +417,7 @@ export var AboutReader = function (
     );
     this._setCharacterSpacing(characterSpacing);
 
-    let wordSpacing = Services.prefs.getStringPref("reader.word_spacing");
+    let wordSpacing = Services.prefs.getIntPref("reader.word_spacing");
     this._setupSlider(
       "word-spacing",
       wordSpacingSliderOptions,
@@ -374,6 +434,11 @@ export var AboutReader = function (
       this._setTextAlignment.bind(this)
     );
     this._setTextAlignment(textAlignment);
+
+    this._setupButton(
+      "text-layout-reset-button",
+      this._resetTextLayout.bind(this)
+    );
   } else {
     this._setupSegmentedButton(
       "font-type-buttons",
@@ -381,16 +446,16 @@ export var AboutReader = function (
       fontType,
       this._setFontType.bind(this)
     );
+
+    this._setupContentWidthButtons();
+
+    this._setupLineHeightButtons();
+
+    this._setFontType(fontType);
   }
 
   this._setupFontSizeButtons();
 
-  this._setupContentWidthButtons();
-
-  this._setupLineHeightButtons();
-
-  this._setFontType(fontType);
-
   if (win.speechSynthesis && Services.prefs.getBoolPref("narrate.enabled")) {
     new lazy.NarrateControls(win, this._languagePromise);
   }
@@ -683,8 +748,15 @@ AboutReader.prototype = {
   },
 
   _setupFontSizeButtons() {
-    let plusButton = this._doc.querySelector(".plus-button");
-    let minusButton = this._doc.querySelector(".minus-button");
+    let plusButton, minusButton;
+
+    if (improvedTextMenuEnabled) {
+      plusButton = this._doc.querySelector(".text-size-plus-button");
+      minusButton = this._doc.querySelector(".text-size-minus-button");
+    } else {
+      plusButton = this._doc.querySelector(".plus-button");
+      minusButton = this._doc.querySelector(".minus-button");
+    }
 
     let currentSize = Services.prefs.getIntPref("reader.font_size");
     this._setFontSize(currentSize);
@@ -716,12 +788,18 @@ AboutReader.prototype = {
   },
 
   _updateFontSizeButtonControls() {
-    let plusButton = this._doc.querySelector(".plus-button");
-    let minusButton = this._doc.querySelector(".minus-button");
-
+    let plusButton, minusButton;
     let currentSize = this._fontSize;
-    let fontValue = this._doc.querySelector(".font-size-value");
-    fontValue.textContent = currentSize;
+
+    if (improvedTextMenuEnabled) {
+      plusButton = this._doc.querySelector(".text-size-plus-button");
+      minusButton = this._doc.querySelector(".text-size-minus-button");
+    } else {
+      plusButton = this._doc.querySelector(".plus-button");
+      minusButton = this._doc.querySelector(".minus-button");
+      let fontValue = this._doc.querySelector(".font-size-value");
+      fontValue.textContent = currentSize;
+    }
 
     if (currentSize === this.FONT_SIZE_MIN) {
       minusButton.setAttribute("disabled", true);
@@ -909,6 +987,68 @@ AboutReader.prototype = {
     );
   },
 
+  _setupSelector(id, options, initialValue, callback, l10nIds) {
+    let doc = this._doc;
+    let selector = doc.getElementById(`${id}-selector`);
+
+    options.forEach(option => {
+      let selectorOption = doc.createElement("option");
+      let presetl10nId = l10nIds[option];
+      if (presetl10nId) {
+        doc.l10n.setAttributes(selectorOption, presetl10nId);
+      } else {
+        selectorOption.text = option;
+      }
+      selectorOption.value = option;
+      selector.appendChild(selectorOption);
+      if (option == initialValue) {
+        selectorOption.setAttribute("selected", true);
+      }
+    });
+
+    selector.addEventListener("change", e => {
+      callback(e.target.value);
+    });
+  },
+
+  _setFontTypeSelector(newFontType) {
+    if (newFontType === "sans-serif") {
+      this._doc.documentElement.style.setProperty(
+        "--font-family",
+        "Helvetica, Arial, sans-serif"
+      );
+    } else if (newFontType === "serif") {
+      this._doc.documentElement.style.setProperty(
+        "--font-family",
+        'Georgia, "Times New Roman", serif'
+      );
+    } else if (newFontType === "monospace") {
+      this._doc.documentElement.style.setProperty(
+        "--font-family",
+        '"Courier New", Courier, monospace'
+      );
+    } else {
+      this._doc.documentElement.style.setProperty(
+        "--font-family",
+        `"${newFontType}"`
+      );
+    }
+
+    lazy.AsyncPrefs.set("reader.font_type", newFontType);
+  },
+
+  _setFontWeight(newFontWeight) {
+    if (newFontWeight === "light") {
+      this._doc.documentElement.style.setProperty("--font-weight", "lighter");
+    } else if (newFontWeight === "regular") {
+      this._doc.documentElement.style.setProperty("--font-weight", "normal");
+    } else if (newFontWeight === "bold") {
+      this._doc.documentElement.style.setProperty("--font-weight", "bolder");
+    }
+
+    lazy.AsyncPrefs.set("reader.font_weight", newFontWeight);
+  },
+
   _setupSlider(id, options, initialValue, callback) {
     let doc = this._doc;
     let slider = doc.createElement("moz-slider");
@@ -956,7 +1096,7 @@ AboutReader.prototype = {
       "--letter-spacing",
       `${parseFloat(spacing).toFixed(2)}em`
     );
-    lazy.AsyncPrefs.set("reader.character_spacing", newCharSpacing);
+    lazy.AsyncPrefs.set("reader.character_spacing", parseInt(newCharSpacing));
   },
 
   _setWordSpacing(newWordSpacing) {
@@ -966,7 +1106,7 @@ AboutReader.prototype = {
       "--word-spacing",
       `${parseFloat(spacing).toFixed(2)}em`
     );
-    lazy.AsyncPrefs.set("reader.word_spacing", newWordSpacing);
+    lazy.AsyncPrefs.set("reader.word_spacing", parseInt(newWordSpacing));
   },
 
   _setTextAlignment(newTextAlignment) {
@@ -974,6 +1114,16 @@ AboutReader.prototype = {
       return false;
     }
 
+    if (newTextAlignment === "start") {
+      let startAlignButton;
+      if (isAppLocaleRTL) {
+        startAlignButton = this._doc.querySelector(".right-align-button");
+      } else {
+        startAlignButton = this._doc.querySelector(".left-align-button");
+      }
+      startAlignButton.click();
+    }
+
     this._containerElement.style.setProperty(
       "--text-alignment",
       newTextAlignment
@@ -983,6 +1133,41 @@ AboutReader.prototype = {
     return true;
   },
 
+  async _resetTextLayout() {
+    let doc = this._doc;
+    const initial = DEFAULT_TEXT_LAYOUT;
+    const changeEvent = new Event("change", { bubbles: true });
+
+    this._resetFontSize();
+    let fontType = doc.getElementById("font-type-selector");
+    fontType.value = initial.fontType;
+    fontType.dispatchEvent(changeEvent);
+
+    let fontWeight = doc.getElementById("font-weight-selector");
+    fontWeight.value = initial.fontWeight;
+    fontWeight.dispatchEvent(changeEvent);
+
+    let contentWidth = doc.querySelector("#content-width-slider moz-slider");
+    contentWidth.setAttribute("value", initial.contentWidth);
+    this._setContentWidthSlider(initial.contentWidth);
+
+    let lineSpacing = doc.querySelector("#line-spacing-slider moz-slider");
+    lineSpacing.setAttribute("value", initial.lineSpacing);
+    this._setLineSpacing(initial.lineSpacing);
+
+    let characterSpacing = doc.querySelector(
+      "#character-spacing-slider moz-slider"
+    );
+    characterSpacing.setAttribute("value", initial.characterSpacing);
+    this._setCharacterSpacing(initial.characterSpacing);
+
+    let wordSpacing = doc.querySelector("#word-spacing-slider moz-slider");
+    wordSpacing.setAttribute("value", initial.wordSpacing);
+    this._setWordSpacing(initial.wordSpacing);
+
+    this._setTextAlignment(initial.textAlignment);
+  },
+
   _setColorScheme(newColorScheme) {
     // There's nothing to change if the new color scheme is the same as our current scheme.
     if (this._colorScheme === newColorScheme) {

toolkit/components/reader/content/aboutReader.html

@@ -73,6 +73,49 @@
               </button>
             </li>
             <li class="dropdown-popup" id="text-layout-controls">
+              <h2
+                data-l10n-id="about-reader-text-header"
+                id="about-reader-text-header"
+              ></h2>
+              <div id="text-size-controls">
+                <span
+                  data-l10n-id="about-reader-text-size-label"
+                  id="about-reader-text-size-label"
+                ></span>
+                <div class="text-size-buttons buttonrow">
+                  <button
+                    class="text-size-plus-button"
+                    data-l10n-id="about-reader-toolbar-plus"
+                  ></button>
+                  <button
+                    class="text-size-minus-button"
+                    data-l10n-id="about-reader-toolbar-minus"
+                  ></button>
+                </div>
+              </div>
+              <div id="font-controls">
+                <div id="font-type-dropdown" class="dropdown-selector">
+                  <label
+                    for="font-type-selector"
+                    data-l10n-id="about-reader-font-type-selector-label"
+                  ></label>
+                  <select
+                    name="font-type-selector"
+                    id="font-type-selector"
+                  ></select>
+                </div>
+                <div id="font-weight-dropdown" class="dropdown-selector">
+                  <label
+                    for="font-weight-selector"
+                    data-l10n-id="about-reader-font-weight-selector-label"
+                  ></label>
+                  <select
+                    name="font-weight-selector"
+                    id="font-weight-selector"
+                  ></select>
+                </div>
+              </div>
+              <hr />
               <h2
                 data-l10n-id="about-reader-layout-header"
                 id="about-reader-layout-header"
@@ -101,6 +144,10 @@
                   class="text-alignment-buttons radiorow"
                   id="text-alignment-buttons"
                 ></div>
+                <button
+                  class="text-layout-reset-button reset-button"
+                  data-l10n-id="about-reader-reset-button"
+                ></button>
               </details>
             </li>
           </ul>
@@ -205,8 +252,8 @@
                 <div name="customtheme">
                   <ul class="custom-colors-selection"></ul>
                   <button
-                    class="custom-colors-reset-button"
-                    data-l10n-id="about-reader-custom-colors-reset-button"
+                    class="custom-colors-reset-button reset-button"
+                    data-l10n-id="about-reader-reset-button"
                   ></button>
                 </div>
               </named-deck>

toolkit/components/reader/moz-slider.css

@@ -3,35 +3,36 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .container {
-  display: flex;
+  display: grid;
+  grid-template-areas: "title title title "
+                       ".     icon  slider";
+  grid-template-columns: 0 min-content 1fr;
   align-items: center;
   gap: var(--space-large);
-  margin-inline-start: var(--space-medium);
 }
 
 .slider-label {
-  display: inline-block;
-  margin-block-end: var(--space-medium);
-}
-
-.icon-container + .slider-container .slider-label {
-  margin-inline-start: calc(-2 * var(--space-xlarge));
+  grid-area: title;
 }
 
 .icon-container {
-  position: relative;
-  top: 6px;
+  grid-area: icon;
+  align-self: flex-start;
+
+  > .icon {
+    -moz-context-properties: fill;
+    fill: var(--popup-button-foreground);
+    height: 20px;
+    width: 20px;
+  }
 }
 
-.icon {
-  -moz-context-properties: fill;
-  fill: var(--popup-button-foreground);
-  height: 20px;
-  width: 20px;
+.slider-container {
+  grid-area: slider;
 }
 
-.slider-container,
 input {
+  margin: 0;
   width: 100%;
 }
 
@@ -40,4 +41,8 @@ datalist {
   justify-content: space-between;
   white-space: nowrap;
   font-size: var(--font-size-small);
+
+  &.no-tick-labels {
+    display: none;
+  }
 }

toolkit/components/reader/moz-slider.mjs

@@ -62,6 +62,7 @@ export default class MozSlider extends MozLitElement {
       let tickList = [];
       let value = this.min;
       let stepSize = this.getStepSize();
+      let className = "";
       for (let i = 0; i < this.ticks; i++) {
         let optionId = "";
         let label = "";
@@ -73,6 +74,8 @@ export default class MozSlider extends MozLitElement {
             optionId = "inline-end-label";
             label = this.tickLabels[1];
           }
+        } else {
+          className = "no-tick-labels";
         }
         tickList.push(
           html`<option
@@ -83,7 +86,9 @@ export default class MozSlider extends MozLitElement {
         );
         value += stepSize;
       }
-      return html` <datalist id="slider-ticks">${tickList}</datalist> `;
+      return html`
+        <datalist id="slider-ticks" class=${className}>${tickList}</datalist>
+      `;
     }
     return "";
   }
@@ -104,9 +109,9 @@ export default class MozSlider extends MozLitElement {
         href="chrome://global/content/reader/moz-slider.css"
       />
       <div class="container">
+        <label class="slider-label" for="inputSlider">${this.label}</label>
         ${this.setupIcon()}
         <div class="slider-container">
-          <label class="slider-label" for="inputSlider">${this.label}</label>
           <input
             id="inputSlider"
             max=${this.max}

toolkit/locales/en-US/toolkit/about/aboutReader.ftl

@@ -32,9 +32,9 @@ about-reader-estimated-read-time =
 ## These are used as tooltips in Type Control
 
 about-reader-toolbar-minus =
-    .title = Decrease Font Size
+    .title = Decrease font size
 about-reader-toolbar-plus =
-    .title = Increase Font Size
+    .title = Increase font size
 about-reader-toolbar-contentwidthminus =
     .title = Decrease Content Width
 about-reader-toolbar-contentwidthplus =
@@ -48,6 +48,7 @@ about-reader-toolbar-lineheightplus =
 
 about-reader-font-type-serif = Serif
 about-reader-font-type-sans-serif = Sans-serif
+about-reader-font-type-monospace = Monospace
 
 ## Reader View toolbar buttons
 
@@ -81,16 +82,22 @@ about-reader-custom-colors-visited-links = Visited links
 about-reader-custom-colors-selection-highlight = Highlighter for read aloud
     .title = Edit color
 
-about-reader-custom-colors-reset-button = Reset defaults
+about-reader-reset-button = Reset defaults
 
 ## Reader View improved text and layout menu
 
-about-reader-layout-header = Layout
-about-reader-advanced-layout-header = Advanced
+about-reader-text-header = Text
+
+about-reader-text-size-label = Text size
+about-reader-font-type-selector-label = Font
+about-reader-font-weight-selector-label = Font weight
+
+about-reader-font-weight-light = Light
+about-reader-font-weight-regular = Regular
+about-reader-font-weight-bold = Bold
+
+about-reader-layout-header = Layout
 
-about-reader-slider-label-width-narrow = Narrow
-about-reader-slider-label-width-wide = Wide
-about-reader-slider-label-spacing-narrow = Narrow
 about-reader-slider-label-spacing-standard = Standard
 about-reader-slider-label-spacing-wide = Wide
 
@@ -98,6 +105,9 @@ about-reader-content-width-label =
   .label = Content width
 about-reader-line-spacing-label =
   .label = Line spacing
+
+about-reader-advanced-layout-header = Advanced
+
 about-reader-character-spacing-label =
   .label = Character spacing
 about-reader-word-spacing-label =

toolkit/modules/AsyncPrefs.sys.mjs

@@ -28,6 +28,7 @@ const kAllowedPrefs = new Set([
 
   "reader.font_size",
   "reader.font_type",
+  "reader.font_weight",
   "reader.color_scheme",
   "reader.content_width",
   "reader.line_height",

toolkit/themes/shared/aboutReader.css

@@ -20,6 +20,8 @@
   --text-alignment: start;
   --word-spacing: 0;
   --letter-spacing: 0;
+  --font-weight: normal;
+  --font-family: Helvetica, Arial, sans-serif;
 }
 
 body {
@@ -217,6 +219,10 @@ a:focus-visible {
   outline-offset: 1px;
 }
 
+body {
+  font-family: var(--font-family);
+}
+
 body.sans-serif {
   font-family: Helvetica, Arial, sans-serif;
 }
@@ -696,8 +702,92 @@ body.hcm .color-scheme-buttons {
   display: flex;
   flex-direction: column;
   width: 340px;
-  padding: var(--space-large);
+  padding: 0 var(--space-large);
+  max-height: calc(100vh - 7em);
+  overflow-y: auto;
   font-size: 15px;
+  color: var(--popup-button-foreground);
+}
+
+#text-size-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block-end: var(--space-large);
+}
+
+.text-size-buttons {
+  gap: var(--space-medium);
+}
+
+.text-size-buttons > button {
+  height: var(--size-item-large);
+  width: var(--size-item-large);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-small);
+  background-color: var(--popup-button-background);
+
+  &.text-size-minus-button {
+    background-image: url("chrome://browser/skin/zoom-out.svg");
+  }
+
+  &.text-size-plus-button {
+    background-image: url("chrome://global/skin/icons/plus.svg");
+  }
+
+  body.hcm & {
+    border-color: var(--popup-button-border);
+  }
+}
+
+#font-controls {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-medium);
+  padding-block-end: var(--space-large);
+}
+
+.dropdown-selector {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--space-xsmall);
+
+  > select {
+    appearance: none;
+    min-height: var(--button-min-height);
+    border: 1px solid transparent;
+    border-radius: var(--border-radius-small);
+    background-color: var(--popup-button-background);
+    color: var(--popup-button-foreground);
+    font-size: inherit;
+    font-weight: var(--font-weight-bold);
+    padding-inline: var(--space-large) var(--space-xxlarge);
+    text-overflow: ellipsis;
+    background-image: url("chrome://global/skin/icons/arrow-down.svg");
+    background-position: right var(--space-medium) center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
+    fill: currentColor;
+
+    &:hover {
+      background-color: var(--popup-button-background-hover);
+      color: var(--popup-button-foreground-hover);
+
+      &:active {
+        background-color: var(--popup-button-background-active);
+      }
+    }
+
+    body.hcm & {
+      border-color: var(--popup-button-border);
+    }
+
+    /* Selector chevron should appear on the left for RTL. */
+    &:dir(rtl) {
+      background-position-x: left var(--space-medium);
+    }
+  }
 }
 
 .accordion-header {
@@ -723,13 +813,13 @@ body.hcm .color-scheme-buttons {
 }
 
 .slider-container {
-  width: calc(100% - var(--space-xsmall));
-  padding-bottom: var(--space-large);
+  padding-block-end: var(--space-large);
 }
 
 .text-alignment-buttons {
-  margin-top: var(--space-small);
   gap: var(--space-xxsmall);
+  padding-block-end: var(--space-large);
+  margin-block-start: var(--space-small);
 
   > label {
     display: flex;
@@ -738,7 +828,6 @@ body.hcm .color-scheme-buttons {
     background-repeat: no-repeat;
     background-position: center;
     background-color: var(--popup-button-background);
-    color: var(--popup-button-foreground);
     -moz-context-properties: fill;
     fill: currentColor;
     border: none;
@@ -815,7 +904,7 @@ button[is="named-deck-button"] {
   gap: var(--space-small);
   padding: var(--space-large);
   list-style-type: none;
-  font-size: var(--font-size-root);
+  font-size: 15px;
   color: var(--popup-button-foreground);
 }
 
@@ -827,7 +916,7 @@ button[is="named-deck-button"] {
 .colors-menu-color-scheme-buttons > label {
   height: 48px;
   width: calc(50% - 21px);
-  font-size: var(--font-size-root);
+  font-size: 15px;
   color: var(--popup-button-foreground);
   border: 1px solid var(--popup-button-border);
   border-radius: var(--border-radius-small);
@@ -845,7 +934,7 @@ button[is="named-deck-button"] {
   height: 24px;
   border-radius: var(--border-radius-circle);
   outline: 1px solid var(--popup-button-border);
-  margin: 0 10px 0 12px;
+  margin-inline: var(--space-medium);
 }
 
 .colors-menu-color-scheme-buttons {
@@ -874,15 +963,24 @@ button[is="named-deck-button"] {
   }
 }
 
-.custom-colors-reset-button {
+.reset-button {
   display: block;
   background: none;
   border: none;
-  padding: 0 var(--space-large);
   color: var(--primary-color);
   text-decoration: underline;
-  font-size: var(--font-size-root);
+  font-size: 15px;
   cursor: pointer;
+
+  &.text-layout-reset-button {
+    float: inline-end;
+    padding: 0;
+    padding-block-end: var(--space-large);
+  }
+
+  &.custom-colors-reset-button {
+    padding: 0 var(--space-large);
+  }
 }
 
 /* Toolbar icons */
@@ -959,6 +1057,7 @@ button[is="named-deck-button"] {
   text-align: var(--text-alignment);
   word-spacing: var(--word-spacing);
   letter-spacing: var(--letter-spacing);
+  font-weight: var(--font-weight);
 
   .header {
     text-align: var(--text-alignment);