Bug 1623015 - Modernize scrollbox arrows. r=ntim
authorDão Gottwald <dao@mozilla.com>
Wed, 25 Mar 2020 13:38:44 +0000
changeset 520357 c5112a7573ac8a9d388e6253e3305061654b123e
parent 520356 0cdc6c8cee2d10b85c5752a66750e1d092d54f5d
child 520358 a831d5044f5e20065a2b90031fac877d7f53c55b
push id37248
push userbtara@mozilla.com
push dateWed, 25 Mar 2020 16:40:49 +0000
treeherdermozilla-central@c5112a7573ac [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1623015
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1623015 - Modernize scrollbox arrows. r=ntim Differential Revision: https://phabricator.services.mozilla.com/D67678
browser/components/places/content/places-menupopup.js
browser/themes/osx/customizableui/panelUI.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/tabs.inc.css
toolkit/content/tests/chrome/test_mousescroll.xhtml
toolkit/content/widgets/menupopup.js
toolkit/themes/linux/global/jar.mn
toolkit/themes/linux/global/scrollbox.css
toolkit/themes/osx/global/arrow/arrow-dn-dis.gif
toolkit/themes/osx/global/arrow/arrow-dn-sharp.gif
toolkit/themes/osx/global/arrow/arrow-lft-dis.gif
toolkit/themes/osx/global/arrow/arrow-lft-sharp.gif
toolkit/themes/osx/global/arrow/arrow-rit-dis.gif
toolkit/themes/osx/global/arrow/arrow-rit-sharp.gif
toolkit/themes/osx/global/arrow/arrow-up-dis.gif
toolkit/themes/osx/global/arrow/arrow-up-sharp.gif
toolkit/themes/osx/global/global.css
toolkit/themes/osx/global/jar.mn
toolkit/themes/osx/global/menu.css
toolkit/themes/osx/global/scrollbox.css
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/scrollbox.css
toolkit/themes/windows/global/arrow/arrow-dn-dis.gif
toolkit/themes/windows/global/arrow/arrow-lft-dis.gif
toolkit/themes/windows/global/arrow/arrow-lft.gif
toolkit/themes/windows/global/arrow/arrow-rit-dis.gif
toolkit/themes/windows/global/arrow/arrow-rit.gif
toolkit/themes/windows/global/arrow/arrow-up-dis.gif
toolkit/themes/windows/global/jar.mn
toolkit/themes/windows/global/scrollbox.css
--- a/browser/components/places/content/places-menupopup.js
+++ b/browser/components/places/content/places-menupopup.js
@@ -35,30 +35,24 @@
     get markup() {
       return `
       <html:link rel="stylesheet" href="chrome://global/skin/global.css" />
       <hbox flex="1" part="innerbox">
         <vbox part="drop-indicator-bar" hidden="true">
           <image part="drop-indicator"/>
         </vbox>
         <arrowscrollbox class="popup-internal-box" flex="1" orient="vertical"
+                        exportparts="scrollbox: arrowscrollbox-scrollbox"
                         smoothscroll="false" part="popupbox">
           <html:slot></html:slot>
         </arrowscrollbox>
       </hbox>
     `;
     }
 
-    initShadowDOM() {
-      super.initShadowDOM();
-      if (this.closest("#BMB_bookmarksPopup")) {
-        this.scrollBox.classList.add("in-bookmarks-menu");
-      }
-    }
-
     connectedCallback() {
       if (this.delayConnectedCallback()) {
         return;
       }
 
       /**
        * Sub-menus should be opened when the mouse drags over them, and closed
        * when the mouse drags off.  The overFolder object manages opening and
--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -48,17 +48,16 @@ panelmultiview .toolbaritem-combined-but
   background: var(--arrowpanel-background);
   border-radius: var(--arrowpanel-border-radius);
   box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
   color: var(--arrowpanel-color);
   border: none;
   margin: 1px;
 }
 
-
 /* Override OSX-specific toolkit styles for the bookmarks panel */
 menu.subviewbutton > .menu-right {
   margin-inline-end: -4px;
   -moz-appearance: none;
 }
 
 .PanelUI-subView menuseparator,
 .cui-widget-panelview menuseparator {
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -241,16 +241,24 @@ panelview {
 #BMB_bookmarksPopup menupopup::part(popupbox) {
   padding-bottom: 0px;
 }
 
 #BMB_bookmarksPopup menupopup[nofooterpopup=true]::part(popupbox) {
   padding-bottom: 4px;
 }
 
+%ifndef XP_MACOSX
+/* Add some space at the top because there are no headers in menupopups of
+   the bookmarks menu. */
+#BMB_bookmarksPopup menupopup::part(arrowscrollbox-scrollbox) {
+  padding-top: 4px;
+}
+%endif
+
 #confirmation-hint {
   --arrowpanel-background: #0060df;
   --arrowpanel-border-color: #0060df;
   --arrowpanel-color: #fff;
   --arrowpanel-padding: 6px 10px;
   font-weight: 400;
   font-size: 1.1rem;
 }
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -699,26 +699,18 @@
   content: "";
   display: block;
 }
 
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox::part(scrollbutton-up),
 .tabbrowser-arrowscrollbox::part(scrollbutton-down) {
-  list-style-image: url(chrome://global/skin/icons/arrow-left.svg) !important;
-  -moz-context-properties: fill, fill-opacity;
   fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
-  color: inherit;
-}
-
-.tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(scrollbutton-up),
-.tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(scrollbutton-down) {
-  transform: scaleX(-1);
 }
 
 /* New tab button */
 
 #tabs-newtab-button,
 #TabsToolbar #new-tab-button {
   list-style-image: url(chrome://browser/skin/add.svg);
 }
--- a/toolkit/content/tests/chrome/test_mousescroll.xhtml
+++ b/toolkit/content/tests/chrome/test_mousescroll.xhtml
@@ -64,18 +64,16 @@ https://bugzilla.mozilla.org/show_bug.cg
   <!-- test code goes here -->
   <script type="application/javascript"><![CDATA[
 
 /** Test for Bug 378028 **/
 /*   and for Bug 350471 **/
 SimpleTest.waitForExplicitFinish();
 SimpleTest.waitForFocus(prepareRunningTests);
 
-const IS_MAC = navigator.platform.indexOf("Mac") == 0;
-
 // Some tests need to wait until stopping scroll completely.  At this time,
 // setTimeout() will retry to check up to MAX_RETRY_COUNT times.
 const MAX_RETRY_COUNT = 5;
 
 const deltaModes = [
   WheelEvent.DOM_DELTA_PIXEL,  // 0
   WheelEvent.DOM_DELTA_LINE,   // 1
   WheelEvent.DOM_DELTA_PAGE    // 2
@@ -179,38 +177,20 @@ function* testArrowScrollbox(id)
                                 if (oldPos == getPos()) {
                                   // If scroll stopped completely, let's continue the test.
                                   return ++retry == MAX_RETRY_COUNT;
                                 }
                                 oldPos = getPos();
                                 retry = 0;
                                 return false;
                              });
-      if (IS_MAC && expected == aExpected && expected != 0) {
-        // XXX On macOS, <scrollbox>.scrollPosition += enoughInt; may not set the scrollPosition
-        //     to scrollSize even if enoughInt is larger than scrollSize.
-        todo_is(getPos(), expected,
-                "testArrowScrollbox(" + id +  "): vertical, starting " + aStart +
-                  " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
-                  " aDeltaMode " + aDeltaMode);
-        let isInRange = false;
-        if (aDelta > 0)
-          isInRange = getPos() > aStart && getPos() < expected;
-        else
-          isInRange = getPos() < aStart && getPos() > expected;
-        ok(isInRange,
-           "testArrowScrollbox(" + id +  "): vertical, starting " + aStart +
-             " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
-             " aDeltaMode " + aDeltaMode);
-      } else {
-        is(getPos(), expected,
-           "testArrowScrollbox(" + id +  "): vertical, starting " + aStart +
-             " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
-             " aDeltaMode " + aDeltaMode);
-      }
+      is(getPos(), expected,
+         "testArrowScrollbox(" + id +  "): vertical, starting " + aStart +
+           " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
+           " aDeltaMode " + aDeltaMode);
     }
 
     scrollbox.scrollTo(aStart, aStart);
     for (var i = orientIsHorizontal ? 2 : 0; i >= 0; i--) {
       // horizontal mouse scrolling is never allowed to scroll vertical
       // arrowscrollboxes
       let expected = (!i && orientIsHorizontal) ? aExpected : aStart;
       let getPos = ()=>{
@@ -229,38 +209,20 @@ function* testArrowScrollbox(id)
                                 if (oldPos == getPos()) {
                                   // If scroll stopped completely, let's continue the test.
                                   return ++retry == MAX_RETRY_COUNT;
                                 }
                                 oldPos = getPos();
                                 retry = 0;
                                 return false;
                              });
-      if (IS_MAC && expected == aExpected && expected != 0) {
-        // XXX On macOS, <scrollbox>.scrollPosition += enoughInt; may not set the scrollPosition
-        //     to scrollSize even if enoughInt is larger than scrollSize.
-        todo_is(getPos(), expected,
-                "testArrowScrollbox(" + id +  "): horizontal, starting " + aStart +
-                  " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
-                  " aDeltaMode " + aDeltaMode);
-        let isInRange = false;
-        if (aDelta > 0)
-          isInRange = getPos() > aStart && getPos() < expected;
-        else
-          isInRange = getPos() < aStart && getPos() > expected;
-        ok(isInRange,
-           "testArrowScrollbox(" + id +  "): horizontal, starting " + aStart +
-             " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
-             " aDeltaMode " + aDeltaMode);
-      } else {
-        is(getPos(), expected,
-           "testArrowScrollbox(" + id +  "): horizontal, starting " + aStart +
-             " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
-             " aDeltaMode " + aDeltaMode);
-      }
+      is(getPos(), expected,
+         "testArrowScrollbox(" + id +  "): horizontal, starting " + aStart +
+           " delta " + aDelta + " lineOrPageDelta " + lineOrPageDelta +
+           " aDeltaMode " + aDeltaMode);
     }
   }
 
   var scrolledWidth = scrollbox.scrollWidth;
   var scrolledHeight = scrollbox.scrollHeight;
   var scrollMaxX = scrolledWidth - scrollbox.getBoundingClientRect().width;
   var scrollMaxY = scrolledHeight - scrollbox.getBoundingClientRect().height;
   var scrollMax = orient == "horizontal" ? scrollMaxX : scrollMaxY;
