Bug 1740578 - Bring back autoscroller shadow. r=emilio

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

toolkit/content/widgets/browser-custom-element.js

@@ -1275,7 +1275,9 @@
         return { autoscrollEnabled: false, usingApz: false };
       }
 
-      const POPUP_SIZE = 32;
+      // The popup size is 32px for the circle plus space for a 4px box-shadow
+      // on each side.
+      const POPUP_SIZE = 40;
       if (!this._autoScrollPopup) {
         this._autoScrollPopup = this._getAndMaybeCreateAutoScrollPopup();
         document.documentElement.appendChild(this._autoScrollPopup);

toolkit/themes/linux/global/global.css

@@ -20,11 +20,6 @@
   font: message-box;
 }
 
-.autoscroller::part(content) {
-  box-shadow: none;
-  margin: 0;
-}
-
 /* ::::: Alert icons :::::*/
 
 .message-icon {

toolkit/themes/shared/global.inc.css

@@ -164,13 +164,20 @@ xul|label[disabled="true"] {
   -moz-window-shadow: none;
 
   --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
-  --panel-border-color: transparent;
+  --panel-border-color: rgba(0,0,0,.4);
   --panel-padding: 0;
-  --panel-background: transparent no-repeat center / contain var(--autoscroll-background-image);
+  --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
   /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */
   pointer-events: none;
 }
 
+.autoscroller::part(content) {
+  border-radius: 100%;
+  background-clip: padding-box;
+  box-shadow: 0 0 4px rgba(0,0,0,.2);
+  margin: 4px;
+}
+
 .autoscroller[scrolldir="NS"] {
   --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
 }

toolkit/themes/shared/icons/autoscroll-horizontal.svg

@@ -1,9 +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" width="32" height="32">
-  <circle cx="16" cy="16" r="14" fill="#f9f9fa" fill-opacity=".8"/>
-  <path d="M16 31a15 15 0 1 1 15-15 15.017 15.017 0 0 1-15 15zm0-29a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2z" fill="#0c0c0d" fill-opacity=".6"/>
-  <path d="M10.707 11.293a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 0 0 1.414-1.414L7.414 16l3.293-3.293a1 1 0 0 0 0-1.414zm16 4l-4-4a1 1 0 0 0-1.414 1.414L24.586 16l-3.293 3.293a1 1 0 1 0 1.414 1.414l4-4a1 1 0 0 0 0-1.414z" fill="#0c0c0d" fill-opacity=".8"/>
-  <circle cx="16" cy="16" r="2" fill="#0c0c0d" fill-opacity=".6"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="10">
+  <path d="m 5.707,0.292 a 1,1 0 0 0 -1.414,0 L 0.293,4.288 a 1,1 0 0 0 0,1.412 L 4.293,9.695 a 1,1 0 0 0 1.414,-1.412 l -3.293,-3.289 3.293,-3.289 a 1,1 0 0 0 0,-1.412 z M 21.707,4.288 l -4,-4 a 1,1 0 0 0 -1.414,1.412 l 3.293,3.289 -3.293,3.289 a 1,1 0 1 0 1.414,1.412 l 4,-4 a 1,1 0 0 0 0,-1.412 z" fill="#0c0c0d" fill-opacity=".8"/>
+  <circle cx="11" cy="5" r="2" fill="#0c0c0d" fill-opacity=".6"/>
 </svg>

toolkit/themes/shared/icons/autoscroll-vertical.svg

@@ -1,9 +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" width="32" height="32">
-  <circle cx="16" cy="16" r="14" fill="#f9f9fa" fill-opacity=".8"/>
-  <path d="M16 31a15 15 0 1 1 15-15 15.017 15.017 0 0 1-15 15zm0-29a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2z" fill="#0c0c0d" fill-opacity=".6"/>
-  <path d="M19.293 21.293L16 24.586l-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414zm-2.586-16a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L16 7.414l3.293 3.293a1 1 0 0 0 1.414-1.414z" fill="#0c0c0d" fill-opacity=".8"/>
-  <circle cx="16" cy="16" r="2" fill="#0c0c0d" fill-opacity=".6"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="22">
+  <path d="m 8.280,16.293 -3.293,3.293 -3.293,-3.293 a 1,1 0 0 0 -1.414,1.414 l 4,4 a 1,1 0 0 0 1.414,0 l 4,-4 a 1,1 0 0 0 -1.414,-1.414 z M 5.694,0.293 a 1,1 0 0 0 -1.414,0 L 0.28,4.293 a 1,1 0 0 0 1.414,1.414 l 3.293,-3.293 3.293,3.293 a 1,1 0 0 0 1.414,-1.414 z" fill="#0c0c0d" fill-opacity=".8"/>
+  <circle cx="5" cy="11" r="2" fill="#0c0c0d" fill-opacity=".6"/>
 </svg>

toolkit/themes/shared/icons/autoscroll.svg

@@ -1,9 +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" width="32" height="32">
-  <circle cx="16" cy="16" r="14" fill="#f9f9fa" fill-opacity=".8"/>
-  <path d="M16 31a15 15 0 1 1 15-15 15.017 15.017 0 0 1-15 15zm0-29a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2z" fill="#0c0c0d" fill-opacity=".6"/>
-  <path d="M18.293 22.293L16 24.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414zm-1.586-17a1 1 0 0 0-1.414 0l-3 3a1 1 0 0 0 1.414 1.414L16 7.414l2.293 2.293a1 1 0 0 0 1.414-1.414zm-7 7a1 1 0 0 0-1.414 0l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L7.414 16l2.293-2.293a1 1 0 0 0 0-1.414zm17 3l-3-3a1 1 0 0 0-1.414 1.414L24.586 16l-2.293 2.293a1 1 0 1 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414z" fill="#0c0c0d" fill-opacity=".8"/>
-  <circle cx="16" cy="16" r="2" fill="#0c0c0d" fill-opacity=".6"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22">
+  <path d="m 13.293,17.293 -2.293,2.293 -2.293,-2.293 a 1,1 0 0 0 -1.414,1.414 l 3,3 a 1,1 0 0 0 1.414,0 l 3,-3 a 1,1 0 0 0 -1.414,-1.414 z m -1.586,-17 a 1,1 0 0 0 -1.414,0 L 7.293,3.293 a 1,1 0 0 0 1.414,1.414 l 2.293,-2.293 2.293,2.293 a 1,1 0 0 0 1.414,-1.414 z M 4.707,7.293 a 1,1 0 0 0 -1.414,0 L 0.293,10.293 a 1,1 0 0 0 0,1.414 l 3,3 a 1,1 0 0 0 1.414,-1.414 l -2.293,-2.293 2.293,-2.293 a 1,1 0 0 0 0,-1.414 z m 17,3 -3,-3 a 1,1 0 0 0 -1.414,1.414 l 2.293,2.293 -2.293,2.293 a 1,1 0 1 0 1.414,1.414 l 3,-3 a 1,1 0 0 0 0,-1.414 z" fill="#0c0c0d" fill-opacity=".8"/>
+  <circle cx="11" cy="11" r="2" fill="#0c0c0d" fill-opacity=".6"/>
 </svg>