Bug 1376397 - Disable scroll buttons if there's space between the first or last element and the scrollbox edge. r=Gijs
authorDão Gottwald <dao@mozilla.com>
Fri, 30 Jun 2017 00:56:21 +0200
changeset 366834 6f8371e8ded2d4fc74bb128f67785c47c6df7ae9
parent 366833 301b5c60b39f35e72476a1209559247d6e108990
child 366835 f987b4c700061015d1aed3743c8dc10021dc9b6c
push id45762
push userdgottwald@mozilla.com
push dateFri, 30 Jun 2017 09:44:21 +0000
treeherderautoland@6f8371e8ded2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1376397
milestone56.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 1376397 - Disable scroll buttons if there's space between the first or last element and the scrollbox edge. r=Gijs MozReview-Commit-ID: 33D1kIQDC7w
toolkit/content/widgets/scrollbox.xml
--- a/toolkit/content/widgets/scrollbox.xml
+++ b/toolkit/content/widgets/scrollbox.xml
@@ -181,24 +181,23 @@
           innerRect.left = outerRect.left - this._scrollbox.scrollLeft;
           innerRect.top = outerRect.top - this._scrollbox.scrollTop;
           innerRect.right = innerRect.left + this._scrollbox.scrollWidth;
           innerRect.bottom = innerRect.top + this._scrollbox.scrollHeight;
           return innerRect;
         ]]></getter>
       </property>
       <field name="scrollboxPaddingStart"><![CDATA[
-        parseFloat(window.getComputedStyle(this._scrollbox)[
-          this._isRTLScrollbox ? "paddingRight" : "paddingLeft"
-        ]);
+        this._isRTLScrollbox ? this.scrollboxPaddingRight : this.scrollboxPaddingLeft;
       ]]></field>
-      <field name="scrollboxPaddingEnd"><![CDATA[
-        parseFloat(window.getComputedStyle(this._scrollbox)[
-          this._isRTLScrollbox ? "paddingLeft" : "paddingRight"
-        ]);
+      <field name="scrollboxPaddingLeft"><![CDATA[
+        parseFloat(window.getComputedStyle(this._scrollbox).paddingLeft);
+      ]]></field>
+      <field name="scrollboxPaddingRight"><![CDATA[
+        parseFloat(window.getComputedStyle(this._scrollbox).paddingRight);
       ]]></field>
       <property name="scrollPosition">
         <getter><![CDATA[
           return this.orient == "vertical" ?
                  this._scrollbox.scrollTop :
                  this._scrollbox.scrollLeft;
         ]]></getter>
         <setter><![CDATA[
@@ -661,37 +660,37 @@
 
               let scrolledToStart = false;
               let scrolledToEnd = false;
 
               if (this.hasAttribute("notoverflowing")) {
                 scrolledToStart = true;
                 scrolledToEnd = true;
               } else {
-                let scrollboxPaddingStart = Math.round(this.scrollboxPaddingStart);
-                let scrollboxPaddingEnd = Math.round(this.scrollboxPaddingEnd);
-                let [start, end] = this._startEndProps;
+                let scrollboxPaddingLeft = Math.round(this.scrollboxPaddingLeft);
+                let scrollboxPaddingRight = Math.round(this.scrollboxPaddingRight);
+
+                let [leftOrTop, rightOrBottom] = this._startEndProps;
+                let leftOrTopEdge = ele => Math.round(this._boundsWithoutFlushing(ele)[leftOrTop]);
+                let rightOrBottomEdge = ele => Math.round(this._boundsWithoutFlushing(ele)[rightOrBottom]);
+
+                let elements = this._getScrollableElements();
+                let [leftOrTopElement, rightOrBottomElement] = [elements[0], elements[elements.length - 1]];
                 if (this._isRTLScrollbox) {
-                  [start, end] = [end, start];
-                  scrollboxPaddingStart = -scrollboxPaddingStart;
-                  scrollboxPaddingEnd = -scrollboxPaddingEnd;
+                  [leftOrTopElement, rightOrBottomElement] = [rightOrBottomElement, leftOrTopElement];
                 }
 
-                let scrollboxRect = this._boundsWithoutFlushing(this._scrollbox);
-                let elements = this._getScrollableElements();
-                let [firstElement, lastElement] = [elements[0], elements[elements.length - 1]];
-
-                if (firstElement &&
-                    Math.round(this._boundsWithoutFlushing(firstElement)[start]) - scrollboxPaddingStart ==
-                      Math.round(scrollboxRect[start])) {
-                  scrolledToStart = true;
-                } else if (lastElement &&
-                           Math.round(this._boundsWithoutFlushing(lastElement)[end]) + scrollboxPaddingEnd ==
-                             Math.round(scrollboxRect[end])) {
-                  scrolledToEnd = true;
+                if (leftOrTopElement &&
+                    leftOrTopEdge(leftOrTopElement) >= leftOrTopEdge(this._scrollbox) + scrollboxPaddingLeft) {
+                  scrolledToStart = !this._isRTLScrollbox;
+                  scrolledToEnd = this._isRTLScrollbox;
+                } else if (rightOrBottomElement &&
+                           rightOrBottomEdge(rightOrBottomElement) <= rightOrBottomEdge(this._scrollbox) - scrollboxPaddingRight) {
+                  scrolledToStart = this._isRTLScrollbox;
+                  scrolledToEnd = !this._isRTLScrollbox;
                 }
               }
 
               if (scrolledToEnd) {
                 this.setAttribute("scrolledtoend", "true");
               } else {
                 this.removeAttribute("scrolledtoend");
               }