--- a/toolkit/content/widgets/menupopup.js
+++ b/toolkit/content/widgets/menupopup.js
@@ -51,18 +51,16 @@
         this.dispatchEvent(new Event("scroll"))
       );
       this.scrollBox.addEventListener("overflow", ev =>
         this.dispatchEvent(new Event("overflow"))
       );
       this.scrollBox.addEventListener("underflow", ev =>
         this.dispatchEvent(new Event("underflow"))
       );
-      this.scrollBox._scrollButtonUp.classList.add("menupopup-scrollbutton");
-      this.scrollBox._scrollButtonDown.classList.add("menupopup-scrollbutton");
     }
 
     get shadowRoot() {
       // We generate shadow DOM lazily on popupshowing event to avoid extra load
       // on the system during browser startup.
       if (!super.shadowRoot.firstElementChild) {
         super.shadowRoot.appendChild(this.fragment);
         this.initShadowDOM();
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -14,17 +14,16 @@ toolkit.jar:
 *  skin/classic/global/global.css
    skin/classic/global/menu.css
    skin/classic/global/menulist.css
    skin/classic/global/netError.css
 *  skin/classic/global/notification.css
    skin/classic/global/popup.css
    skin/classic/global/radio.css
    skin/classic/global/richlistbox.css
-   skin/classic/global/scrollbox.css
    skin/classic/global/splitter.css
    skin/classic/global/tabbox.css
    skin/classic/global/textbox.css
    skin/classic/global/toolbar.css
    skin/classic/global/toolbarbutton.css
    skin/classic/global/tooltip.css
 *  skin/classic/global/tree.css
 *  skin/classic/global/alerts/alert.css                        (alerts/alert.css)
deleted file mode 100644
--- a/toolkit/themes/linux/global/scrollbox.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* 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/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-arrowscrollbox[scrolledtoend=true]::part(arrowscrollbox-overflow-end-indicator),
-arrowscrollbox[scrolledtostart=true]::part(arrowscrollbox-overflow-start-indicator),
-arrowscrollbox[notoverflowing=true]::part(scrollbutton-up),
-arrowscrollbox[notoverflowing=true]::part(scrollbutton-down) {
-  visibility: collapse;
-}
-
-.scrollbutton-up.menupopup-scrollbutton > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-up;
-}
-
-.scrollbutton-down.menupopup-scrollbutton > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-down;
-}
-
-.scrollbutton-up.menupopup-scrollbutton[orient="horizontal"] > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-previous;
-}
-
-.scrollbutton-down.menupopup-scrollbutton[orient="horizontal"] > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-next;
-}
-
-:-moz-any(.scrollbutton-up, .scrollbutton-down) > .toolbarbutton-text {
-  display: none;
-}
-
-arrowscrollbox:not([clicktoscroll="true"])::part(scrollbutton-up),
-arrowscrollbox:not([clicktoscroll="true"])::part(scrollbutton-down) {
-  -moz-appearance: none;
-  border: 1px solid ThreeDShadow;
-  padding: 0;
-}
deleted file mode 100644
index 3d62e40063176591e22bcf369c76828c1d0371b9..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 206d7c19dd524614e18f807aef483c5ca6aab515..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 33243517b1b588c92dd307b74cf89fcec63ec5f4..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ae9b1dd0fb6ab5c5ed2f6b991a2f15d768707a7e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index cda95fe215c1ef29560016b5afa379cf46202963..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index ca628ba69bdcd33fa6d77e0e5deaeca7c0a143c5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 381dee3e5d80cfb7003b21b291f15249ce56c513..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 883a4f95ca178e01f7559013b6124b54532e771f..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -202,48 +202,8 @@ xul|notification > xul|hbox > xul|button
   margin: 0 !important;
 }
 
 xul|popupnotificationcontent {
   margin-top: .5em;
 }
 
 %include ../../shared/notification-popup.inc.css
