Backed out 6 changesets (bug 1699586) for Browser-chrome failures in browser/base/content/test/performance/browser_startup_images.js. CLOSED TREE

Backed out changeset 8d42246a3ee8 (bug 1699586) Backed out changeset e492a3c410b1 (bug 1699586) Backed out changeset 621c35b393a2 (bug 1699586) Backed out changeset 91f70d7ff2b1 (bug 1699586) Backed out changeset 25a77358d2bc (bug 1699586) Backed out changeset 1d3c1fe20fe9 (bug 1699586)
2021-06-24 02:03:18 +03:00 · 2021-06-24 02:03:18 +03:00 · 38d37d5ac1
--- a/browser/components/extensions/test/browser/browser_ext_tabs_hide.js
+++ b/browser/components/extensions/test/browser/browser_ext_tabs_hide.js
@ -141,7 +141,7 @@ add_task(function test_doorhanger_disable() {
    );
    ok(
      images.some(img =>
-        getComputedStyle(img).backgroundImage.includes("arrow-down.svg")
+        getComputedStyle(img).backgroundImage.includes("arrow-dropdown-16.svg")
      ),
      "There's an icon for the all tabs menu"
    );
--- a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
@ -182,7 +182,7 @@
      margin-bottom: 2px;
      -moz-context-properties: fill;
      fill: var(--customize-menu-primary-text-color);
-      background: url('chrome://global/skin/icons/arrow-down-12.svg') right no-repeat;
+      background: url('#{$image-path}glyph-arrowhead-down-12.svg') right no-repeat;
      background-size: 8px;
      background-origin: content-box;
      background-color: var(--customize-menu-background);
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss
@ -108,7 +108,7 @@
    }

    content: ' ';
-    mask: url('chrome://global/skin/icons/arrow-right-12.svg') 0 -8px no-repeat;
+    mask: url('chrome://activity-stream/content/data/content/assets/glyph-caret-right.svg') 0 -8px no-repeat;
    background-color: $blue-60;
    margin: 0 0 0 4px;
    width: 5px;
--- a/browser/components/newtab/content-src/components/MoreRecommendations/_MoreRecommendations.scss
+++ b/browser/components/newtab/content-src/components/MoreRecommendations/_MoreRecommendations.scss
@ -5,7 +5,7 @@
  line-height: 1.230769231; // (16 / 13) -> 16px computed

  &::after {
-    background: url('chrome://global/skin/icons/arrow-right-12.svg') no-repeat center center;
+    background: url('#{$image-path}topic-show-more-12.svg') no-repeat center center;
    content: '';
    -moz-context-properties: fill;
    display: inline-block;
@ -17,6 +17,6 @@
  }

  &:dir(rtl)::after  {
-    background-image: url('chrome://global/skin/icons/arrow-left-12.svg');
+    transform: scaleX(-1);
  }
 }
