Bug 1514498 - Hide rather than collapse scrollbar thumb when scrollbar is disabled. r=NeilDeakin, a=RyanVM
authorXidorn Quan <me@upsuper.org>
Thu, 10 Jan 2019 14:15:30 +0000
changeset 506657 7ddc13a7de8d8d42546f96b5a14379c4ca49dfde
parent 506656 80ab023e1d8eb9f1fbc7d26e3774ef9aebb7dcdb
child 506658 75bae5cabb1c83c4a0333663d1db9c4079130880
push id10501
push userryanvm@gmail.com
push dateSat, 12 Jan 2019 21:41:05 +0000
treeherdermozilla-beta@5b52f9f83004 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersNeilDeakin, RyanVM
bugs1514498
milestone65.0
Bug 1514498 - Hide rather than collapse scrollbar thumb when scrollbar is disabled. r=NeilDeakin, a=RyanVM Collapsing thumb causes frame of scrollbar to cache an incorrect pref size, which makes it not able to appear in certain cases. This patch changes it to use "visibility: hidden" instead so that the thumb is hidden but still contributes to the width of scrollbar. An alternative would be also change the code in nsScrollbarFrame to set something other than collapsed attribute instead, but I'm not sure whether doing that is any better than just adding a rule. We need the rule anyway regardless of what we set on the element. Differential Revision: https://phabricator.services.mozilla.com/D15244
layout/reftests/css-scrollbars/reftest.list
layout/reftests/css-scrollbars/scrollbar-thin-overflow-change-ref.html
layout/reftests/css-scrollbars/scrollbar-thin-overflow-change.html
toolkit/content/minimal-xul.css
--- a/layout/reftests/css-scrollbars/reftest.list
+++ b/layout/reftests/css-scrollbars/reftest.list
@@ -1,3 +1,4 @@
 default-preferences pref(layout.css.scrollbar-color.enabled,true)
 
 == viewport-scrollbar-color-change.html viewport-scrollbar-color-change-ref.html
+== scrollbar-thin-overflow-change.html scrollbar-thin-overflow-change-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-scrollbars/scrollbar-thin-overflow-change-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+#outer {
+  scrollbar-width: thin;
+  overflow: auto;
+  border: 5px solid black;
+  background: black;
+  width: 200px;
+  height: 200px;
+}
+#inner {
+  height: 300px;
+}
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-scrollbars/scrollbar-thin-overflow-change.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+#outer {
+  scrollbar-width: thin;
+  overflow: auto;
+  border: 5px solid black;
+  background: black;
+  width: 200px;
+  height: 400px;
+}
+#inner {
+  height: 300px;
+}
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<script>
+// Force a reflow
+document.body.offsetHeight;
+document.getElementById('outer').style.height = '200px';
+</script>
--- a/toolkit/content/minimal-xul.css
+++ b/toolkit/content/minimal-xul.css
@@ -110,16 +110,21 @@ resizer[dir="topright"] {
 scrollbar[orient="horizontal"] {
   direction: ltr;
 }
 
 thumb {
   display: -moz-box !important;
 }
 
+/* Don't collapse thumb when scrollbar is disabled. */
+thumb[collapsed="true"] {
+  visibility: hidden;
+}
+
 scrollbar, scrollbarbutton, scrollcorner, slider, thumb {
   -moz-user-select: none;
 }
 
 scrollcorner {
   display: -moz-box !important;
 }