-
-/* autorepeatbuttons in menus */
-
-.menupopup-scrollbutton {
-  height: 15px;
-  position: relative;
-  list-style-image: none;
-  /* Here we're using a little magic.
-   * The arrow button is supposed to overlay the scrollbox, blocking
-   * everything under it from reaching the screen. However, the menu background
-   * is slightly transparent, so how can we block something completely without
-   * messing up the transparency? It's easy: The native theming of the
-   * "menuitem" appearance uses CGContextClearRect before drawing, which
-   * clears everything under it.
-   * Without help from native theming this effect wouldn't be achievable.
-   */
-  -moz-appearance: menuitem;
-}
-
-.scrollbutton-up.menupopup-scrollbutton {
-  padding-top: 1px; /* 4px padding-top from the .popup-internal-box. */
-  margin-bottom: -15px;
-}
-
-.scrollbutton-up.menupopup-scrollbutton > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-up;
-}
-
-.scrollbutton-down.menupopup-scrollbutton {
-  padding-top: 5px;
-  margin-top: -15px;
-}
-
-.scrollbutton-down.menupopup-scrollbutton > .toolbarbutton-icon {
-  -moz-appearance: button-arrow-down;
-}
-
-.menupopup-scrollbutton[disabled="true"] {
-  visibility: collapse;
-}
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -16,36 +16,27 @@ toolkit.jar:
   skin/classic/global/menu.css
   skin/classic/global/menulist.css
 * skin/classic/global/notification.css
   skin/classic/global/netError.css
   skin/classic/global/popup.css
   skin/classic/global/radio.css
   skin/classic/global/richlistbox.css
   skin/classic/global/scrollbars.css                                 (nativescrollbars.css)
