diff -r 3a9197ec8297 chrome/content/bindings.xml
--- a/chrome/content/bindings.xml	Fri Oct 08 07:22:03 2010 +0200
+++ b/chrome/content/bindings.xml	Fri Oct 08 09:17:20 2010 +0200
@@ -86,22 +86,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/>
diff -r 3a9197ec8297 chrome/content/browser.js
--- a/chrome/content/browser.js	Fri Oct 08 07:22:03 2010 +0200
+++ b/chrome/content/browser.js	Fri Oct 08 09:17:20 2010 +0200
@@ -1044,27 +1044,34 @@ var Browser = {
         }
         break;
     }
   }
 };
 
 
 Browser.MainDragger = function MainDragger() {
+  this._contentStack = document.getElementById("content-stack");
+  this._verticalScrollbar = document.getElementById("vertical-scroller");
+  this._horizontalScrollbar = document.getElementById("horizontal-scroller");
 };
 
 Browser.MainDragger.prototype = {
   isDraggable: function isDraggable(target, scroller) {
     return { x: true, y: true };
   },
 
   dragStart: function dragStart(clientX, clientY, target, scroller) {
+    this._sizeScrollbars();
+    this._updateScrollbars();
+    this._contentStack.setAttribute("panning", "true");
   },
 
   dragStop: function dragStop(dx, dy, scroller) {
+    this._contentStack.removeAttribute("panning");
     this.dragMove(Browser.snapSidebars(), 0, scroller);
     Browser.tryUnfloatToolbar();
   },
 
   dragMove: function dragMove(dx, dy, scroller) {
     let doffset = new Point(dx, dy);
 
     // First calculate any panning to take sidebars out of view
@@ -1074,16 +1081,17 @@ Browser.MainDragger.prototype = {
     this._panScroller(Browser.contentScrollboxScroller, doffset);
 
     // Any leftover panning in doffset would bring controls into view. Add to sidebar
     // away panning for the total scroll offset.
     doffset.add(panOffset);
     Browser.tryFloatToolbar(doffset.x, 0);
     this._panScroller(Browser.controlsScrollboxScroller, doffset);
     this._panScroller(Browser.pageScrollboxScroller, doffset);
+    this._updateScrollbars();
 
     return !doffset.equals(dx, dy);
   },
 
   /** Return offset that pans controls away from screen. Updates doffset with leftovers. */
   _panControlsAwayOffset: function(doffset) {
     let x = 0, y = 0, rect;
 
@@ -1106,16 +1114,33 @@ Browser.MainDragger.prototype = {
   },
 
   /** Pan scroller by the given amount. Updates doffset with leftovers. */
   _panScroller: function _panScroller(scroller, doffset) {
     let { x: x0, y: y0 } = Browser.getScrollboxPosition(scroller);
     scroller.scrollBy(doffset.x, doffset.y);
     let { x: x1, y: y1 } = Browser.getScrollboxPosition(scroller);
     doffset.subtract(x1 - x0, y1 - y0);
+  },
+
+  _sizeScrollbars: function _sizeScrollbars() {
+    let browser = Browser.selectedBrowser;
+    let width = window.innerWidth, height = window.innerHeight;
+    this._widthRatio = width / (browser.contentDocumentWidth * browser.scale);
+    this._heightRatio = height / (browser.contentDocumentHeight * browser.scale);
+
+    this._horizontalScrollbar.style.width = width * this._widthRatio + "px";
+    this._verticalScrollbar.style.height = height * this._heightRatio + "px";
+  },
+
+  _updateScrollbars: function _updateScrollbars() {
+    let browser = Browser.selectedBrowser;
+    let { x: scrollX, y: scrollY } = browser.getPosition();
+    this._horizontalScrollbar.left = scrollX * this._widthRatio;
+    this._verticalScrollbar.top = scrollY * this._heightRatio;
   }
 };
 
 
 function nsBrowserAccess()
 {
 }
 
diff -r 3a9197ec8297 chrome/content/browser.xul
--- a/chrome/content/browser.xul	Fri Oct 08 07:22:03 2010 +0200
+++ b/chrome/content/browser.xul	Fri Oct 08 09:17:20 2010 +0200
@@ -219,17 +219,17 @@
           <hbox id="tabs-controls">
             <toolbarbutton id="newtab-button" class="button-image" 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" class="button-image" oncommand="BrowserUI.switchTask();"/>
 #endif
@@ -275,16 +275,18 @@
             <notificationbox id="notifications" class="window-width"/>
 
             <!-- Content viewport -->
             <vbox id="content-viewport" class="window-width window-height">
               <stack id="content-stack" flex="1">
               <!-- Content viewport -->
                 <deck id="browsers" flex="1"/>
                 <html:canvas id="content-overlay" style="display: none; z-index: 1000;" left="0" top="0"/>
+                <box id="vertical-scroller" style="z-index: 1000;" right="0" top="0"/>
+                <box id="horizontal-scroller" style="z-index: 1000;" left="0" bottom="0"/>
                 <html:div id="inputhandler-overlay" style="z-index: 1001" tabindex="-1"/>
               </stack>
               <box id="content-navigator-spacer" hidden="true"/>
             </vbox>
           </vbox>
         </scrollbox>
 
         <!-- popup for content navigator helper -->
@@ -505,17 +507,17 @@
         <toolbarbutton type="radio" group="awesome-header" label="&bookmarksHeader.label;" command="cmd_bookmarks" class="choice-bookmarks show-text"/>
         <toolbarbutton type="radio" group="awesome-header" label="&historyHeader.label;" command="cmd_history" class="choice-history show-text"/>
 #ifdef MOZ_SERVICES_SYNC
         <toolbarbutton type="radio" group="awesome-header" label="&desktopHeader.label;" command="cmd_remoteTabs" class="choice-remotetabs show-text"/>
 #endif
       </hbox>
 
       <!-- titlebar autocomplete results -->
-      <vbox id="popup_autocomplete" class="panel-dark" flex="1" onshow="BrowserUI._edit.showHistoryPopup();" hidden="true"/>
+      <vbox id="popup_autocomplete" onshow="BrowserUI._edit.showHistoryPopup();" flex="1" hidden="true"/>
       <placelist id="bookmarks-items" type="bookmarks" onopen="BookmarkList.openLink(event);" onhide="BrowserUI.updateStar();" flex="1" hidden="true"/>
       <historylist id="history-items" onopen="HistoryList.openLink(event);" flex="1" hidden="true"/>
       <remotetabslist id="remotetabs-items" onopen="RemoteTabsList.openLink(event)" flex="1" hidden="true"/>
     </vbox>
 
     <vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">
       <label/>
     </vbox>
diff -r 3a9197ec8297 chrome/content/content.css
--- a/chrome/content/content.css	Fri Oct 08 07:22:03 2010 +0200
+++ b/chrome/content/content.css	Fri Oct 08 09:17:20 2010 +0200
@@ -48,32 +48,69 @@
   */
 }
 
 *:link:focus, *:visited:focus {
   outline-offset: -2px;
 }
 
 /* Style the scrollbars */
-xul|scrollbar {
+xul|scrollbar[orient="vertical"] {
   -moz-appearance: none !important;
-  display: none !important;
+  -moz-transition: opacity 3s ease;
+  opacity: 0;
+  position: relative;
+  margin-left: -12px;
+  min-width: 12px;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+xul|scrollbar[orient="horizontal"] {
+  -moz-appearance: none !important;
+  -moz-transition: opacity 3s ease;
+  opacity: 0;
+  position: relative;
+  min-height: 12px;
+  margin-top: -12px;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+xul|scrollbar[orient="vertical"] xul|thumb {
+  max-width: 8px !important;
+}
+
+xul|scrollbar[orient="horizontal"] xul|thumb {
+  max-height: 8px !important;
+}
+
+xul|*[panning="true"] xul|scrollbar {
+  -moz-transition: opacity 0.5s ease;
+  opacity: 1;
+}
+
+xul|scrollbox {
+  overflow-y: scroll;
+  overflow-x: scroll;
 }
 
 xul|scrollbarbutton {
   -moz-appearance: none !important;
   display: none !important;
 }
 
 xul|thumb {
-  min-width: 10px !important;
-  -moz-appearance: none !important;
-  background-color: gray !important;
-  border: 1px solid gray !important;
-  -moz-border-radius: 4px !important;
+  background-color: rgba(64, 64, 64, 0.3) !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(64, 64, 64, 0.2) !important;
+  -moz-border-radius: 6px;
 }
 
 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;
 }
diff -r 3a9197ec8297 chrome/content/input.js
--- a/chrome/content/input.js	Fri Oct 08 07:22:03 2010 +0200
+++ b/chrome/content/input.js	Fri Oct 08 09:17:20 2010 +0200
@@ -540,19 +540,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 = {};
diff -r 3a9197ec8297 themes/core/browser.css
--- a/themes/core/browser.css	Fri Oct 08 07:22:03 2010 +0200
+++ b/themes/core/browser.css	Fri Oct 08 09:17:20 2010 +0200
@@ -1700,8 +1700,36 @@ pageaction:hover:active > vbox > .pageac
   -moz-border-radius: 0 0 8px 8px;
 }
 
 /* Force any command tap to highlight */
 .context-command:hover:active {
   background: #8db8d8;
 }
 
+/* content scrollbars */
+#vertical-scroller,
+#horizontal-scroller {
+  opacity: 0;
+  background-color: rgba(64, 64, 64, 0.3) !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(64, 64, 64, 0.2) !important;
+  -moz-border-radius: 6px;
+}
+
+#vertical-scroller {
+  min-width: 8px;
+  min-height: 12px;
+}
+
+#horizontal-scroller {
+  min-height: 8px;
+  min-width: 12px;
+}
+
+[panning="true"] > #vertical-scroller,
+[panning="true"] > #horizontal-scroller {
+  opacity: 1;
+}
+