--- a/browser/components/newtab/content-src/styles/_icons.scss
+++ b/browser/components/newtab/content-src/styles/_icons.scss
@ -163,29 +163,31 @@
  }

  &.icon-arrowhead-down {
-    background-image: url('chrome://global/skin/icons/arrow-down.svg');
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg');
  }

  &.icon-arrowhead-down-small {
-    background-image: url('chrome://global/skin/icons/arrow-down-12.svg');
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg');
    background-size: $smaller-icon-size;
    height: $smaller-icon-size;
    width: $smaller-icon-size;
  }

  &.icon-arrowhead-forward-small {
-    background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg');
    background-size: $smaller-icon-size;
    height: $smaller-icon-size;
+    transform: rotate(-90deg);
    width: $smaller-icon-size;

    &:dir(rtl) {
-      background-image: url('chrome://global/skin/icons/arrow-left-12.svg');
+      transform: rotate(90deg);
    }
  }

  &.icon-arrowhead-up {
-    background-image: url('chrome://global/skin/icons/arrow-up.svg');
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg');
+    transform: rotate(180deg);
  }

  &.icon-add {
@ -201,6 +203,6 @@
  }

  &.icon-arrow {
-    background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-arrow.svg');
  }
 }
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@ -331,25 +331,27 @@ body[lwt-newtab-brighttext] {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg");
 }
 .icon.icon-arrowhead-down {
-  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg");
 }
 .icon.icon-arrowhead-down-small {
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg");
  background-size: 12px;
  height: 12px;
  width: 12px;
 }
 .icon.icon-arrowhead-forward-small {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg");
  background-size: 12px;
  height: 12px;
+  transform: rotate(-90deg);
  width: 12px;
 }
 .icon.icon-arrowhead-forward-small:dir(rtl) {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: rotate(90deg);
 }
 .icon.icon-arrowhead-up {
-  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg");
+  transform: rotate(180deg);
 }
 .icon.icon-add {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-add-16.svg");
@ -361,7 +363,7 @@ body[lwt-newtab-brighttext] {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg");
 }
 .icon.icon-arrow {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrow.svg");
 }

 html {
@ -2161,7 +2163,7 @@ main.has-snippet {
  margin-bottom: 2px;
  -moz-context-properties: fill;
  fill: var(--customize-menu-primary-text-color);
-  background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat;
+  background: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg") right no-repeat;
  background-size: 8px;
  background-origin: content-box;
  background-color: var(--customize-menu-background);
@ -2999,7 +3001,7 @@ main.has-snippet {
  line-height: 1.230769231;
 }
 .more-recommendations::after {
-  background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center;
+  background: url("chrome://activity-stream/content/data/content/assets/topic-show-more-12.svg") no-repeat center center;
  content: "";
  -moz-context-properties: fill;
  display: inline-block;
@ -3010,7 +3012,7 @@ main.has-snippet {
  width: 12px;
 }
 .more-recommendations:dir(rtl)::after {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: scaleX(-1);
 }

 .discovery-stream.ds-layout {
@ -4673,7 +4675,7 @@ main.has-snippet {
 }
 .ds-chevron-link::after {
  content: " ";
-  mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
+  mask: url("chrome://activity-stream/content/data/content/assets/glyph-caret-right.svg") 0 -8px no-repeat;
  background-color: #0060DF;
  margin: 0 0 0 4px;
  width: 5px;
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@ -335,25 +335,27 @@ body[lwt-newtab-brighttext] {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg");
 }
 .icon.icon-arrowhead-down {
-  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg");
 }
 .icon.icon-arrowhead-down-small {
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg");
  background-size: 12px;
  height: 12px;
  width: 12px;
 }
 .icon.icon-arrowhead-forward-small {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg");
  background-size: 12px;
  height: 12px;
+  transform: rotate(-90deg);
  width: 12px;
 }
 .icon.icon-arrowhead-forward-small:dir(rtl) {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: rotate(90deg);
 }
 .icon.icon-arrowhead-up {
-  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg");
+  transform: rotate(180deg);
 }
 .icon.icon-add {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-add-16.svg");
@ -365,7 +367,7 @@ body[lwt-newtab-brighttext] {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg");
 }
 .icon.icon-arrow {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrow.svg");
 }

 html {
@ -2165,7 +2167,7 @@ main.has-snippet {
  margin-bottom: 2px;
  -moz-context-properties: fill;
  fill: var(--customize-menu-primary-text-color);
-  background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat;
+  background: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg") right no-repeat;
  background-size: 8px;
  background-origin: content-box;
  background-color: var(--customize-menu-background);
@ -3003,7 +3005,7 @@ main.has-snippet {
  line-height: 1.230769231;
 }
 .more-recommendations::after {
-  background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center;
+  background: url("chrome://activity-stream/content/data/content/assets/topic-show-more-12.svg") no-repeat center center;
  content: "";
  -moz-context-properties: fill;
  display: inline-block;
@ -3014,7 +3016,7 @@ main.has-snippet {
  width: 12px;
 }
 .more-recommendations:dir(rtl)::after {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: scaleX(-1);
 }

 .discovery-stream.ds-layout {
@ -4677,7 +4679,7 @@ main.has-snippet {
 }
 .ds-chevron-link::after {
  content: " ";
-  mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
+  mask: url("chrome://activity-stream/content/data/content/assets/glyph-caret-right.svg") 0 -8px no-repeat;
  background-color: #0060DF;
  margin: 0 0 0 4px;
  width: 5px;
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@ -331,25 +331,27 @@ body[lwt-newtab-brighttext] {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg");
 }
 .icon.icon-arrowhead-down {
-  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg");
 }
 .icon.icon-arrowhead-down-small {
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg");
  background-size: 12px;
  height: 12px;
  width: 12px;
 }
 .icon.icon-arrowhead-forward-small {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg");
  background-size: 12px;
  height: 12px;
+  transform: rotate(-90deg);
  width: 12px;
 }
 .icon.icon-arrowhead-forward-small:dir(rtl) {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: rotate(90deg);
 }
 .icon.icon-arrowhead-up {
-  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-16.svg");
+  transform: rotate(180deg);
 }
 .icon.icon-add {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-add-16.svg");
@ -361,7 +363,7 @@ body[lwt-newtab-brighttext] {
  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg");
 }
 .icon.icon-arrow {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://activity-stream/content/data/content/assets/glyph-arrow.svg");
 }

 html {
@ -2161,7 +2163,7 @@ main.has-snippet {
  margin-bottom: 2px;
  -moz-context-properties: fill;
  fill: var(--customize-menu-primary-text-color);
-  background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat;
+  background: url("chrome://activity-stream/content/data/content/assets/glyph-arrowhead-down-12.svg") right no-repeat;
  background-size: 8px;
  background-origin: content-box;
  background-color: var(--customize-menu-background);
@ -2999,7 +3001,7 @@ main.has-snippet {
  line-height: 1.230769231;
 }
 .more-recommendations::after {
-  background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center;
+  background: url("chrome://activity-stream/content/data/content/assets/topic-show-more-12.svg") no-repeat center center;
  content: "";
  -moz-context-properties: fill;
  display: inline-block;
@ -3010,7 +3012,7 @@ main.has-snippet {
  width: 12px;
 }
 .more-recommendations:dir(rtl)::after {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: scaleX(-1);
 }

 .discovery-stream.ds-layout {
@ -4673,7 +4675,7 @@ main.has-snippet {
 }
 .ds-chevron-link::after {
  content: " ";
-  mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
+  mask: url("chrome://activity-stream/content/data/content/assets/glyph-caret-right.svg") 0 -8px no-repeat;
  background-color: #0060DF;
  margin: 0 0 0 4px;
  width: 5px;
--- a/browser/components/newtab/data/content/assets/glyph-arrow.svg
+++ b/browser/components/newtab/data/content/assets/glyph-arrow.svg
--- a/browser/components/newtab/data/content/assets/glyph-arrowhead-down-12.svg
+++ b/browser/components/newtab/data/content/assets/glyph-arrowhead-down-12.svg
--- a/browser/components/newtab/data/content/assets/glyph-arrowhead-down-16.svg
+++ b/browser/components/newtab/data/content/assets/glyph-arrowhead-down-16.svg
--- a/browser/components/newtab/data/content/assets/glyph-caret-right.svg
+++ b/browser/components/newtab/data/content/assets/glyph-caret-right.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 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.999 6.24 5.386 9.854a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L7.825 6 4.68 2.854a.5.5 0 0 1 .707-.707L9 5.759l-.001.481z"/>
+</svg>
--- a/browser/components/newtab/data/content/assets/topic-show-more-12.svg
+++ b/browser/components/newtab/data/content/assets/topic-show-more-12.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 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.999 6.24 5.386 9.854a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L7.825 6 4.68 2.854a.5.5 0 0 1 .707-.707L9 5.759l-.001.481z"/>
+</svg>
--- a/browser/components/places/content/places.css
+++ b/browser/components/places/content/places.css
@ -33,11 +33,12 @@
 }

 #bookmarkpropertiesdialog .expander-up {
-  list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+  transform: scaleY(-1);
 }

 #bookmarkpropertiesdialog .expander-down {
-  list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
 }

 #bookmarkpropertiesdialog #editBookmarkPanelRows > vbox > input,
--- a/browser/installer/allowed-dupes.mn
+++ b/browser/installer/allowed-dupes.mn
@ -101,6 +101,16 @@ browser/chrome/browser/search-extensions/yandex/yandex-en.ico
 browser/chrome/browser/content/activity-stream/data/content/tippytop/favicons/yandex-ru.png
 browser/chrome/browser/search-extensions/yandex/yandex-ru.ico

+# Bug 1698146, bug 1699586 - Deduplicate chevrons/arrows in the tree
+chrome/toolkit/skin/classic/global/icons/arrow-dropdown-12.svg
+chrome/toolkit/skin/classic/global/icons/twisty-expanded.svg
+chrome/toolkit/skin/classic/global/icons/twisty-collapsed-rtl.svg
+chrome/toolkit/skin/classic/global/icons/arrow-dropdown-16.svg
+chrome/toolkit/skin/classic/global/icons/find-next-arrow.svg
+chrome/toolkit/skin/classic/global/icons/arrow-up-16.svg
+chrome/toolkit/skin/classic/global/icons/find-previous-arrow.svg
+browser/chrome/browser/skin/classic/browser/back-12.svg
+
 # Bug 1708008 - De-duplicate extension icons
 browser/chrome/browser/content/browser/extension.svg
 chrome/toolkit/skin/classic/mozapps/extensions/extension.svg
@ -113,6 +123,10 @@ browser/features/webcompat-reporter@mozilla.org/icons/lightbulb.svg
 chrome/toolkit/skin/classic/global/icons/lightbulb.svg

 # Bug 1708502 - De-duplicate about:newtab icons
+browser/chrome/browser/content/activity-stream/data/content/assets/glyph-arrow.svg
+browser/chrome/browser/content/activity-stream/data/content/assets/glyph-arrowhead-down-12.svg
+browser/chrome/browser/content/activity-stream/data/content/assets/glyph-arrowhead-down-16.svg
+browser/chrome/browser/content/activity-stream/data/content/assets/glyph-caret-right.svg
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-dismiss-16.svg
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-delete-16.svg
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-help-24.svg
@ -123,6 +137,7 @@ browser/chrome/browser/content/activity-stream/data/content/assets/glyph-pocket-
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-pocket-save-16.svg
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-search-16.svg
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-star-17.svg
+browser/chrome/browser/content/activity-stream/data/content/assets/topic-show-more-12.svg
 browser/chrome/browser/skin/classic/browser/bookmark.svg
 browser/chrome/browser/skin/classic/browser/pin-12.svg
 browser/chrome/browser/skin/classic/browser/pocket-outline.svg
@ -132,6 +147,7 @@ chrome/toolkit/skin/classic/global/icons/help.svg
 chrome/toolkit/skin/classic/global/icons/info.svg
 chrome/toolkit/skin/classic/global/icons/pocket.svg
 chrome/toolkit/skin/classic/global/icons/search-glass.svg
+chrome/toolkit/skin/classic/global/icons/twisty-collapsed.svg

 # Bug 1700124 - De-duplicate browser/themes/shared icons
 browser/chrome/browser/content/activity-stream/data/content/assets/glyph-add-16.svg
--- a/browser/themes/linux/places/organizer.css
+++ b/browser/themes/linux/places/organizer.css
@ -80,7 +80,7 @@
  display: -moz-box;
  width: 12px;
  height: 12px;
-  content: url("chrome://global/skin/icons/arrow-down-12.svg");
+  content: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
 }
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@ -73,7 +73,7 @@
 }

 #placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker {
-  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  padding: 0;
  margin-inline-end: 2px;
 }
@ -96,15 +96,10 @@

 /* back and forward button */
 #back-button,
-#forward-button:-moz-locale-dir(rtl) {
+#forward-button {
  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
 }

-#forward-button,
-#back-button:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
-}
-
 #back-button {
  margin-inline-end: 0 !important; /* override margin from #placesToolbar > toolbarbutton */
 }
@ -113,6 +108,11 @@
  margin-inline-start: 0 !important; /* override margin from #placesToolbar > toolbarbutton */
 }

+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(ltr) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
 #back-button > .toolbarbutton-icon {
  margin-inline: 3px 2px !important;
 }
--- a/browser/themes/shared/aboutSessionRestore.css
+++ b/browser/themes/shared/aboutSessionRestore.css
@ -42,7 +42,7 @@
  height: 100%;
  top: 0;
  inset-inline-start: 0;
-  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right center;
@ -53,7 +53,7 @@
 }

 #tabsToggle:not(.show-tabs):after {
-  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  transform: scaleY(-1);
 }

 #tabsToggle.show-tabs > #hideTabs,
--- a/browser/themes/shared/addons/extension-controlled.inc.css
+++ b/browser/themes/shared/addons/extension-controlled.inc.css
@ -21,7 +21,7 @@
 }

 .extension-controlled-icon.alltabs-icon {
-  background: url("chrome://global/skin/icons/arrow-down.svg");
+  background: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
  /* This icon has a lot of extra space to the sides, reduce that a little. */
  margin: 0 -1px 1px;
 }
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@ -509,7 +509,7 @@ menupopup::part(drop-indicator) {
 }

 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button:after {
-  content: url(chrome://global/skin/icons/arrow-left-12.svg);
+  content: url(chrome://browser/skin/back-12.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  transform: translateY(2px);
@ -517,7 +517,7 @@ menupopup::part(drop-indicator) {
 }

 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(ltr) .popup-notification-button.popup-notification-primary-button:after {
-  content: url(chrome://global/skin/icons/arrow-right-12.svg);
+  scale: -1 1;
 }

 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button:hover {
@ -712,7 +712,7 @@ menupopup::part(drop-indicator) {
 }

 .ac-dropmarker::part(icon) {
-  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  fill: var(--input-color, -moz-DialogText);
 }
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@ -124,7 +124,7 @@
 .customizationmode-button > .box-inherit > .button-menu-dropmarker {
  margin-inline-end: 0;
  padding-inline-end: 0;
-  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
 }

 .customizationmode-button:is(:active,:hover):not([disabled]),
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@ -1401,7 +1401,7 @@ panelview .toolbarbutton-1,

 .subviewbutton > .menu-right {
  appearance: none;
-  list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+  list-style-image: url(chrome://global/skin/icons/menu-arrow.svg);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
@ -1412,7 +1412,7 @@ panelview .toolbarbutton-1,
 }

 .subviewbutton > .menu-right:-moz-locale-dir(rtl) {
-  list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+  transform: scaleX(-1);
 }

@media not (-moz-proton) {
@ -1570,7 +1570,7 @@ panelview .toolbarbutton-1,
 .widget-overflow-list .subviewbutton-nav::after,
 .PanelUI-subView .subviewbutton-nav::after {
  -moz-context-properties: fill, fill-opacity;
-  content: url(chrome://global/skin/icons/arrow-right.svg);
+  content: url(chrome://global/skin/icons/menu-arrow.svg);
  fill: currentColor;
  fill-opacity: 0.6;
  display: -moz-box;
@ -1580,7 +1580,7 @@ panelview .toolbarbutton-1,
 #identity-popup-mainView .subviewbutton-nav:-moz-locale-dir(rtl)::after,
 .widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after,
 .PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
-  content: url(chrome://global/skin/icons/arrow-left.svg);
+  scale: -1 1;
 }

 #identity-popup-security-button > .toolbarbutton-text {
@ -1597,7 +1597,7 @@ panelview .toolbarbutton-1,
 } /* END not Proton */

 .PanelUI-subView .subviewbutton-nav-down::after {
-  content: url(chrome://global/skin/icons/arrow-down.svg);
+  content: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
 }

 .subviewbutton[shortcut]::after,
@ -2262,8 +2262,8 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 } /** End Proton **/

-.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) {
-  list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+.subviewbutton-back:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
 }

 .subviewbutton-back > .toolbarbutton-text {
@ -2726,7 +2726,7 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
  margin-block-start: 5px;
  -moz-context-properties: fill;
  fill: currentColor;
-  background: url("chrome://global/skin/icons/arrow-down-12.svg") center center no-repeat;
+  background: url("chrome://global/skin/icons/arrow-dropdown-12.svg") center center no-repeat;
 }

 #PanelUI-profiler-presets:-moz-locale-dir(ltr)::after {
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@ -270,7 +270,7 @@ button.downloadButton {
 }

 .downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) {
-  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+  transform: scaleX(-1);
 }

 /*** Blocked subview ***/
--- a/toolkit/themes/shared/icons/arrow-left-12.svg
+++ b/toolkit/themes/shared/icons/arrow-left-12.svg
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -127,6 +127,7 @@

  skin/classic/browser/add-circle-fill.svg            (../shared/icons/add-circle-fill.svg)
  skin/classic/browser/back.svg                       (../shared/icons/back.svg)
+  skin/classic/browser/back-12.svg                    (../shared/icons/back-12.svg)
  skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
  skin/classic/browser/bookmark-12.svg                (../shared/icons/bookmark-12.svg)
  skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@ -244,11 +244,12 @@ html|img#editBookmarkPanelFavicon[src] {
 }

 #editBookmarkPanel .expander-up {
-  list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+  transform: scaleY(-1);
 }

 #editBookmarkPanel .expander-down {
-  list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
 }

 #editBMPanel_folderMenuList {
--- a/browser/themes/shared/places/sidebar.inc.css
+++ b/browser/themes/shared/places/sidebar.inc.css
@ -73,7 +73,7 @@
 #viewButton > .button-box > .button-menu-dropmarker {
  appearance: none !important;
  display: -moz-box;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  width: 12px;
  height: 12px;
  -moz-context-properties: fill;
--- a/browser/themes/shared/preferences/privacy.css
+++ b/browser/themes/shared/preferences/privacy.css
@ -139,7 +139,7 @@
  min-width: 20px;
  max-height: 20px;
  max-width: 20px;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  background-color: transparent;
  padding: 3px;
 }
--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@ -64,7 +64,7 @@
 }

 #sidebar-switcher-arrow {
-  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  width: 12px;
  height: 12px;
 }
--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@ -84,18 +84,18 @@ body {
 .item.client .item-twisty-container {
  min-width: 12px;
  height: 12px;
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 1;
 }

 .item.client.closed .item-twisty-container {
-  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  background-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
 }

 .item.client.closed .item-twisty-container:dir(rtl) {
-  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  background-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
 }

 .client .item.tab > .item-title-container {
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@ -696,7 +696,7 @@
 /* All tabs button and menupopup */

 #alltabs-button {
-  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
 }

 #tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge {
--- a/browser/themes/shared/translation/infobar.inc.css
+++ b/browser/themes/shared/translation/infobar.inc.css
@ -38,7 +38,7 @@ notification[value="translation"] menulist::part(dropmarker) {
 }

 notification[value="translation"] menulist::part(dropmarker-icon) {
-  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  fill: currentColor;
 }
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@ -843,7 +843,7 @@
 }

 .searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
-  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  margin-inline: -8px 2px;
  width: 6px;
--- a/browser/themes/windows/places/organizer.css
+++ b/browser/themes/windows/places/organizer.css
@ -145,7 +145,7 @@
 #placesMenu > menu > .menubar-text {
  margin-block: 0 !important; /* override menu.css */
  padding-inline-end: 8px;
-  background: url(chrome://global/skin/icons/arrow-down-12.svg) right center no-repeat;
+  background: url(chrome://global/skin/icons/arrow-dropdown-12.svg) right center no-repeat;
  background-size: 6px;
 }

@ -313,7 +313,7 @@ treechildren::-moz-tree-separator(selected) {
  border-radius: 4px;
  color: var(--organizer-color);
  background-color: var(--organizer-content-background);
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
 }
@ -337,7 +337,7 @@ treechildren::-moz-tree-separator(selected) {
 }

 #editBookmarkPanelRows .expander-up {
-  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+  transform: scaleY(-1);
 }

 #editBookmarkPanelRows .expander-up > .button-box,
--- a/toolkit/components/aboutperformance/content/aboutPerformance.css
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@ -144,7 +144,7 @@ td {
 /* Putting the background image in a positioned pseudo element lets us
 * use CSS transforms on the background image, which we need for rtl. */
 .twisty::before {
-  content: url("chrome://global/skin/icons/arrow-right-12.svg");
+  content: url("chrome://global/skin/icons/twisty-collapsed.svg");
  position: absolute;
  display: block;
  line-height: 50%;
@ -156,10 +156,10 @@ td {
  fill: currentColor;
 }
 .twisty:dir(rtl)::before {
-  content: url("chrome://global/skin/icons/arrow-left-12.svg");
+  transform: scaleX(-1);
 }
 .twisty.open::before {
-  content: url("chrome://global/skin/icons/arrow-down-12.svg");
+  content: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
 #dispatch-tbody > tr > td.indent {
  padding-inline-start: 88px;
@ -201,7 +201,7 @@ td {
  fill: currentColor;
 }
 .desc {
-  background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  fill: currentColor;
 }
--- a/toolkit/components/aboutprocesses/content/aboutProcesses.css
+++ b/toolkit/components/aboutprocesses/content/aboutProcesses.css
@ -92,7 +92,7 @@ td:first-child {
 /* Putting the background image in a positioned pseudo element lets us
 * use CSS transforms on the background image, which we need for rtl. */
 .twisty::before {
-  content: url("chrome://global/skin/icons/arrow-right-12.svg");
+  content: url("chrome://global/skin/icons/twisty-collapsed.svg");
  position: absolute;
  display: block;
  line-height: 50%;
@ -103,10 +103,10 @@ td:first-child {
  fill: currentColor;
 }
 .twisty:dir(rtl)::before {
-  content: url("chrome://global/skin/icons/arrow-left-12.svg");
+  content: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
 }
 .twisty.open::before {
-  content: url("chrome://global/skin/icons/arrow-down-12.svg");
+  content: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
 .indent {
  padding-inline: 48px 0;
@ -156,11 +156,11 @@ tr[selected] > td {
  background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
 }
 .desc {
-  background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
 }
 %else
 .asc {
-  background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
 }
 .desc {
  background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
--- a/toolkit/components/printing/content/print.css
+++ b/toolkit/components/printing/content/print.css
@ -108,7 +108,7 @@ select:not([size], [multiple])[iconic] {

 #printer-picker {
  background-size: auto 12px, 16px;
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/print.svg");
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/skin/icons/print.svg");
  background-position: right 3px center, left 8px center;
  width: 100%;
 }
@ -118,7 +118,7 @@ select:not([size], [multiple])[iconic] {
 }

 #printer-picker[output="pdf"] {
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/page-portrait.svg");
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/skin/icons/page-portrait.svg");
 }

 input[type="number"],
@ -151,13 +151,14 @@ input[type="text"] {
 }

 #more-settings > summary > .twisty {
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
  background-repeat: no-repeat;
  background-position: center;
  -moz-context-properties: fill;
  fill: currentColor;
  width: 12px;
  height: 12px;
+  scale: 1 1;
 }

 #more-settings > summary > .label {
@ -165,7 +166,8 @@ input[type="text"] {
 }

 #more-settings[open] > summary > .twisty {
-  background-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+  /* flip arrow to point up for the open state */
+  scale: 1 -1;
 }

 #open-dialog-link {
@ -306,7 +308,7 @@ input[type="number"].photon-number::-moz-number-spin-down {
  border: 0;
  border-radius: 0;
  background-color: var(--in-content-button-background);
-  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
  background-size: 8px;
  background-position: center;
  -moz-context-properties: fill;
@ -315,7 +317,7 @@ input[type="number"].photon-number::-moz-number-spin-down {
 }

 input[type="number"].photon-number::-moz-number-spin-up {
-  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  scale: 1 -1;
 }

 input[type="number"].photon-number::-moz-number-spin-up:hover,
--- a/toolkit/components/printing/content/printPagination.css
+++ b/toolkit/components/printing/content/printPagination.css
@ -110,12 +110,9 @@
 }

 #navigatePrevious:-moz-locale-dir(rtl)::after,
-#navigateNext:-moz-locale-dir(ltr)::after {
-  background-image: url("chrome://global/skin/icons/arrow-right.svg");
-}
-
 #navigateEnd:-moz-locale-dir(rtl)::after,
-#navigateHome:-moz-locale-dir(ltr)::after {
+#navigateHome:-moz-locale-dir(ltr)::after,
+#navigateNext:-moz-locale-dir(ltr)::after {
  transform: scaleX(-1);
 }

--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@ -90,7 +90,7 @@ body {
 }

 .dropdown {
-  background-image: url(chrome://global/skin/icons/arrow-down.svg);
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
  background-position: right 8px center;
  background-repeat: no-repeat;
  -moz-context-properties: fill;
--- a/toolkit/themes/linux/global/button.css
+++ b/toolkit/themes/linux/global/button.css
@ -63,12 +63,12 @@ button.plain {
 button[type="disclosure"] {
  margin: 0;
  appearance: none;
-  list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  min-width: 0;
 }

 button[type="disclosure"][open="true"] {
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
--- a/toolkit/themes/linux/global/toolbarbutton.css
+++ b/toolkit/themes/linux/global/toolbarbutton.css
@ -60,7 +60,7 @@ toolbarbutton:-moz-lwtheme:not(:hover, [checked="true"], [open="true"], [disable

 .toolbarbutton-combined-buttons-dropmarker {
  appearance: none;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  width: auto;
--- a/toolkit/themes/osx/global/toolbarbutton.css
+++ b/toolkit/themes/osx/global/toolbarbutton.css
@ -26,7 +26,7 @@ toolbarbutton[disabled="true"] {
 .toolbarbutton-menu-dropmarker,
 .toolbarbutton-combined-buttons-dropmarker {
  appearance: none;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  width: auto;
--- a/toolkit/themes/shared/arrowscrollbox.css
+++ b/toolkit/themes/shared/arrowscrollbox.css
@ -14,7 +14,7 @@

 toolbarbutton {
  color: inherit !important; /* override any color changes for toolbar buttons in e.g. disabled or hover states */
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 1;
@ -25,18 +25,17 @@ toolbarbutton[disabled="true"] {
  fill-opacity: 0.4;
 }

-#scrollbutton-up > .toolbarbutton-icon {
-  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+:host([orient="horizontal"]) > toolbarbutton {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
 }

-:host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(ltr) > .toolbarbutton-icon,
-:host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+#scrollbutton-up > .toolbarbutton-icon {
+  transform: scaleY(-1);
 }

 :host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon,
 :host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+  transform: scaleX(-1);
 }

 toolbarbutton > .toolbarbutton-text {
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@ -136,14 +136,14 @@ button.month-year::after {
  content: "";
  width: 2.6rem;
  height: 1.6rem;
-  background: url("chrome://global/skin/icons/arrow-down.svg") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/arrow-dropdown-16.svg") no-repeat 50% 50%;
  -moz-context-properties: fill, fill-opacity;
  fill: FieldText;
  fill-opacity: .5;
 }

 button.month-year.active::after {
-  background: url("chrome://global/skin/icons/arrow-up.svg") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/arrow-up-16.svg") no-repeat 50% 50%;
 }

 .month-year-view {
@ -300,11 +300,11 @@ button.month-year.active::after {
 }

 .spinner-container > button.up {
-  background: url("chrome://global/skin/icons/arrow-up.svg") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/arrow-up-16.svg") no-repeat 50% 50%;
 }

 .spinner-container > button.down {
-  background: url("chrome://global/skin/icons/arrow-down.svg") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/arrow-dropdown-16.svg") no-repeat 50% 50%;
 }

 .spinner-container.hide-buttons > button {
--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@ -108,14 +108,14 @@ html|input.findbar-textbox[flash="true"] {
 }

 .findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/arrow-up.svg);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
  border-inline-width: 0;
  margin-inline: 8px 0;
 }

 .findbar-find-next {
  margin-inline-end: 8px;
-  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
 }

 .findbar-find-previous > .toolbarbutton-icon,
--- a/toolkit/themes/shared/icons/arrow-dropdown-12.svg
+++ b/toolkit/themes/shared/icons/arrow-dropdown-12.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 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m6.24 8.999 3.614-3.613a.498.498 0 0 0 0-.707.5.5 0 0 0-.707 0L5.999 7.826 2.854 4.68a.5.5 0 0 0-.707.707L5.759 9l.481-.001z"/>
+</svg>
--- a/toolkit/themes/shared/icons/arrow-dropdown-16.svg
+++ b/toolkit/themes/shared/icons/arrow-dropdown-16.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 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m8.352 10.999 5.466-5.465a.623.623 0 0 0-.001-.884.628.628 0 0 0-.885 0L7.998 9.585l-4.93-4.934a.626.626 0 0 0-.885.885L7.648 11l.704-.001z"/>
+</svg>
--- a/toolkit/themes/shared/icons/arrow-up-16.svg
+++ b/toolkit/themes/shared/icons/arrow-up-16.svg
--- a/toolkit/themes/shared/icons/find-next-arrow.svg
+++ b/toolkit/themes/shared/icons/find-next-arrow.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 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m8.352 10.999 5.466-5.465a.623.623 0 0 0-.001-.884.628.628 0 0 0-.885 0L7.998 9.585l-4.93-4.934a.626.626 0 0 0-.885.885L7.648 11l.704-.001z"/>
+</svg>
--- a/toolkit/themes/shared/icons/find-previous-arrow.svg
+++ b/toolkit/themes/shared/icons/find-previous-arrow.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 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m8.352 5.001 5.466 5.465a.623.623 0 0 1-.001.884.628.628 0 0 1-.885 0L7.999 6.416l-4.932 4.933a.626.626 0 0 1-.885-.885L7.648 5l.704.001z"/>
+</svg>
--- a/toolkit/themes/shared/icons/arrow-right.svg
+++ b/toolkit/themes/shared/icons/arrow-right.svg
--- a/toolkit/themes/shared/icons/twisty-collapsed-rtl.svg
+++ b/toolkit/themes/shared/icons/twisty-collapsed-rtl.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 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m4.001 6.24 3.613 3.614a.498.498 0 0 0 .707 0 .5.5 0 0 0 0-.707L5.174 5.999 8.32 2.853a.5.5 0 0 0-.707-.707L4 5.759l.001.481z"/>
+</svg>
--- a/toolkit/themes/shared/icons/twisty-collapsed.svg
+++ b/toolkit/themes/shared/icons/twisty-collapsed.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 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.999 6.24 5.386 9.854a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L7.825 6 4.68 2.854a.5.5 0 0 1 .707-.707L9 5.759l-.001.481z"/>
+</svg>
--- a/toolkit/themes/shared/icons/twisty-expanded.svg
+++ b/toolkit/themes/shared/icons/twisty-expanded.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 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m6.24 8.999 3.614-3.613a.498.498 0 0 0 0-.707.5.5 0 0 0-.707 0L5.999 7.826 2.854 4.68a.5.5 0 0 0-.707.707L5.759 9l.481-.001z"/>
+</svg>
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@ -406,7 +406,7 @@ xul|tab:-moz-focusring > .tab-middle > .tab-text {
 }

 html|select:not([size], [multiple]) {
-  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  background-position: right 3px center;
  background-repeat: no-repeat;
  background-size: auto 12px;
@ -546,7 +546,7 @@ xul|menulist::part(dropmarker) {
  padding: 0;
  border: none;
  background-color: transparent;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
 }
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@ -31,7 +31,6 @@ toolkit.jar:
  skin/classic/global/in-content/toggle-button.css         (../../shared/in-content/toggle-button.css)
  skin/classic/global/icons/add.svg                        (../../shared/icons/add.svg)
  skin/classic/global/icons/arrow-left.svg                 (../../shared/icons/arrow-left.svg)
-  skin/classic/global/icons/arrow-right.svg                (../../shared/icons/arrow-right.svg)
  skin/classic/global/icons/autoscroll.svg                 (../../shared/icons/autoscroll.svg)
  skin/classic/global/icons/autoscroll-horizontal.svg      (../../shared/icons/autoscroll-horizontal.svg)
  skin/classic/global/icons/autoscroll-vertical.svg        (../../shared/icons/autoscroll-vertical.svg)
@ -46,6 +45,8 @@ toolkit.jar:
  skin/classic/global/icons/defaultFavicon.svg             (../../shared/icons/defaultFavicon.svg)
  skin/classic/global/icons/edit.svg                       (../../shared/icons/edit.svg)
  skin/classic/global/icons/error.svg                      (../../shared/icons/error.svg)
+  skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
+  skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
  skin/classic/global/icons/folder.svg                     (../../shared/icons/folder.svg)
  skin/classic/global/icons/heart.svg                      (../../shared/icons/heart.svg)
  skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
@ -54,6 +55,7 @@ toolkit.jar:
  skin/classic/global/icons/lightbulb.svg                  (../../shared/icons/lightbulb.svg)
  skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
  skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
+  skin/classic/global/icons/menu-arrow.svg                 (../../shared/icons/menu-arrow.svg)
  skin/classic/global/icons/more.svg                       (../../shared/icons/more.svg)
  skin/classic/global/icons/open-in-new.svg                (../../shared/icons/open-in-new.svg)
  skin/classic/global/icons/page-portrait.svg              (../../shared/icons/page-portrait.svg)
@ -73,16 +75,17 @@ toolkit.jar:
  skin/classic/global/icons/settings.svg                   (../../shared/icons/settings.svg)
  skin/classic/global/icons/shortcut.svg                   (../../shared/icons/shortcut.svg)
  skin/classic/global/icons/sort-arrow.svg                 (../../shared/icons/sort-arrow.svg)
+  skin/classic/global/icons/twisty-collapsed.svg           (../../shared/icons/twisty-collapsed.svg)
+  skin/classic/global/icons/twisty-collapsed-rtl.svg       (../../shared/icons/twisty-collapsed-rtl.svg)
+  skin/classic/global/icons/twisty-expanded.svg            (../../shared/icons/twisty-expanded.svg)
 #if defined(NIGHTLY_BUILD)
  skin/classic/global/icons/icon-refresh.svg               (../../shared/icons/icon-refresh.svg)
 #endif
  skin/classic/global/icons/update-icon.svg                (../../shared/icons/update-icon.svg)
-  skin/classic/global/icons/arrow-down-12.svg              (../../shared/icons/arrow-down-12.svg)
-  skin/classic/global/icons/arrow-down.svg                 (../../shared/icons/arrow-down.svg)
-  skin/classic/global/icons/arrow-left-12.svg              (../../shared/icons/arrow-left-12.svg)
-  skin/classic/global/icons/arrow-right-12.svg             (../../shared/icons/arrow-right-12.svg)
+  skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
+  skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
  skin/classic/global/icons/arrow-up-12.svg                (../../shared/icons/arrow-up-12.svg)
-  skin/classic/global/icons/arrow-up.svg                   (../../shared/icons/arrow-up.svg)
+  skin/classic/global/icons/arrow-up-16.svg                (../../shared/icons/arrow-up-16.svg)
  skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
  skin/classic/global/icons/warning-fill-12.svg            (../../shared/icons/warning-fill-12.svg)
  skin/classic/global/illustrations/about-rights.svg       (../../shared/illustrations/about-rights.svg)
--- a/toolkit/themes/shared/menulist.inc.css
+++ b/toolkit/themes/shared/menulist.inc.css
@ -52,7 +52,7 @@ dropmarker:not([native]) {
 }

 dropmarker:not([native])::part(icon) {
-  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
  -moz-context-properties: fill;
  fill: currentColor;
 }
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@ -92,7 +92,7 @@
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker::part(icon) {
  width: 16px;
  height: 16px;
-  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
  -moz-context-properties: fill;
  fill: currentColor;
 }
--- a/toolkit/themes/shared/tree.inc.css
+++ b/toolkit/themes/shared/tree.inc.css
@ -175,17 +175,17 @@ treechildren::-moz-tree-twisty {
  padding-top: 1px;
  padding-inline: 4px;
  width: 12px; /* The image's width is 12 pixels */
-  list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
  -moz-context-properties: fill;
  fill: currentColor;
 }

 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
-  list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
 }

 treechildren::-moz-tree-twisty(open) {
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }

 treechildren::-moz-tree-indentation {
--- a/toolkit/themes/windows/global/button.css
+++ b/toolkit/themes/windows/global/button.css
@ -60,7 +60,7 @@ button:where([disabled="true"]) {

 .button-menu-dropmarker {
  appearance: none;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  width: 12px;
@ -77,12 +77,12 @@ button.plain {
 button[type="disclosure"] {
  margin: 0;
  appearance: none;
-  list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  min-width: 0;
 }

 button[type="disclosure"][open="true"] {
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
--- a/toolkit/themes/windows/global/menu.css
+++ b/toolkit/themes/windows/global/menu.css
@ -146,7 +146,7 @@ menucaption {
@media (-moz-windows-non-native-menus) {
  .menu-right {
    appearance: none;
-    list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+    list-style-image: url("chrome://global/skin/icons/menu-arrow.svg");
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: var(--menu-icon-opacity);
@ -161,7 +161,7 @@ menucaption {
  }

  .menu-right:-moz-locale-dir(rtl) {
-    list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+    transform: scaleX(-1);
  }
 }

--- a/toolkit/themes/windows/global/toolbarbutton.css
+++ b/toolkit/themes/windows/global/toolbarbutton.css
@ -64,7 +64,7 @@ toolbarbutton[disabled="true"] {
 .toolbarbutton-menu-dropmarker,
 .toolbarbutton-combined-buttons-dropmarker {
  appearance: none;
-  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  width: auto;