Bug 1376397 - Disable scroll buttons if there's space between the first or last element and the scrollbox edge. r?gijs draft
authorDão Gottwald <dao@mozilla.com>
Fri, 30 Jun 2017 00:56:21 +0200
changeset 602352 60670f9efc879cc0c726981802571e4f45dfd11a
parent 602051 f3483af8ecf997453064201c49c48a682c7f3c29
child 635566 66e3b0a059794d22acd77925c84f0ce8fadbfe64
push id66396
push userdgottwald@mozilla.com
push dateThu, 29 Jun 2017 22:56:40 +0000
reviewersgijs
bugs1376397
milestone56.0a1
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");
               }