-  skin/classic/global/scrollbox.css
   skin/classic/global/splitter.css
   skin/classic/global/tabprompts.css
   skin/classic/global/tabbox.css
   skin/classic/global/textbox.css
   skin/classic/global/toolbar.css
   skin/classic/global/toolbarbutton.css
   skin/classic/global/tooltip.css
 * skin/classic/global/tree.css
   skin/classic/global/wizard.css
 * skin/classic/global/alerts/alert.css                               (alerts/alert.css)
-  skin/classic/global/arrow/arrow-dn-dis.gif                         (arrow/arrow-dn-dis.gif)
-  skin/classic/global/arrow/arrow-dn-sharp.gif                       (arrow/arrow-dn-sharp.gif)
   skin/classic/global/arrow/arrow-dn.gif                             (arrow/arrow-dn.gif)
-  skin/classic/global/arrow/arrow-lft-dis.gif                        (arrow/arrow-lft-dis.gif)
-  skin/classic/global/arrow/arrow-lft-sharp.gif                      (arrow/arrow-lft-sharp.gif)
-  skin/classic/global/arrow/arrow-rit-dis.gif                        (arrow/arrow-rit-dis.gif)
-  skin/classic/global/arrow/arrow-rit-sharp.gif                      (arrow/arrow-rit-sharp.gif)
-  skin/classic/global/arrow/arrow-up-dis.gif                         (arrow/arrow-up-dis.gif)
-  skin/classic/global/arrow/arrow-up-sharp.gif                       (arrow/arrow-up-sharp.gif)
   skin/classic/global/arrow/arrow-up.gif                             (arrow/arrow-up.gif)
   skin/classic/global/arrow/panelarrow-horizontal.svg                (arrow/panelarrow-horizontal.svg)
   skin/classic/global/arrow/panelarrow-vertical.svg                  (arrow/panelarrow-vertical.svg)
   skin/classic/global/dirListing/dirListing.css                      (dirListing/dirListing.css)
   skin/classic/global/dirListing/folder.png                          (dirListing/folder.png)
   skin/classic/global/dirListing/up.png                              (dirListing/up.png)
   skin/classic/global/icons/blocklist_favicon.png                    (icons/blocklist_favicon.png)
   skin/classic/global/icons/search-textbox.svg                       (icons/search-textbox.svg)
