Bug 1514498 - Hide rather than collapse scrollbar thumb when scrollbar is disabled. r=NeilDeakin
authorXidorn Quan <me@upsuper.org>
Thu, 10 Jan 2019 14:15:30 +0000
changeset 510432 15895cfafac18c606afcfac68d89cc4f3653d065
parent 510431 49be7aaa199c0be85ec2667c650d4627cfec84c1
child 510433 d5357c40725c706cb66e6ac7dce04f7821666c75
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersNeilDeakin
bugs1514498
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1514498 - Hide rather than collapse scrollbar thumb when scrollbar is disabled. r=NeilDeakin 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;
 }