1 files changed, 56 insertions, 2 deletions
diff --git a/toolkit/components/reader/content/aboutReader.html b/toolkit/components/reader/content/aboutReader.html
index d1c9164d42..452d4590b8 100644
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -25,6 +25,10 @@
     <link rel="localization" href="toolkit/branding/brandings.ftl" />
     <script
       type="module"
+      src="chrome://global/content/reader/moz-slider.mjs"
+    ></script>
+    <script
+      type="module"
       src="chrome://global/content/reader/color-input.mjs"
     ></script>
     <script
@@ -50,7 +54,57 @@
               data-l10n-id="about-reader-toolbar-close"
             ></span>
           </button>
-          <ul class="dropdown style-dropdown">
+          <ul
+            class="dropdown improved-style-dropdown"
+            id="improved-text-menu"
+            hidden="true"
+          >
+            <li>
+              <button
+                class="dropdown-toggle toolbar-button improved-style-button"
+                aria-labelledby="toolbar-text-layout-controls"
+                data-telemetry-id="reader-text-layout-controls"
+              >
+                <span
+                  class="hover-label"
+                  id="toolbar-text-layout-controls"
+                  data-l10n-id="about-reader-toolbar-text-layout-controls"
+                ></span>
+              </button>
+            </li>
+            <li class="dropdown-popup" id="text-layout-controls">
+              <h2
+                data-l10n-id="about-reader-layout-header"
+                id="about-reader-layout-header"
+              ></h2>
+              <div id="content-width-slider" class="slider-container"></div>
+              <div id="line-spacing-slider" class="slider-container"></div>
+              <hr />
+              <details id="about-reader-advanced-layout">
+                <summary class="accordion-header">
+                  <h2
+                    data-l10n-id="about-reader-advanced-layout-header"
+                    id="about-reader-advanced-layout-header"
+                  ></h2>
+                  <span class="chevron-icon"></span>
+                </summary>
+                <div
+                  id="character-spacing-slider"
+                  class="slider-container"
+                ></div>
+                <div id="word-spacing-slider" class="slider-container"></div>
+                <label
+                  for="text-alignment-buttons"
+                  data-l10n-id="about-reader-text-alignment-label"
+                ></label>
+                <div
+                  class="text-alignment-buttons radiorow"
+                  id="text-alignment-buttons"
+                ></div>
+              </details>
+            </li>
+          </ul>
+          <ul class="dropdown style-dropdown" id="regular-text-menu">
             <li>
               <button
                 class="dropdown-toggle toolbar-button style-button"
@@ -120,7 +174,7 @@
                 <span
                   class="hover-label"
                   id="toolbar-color-controls"
-                  data-l10n-id="about-reader-toolbar-color-controls"
+                  data-l10n-id="about-reader-toolbar-theme-controls"
                 ></span>
               </button>
             </li>