Bug 515166 - Support scroll indicators in XUL richlistboxes and scrollboxes [r=mfinkle]
authorVivien Nicolas <21@vingtetun.org>
Wed, 15 Dec 2010 23:01:00 -0500
changeset 67128 b604caa9df23aa4ff15a2df54933a5f499ff8b8d
parent 67127 502f5ba01208f104e413dc583b0ef08b1c7d9f13
child 67129 389d2a7e3a0d4312ab71908e160a23827a5eecde
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs515166
Bug 515166 - Support scroll indicators in XUL richlistboxes and scrollboxes [r=mfinkle]
mobile/app/mobile.js
mobile/chrome/content/bindings.xml
mobile/chrome/content/browser.xul
mobile/chrome/content/content.css
mobile/chrome/content/input.js
--- a/mobile/app/mobile.js
+++ b/mobile/app/mobile.js
@@ -60,16 +60,19 @@ pref("zoom.maxPercent", 400);
 pref("toolkit.zoomManager.zoomValues", ".2,.3,.5,.67,.8,.9,1,1.1,1.2,1.33,1.5,1.7,2,2.4,3,4");
 
 // Device pixel to CSS px ratio, in percent. Set to -1 to calculate based on display density.
 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);
 
 /* cache prefs */
 pref("browser.cache.disk.enable", false);
 pref("browser.cache.disk.capacity", 0); // kilobytes
 pref("browser.cache.disk.smart_size.enabled", false);
 pref("browser.cache.disk.smart_size.first_run", false);
--- a/mobile/chrome/content/bindings.xml
+++ b/mobile/chrome/content/bindings.xml
@@ -163,22 +163,20 @@
           <xul:label class="autocomplete-item-tags" value="" xbl:inherits="value=tags"/>
           <xul:label class="autocomplete-item-badge" value="" xbl:inherits="value=badge"/>
         </xul:vbox>
       </xul:hbox>
     </content>
   </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/>
         <xul:autocompleteresult/>
         <xul:autocompleteresult/>
         <xul:autocompleteresult/>
         <xul:autocompleteresult/>
         <xul:autocompleteresult/>
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -223,17 +223,17 @@
           <hbox id="tabs-controls">
             <toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab"/>
           </hbox>
         </vbox>
       </vbox>
 
       <!-- 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">
               <box id="toolbar-moveable-container">
                 <toolbar id="toolbar-main" class="panel-dark window-width">
 #ifdef MOZ_PLATFORM_MAEMO
                   <toolbarbutton id="tool-app-switch" oncommand="BrowserUI.switchTask();"/>
 #endif
--- a/mobile/chrome/content/content.css
+++ b/mobile/chrome/content/content.css
@@ -48,32 +48,67 @@
   */
 }
 
 *:link:focus, *:visited:focus {
   outline-offset: -2px;
 }
 
 /* Style the scrollbars */
-xul|scrollbar {
+xul|scrollbar[orient="vertical"] {
+  -moz-appearance: 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;
-  display: 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 {
   -moz-appearance: none !important;
   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,
 select[size="1"] > xul|scrollbar,
 select:not([size]):not([multiple]) xul|scrollbarbutton,
 select[size="1"] xul|scrollbarbutton {
   display: block !important;
 }
--- a/mobile/chrome/content/input.js
+++ b/mobile/chrome/content/input.js
@@ -569,19 +569,22 @@ var ScrollUtils = {
   _defaultDragger: {
     isDraggable: function isDraggable(target, scroller) {
       let sX = {}, sY = {};
       scroller.getScrolledSize(sX, sY);
       let rect = target.getBoundingClientRect();
       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);
     },
 
     dragMove : function dragMove(dx, dy, scroller) {
       if (scroller.getPosition) {
         try {
 
           let oldX = {}, oldY = {};