Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

25 files changed, 260 insertions, 55 deletions

diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css
index 764dd39702..eeeddbb21a 100644
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -17,6 +17,9 @@
   --font-size: 12;
   --content-width: 22em;
   --line-height: 1.6em;
+  --text-alignment: start;
+  --word-spacing: 0;
+  --letter-spacing: 0;
 }
 
 body {
@@ -43,6 +46,7 @@ body {
   --popup-shadow: rgba(49, 49, 49, 0.3);
   --popup-button-background: rgba(207, 207, 216, 0.33);
   --popup-button-foreground: var(--main-foreground);
+  --popup-button-selected-foreground: var(--color-gray-05);
   --popup-button-background-hover: var(--toolbar-button-background-hover);
   --popup-button-foreground-hover: var(--main-foreground);
   --popup-button-background-active: var(--toolbar-button-background-active);
@@ -60,7 +64,7 @@ body {
   --link-selected-foreground: #333;
   --visited-link-foreground: #b5007f;
   --custom-theme-background: var(--color-white);
-  --custom-theme-foreground: #14151A;
+  --custom-theme-foreground: var(--color-gray-100);
   --custom-theme-unvisited-links: var(--color-blue-50);
   --custom-theme-visited-links: #321C64;
   --custom-theme-selection-highlight: #FFFFCC;
@@ -88,7 +92,7 @@ body.contrast {
   --toolbar-button-background-hover: rgb(82, 82, 94);
   --toolbar-button-background-active: rgb(91, 91, 102);
   --popup-background: rgb(66, 65, 77);
-  --popup-button-border: rgba(255, 255, 255, 0.12);
+  --popup-button-border: rgba(255, 255, 255, 0.2);
   --popup-line: rgba(249, 249, 250, 0.1);
   --popup-button-background: rgb(43, 42, 51);
   --font-value-background: rgba(249, 249, 250, 0.15);
@@ -97,6 +101,7 @@ body.contrast {
   --link-selected-foreground: #fff;
   --visited-link-foreground: #e675fd;
   --selected-background: rgba(0, 221, 255, 0.3);
+  --popup-button-selected-foreground: var(--color-gray-100);
   /* dark colours */
 
   .moz-reader-block-img {
@@ -170,6 +175,7 @@ body.hcm {
   --icon-disabled-fill: GrayText;
   --text-selected-background: SelectedItem;
   --text-selected-foreground: SelectedItemText;
+  --popup-button-selected-foreground: SelectedItemText;
   --link-foreground: LinkText;
   --link-selected-background: SelectedItem;
   --link-selected-foreground: SelectedItemText;
@@ -501,14 +507,20 @@ button:disabled {
   border: 1px solid var(--popup-border);
   box-shadow: 0 0 10px 0 var(--popup-shadow);
   top: var(--space-xsmall);
-}
 
-.dropdown-popup h2 {
-  font-size: var(--font-size-root);
-  font-weight: var(--font-weight-bold);
-  color: var(--popup-button-foreground);
-  margin-block: var(--space-large);
-  margin-inline: var(--space-large) 0;
+  h2 {
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-bold);
+    color: var(--popup-button-foreground);
+    margin-block: var(--space-large);
+  }
+
+  hr {
+    width: 100%;
+    margin: 0;
+    border: none;
+    border-top: 1px solid var(--popup-line);
+  }
 }
 
 .open > .dropdown-popup {
@@ -583,7 +595,6 @@ button:disabled {
 .radiorow > label {
   position: relative;
   box-sizing: border-box;
-  border-radius: 2px;
   border: 2px solid var(--popup-button-border);
 }
 
@@ -592,12 +603,14 @@ button:disabled {
 }
 
 .radiorow > label:hover {
-  background-color: var(--toolbar-button-background-hover);
+  background-color: var(--popup-button-background-hover);
+  color: var(--popup-button-foreground-hover);
 }
 
 .radiorow > input[type=radio]:focus-visible + label {
   outline: 2px solid var(--primary-color);
   outline-offset: var(--focus-outline-offset);
+  z-index: 1;
 }
 
 .font-type-buttons > label {
@@ -618,6 +631,7 @@ button:disabled {
    * baselines between serif and sans-serif, this isn't always enough. */
   line-height: 1;
   padding-top: 2px;
+  border-radius: 2px;
 }
 
 .font-type-buttons {
@@ -664,6 +678,7 @@ body.hcm .color-scheme-buttons {
   justify-content: center;
   /* We want 10px between items, but there's no margin collapsing in flexbox. */
   margin: 10px 5px;
+  border-radius: 2px;
   border-color: var(--popup-border);
 }
 
@@ -675,6 +690,95 @@ body.hcm .color-scheme-buttons {
   margin-inline-end: 10px;
 }
 
+/* Improved text and layout menu popup */
+
+#text-layout-controls {
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  padding: var(--space-large);
+  font-size: 15px;
+}
+
+.accordion-header {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  .chevron-icon {
+    background-image: url("chrome://global/skin/icons/arrow-down.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
+    fill: currentColor;
+    height: var(--size-item-large);
+    width: var(--size-item-large);
+
+    #about-reader-advanced-layout[open] & {
+      background-image: url("chrome://global/skin/icons/arrow-up.svg");
+    }
+  }
+}
+
+.slider-container {
+  width: calc(100% - var(--space-xsmall));
+  padding-bottom: var(--space-large);
+}
+
+.text-alignment-buttons {
+  margin-top: var(--space-small);
+  gap: var(--space-xxsmall);
+
+  > label {
+    display: flex;
+    flex: 1;
+    min-height: var(--button-min-height);
+    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;
+
+    /* border radius does not target class because button order
+     * can be opposite in RTL */
+    &:first-of-type {
+      border-start-start-radius: var(--border-radius-small);
+      border-end-start-radius: var(--border-radius-small);
+    }
+
+    &:last-of-type {
+      border-start-end-radius: var(--border-radius-small);
+      border-end-end-radius: var(--border-radius-small);
+    }
+
+    &.left-align-button {
+      background-image: url("chrome://global/skin/reader/align-left-20.svg");
+    }
+
+    &.center-align-button {
+      background-image: url("chrome://global/skin/reader/align-center-20.svg");
+    }
+
+    &.right-align-button {
+      background-image: url("chrome://global/skin/reader/align-right-20.svg");
+    }
+
+    &[checked] {
+      background-color: var(--primary-color);
+      border: none;
+      color: var(--popup-button-selected-foreground);
+    }
+
+    body.hcm & {
+      border: 1px solid var(--popup-button-border);
+    }
+  }
+}
+
 /* Separate colors menu popup */
 
 #color-controls {
@@ -682,6 +786,10 @@ body.hcm .color-scheme-buttons {
   width: 400px;
 }
 
+#about-reader-colors-menu-header {
+  margin-inline: var(--space-large) 0;
+}
+
 button-group {
   display: flex;
   font-size: var(--font-size-small);
@@ -787,6 +895,10 @@ button[is="named-deck-button"] {
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 }
 
+.improved-style-button {
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
+}
+
 .colors-button {
   background-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
 }
@@ -844,6 +956,13 @@ button[is="named-deck-button"] {
   font-size: var(--font-size);
   max-width: var(--content-width);
   line-height: var(--line-height);
+  text-align: var(--text-alignment);
+  word-spacing: var(--word-spacing);
+  letter-spacing: var(--letter-spacing);
+
+  .header {
+    text-align: var(--text-alignment);
+  }
 }
 
 pre {
diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json
index c807335942..bdccc1feb9 100644
--- a/toolkit/themes/shared/design-system/design-tokens.json
+++ b/toolkit/themes/shared/design-system/design-tokens.json
@@ -681,7 +681,10 @@
         "value": "{focus.outline.width} solid {focus.outline.color}"
       },
       "color": {
-        "value": "{color.accent.primary.@base}"
+        "value": {
+          "default": "{color.accent.primary.@base}",
+          "forcedColors": "{text.color.@base}"
+        }
       },
       "inset": {
         "value": "calc(-1 * {focus.outline.width})"
diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css
index 42b33f5e0d..c10c1c5295 100644
--- a/toolkit/themes/shared/design-system/tokens-shared.css
+++ b/toolkit/themes/shared/design-system/tokens-shared.css
@@ -279,6 +279,9 @@
       --color-accent-primary: ButtonText;
       --color-accent-primary-hover: SelectedItem;
       --color-accent-primary-active: var(--color-accent-primary-hover);
+
+      /** Focus Outline **/
+      --focus-outline-color: var(--text-color);
     }
   }
 }
diff --git a/toolkit/themes/shared/design-system/tokens-storybook.mjs b/toolkit/themes/shared/design-system/tokens-storybook.mjs
index fd2ea174c6..483a090ef9 100644
--- a/toolkit/themes/shared/design-system/tokens-storybook.mjs
+++ b/toolkit/themes/shared/design-system/tokens-storybook.mjs
@@ -605,7 +605,13 @@ export const storybookTables = {
       value: "var(--focus-outline-width) solid var(--focus-outline-color)",
       name: "--focus-outline",
     },
-    { value: "var(--color-accent-primary)", name: "--focus-outline-color" },
+    {
+      value: {
+        default: "var(--color-accent-primary)",
+        forcedColors: "var(--text-color)",
+      },
+      name: "--focus-outline-color",
+    },
     {
       value: "calc(-1 * var(--focus-outline-width))",
       name: "--focus-outline-inset",
@@ -1055,7 +1061,10 @@ export const variableLookupTable = {
   },
   "focus-outline":
     "var(--focus-outline-width) solid var(--focus-outline-color)",
-  "focus-outline-color": "var(--color-accent-primary)",
+  "focus-outline-color": {
+    default: "var(--color-accent-primary)",
+    forcedColors: "var(--text-color)",
+  },
   "focus-outline-inset": "calc(-1 * var(--focus-outline-width))",
   "focus-outline-offset": "2px",
   "focus-outline-width": "2px",
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
index 226faf26ff..5907a9773f 100644
--- a/toolkit/themes/shared/desktop-jar.inc.mn
+++ b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -46,7 +46,7 @@
   skin/classic/global/popupnotification.css                (../../shared/popupnotification.css)
   skin/classic/global/splitter.css                         (../../shared/splitter.css)
   skin/classic/global/toolbarbutton.css                    (../../shared/toolbarbutton.css)
-  skin/classic/global/tree.css                             (../../shared/tree.css)
+  skin/classic/global/tree/tree.css                        (../../shared/tree/tree.css)
   skin/classic/global/dirListing/dirListing.css            (../../shared/dirListing/dirListing.css)
 #ifdef XP_MACOSX
   skin/classic/global/dirListing/folder.png                (../../shared/dirListing/folder-osx.png)
@@ -74,6 +74,7 @@
   skin/classic/global/icons/close-12.svg                   (../../shared/icons/close-12.svg)
   skin/classic/global/icons/close-fill.svg                 (../../shared/icons/close-fill.svg)
   skin/classic/global/icons/columnpicker.svg               (../../shared/icons/columnpicker.svg)
+  skin/classic/global/icons/content-analysis.svg           (../../shared/icons/content-analysis.svg)
   skin/classic/global/icons/defaultFavicon.svg             (../../shared/icons/defaultFavicon.svg)
   skin/classic/global/icons/delete.svg                     (../../shared/icons/delete.svg)
   skin/classic/global/icons/developer.svg                  (../../shared/icons/developer.svg)
@@ -152,3 +153,12 @@
   skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg           (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
   skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg            (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
   skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg             (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
+  skin/classic/global/reader/align-left-20.svg             (../../shared/reader/align-left-20.svg)
+  skin/classic/global/reader/align-center-20.svg           (../../shared/reader/align-center-20.svg)
+  skin/classic/global/reader/align-right-20.svg            (../../shared/reader/align-right-20.svg)
+  skin/classic/global/reader/word-spacing-20.svg           (../../shared/reader/word-spacing-20.svg)
+  skin/classic/global/reader/character-spacing-20.svg      (../../shared/reader/character-spacing-20.svg)
+  skin/classic/global/reader/line-spacing-20.svg           (../../shared/reader/line-spacing-20.svg)
+  skin/classic/global/reader/content-width-20.svg          (../../shared/reader/content-width-20.svg)
+  skin/classic/global/tree/sort-asc.svg                    (../../shared/tree/sort-asc.svg)
+  skin/classic/global/tree/sort-dsc.svg                    (../../shared/tree/sort-dsc.svg)
diff --git a/toolkit/themes/shared/desktop-non-mac.jar.inc.mn b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn
index c976798df5..afa8123140 100644
--- a/toolkit/themes/shared/desktop-non-mac.jar.inc.mn
+++ b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn
@@ -20,7 +20,4 @@
   skin/classic/mozapps/downloads/unknownContentType.css    (../../windows/mozapps/downloads/unknownContentType.css)
   skin/classic/mozapps/handling/handling.css               (../../windows/mozapps/handling/handling.css)
 
-  skin/classic/global/tree/sort-asc.svg                    (../../windows/global/tree/sort-asc.svg)
-  skin/classic/global/tree/sort-dsc.svg                    (../../windows/global/tree/sort-dsc.svg)
-
 % override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png       chrome://mozapps/skin/extensions/extensionGeneric.svg
diff --git a/toolkit/themes/shared/icons/blocked.svg b/toolkit/themes/shared/icons/blocked.svg
index ccd1308e18..d32de9ac93 100644
--- a/toolkit/themes/shared/icons/blocked.svg
+++ b/toolkit/themes/shared/icons/blocked.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity">
   <path d="M8.6 1.1c-4.1 0-7.5 3.4-7.5 7.5s3.4 7.5 7.5 7.5 7.5-3.4 7.5-7.5-3.3-7.5-7.5-7.5zM12 8c.3 0 .6.3.6.6s-.3.6-.6.6l-6.8 0c-.3 0-.6-.3-.6-.6s.3-.6.6-.6L12 8z"/>
 </svg>
diff --git a/toolkit/themes/shared/icons/content-analysis.svg b/toolkit/themes/shared/icons/content-analysis.svg
new file mode 100644
index 0000000000..1ff3ead797
--- /dev/null
+++ b/toolkit/themes/shared/icons/content-analysis.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="13" viewBox="0 0 19 13" fill="context-fill" fill-opacity="context-fill-opacity">
+   <!--stroke="#5B5B66" -->
+  <rect x="0.5" y="0.5" width="18" height="12" rx="1.5" fill-opacity="0" stroke="context-stroke" stroke-opacity="context-stroke-opacity"/>
+  <path d="M2.46875 3.86328H4.64062C6.33203 3.86328 7.32812 4.87109 7.32812 6.66016C7.32812 8.44922 6.33203 9.5 4.64062 9.5H2.46875V3.86328ZM3.64844 4.83594V8.52344H4.5C5.55469 8.52344 6.125 7.88281 6.125 6.66406C6.125 5.48438 5.53906 4.83594 4.5 4.83594H3.64844ZM11.7305 8.52344V9.5H8.08594V3.86328H9.26562V8.52344H11.7305ZM12.4297 3.86328H14.7812C15.9375 3.86328 16.7344 4.63281 16.7344 5.79297C16.7344 6.94922 15.9102 7.72266 14.7227 7.72266H13.6094V9.5H12.4297V3.86328ZM13.6094 4.79688V6.80078H14.4648C15.1406 6.80078 15.5352 6.44141 15.5352 5.79688C15.5352 5.15625 15.1445 4.79688 14.4688 4.79688H13.6094Z" />
+</svg>
diff --git a/toolkit/themes/shared/icons/developer.svg b/toolkit/themes/shared/icons/developer.svg
index d02257d4d1..fe6d3ac98e 100644
--- a/toolkit/themes/shared/icons/developer.svg
+++ b/toolkit/themes/shared/icons/developer.svg
@@ -2,5 +2,5 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.555 3.2l-2.434 2.436a1.243 1.243 0 1 1-1.757-1.757L12.8 1.445A3.956 3.956 0 0 0 11 1a3.976 3.976 0 0 0-3.434 6.02l-6.273 6.273a1 1 0 1 0 1.414 1.414L8.98 8.434A3.96 3.96 0 0 0 11 9a4 4 0 0 0 4-4 3.956 3.956 0 0 0-.445-1.8z"/>
+  <path fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" d="M14.555 3.2l-2.434 2.436a1.243 1.243 0 1 1-1.757-1.757L12.8 1.445A3.956 3.956 0 0 0 11 1a3.976 3.976 0 0 0-3.434 6.02l-6.273 6.273a1 1 0 1 0 1.414 1.414L8.98 8.434A3.96 3.96 0 0 0 11 9a4 4 0 0 0 4-4 3.956 3.956 0 0 0-.445-1.8z"/>
 </svg>
diff --git a/toolkit/themes/shared/icons/info-filled.svg b/toolkit/themes/shared/icons/info-filled.svg
index 62ed3def93..86c6ba50d0 100644
--- a/toolkit/themes/shared/icons/info-filled.svg
+++ b/toolkit/themes/shared/icons/info-filled.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity">
   <path d="M7.625.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm.625 10.875a.625.625 0 0 1-1.25 0l0-4.437a.625.625 0 0 1 1.25 0l0 4.437zM8.25 5 8 5.25l-.75 0L7 5l0-.75.25-.25L8 4l.25.25 0 .75z"/>
 </svg>
diff --git a/toolkit/themes/shared/icons/info.svg b/toolkit/themes/shared/icons/info.svg
index f85c206417..4d9174d88c 100644
--- a/toolkit/themes/shared/icons/info.svg
+++ b/toolkit/themes/shared/icons/info.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity">
   <path d="M8.25 6.938a.625.625 0 0 0-1.25 0l0 4.438a.625.625 0 0 0 1.25-.001l0-4.437z"/>
   <path d="m8 4-.75 0-.25.25L7 5l.25.25.75 0L8.25 5l0-.75z"/>
   <path d="M7.625 1.75c3.446 0 6.25 2.804 6.25 6.25s-2.804 6.25-6.25 6.25-6.25-2.804-6.25-6.25 2.804-6.25 6.25-6.25m0-1.25a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15z"/>
diff --git a/toolkit/themes/shared/icons/performance.svg b/toolkit/themes/shared/icons/performance.svg
index 00e4cb1d17..b6e9cc4f25 100644
--- a/toolkit/themes/shared/icons/performance.svg
+++ b/toolkit/themes/shared/icons/performance.svg
@@ -2,6 +2,6 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M8 1a8 8 0 0 0-8 8 7.89 7.89 0 0 0 .78 3.43 1 1 0 0 0 .9.57.94.94 0 0 0 .43-.1 1 1 0 0 0 .47-1.33A6.07 6.07 0 0 1 2 9a6 6 0 0 1 12 0 5.93 5.93 0 0 1-.59 2.57 1 1 0 0 0 1.81.86A7.89 7.89 0 0 0 16 9a8 8 0 0 0-8-8z"/>
-  <path fill="context-fill" d="M11.77 7.08a.5.5 0 0 0-.69.15L8.62 11.1A2.12 2.12 0 0 0 8 11a2 2 0 0 0 0 4 2.05 2.05 0 0 0 1.12-.34 2.31 2.31 0 0 0 .54-.54 2 2 0 0 0 0-2.24 2.31 2.31 0 0 0-.2-.24l2.46-3.87a.5.5 0 0 0-.15-.69z"/>
+  <path fill="context-fill light-dark(black, white)" d="M8 1a8 8 0 0 0-8 8 7.89 7.89 0 0 0 .78 3.43 1 1 0 0 0 .9.57.94.94 0 0 0 .43-.1 1 1 0 0 0 .47-1.33A6.07 6.07 0 0 1 2 9a6 6 0 0 1 12 0 5.93 5.93 0 0 1-.59 2.57 1 1 0 0 0 1.81.86A7.89 7.89 0 0 0 16 9a8 8 0 0 0-8-8z"/>
+  <path fill="context-fill light-dark(black, white)" d="M11.77 7.08a.5.5 0 0 0-.69.15L8.62 11.1A2.12 2.12 0 0 0 8 11a2 2 0 0 0 0 4 2.05 2.05 0 0 0 1.12-.34 2.31 2.31 0 0 0 .54-.54 2 2 0 0 0 0-2.24 2.31 2.31 0 0 0-.2-.24l2.46-3.87a.5.5 0 0 0-.15-.69z"/>
 </svg>
diff --git a/toolkit/themes/shared/icons/settings.svg b/toolkit/themes/shared/icons/settings.svg
index 8d8f791abe..fd0ad4df14 100644
--- a/toolkit/themes/shared/icons/settings.svg
+++ b/toolkit/themes/shared/icons/settings.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity">
   <path d="m8.628 16-1.25 0a1.632 1.632 0 0 1-1.562-1.177l-.406-1.414a5.939 5.939 0 0 1-.78-.466l-1.448.36a1.632 1.632 0 0 1-1.799-.765l-.625-1.082a1.633 1.633 0 0 1 .229-1.931l1.045-1.101A3.279 3.279 0 0 1 2 8c0-.153.014-.302.032-.45L.999 6.479a1.63 1.63 0 0 1-.238-1.94l.625-1.083a1.636 1.636 0 0 1 1.787-.768l1.477.355c.258-.179.51-.329.761-.452l.406-1.414A1.63 1.63 0 0 1 7.378 0l1.25 0c.714 0 1.354.478 1.559 1.163l.425 1.436c.242.121.484.266.739.444l1.478-.355a1.635 1.635 0 0 1 1.786.768l.625 1.083c.36.625.263 1.422-.237 1.941l-1.035 1.07c.018.148.032.297.032.45 0 .145-.014.285-.031.424l1.045 1.101c.492.519.586 1.312.229 1.931l-.625 1.083a1.63 1.63 0 0 1-1.8.764l-1.447-.36c-.259.182-.51.333-.759.458l-.425 1.437A1.638 1.638 0 0 1 8.628 16zm-4.016-4.341.528.109a4.72 4.72 0 0 0 1.032.615l.359.404.485 1.691c.046.16.194.271.36.271l1.25 0a.37.37 0 0 0 .359-.269l.506-1.707.355-.398c.324-.137.645-.33 1.01-.608l.529-.109 1.731.431a.378.378 0 0 0 .416-.176l.625-1.083a.378.378 0 0 0-.053-.446l-1.25-1.317-.167-.505.022-.174c.021-.127.041-.255.041-.388 0-.149-.021-.293-.042-.437l-.021-.15.171-.513 1.244-1.289a.378.378 0 0 0 .055-.448l-.625-1.082a.38.38 0 0 0-.412-.177l-1.758.422-.521-.108a4.7 4.7 0 0 0-.991-.594l-.356-.398-.506-1.707a.373.373 0 0 0-.36-.269l-1.25 0a.377.377 0 0 0-.36.271l-.486 1.691-.36.405a4.71 4.71 0 0 0-1.013.6l-.521.109-1.757-.422a.383.383 0 0 0-.413.177l-.625 1.083a.375.375 0 0 0 .055.447L3.142 6.9l.171.514-.021.15A2.981 2.981 0 0 0 3.25 8c0 .133.02.261.037.389l.022.174-.167.505-1.25 1.317a.38.38 0 0 0-.053.446l.625 1.083a.38.38 0 0 0 .415.176l1.733-.431z"/>
   <path d="M8 6.25c.965 0 1.75.785 1.75 1.75S8.965 9.75 8 9.75 6.25 8.965 6.25 8 7.035 6.25 8 6.25M8 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
 </svg>
diff --git a/toolkit/themes/shared/icons/warning.svg b/toolkit/themes/shared/icons/warning.svg
index 8ffcbb20fe..09fd17107b 100644
--- a/toolkit/themes/shared/icons/warning.svg
+++ b/toolkit/themes/shared/icons/warning.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity">
   <path d="m14.875 12.037-5.497-10C8.997 1.346 8.311 1 7.625 1s-1.372.346-1.752 1.037l-5.497 10C-.358 13.37.607 15 2.128 15l10.995 0c1.52 0 2.485-1.63 1.752-2.963zM8.25 11.75 8 12l-.75 0-.25-.25L7 11l.25-.25.75 0 .25.25 0 .75zm0-2.688a.625.625 0 0 1-1.25 0l0-3.437a.625.625 0 0 1 1.25 0l0 3.437z"/>
 </svg>
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index 86c6d36210..542e38159d 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -77,23 +77,15 @@
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
-  --green-50: #30e60b;
   --green-60: #12bc00;
   --green-70: #058b00;
-  --green-80: #006504;
-  --green-90: #003706;
   --orange-50: #ff9400;
   --red-40: #ff4f5e;
   --red-50: #ff0039;
   --red-60: #d70022;
-  --red-70: #a4000f;
-  --red-80: #5a0002;
-  --red-90: #3e0200;
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
   --yellow-60-a30: rgba(215, 182, 0, 0.3);
-  --yellow-70: #a47f00;
-  --yellow-80: #715100;
   --yellow-90: #3e2800;
 
   --shadow-10: 0 1px 4px var(--grey-90-a10);
diff --git a/toolkit/themes/shared/reader/align-center-20.svg b/toolkit/themes/shared/reader/align-center-20.svg
new file mode 100644
index 0000000000..85d00e63d3
--- /dev/null
+++ b/toolkit/themes/shared/reader/align-center-20.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path d="M18 3.125H2v1.75h16v-1.75zM18 11.125H2v1.75h16v-1.75zM6 7.125h8v1.75H6v-1.75zM14 15.125H6v1.75h8v-1.75z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/align-left-20.svg b/toolkit/themes/shared/reader/align-left-20.svg
new file mode 100644
index 0000000000..d6a5f523ee
--- /dev/null
+++ b/toolkit/themes/shared/reader/align-left-20.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path d="M18 3.125H1v1.75h17v-1.75zM15 11.125H1v1.75h14v-1.75zM1 7.125h10v1.75H1v-1.75zM11 15.125H1v1.75h10v-1.75z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/align-right-20.svg b/toolkit/themes/shared/reader/align-right-20.svg
new file mode 100644
index 0000000000..fe60df4830
--- /dev/null
+++ b/toolkit/themes/shared/reader/align-right-20.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path d="M2 3.125h17v1.75H2v-1.75zM5 11.125h14v1.75H5v-1.75zM19 7.125H9v1.75h10v-1.75zM9 15.125h10v1.75H9v-1.75z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/character-spacing-20.svg b/toolkit/themes/shared/reader/character-spacing-20.svg
new file mode 100644
index 0000000000..ecda7fe739
--- /dev/null
+++ b/toolkit/themes/shared/reader/character-spacing-20.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path d="M1.75 19V1H0v18h1.75zM20 1v18h-1.75V1H20z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 15.707 7.342 12.5h5.317L14 15.707h1.897l-4.516-10.8a1 1 0 0 0-.923-.614h-.915c-.403 0-.767.242-.923.614l-4.517 10.8H6zm4-9.564 1.927 4.607H8.074L10 6.143z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/content-width-20.svg b/toolkit/themes/shared/reader/content-width-20.svg
new file mode 100644
index 0000000000..a3c2c52e92
--- /dev/null
+++ b/toolkit/themes/shared/reader/content-width-20.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path d="M1.75 2v16H0V2h1.75zM20 2v16h-1.75V2H20zM14.064 12.996a.75.75 0 0 1-1.28-.53v-1.591H7.21v1.591a.75.75 0 0 1-1.28.53L3.464 10.53a.75.75 0 0 1 0-1.061L5.93 7.004a.75.75 0 0 1 1.28.53v1.591h5.574V7.533a.75.75 0 0 1 1.28-.53l2.466 2.466a.75.75 0 0 1 0 1.061l-2.466 2.466z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/line-spacing-20.svg b/toolkit/themes/shared/reader/line-spacing-20.svg
new file mode 100644
index 0000000000..f4a0a44c9a
--- /dev/null
+++ b/toolkit/themes/shared/reader/line-spacing-20.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path d="M2 0h16v1.75H2V0zM2 18.25h16V20H2v-1.75zM12.996 5.936a.75.75 0 0 1-.53 1.28h-1.591v5.574h1.591a.75.75 0 0 1 .53 1.28l-2.466 2.466a.75.75 0 0 1-1.061 0L7.004 14.07a.75.75 0 0 1 .53-1.28h1.591V7.215H7.534a.75.75 0 0 1-.53-1.28L9.469 3.47a.75.75 0 0 1 1.061 0l2.466 2.466z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/word-spacing-20.svg b/toolkit/themes/shared/reader/word-spacing-20.svg
new file mode 100644
index 0000000000..7a0fd6c2c7
--- /dev/null
+++ b/toolkit/themes/shared/reader/word-spacing-20.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.422 5.75h.996a.75.75 0 0 1 .69.457L9.839 15H7.938l-1.061-2.5H2.963L1.901 15H0l.073-.174 3.659-8.619a.749.749 0 0 1 .69-.457zm.498 2.139L3.705 10.75h2.43L4.92 7.889z"/>
+  <path d="m17.969 7.609 1.865 1.865a.568.568 0 0 1 0 .802l-1.865 1.865A.568.568 0 0 1 17 11.74v-.99h-5v.99a.567.567 0 0 1-.969.401l-1.865-1.865a.566.566 0 0 1 0-.802l1.865-1.865A.568.568 0 0 1 12 8.01V9h5v-.99c0-.506.611-.759.969-.401z"/>
+</svg>
diff --git a/toolkit/themes/shared/tree/sort-asc.svg b/toolkit/themes/shared/tree/sort-asc.svg
new file mode 100644
index 0000000000..917fa96cf3
--- /dev/null
+++ b/toolkit/themes/shared/tree/sort-asc.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 7" width="9" height="7" fill="context-fill">
+  <path d="M4.5 1.24a.9.9 0 0 0-.7.2l-2.6 2.7c-.8.87.43 2.1 1.3 1.3l2-2 2 2c.84.53 1.8-.5 1.2-1.3l-2.6-2.7a.9.9 0 0 0-.6-.2z"/>
+</svg>
diff --git a/toolkit/themes/shared/tree/sort-dsc.svg b/toolkit/themes/shared/tree/sort-dsc.svg
new file mode 100644
index 0000000000..97cbfc6917
--- /dev/null
+++ b/toolkit/themes/shared/tree/sort-dsc.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 7" width="9" height="7" fill="context-fill">
+  <path d="M4.5 5.67a.9.9 0 0 1-.7-.2l-2.6-2.7c-.8-.87.43-2.1 1.3-1.3l2 2 2-2c.84-.53 1.8.5 1.2 1.3l-2.6 2.7a.9.9 0 0 1-.6.2z"/>
+</svg>
diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree/tree.css
index 9c56af4db4..aa4ffa899c 100644
--- a/toolkit/themes/shared/tree.css
+++ b/toolkit/themes/shared/tree/tree.css
@@ -23,6 +23,21 @@ tree {
   }
 }
 
+/********** splitter **********/
+
+.tree-splitter {
+  margin-inline: -4px;
+  width: 8px;
+  max-width: 8px;
+  min-width: 8px;
+  appearance: none !important;
+  border: none !important;
+  background: none !important;
+  order: 2147483646;
+  z-index: 2147483646;
+}
+
+
 /* ::::: tree rows ::::: */
 
 treechildren::-moz-tree-row {
@@ -123,20 +138,15 @@ treechildren::-moz-tree-drop-feedback {
 
 treecol,
 .tree-columnpicker-button {
-  appearance: auto;
-  -moz-default-appearance: treeheadercell;
   background-color: -moz-ColHeader;
   color: -moz-ColHeaderText;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   margin: 0;
-  border-inline-start: 1px solid ThreeDLightShadow;
 
-  @media (-moz-platform: linux) or ((-moz-platform: windows) and (prefers-color-scheme: dark)) {
-    appearance: none;
-    box-shadow: inset 0 -1px ThreeDLightShadow;
-  }
+  border-inline-start: 1px solid ThreeDLightShadow;
+  box-shadow: inset 0 -1px ThreeDLightShadow;
 
   &:where(:hover) {
     background-color: -moz-ColHeaderHover;
@@ -250,22 +260,20 @@ html|input.tree-input {
   z-index: 2147483647;
 }
 
-@media not (-moz-platform: macos) {
-  /* ::::: sort direction indicator :::::  */
-  .treecol-sortdirection {
-    list-style-image: url("chrome://global/skin/tree/sort-asc.svg");
-    -moz-context-properties: fill;
-    fill: currentColor;
-    visibility: hidden;
+/* ::::: sort direction indicator :::::  */
+.treecol-sortdirection {
+  list-style-image: url("chrome://global/skin/tree/sort-asc.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  visibility: hidden;
 
-    treecol[sortDirection="ascending"]:not([hideheader="true"]) > & {
-      visibility: inherit;
-    }
+  treecol[sortDirection="ascending"]:not([hideheader="true"]) > & {
+    visibility: inherit;
+  }
 
-    treecol[sortDirection="descending"]:not([hideheader="true"]) > & {
-      visibility: inherit;
-      list-style-image: url("chrome://global/skin/tree/sort-dsc.svg");
-    }
+  treecol[sortDirection="descending"]:not([hideheader="true"]) > & {
+    visibility: inherit;
+    list-style-image: url("chrome://global/skin/tree/sort-dsc.svg");
   }
 }