--- a/toolkit/themes/osx/global/menu.css
+++ b/toolkit/themes/osx/global/menu.css
@@ -162,8 +162,38 @@ menulist > menupopup > menuitem[selected
 
 /* ::::: menuseparator ::::: */
 
 menuseparator {
   -moz-appearance: menuseparator;
   margin: 5px 0;
   padding: 1px 0;
 }
+
+/* ::::: scroll buttons :::::*/
+
+.popup-internal-box:not(:-moz-lwtheme)::part(scrollbutton-up),
+.popup-internal-box:not(:-moz-lwtheme)::part(scrollbutton-down) {
+  position: relative;
+  /* Here we're using a little magic.
+   * The arrow button is supposed to overlay the scrollbox, blocking
+   * everything under it from reaching the screen. However, the menu background
+   * is slightly transparent, so how can we block something completely without
+   * messing up the transparency? It's easy: The native theming of the
+   * "menuitem" appearance uses CGContextClearRect before drawing, which
+   * clears everything under it.
+   * Without help from native theming this effect wouldn't be achievable.
+   */
+  -moz-appearance: menuitem;
+}
+
+.popup-internal-box:not(:-moz-lwtheme)::part(scrollbutton-up) {
+  margin-bottom: -20px;
+}
+
+.popup-internal-box:not(:-moz-lwtheme)::part(scrollbutton-down) {
+  margin-top: -20px;
+}
+
+.popup-internal-box:not(:-moz-lwtheme)[scrolledtostart="true"]::part(scrollbutton-up),
+.popup-internal-box:not(:-moz-lwtheme)[scrolledtoend="true"]::part(scrollbutton-down) {
+  visibility: collapse;
+}
deleted file mode 100644
--- a/toolkit/themes/osx/global/scrollbox.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/* 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/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-arrowscrollbox[scrolledtoend=true]::part(arrowscrollbox-overflow-end-indicator),
-arrowscrollbox[scrolledtostart=true]::part(arrowscrollbox-overflow-start-indicator),
-arrowscrollbox[notoverflowing=true]::part(scrollbutton-up),
-arrowscrollbox[notoverflowing=true]::part(scrollbutton-down) {
-  visibility: collapse;
-}
-
-/* Horizontal enabled */
-.scrollbutton-up[orient="horizontal"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-lft-sharp.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down[orient="horizontal"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-rit-sharp.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-/* Horizontal disabled */
-.scrollbutton-up[orient="horizontal"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down[orient="horizontal"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-/* Vertical enabled */
-.scrollbutton-up:not([orient="horizontal"]) {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up-sharp.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down:not([orient="horizontal"]) {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-sharp.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-/* Vertical disabled */
-.scrollbutton-up[disabled="true"]:not([orient="horizontal"]) {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down[disabled="true"]:not([orient="horizontal"]) {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-up > .toolbarbutton-text,
-.scrollbutton-down > .toolbarbutton-text {
-  display: none;
-}
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -20,16 +20,17 @@ toolkit.jar:
   skin/classic/global/aboutRights.css                      (../../shared/aboutRights.css)
   skin/classic/global/aboutLicense.css                     (../../shared/aboutLicense.css)
   skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
   skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/numberinput.css                      (../../shared/numberinput.css)
   skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
+* skin/classic/global/scrollbox.css                        (../../shared/scrollbox.css)
   skin/classic/global/icons/arrow-left.svg                 (../../shared/icons/arrow-left.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)
   skin/classic/global/icons/check.svg                      (../../shared/icons/check.svg)
   skin/classic/global/icons/check-partial.svg              (../../shared/icons/check-partial.svg)
   skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
   skin/classic/global/icons/search.svg                     (../../shared/icons/search.svg)
rename from toolkit/themes/windows/global/scrollbox.css
rename to toolkit/themes/shared/scrollbox.css
--- a/toolkit/themes/windows/global/scrollbox.css
+++ b/toolkit/themes/shared/scrollbox.css
@@ -6,97 +6,50 @@
 
 arrowscrollbox[scrolledtoend=true]::part(arrowscrollbox-overflow-end-indicator),
 arrowscrollbox[scrolledtostart=true]::part(arrowscrollbox-overflow-start-indicator),
 arrowscrollbox[notoverflowing=true]::part(scrollbutton-up),
 arrowscrollbox[notoverflowing=true]::part(scrollbutton-down) {
   visibility: collapse;
 }
 
-/* Add some space at the top because there are no headers in menupopups of
- the bookmarks menu. */
-arrowscrollbox.in-bookmarks-menu::part(scrollbox) {
-  padding-top: 4px;
-}
-
-/*
- * Scroll arrows
- */
+/* Scroll arrows */
 
-/* Horizontal enabled */
-.scrollbutton-up[orient="horizontal"],
-.scrollbutton-down:-moz-locale-dir(rtl)[orient="horizontal"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down[orient="horizontal"],
-.scrollbutton-up:-moz-locale-dir(rtl)[orient="horizontal"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
-  -moz-image-region: auto; /* cut off inheritance */
+.scrollbutton-up,
+.scrollbutton-down {
+  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-dropdown-12.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 1;
+  padding: 2px;
 }
 
- /* Horizontal disabled */
-.scrollbutton-up[orient="horizontal"][disabled="true"],
-.scrollbutton-down:-moz-locale-dir(rtl)[orient="horizontal"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down[orient="horizontal"][disabled="true"],
-.scrollbutton-up:-moz-locale-dir(rtl)[orient="horizontal"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
+.scrollbutton-up[disabled="true"],
+.scrollbutton-down[disabled="true"] {
+  fill-opacity: 0.4;
 }
 
-/* Vertical enabled */
-.scrollbutton-up {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
-  -moz-image-region: auto; /* cut off inheritance */
+.scrollbutton-up[orient="horizontal"],
+.scrollbutton-down[orient="horizontal"] {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
 }
 
-.scrollbutton-down {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
-  -moz-image-region: auto; /* cut off inheritance */
+.scrollbutton-up > .toolbarbutton-icon {
+  transform: scaleY(-1);
 }
 
-/* Vertical disabled */
-.scrollbutton-up[disabled="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.scrollbutton-down[disabled="true"] {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
+.scrollbutton-down:-moz-locale-dir(ltr)[orient="horizontal"] > .toolbarbutton-icon,
+.scrollbutton-up:-moz-locale-dir(rtl)[orient="horizontal"] > .toolbarbutton-icon {
+  transform: scaleX(-1);
 }
 
 .scrollbutton-up > .toolbarbutton-text,
 .scrollbutton-down > .toolbarbutton-text {
   display: none;
 }
 
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  margin-top: 1px;
-  margin-bottom: 2px;
-  margin-inline-start: 1px;
-  margin-inline-end: 2px;
-}
-
+%ifndef XP_MACOSX
 arrowscrollbox:not([clicktoscroll="true"])::part(scrollbutton-up),
 arrowscrollbox:not([clicktoscroll="true"])::part(scrollbutton-down) {
   -moz-appearance: none;
-  border: 1px solid transparent;
-  padding: 1px;
 }
-
-arrowscrollbox:not([clicktoscroll="true"]):not([scrolledtostart=true])::part(scrollbutton-up):hover,
-arrowscrollbox:not([clicktoscroll="true"]):not([scrolledtoend=true])::part(scrollbutton-down):hover {
-  margin: 1px;
-  border: 1px inset ThreeDFace;
-  padding-top: 2px;
-  padding-bottom: 1px;
-  padding-inline-start: 2px;
-  padding-inline-end: 1px;
-}
+%endif
deleted file mode 100644
index 222c7664e050cd89d3fe8e8691392237dc5d4972..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 49c5b3fb553f4bdc5d61ccb26291f8beb38913e2..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index f209383cc9c8a6b469ff83623e9f9ddbf8aabe9c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 7b0e07b16901f1b08dbf1f3edeae60f9a6e0392c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 3abf3ad50dafbed44bde07bc04705717c430f7ff..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2b25b229a664000aac8230ee36e09762a5964ba0..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -17,31 +17,24 @@ toolkit.jar:
   skin/classic/global/textbox.css
   skin/classic/global/commonDialog.css
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/netError.css
 * skin/classic/global/notification.css
   skin/classic/global/printPageSetup.css
   skin/classic/global/richlistbox.css
-  skin/classic/global/scrollbox.css
   skin/classic/global/splitter.css
   skin/classic/global/toolbar.css
   skin/classic/global/toolbarbutton.css
   skin/classic/global/tooltip.css
 * skin/classic/global/tree.css
 * skin/classic/global/alerts/alert.css                     (alerts/alert.css)
-  skin/classic/global/arrow/arrow-lft.gif                  (arrow/arrow-lft.gif)
-  skin/classic/global/arrow/arrow-lft-dis.gif              (arrow/arrow-lft-dis.gif)
-  skin/classic/global/arrow/arrow-rit.gif                  (arrow/arrow-rit.gif)
-  skin/classic/global/arrow/arrow-rit-dis.gif              (arrow/arrow-rit-dis.gif)
   skin/classic/global/arrow/arrow-up.gif                   (arrow/arrow-up.gif)
-  skin/classic/global/arrow/arrow-up-dis.gif               (arrow/arrow-up-dis.gif)
   skin/classic/global/arrow/arrow-dn.gif                   (arrow/arrow-dn.gif)
-  skin/classic/global/arrow/arrow-dn-dis.gif               (arrow/arrow-dn-dis.gif)
   skin/classic/global/dirListing/folder.png                (dirListing/folder.png)
   skin/classic/global/dirListing/up.png                    (dirListing/up.png)
   skin/classic/global/icons/blocklist_favicon.png          (icons/blocklist_favicon.png)
   skin/classic/global/icons/Error.png                      (icons/Error.png)
   skin/classic/global/icons/collapse.png                   (icons/collapse.png)
   skin/classic/global/icons/expand.png                     (icons/expand.png)
   skin/classic/global/icons/Landscape.png                  (icons/Landscape.png)
   skin/classic/global/icons/Portrait.png                   (icons/Portrait.png)