From 975e778d7539e61ded1a07eee82d660a10ff4722 Mon Sep 17 00:00:00 2001
From: Rodrigo Silveira <rsilveira@mozilla.com>
Date: Thu, 30 May 2013 15:26:25 -0700
Subject: [PATCH] Bug 775718 - Full scrollbars when using a mouse r=mbrubeck

--HG--
extra : rebase_source : 832f3c9109d2101439ace8cb80413dc5f0dd20e9
---
 browser/metro/base/content/browser.xul | 42 +++++++-------
 browser/metro/base/content/cursor.css  |  5 ++
 browser/metro/theme/browser.css        | 10 +++-
 browser/metro/theme/content.css        | 77 --------------------------
 4 files changed, 34 insertions(+), 100 deletions(-)

diff --git a/browser/metro/base/content/browser.xul b/browser/metro/base/content/browser.xul
index 677e63bd660..028d40f02e1 100644
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -196,26 +196,26 @@
         <hbox id="start-container" flex="1" observes="bcast_windowState" class="meta content-height content-width">
           <!-- portrait/landscape/filled view -->
           <hbox id="start" class="start-page" flex="1" observes="bcast_windowState">
-            <scrollbox id="start-scrollbox" orient="horizontal" flex="1">
-            <vbox id="start-topsites" class="meta-section">
-              <label class="meta-section-title" value="&startTopSitesHeader.label;"/>
-              <richgrid id="start-topsites-grid" rows="3" columns="3" seltype="multiple" flex="1"/>
-            </vbox>
-            <vbox id="start-bookmarks" class="meta-section">
-              <label class="meta-section-title" value="&startBookmarksHeader.label;"
-                onclick="PanelUI.show('bookmarks-container');"/>
-              <richgrid id="start-bookmarks-grid" seltype="multiple" flex="1"/>
-            </vbox>
-            <vbox id="start-history" class="meta-section">
-              <label class="meta-section-title" value="&startHistoryHeader.label;"
-                onclick="PanelUI.show('history-container');"/>
-              <richgrid id="start-history-grid" seltype="multiple" flex="1"/>
-            </vbox>
-            <vbox id="start-remotetabs" class="meta-section">
-              <label class="meta-section-title" value="&startRemoteTabsHeader.label;"
-                onclick="PanelUI.show('remotetabs-container');"/>
-              <richgrid id="start-remotetabs-grid" seltype="multiple" flex="1"/>
-            </vbox>
+            <scrollbox id="start-scrollbox" orient="horizontal" observes="bcast_preciseInput" flex="1">
+              <vbox id="start-topsites" class="meta-section">
+                <label class="meta-section-title" value="&startTopSitesHeader.label;"/>
+                <richgrid id="start-topsites-grid" rows="3" columns="3" seltype="multiple" flex="1"/>
+              </vbox>
+              <vbox id="start-bookmarks" class="meta-section">
+                <label class="meta-section-title" value="&startBookmarksHeader.label;"
+                  onclick="PanelUI.show('bookmarks-container');"/>
+                <richgrid id="start-bookmarks-grid" seltype="multiple" flex="1"/>
+              </vbox>
+              <vbox id="start-history" class="meta-section">
+                <label class="meta-section-title" value="&startHistoryHeader.label;"
+                  onclick="PanelUI.show('history-container');"/>
+                <richgrid id="start-history-grid" seltype="multiple" flex="1"/>
+              </vbox>
+              <vbox id="start-remotetabs" class="meta-section">
+                <label class="meta-section-title" value="&startRemoteTabsHeader.label;"
+                  onclick="PanelUI.show('remotetabs-container');"/>
+                <richgrid id="start-remotetabs-grid" seltype="multiple" flex="1"/>
+              </vbox>
             </scrollbox>
           </hbox>
           <!-- snapped view -->
@@ -240,7 +240,7 @@
 
       <!-- Content viewport -->
       <stack id="content-viewport">
-        <deck id="browsers" flex="1"/>
+        <deck id="browsers" flex="1" observes="bcast_preciseInput"/>
         <box id="vertical-scroller" class="scroller" orient="vertical" end="0" top="0"/>
         <box id="horizontal-scroller" class="scroller" orient="horizontal" left="0" bottom="0"/>
       </stack>
diff --git a/browser/metro/base/content/cursor.css b/browser/metro/base/content/cursor.css
index 03a7795079b..b8f15679dcc 100644
--- a/browser/metro/base/content/cursor.css
+++ b/browser/metro/base/content/cursor.css
@@ -17,3 +17,8 @@ html|*:-moz-system-metric(touch-enabled) {
 select option, select optgroup {
   pointer-events: none;
 }
+
+/* Style the scrollbars */
+html xul|scrollbar {
+  display: none;
+}
diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css
index 8b89103f92f..7f44df434c3 100644
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -662,8 +662,10 @@ setting[type="radio"] > vbox {
   display: -moz-box;
 }
 
-#start-scrollbox {
-  overflow: hidden;
+#start-scrollbox[input="precise"] {
+  overflow-x: scroll;
+  /* Move scrollbar above toolbar, discount padding added by .meta in #start-container */
+  margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
 }
 
 /* if autocomplete is set, hide both start pages,
@@ -989,6 +991,10 @@ setting[type="radio"] > vbox {
   min-width: @scroller_minimum@;
 }
 
+#browsers[input="imprecise"] browser {
+  overflow: hidden;
+}
+
 /* Text selection handles */
 
 #selectionhandle-mark1,
diff --git a/browser/metro/theme/content.css b/browser/metro/theme/content.css
index 849f5270dd9..9eeef3b2050 100644
--- a/browser/metro/theme/content.css
+++ b/browser/metro/theme/content.css
@@ -12,83 +12,6 @@
   outline-offset: -2px;
 }
 
-/* Style the scrollbars */
-html xul|scrollbar {
-  display: none;
-}
-
-xul|window xul|scrollbar {
-  display: block;
-}
-
-xul|window 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;
-  border: 0px solid transparent !important;
-}
-
-xul|window xul|scrollbar[orient="vertical"]:-moz-locale-dir(rtl) {
-  margin-left: 2px;
-  margin-right: -10px;
-}
-
-xul|window xul|scrollbar[orient="vertical"] xul|thumb {
-  max-width: 6px !important;
-  min-width: 6px !important;
-}
-
-xul|window 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;
-  border: 0px solid transparent !important;
-}
-
-xul|window xul|scrollbar[orient="horizontal"] xul|thumb {
-  max-height: 6px !important;
-  min-height: 6px !important;
-}
-
-xul|window xul|*[panning] xul|scrollbar {
-  opacity: 1;
-}
-
-xul|window xul|scrollbox {
-  overflow-y: scroll;
-  overflow-x: scroll;
-}
-
-xul|window xul|scrollbarbutton {
-  min-height: 8px !important;
-  min-width: 8px !important;
-  -moz-appearance: none !important;
-  visibility: hidden;
-}
-
-xul|window xul|scrollbarbutton[sbattr="scrollbar-up-top"],
-xul|window xul|scrollbarbutton[sbattr="scrollbar-bottom-top"] {
-  display: none;
-}
-
-xul|window xul|scrollbar 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;
-  border-radius: 3px;
-}
-
 select:not([size]):not([multiple]) > xul|scrollbar,
 select[size="1"] > xul|scrollbar,
 select:not([size]):not([multiple]) xul|scrollbarbutton,