Bug 515166 - Support scroll indicators in XUL richlistboxes and scrollboxes [r=mfinkle]

mobile/app/mobile.js

@@ -65,6 +65,9 @@ pref("browser.viewport.scaleRatio", -1);
 /* use custom widget for html:select */
 pref("ui.use_native_popup_windows", true);
 
+/* allow scrollbars to float above chrome ui */
+pref("ui.scrollbarsCanOverlapContent", 1);
+
 /* use long press to display a context menu */
 pref("ui.click_hold_context_menus", true);
 

mobile/chrome/content/bindings.xml

@@ -168,12 +168,10 @@
   </binding>
 
   <binding id="popup_autocomplete">
-    <content orient="vbox" class="autocomplete-box" flex="1">
+    <content class="autocomplete-box" flex="1">
       <!-- 24 child items, to match browser.urlbar.maxRichResults -->
-      <xul:scrollbox orient="vertical"
-                     class="autocomplete-items"
-                     anonid="autocomplete-items"
-                     flex="1000">
+      <xul:scrollbox anonid="autocomplete-items"
+                     class="autocomplete-items" orient="vertical" flex="1">
         <xul:autocompleteresult/>
         <xul:autocompleteresult/>
         <xul:autocompleteresult/>

mobile/chrome/content/browser.xul

@@ -228,7 +228,7 @@
 
       <!-- Page Area -->
       <stack class="window-width window-height">
-        <scrollbox id="page-scrollbox" class="window-width window-height" style="overflow: hidden;">
+        <scrollbox id="page-scrollbox" class="window-width window-height">
           <vbox>
             <!-- Main Toolbar -->
             <box id="toolbar-container" class="panel-dark toolbar-height">

mobile/chrome/content/content.css

@@ -53,9 +53,42 @@
 }
 
 /* Style the scrollbars */
-xul|scrollbar {
+xul|scrollbar[orient="vertical"] {
   -moz-appearance: none !important;
-  display: none !important;
+  opacity: 0;
+  position: relative;
+  margin-left: -8px;
+  min-width: 8px;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+xul|scrollbar[orient="horizontal"] {
+  -moz-appearance: none !important;
+  opacity: 0;
+  position: relative;
+  min-height: 8px;
+  margin-top: -8px;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+xul|*[panning="true"] xul|scrollbar {
+  opacity: 1;
+}
+
+
+xul|scrollbar[orient="vertical"] xul|thumb {
+  max-width: 6px !important;
+}
+
+xul|scrollbar[orient="horizontal"] xul|thumb {
+  max-height: 6px !important;
+}
+
+xul|scrollbox {
+  overflow-y: scroll;
+  overflow-x: scroll;
 }
 
 xul|scrollbarbutton {
@@ -63,12 +96,14 @@ xul|scrollbarbutton {
   display: none !important;
 }
 
-xul|scrollbarbutton > xul|thumb {
-  min-width: 10px !important;
-  -moz-appearance: none !important;
-  background-color: gray !important;
-  border: 1px solid gray !important;
-  -moz-border-radius: 4px !important;
+xul|thumb {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  -moz-border-top-colors: none !important;
+  -moz-border-bottom-colors: none !important;
+  -moz-border-right-colors: none !important;
+  -moz-border-left-colors: none !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  -moz-border-radius: 3px;
 }
 
 select:not([size]):not([multiple]) > xul|scrollbar,

mobile/chrome/content/input.js

@@ -574,9 +574,12 @@ var ScrollUtils = {
       return { x: sX.value > rect.width, y: sY.value > rect.height };
     },
 
-    dragStart: function dragStart(cx, cy, target, scroller) {},
+    dragStart: function dragStart(cx, cy, target, scroller) {
+      scroller.element.setAttribute("panning", "true");
+    },
 
     dragStop : function dragStop(dx, dy, scroller) {
+      scroller.element.removeAttribute("panning");
       return this.dragMove(dx, dy, scroller);
     },