Circular autoscroll popup on supported platforms r=CTho,ajschult sr=jag

suite/common/utilityOverlay.js

@@ -604,6 +604,12 @@ function startScrolling(event)
           = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
     gAutoScrollPopup = document.createElementNS(XUL_NS, "popup");
     gAutoScrollPopup.id = "autoscroller";
+    if (screen.colorDepth > 8) { // need high colour for transparency
+      // Exclude second-rate platforms
+      gAutoScrollPopup.setAttribute("transparent", !/BeOS|Mac|OS\/2|Photon/.test(navigator.appVersion));
+      // Enable translucency on W2K+ (but not WinNT4.0)
+      gAutoScrollPopup.setAttribute("translucent", /^Windows NT /.test(navigator.oscpu));
+    }
     gAutoScrollPopup.addEventListener("popuphidden", stopScrolling, true);
     document.documentElement.appendChild(gAutoScrollPopup);
   }

themes/classic/communicator/communicator.css

@@ -107,11 +107,39 @@
   border: 0px;
   margin: -14px;
   padding: 0px;
-  background-image: url("chrome://communicator/skin/icons/autoscroll.gif");
+  background-image: url("chrome://communicator/skin/icons/autoscroll.png");
+  background-color: transparent;
+  -moz-appearance: none;
 }
+
 #autoscroller[scrolldir="NS"] {
-  background-image: url("chrome://communicator/skin/icons/autoscroll-ns.gif");
+  background-position: left center;
 }
+
 #autoscroller[scrolldir="EW"] {
-  background-image: url("chrome://communicator/skin/icons/autoscroll-ew.gif");
+  background-position: left bottom;
+}
+
+#autoscroller[transparent="true"] {
+  background-position: center top;
+}
+
+#autoscroller[transparent="true"][scrolldir="NS"] {
+  background-position: center center;
+}
+
+#autoscroller[transparent="true"][scrolldir="EW"] {
+  background-position: center bottom;
+}
+
+#autoscroller[translucent="true"] {
+  background-position: right top;
+}
+
+#autoscroller[translucent="true"][scrolldir="NS"] {
+  background-position: right center;
+}
+
+#autoscroller[translucent="true"][scrolldir="EW"] {
+  background-position: right bottom;
 }

themes/classic/jar.mn

@@ -72,9 +72,7 @@ classic.jar:
   skin/classic/communicator/brand/throbber-anim.gif                     (communicator/brand/throbber-anim.gif)
   skin/classic/communicator/brand/throbber16-single.gif                 (communicator/brand/throbber16-single.gif)
   skin/classic/communicator/brand/throbber16-anim.gif                   (communicator/brand/throbber16-anim.gif)
-  skin/classic/communicator/icons/autoscroll.gif                        (communicator/icons/autoscroll.gif)
-  skin/classic/communicator/icons/autoscroll-ns.gif                     (communicator/icons/autoscroll-ns.gif)
-  skin/classic/communicator/icons/autoscroll-ew.gif                     (communicator/icons/autoscroll-ew.gif)
+  skin/classic/communicator/icons/autoscroll.png                        (communicator/icons/autoscroll.png)
   skin/classic/communicator/icons/offline.gif                           (communicator/icons/offline.gif)
   skin/classic/communicator/icons/online.gif                            (communicator/icons/online.gif)
   skin/classic/communicator/icons/search.png                            (communicator/icons/search.png)

themes/modern/communicator/communicator.css

@@ -102,11 +102,38 @@
   border: 0px;
   margin: -14px;
   padding: 0px;
-  background-image: url("chrome://communicator/skin/icons/autoscroll.gif");
+  background-image: url("chrome://communicator/skin/icons/autoscroll.png");
+  background-color: transparent;
 }
+
 #autoscroller[scrolldir="NS"] {
-  background-image: url("chrome://communicator/skin/icons/autoscroll-ns.gif");
+  background-position: left center;
 }
+
 #autoscroller[scrolldir="EW"] {
-  background-image: url("chrome://communicator/skin/icons/autoscroll-ew.gif");
+  background-position: left bottom;
+}
+
+#autoscroller[transparent="true"] {
+  background-position: center top;
+}
+
+#autoscroller[transparent="true"][scrolldir="NS"] {
+  background-position: center center;
+}
+
+#autoscroller[transparent="true"][scrolldir="EW"] {
+  background-position: center bottom;
+}
+
+#autoscroller[translucent="true"] {
+  background-position: right top;
+}
+
+#autoscroller[translucent="true"][scrolldir="NS"] {
+  background-position: right center;
+}
+
+#autoscroller[translucent="true"][scrolldir="EW"] {
+  background-position: right bottom;
 }

themes/modern/jar.mn

@@ -40,9 +40,7 @@ modern.jar:
   skin/modern/communicator/directory/file-folder-open.gif          (communicator/directory/file-folder-open.gif)
   skin/modern/communicator/directory/file-icon.gif                 (communicator/directory/file-icon.gif)
   skin/modern/communicator/directory/directory.css                 (communicator/directory/directory.css)
-  skin/modern/communicator/icons/autoscroll.gif                    (communicator/icons/autoscroll.gif)
-  skin/modern/communicator/icons/autoscroll-ns.gif                 (communicator/icons/autoscroll-ns.gif)
-  skin/modern/communicator/icons/autoscroll-ew.gif                 (communicator/icons/autoscroll-ew.gif)
+  skin/modern/communicator/icons/autoscroll.png                    (communicator/icons/autoscroll.png)
   skin/modern/communicator/icons/loading.gif                       (communicator/icons/loading.gif)
   skin/modern/communicator/icons/lock-broken.gif                   (communicator/icons/lock-broken.gif)
   skin/modern/communicator/icons/lock-insecure.gif                 (communicator/icons/lock-insecure.gif)