Add m-esr52 at 52.6.0

1 files changed, 908 insertions, 0 deletions

diff --git a/toolkit/content/widgets/scrollbox.xml b/toolkit/content/widgets/scrollbox.xml
new file mode 100644
index 000000000..ff57a5911
--- /dev/null
+++ b/toolkit/content/widgets/scrollbox.xml
@@ -0,0 +1,908 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<bindings id="arrowscrollboxBindings"
+   xmlns="http://www.mozilla.org/xbl"
+   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <binding id="scrollbox-base" extends="chrome://global/content/bindings/general.xml#basecontrol">
+    <resources>
+      <stylesheet src="chrome://global/skin/scrollbox.css"/>
+    </resources>
+  </binding>
+
+  <binding id="scrollbox" extends="chrome://global/content/bindings/scrollbox.xml#scrollbox-base">
+    <content>
+      <xul:box class="box-inherit scrollbox-innerbox" xbl:inherits="orient,align,pack,dir" flex="1">
+        <children/>
+      </xul:box>
+    </content>
+  </binding>
+
+  <binding id="arrowscrollbox" extends="chrome://global/content/bindings/scrollbox.xml#scrollbox-base">
+    <content>
+      <xul:autorepeatbutton class="autorepeatbutton-up"
+                            anonid="scrollbutton-up"
+                            xbl:inherits="orient,collapsed=notoverflowing,disabled=scrolledtostart"
+                            oncommand="_autorepeatbuttonScroll(event);"/>
+      <xul:spacer class="arrowscrollbox-overflow-start-indicator"
+                  xbl:inherits="collapsed=scrolledtostart"/>
+      <xul:scrollbox class="arrowscrollbox-scrollbox"
+                     anonid="scrollbox"
+                     flex="1"
+                     xbl:inherits="orient,align,pack,dir">
+        <children/>
+      </xul:scrollbox>
+      <xul:spacer class="arrowscrollbox-overflow-end-indicator"
+                  xbl:inherits="collapsed=scrolledtoend"/>
+      <xul:autorepeatbutton class="autorepeatbutton-down"
+                            anonid="scrollbutton-down"
+                            xbl:inherits="orient,collapsed=notoverflowing,disabled=scrolledtoend"
+                            oncommand="_autorepeatbuttonScroll(event);"/>
+    </content>
+
+    <implementation>
+      <constructor><![CDATA[
+        this.setAttribute("notoverflowing", "true");
+        this._updateScrollButtonsDisabledState();
+      ]]></constructor>
+
+      <destructor><![CDATA[
+        this._stopSmoothScroll();
+      ]]></destructor>
+
+      <field name="_scrollbox">
+        document.getAnonymousElementByAttribute(this, "anonid", "scrollbox");
+      </field>
+      <field name="_scrollButtonUp">
+        document.getAnonymousElementByAttribute(this, "anonid", "scrollbutton-up");
+      </field>
+      <field name="_scrollButtonDown">
+        document.getAnonymousElementByAttribute(this, "anonid", "scrollbutton-down");
+      </field>
+
+      <field name="__prefBranch">null</field>
+      <property name="_prefBranch" readonly="true">
+        <getter><![CDATA[
+          if (this.__prefBranch === null) {
+            this.__prefBranch = Components.classes['@mozilla.org/preferences-service;1']
+                                          .getService(Components.interfaces.nsIPrefBranch);
+          }
+          return this.__prefBranch;
+        ]]></getter>
+      </property>
+
+      <field name="_scrollIncrement">null</field>
+      <property name="scrollIncrement" readonly="true">
+        <getter><![CDATA[
+          if (this._scrollIncrement === null) {
+            try {
+              this._scrollIncrement = this._prefBranch
+                                          .getIntPref("toolkit.scrollbox.scrollIncrement");
+            }
+            catch (ex) {
+              this._scrollIncrement = 20;
+            }
+          }
+          return this._scrollIncrement;
+        ]]></getter>
+      </property>
+
+      <field name="_smoothScroll">null</field>
+      <property name="smoothScroll">
+        <getter><![CDATA[
+          if (this._smoothScroll === null) {
+            if (this.hasAttribute("smoothscroll")) {
+              this._smoothScroll = (this.getAttribute("smoothscroll") == "true");
+            } else {
+              try {
+                this._smoothScroll = this._prefBranch
+                                         .getBoolPref("toolkit.scrollbox.smoothScroll");
+              }
+              catch (ex) {
+                this._smoothScroll = true;
+              }
+            }
+          }
+          return this._smoothScroll;
+        ]]></getter>
+        <setter><![CDATA[
+          this._smoothScroll = val;
+          return val;
+        ]]></setter>
+      </property>
+
+      <field name="_scrollBoxObject">null</field>
+      <property name="scrollBoxObject" readonly="true">
+        <getter><![CDATA[
+          if (!this._scrollBoxObject) {
+            this._scrollBoxObject = this._scrollbox.boxObject;
+          }
+          return this._scrollBoxObject;
+        ]]></getter>
+      </property>
+
+      <property name="scrollClientRect" readonly="true">
+        <getter><![CDATA[
+          return this._scrollbox.getBoundingClientRect();
+        ]]></getter>
+      </property>
+
+      <property name="scrollClientSize" readonly="true">
+        <getter><![CDATA[
+          return this.orient == "vertical" ?
+                 this._scrollbox.clientHeight :
+                 this._scrollbox.clientWidth;
+        ]]></getter>
+      </property>
+
+      <property name="scrollSize" readonly="true">
+        <getter><![CDATA[
+          return this.orient == "vertical" ?
+                 this._scrollbox.scrollHeight :
+                 this._scrollbox.scrollWidth;
+        ]]></getter>
+      </property>
+      <property name="scrollPaddingRect" readonly="true">
+        <getter><![CDATA[
+          // This assumes that this._scrollbox doesn't have any border.
+          var outerRect = this.scrollClientRect;
+          var innerRect = {};
+          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>
+      <property name="scrollboxPaddingStart" readonly="true">
+        <getter><![CDATA[
+          var ltr = (window.getComputedStyle(this, null).direction == "ltr");
+          var paddingStartName = ltr ? "padding-left" : "padding-right";
+          var scrollboxStyle = window.getComputedStyle(this._scrollbox, null);
+          return parseFloat(scrollboxStyle.getPropertyValue(paddingStartName));
+        ]]></getter>
+      </property>
+      <property name="scrollPosition">
+        <getter><![CDATA[
+          return this.orient == "vertical" ?
+                 this._scrollbox.scrollTop :
+                 this._scrollbox.scrollLeft;
+        ]]></getter>
+        <setter><![CDATA[
+          if (this.orient == "vertical")
+            this._scrollbox.scrollTop = val;
+          else
+            this._scrollbox.scrollLeft = val;
+          return val;
+        ]]></setter>
+      </property>
+
+      <property name="_startEndProps" readonly="true">
+        <getter><![CDATA[
+          return this.orient == "vertical" ?
+                 ["top", "bottom"] : ["left", "right"];
+        ]]></getter>
+      </property>
+
+      <field name="_isRTLScrollbox"><![CDATA[
+        this.orient != "vertical" &&
+        document.defaultView.getComputedStyle(this._scrollbox, "").direction == "rtl";
+      ]]></field>
+
+      <field name="_scrollTarget">null</field>
+
+      <method name="_canScrollToElement">
+        <parameter name="element"/>
+        <body><![CDATA[
+          return window.getComputedStyle(element).display != "none";
+        ]]></body>
+      </method>
+
+      <method name="ensureElementIsVisible">
+        <parameter name="element"/>
+        <parameter name="aSmoothScroll"/>
+        <body><![CDATA[
+          if (!this._canScrollToElement(element))
+            return;
+
+          var vertical = this.orient == "vertical";
+          var rect = this.scrollClientRect;
+          var containerStart = vertical ? rect.top : rect.left;
+          var containerEnd = vertical ? rect.bottom : rect.right;
+          rect = element.getBoundingClientRect();
+          var elementStart = vertical ? rect.top : rect.left;
+          var elementEnd = vertical ? rect.bottom : rect.right;
+
+          var scrollPaddingRect = this.scrollPaddingRect;
+          let style = window.getComputedStyle(this._scrollbox, null);
+          var scrollContentRect = {
+            left: scrollPaddingRect.left + parseFloat(style.paddingLeft),
+            top: scrollPaddingRect.top + parseFloat(style.paddingTop),
+            right: scrollPaddingRect.right - parseFloat(style.paddingRight),
+            bottom: scrollPaddingRect.bottom - parseFloat(style.paddingBottom)
+          };
+
+          // Provide an entry point for derived bindings to adjust these values.
+          if (this._adjustElementStartAndEnd) {
+            [elementStart, elementEnd] =
+              this._adjustElementStartAndEnd(element, elementStart, elementEnd);
+          }
+
+          if (elementStart <= (vertical ? scrollContentRect.top : scrollContentRect.left)) {
+            elementStart = vertical ? scrollPaddingRect.top : scrollPaddingRect.left;
+          }
+          if (elementEnd >= (vertical ? scrollContentRect.bottom : scrollContentRect.right)) {
+            elementEnd = vertical ? scrollPaddingRect.bottom : scrollPaddingRect.right;
+          }
+
+          var amountToScroll;
+
+          if (elementStart < containerStart) {
+            amountToScroll = elementStart - containerStart;
+          } else if (containerEnd < elementEnd) {
+            amountToScroll = elementEnd - containerEnd;
+          } else if (this._isScrolling) {
+            // decelerate if a currently-visible element is selected during the scroll
+            const STOP_DISTANCE = 15;
+            if (this._isScrolling == -1 && elementStart - STOP_DISTANCE < containerStart)
+              amountToScroll = elementStart - containerStart;
+            else if (this._isScrolling == 1 && containerEnd - STOP_DISTANCE < elementEnd)
+              amountToScroll = elementEnd - containerEnd;
+            else
+              amountToScroll = this._isScrolling * STOP_DISTANCE;
+          } else {
+            return;
+          }
+
+          this._stopSmoothScroll();
+
+          if (aSmoothScroll != false && this.smoothScroll) {
+            this._smoothScrollByPixels(amountToScroll, element);
+          } else {
+            this.scrollByPixels(amountToScroll);
+          }
+        ]]></body>
+      </method>
+
+      <method name="_smoothScrollByPixels">
+        <parameter name="amountToScroll"/>
+        <parameter name="element"/><!-- optional -->
+        <body><![CDATA[
+          this._stopSmoothScroll();
+          if (amountToScroll == 0)
+            return;
+
+          this._scrollTarget = element;
+          // Positive amountToScroll makes us scroll right (elements fly left), negative scrolls left.
+          this._isScrolling = amountToScroll < 0 ? -1 : 1;
+
+          this._scrollAnim.start(amountToScroll);
+        ]]></body>
+      </method>
+
+      <field name="_scrollAnim"><![CDATA[({
+        scrollbox: this,
+        requestHandle: 0, /* 0 indicates there is no pending request */
+        start: function scrollAnim_start(distance) {
+          this.distance = distance;
+          this.startPos = this.scrollbox.scrollPosition;
+          this.duration = Math.min(1000, Math.round(50 * Math.sqrt(Math.abs(distance))));
+          this.startTime = window.performance.now();
+
+          if (!this.requestHandle)
+            this.requestHandle = window.requestAnimationFrame(this.sample.bind(this));
+        },
+        stop: function scrollAnim_stop() {
+          window.cancelAnimationFrame(this.requestHandle);
+          this.requestHandle = 0;
+        },
+        sample: function scrollAnim_handleEvent(timeStamp) {
+          const timePassed = timeStamp - this.startTime;
+          const pos = timePassed >= this.duration ? 1 :
+                      1 - Math.pow(1 - timePassed / this.duration, 4);
+
+          this.scrollbox.scrollPosition = this.startPos + (this.distance * pos);
+
+          if (pos == 1)
+            this.scrollbox._stopSmoothScroll();
+          else
+            this.requestHandle = window.requestAnimationFrame(this.sample.bind(this));
+        }
+      })]]></field>
+
+      <method name="scrollByIndex">
+        <parameter name="index"/>
+        <parameter name="aSmoothScroll"/>
+        <body><![CDATA[
+          if (index == 0)
+            return;
+
+          // Each scrollByIndex call is expected to scroll the given number of
+          // items. If a previous call is still in progress because of smooth
+          // scrolling, we need to complete it before starting a new one.
+          if (this._scrollTarget) {
+            let elements = this._getScrollableElements();
+            if (this._scrollTarget != elements[0] &&
+                this._scrollTarget != elements[elements.length - 1])
+              this.ensureElementIsVisible(this._scrollTarget, false);
+          }
+
+          var rect = this.scrollClientRect;
+          var [start, end] = this._startEndProps;
+          var x = index > 0 ? rect[end] + 1 : rect[start] - 1;
+          var nextElement = this._elementFromPoint(x, index);
+          if (!nextElement)
+            return;
+
+          var targetElement;
+          if (this._isRTLScrollbox)
+            index *= -1;
+          while (index < 0 && nextElement) {
+            if (this._canScrollToElement(nextElement))
+              targetElement = nextElement;
+            nextElement = nextElement.previousSibling;
+            index++;
+          }
+          while (index > 0 && nextElement) {
+            if (this._canScrollToElement(nextElement))
+              targetElement = nextElement;
+            nextElement = nextElement.nextSibling;
+            index--;
+          }
+          if (!targetElement)
+            return;
+
+          this.ensureElementIsVisible(targetElement, aSmoothScroll);
+        ]]></body>
+      </method>
+
+      <method name="scrollByPage">
+        <parameter name="pageDelta"/>
+        <parameter name="aSmoothScroll"/>
+        <body><![CDATA[
+          if (pageDelta == 0)
+            return;
+
+          // If a previous call is still in progress because of smooth
+          // scrolling, we need to complete it before starting a new one.
+          if (this._scrollTarget) {
+            let elements = this._getScrollableElements();
+            if (this._scrollTarget != elements[0] &&
+                this._scrollTarget != elements[elements.length - 1])
+              this.ensureElementIsVisible(this._scrollTarget, false);
+          }
+
+          var [start, end] = this._startEndProps;
+          var rect = this.scrollClientRect;
+          var containerEdge = pageDelta > 0 ? rect[end] + 1 : rect[start] - 1;
+          var pixelDelta = pageDelta * (rect[end] - rect[start]);
+          var destinationPosition = containerEdge + pixelDelta;
+          var nextElement = this._elementFromPoint(containerEdge, pageDelta);
+          if (!nextElement)
+            return;
+
+          // We need to iterate over our elements in the direction of pageDelta.
+          // pageDelta is the physical direction, so in a horizontal scroll box,
+          // positive values scroll to the right no matter if the scrollbox is
+          // LTR or RTL. But RTL changes how we need to advance the iteration
+          // (whether to get the next or the previous sibling of the current
+          // element).
+          var logicalAdvanceDir = pageDelta * (this._isRTLScrollbox ? -1 : 1);
+          var advance = logicalAdvanceDir > 0 ? (e => e.nextSibling) : (e => e.previousSibling);
+
+          var extendsPastTarget = (pageDelta > 0)
+            ? (e => e.getBoundingClientRect()[end] > destinationPosition)
+            : (e => e.getBoundingClientRect()[start] < destinationPosition);
+
+          // We want to scroll to the last element we encounter before we find
+          // an element which extends past destinationPosition.
+          var targetElement;
+          do {
+            if (this._canScrollToElement(nextElement))
+              targetElement = nextElement;
+            nextElement = advance(nextElement);
+          } while (nextElement && !extendsPastTarget(nextElement));
+
+          if (!targetElement)
+            return;
+
+          this.ensureElementIsVisible(targetElement, aSmoothScroll);
+        ]]></body>
+      </method>
+
+      <method name="_getScrollableElements">
+        <body><![CDATA[
+          var nodes = this.childNodes;
+          if (nodes.length == 1 &&
+              nodes[0].localName == "children" &&
+              nodes[0].namespaceURI == "http://www.mozilla.org/xbl") {
+            nodes = document.getBindingParent(this).childNodes;
+          }
+
+          return Array.filter(nodes, this._canScrollToElement, this);
+        ]]></body>
+      </method>
+
+      <method name="_elementFromPoint">
+        <parameter name="aX"/>
+        <parameter name="aPhysicalScrollDir"/>
+        <body><![CDATA[
+          var elements = this._getScrollableElements();
+          if (!elements.length)
+            return null;
+
+          if (this._isRTLScrollbox)
+            elements.reverse();
+
+          var [start, end] = this._startEndProps;
+          var low = 0;
+          var high = elements.length - 1;
+
+          if (aX < elements[low].getBoundingClientRect()[start] ||
+              aX > elements[high].getBoundingClientRect()[end])
+            return null;
+
+          var mid, rect;
+          while (low <= high) {
+            mid = Math.floor((low + high) / 2);
+            rect = elements[mid].getBoundingClientRect();
+            if (rect[start] > aX)
+              high = mid - 1;
+            else if (rect[end] < aX)
+              low = mid + 1;
+            else
+              return elements[mid];
+          }
+
+          // There's no element at the requested coordinate, but the algorithm
+          // from above yields an element next to it, in a random direction.
+          // The desired scrolling direction leads to the correct element.
+
+          if (!aPhysicalScrollDir)
+            return null;
+
+          if (aPhysicalScrollDir < 0 && rect[start] > aX)
+            mid = Math.max(mid - 1, 0);
+          else if (aPhysicalScrollDir > 0 && rect[end] < aX)
+            mid = Math.min(mid + 1, elements.length - 1);
+
+          return elements[mid];
+        ]]></body>
+      </method>
+
+      <method name="_autorepeatbuttonScroll">
+        <parameter name="event"/>
+        <body><![CDATA[
+          var dir = event.originalTarget == this._scrollButtonUp ? -1 : 1;
+          if (this._isRTLScrollbox)
+            dir *= -1;
+
+          this.scrollByPixels(this.scrollIncrement * dir);
+
+          event.stopPropagation();
+        ]]></body>
+      </method>
+
+      <method name="scrollByPixels">
+        <parameter name="px"/>
+        <body><![CDATA[
+          this.scrollPosition += px;
+        ]]></body>
+      </method>
+
+      <!-- 0: idle
+           1: scrolling right
+          -1: scrolling left -->
+      <field name="_isScrolling">0</field>
+      <field name="_prevMouseScrolls">[null, null]</field>
+
+      <field name="_touchStart">-1</field>
+
+      <method name="_stopSmoothScroll">
+        <body><![CDATA[
+          if (this._isScrolling) {
+            this._scrollAnim.stop();
+            this._isScrolling = 0;
+            this._scrollTarget = null;
+          }
+        ]]></body>
+      </method>
+
+      <method name="_updateScrollButtonsDisabledState">
+        <body><![CDATA[
+          var scrolledToStart = false;
+          var scrolledToEnd = false;
+
+          if (this.hasAttribute("notoverflowing")) {
+            scrolledToStart = true;
+            scrolledToEnd = true;
+          }
+          else if (this.scrollPosition == 0) {
+            // In the RTL case, this means the _last_ element in the
+            // scrollbox is visible
+            if (this._isRTLScrollbox)
+              scrolledToEnd = true;
+            else
+              scrolledToStart = true;
+          }
+          else if (this.scrollClientSize + this.scrollPosition == this.scrollSize) {
+            // In the RTL case, this means the _first_ element in the
+            // scrollbox is visible
+            if (this._isRTLScrollbox)
+              scrolledToStart = true;
+            else
+              scrolledToEnd = true;
+          }
+
+          if (scrolledToEnd)
+            this.setAttribute("scrolledtoend", "true");
+          else
+            this.removeAttribute("scrolledtoend");
+
+          if (scrolledToStart)
+            this.setAttribute("scrolledtostart", "true");
+          else
+            this.removeAttribute("scrolledtostart");
+        ]]></body>
+      </method>
+    </implementation>
+
+    <handlers>
+      <handler event="wheel"><![CDATA[
+        if (this.orient == "vertical") {
+          if (event.deltaMode == event.DOM_DELTA_PIXEL)
+            this.scrollByPixels(event.deltaY);
+          else if (event.deltaMode == event.DOM_DELTA_PAGE)
+            this.scrollByPage(event.deltaY);
+          else
+            this.scrollByIndex(event.deltaY);
+        }
+        // We allow vertical scrolling to scroll a horizontal scrollbox
+        // because many users have a vertical scroll wheel but no
+        // horizontal support.
+        // Because of this, we need to avoid scrolling chaos on trackpads
+        // and mouse wheels that support simultaneous scrolling in both axes.
+        // We do this by scrolling only when the last two scroll events were
+        // on the same axis as the current scroll event.
+        // For diagonal scroll events we only respect the dominant axis.
+        else {
+          let isVertical = Math.abs(event.deltaY) > Math.abs(event.deltaX);
+          let delta = isVertical ? event.deltaY : event.deltaX;
+          let scrollByDelta = isVertical && this._isRTLScrollbox ? -delta : delta;
+
+          if (this._prevMouseScrolls.every(prev => prev == isVertical)) {
+            if (event.deltaMode == event.DOM_DELTA_PIXEL)
+              this.scrollByPixels(scrollByDelta);
+            else if (event.deltaMode == event.DOM_DELTA_PAGE)
+              this.scrollByPage(scrollByDelta);
+            else
+              this.scrollByIndex(scrollByDelta);
+          }
+
+          if (this._prevMouseScrolls.length > 1)
+            this._prevMouseScrolls.shift();
+          this._prevMouseScrolls.push(isVertical);
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+      ]]></handler>
+
+      <handler event="touchstart"><![CDATA[
+        if (event.touches.length > 1) {
+          // Multiple touch points detected, abort. In particular this aborts
+          // the panning gesture when the user puts a second finger down after
+          // already panning with one finger. Aborting at this point prevents
+          // the pan gesture from being resumed until all fingers are lifted
+          // (as opposed to when the user is back down to one finger).
+          this._touchStart = -1;
+        } else {
+          this._touchStart = (this.orient == "vertical"
+                ? event.touches[0].screenY
+                : event.touches[0].screenX);
+        }
+      ]]></handler>
+
+      <handler event="touchmove"><![CDATA[
+        if (event.touches.length == 1 &&
+            this._touchStart >= 0) {
+          var touchPoint = (this.orient == "vertical"
+                ? event.touches[0].screenY
+                : event.touches[0].screenX);
+          var delta = this._touchStart - touchPoint;
+          if (Math.abs(delta) > 0) {
+            this.scrollByPixels(delta);
+            this._touchStart = touchPoint;
+          }
+          event.preventDefault();
+        }
+      ]]></handler>
+
+      <handler event="touchend"><![CDATA[
+        this._touchStart = -1;
+      ]]></handler>
+
+      <handler event="underflow" phase="capturing"><![CDATA[
+        // filter underflow events which were dispatched on nested scrollboxes
+        if (event.target != this)
+          return;
+
+        // Ignore events that doesn't match our orientation.
+        // Scrollport event orientation:
+        //   0: vertical
+        //   1: horizontal
+        //   2: both
+        if (this.orient == "vertical") {
+          if (event.detail == 1)
+            return;
+        }
+        else if (event.detail == 0) {
+          // horizontal scrollbox
+          return;
+        }
+
+        this.setAttribute("notoverflowing", "true");
+
+        try {
+          // See bug 341047 and comments in overflow handler as to why
+          // try..catch is needed here
+          this._updateScrollButtonsDisabledState();
+
+          let childNodes = this._getScrollableElements();
+          if (childNodes && childNodes.length)
+            this.ensureElementIsVisible(childNodes[0], false);
+        }
+        catch (e) {
+          this.removeAttribute("notoverflowing");
+        }
+      ]]></handler>
+
+      <handler event="overflow" phase="capturing"><![CDATA[
+        // filter underflow events which were dispatched on nested scrollboxes
+        if (event.target != this)
+          return;
+
+        // Ignore events that doesn't match our orientation.
+        // Scrollport event orientation:
+        //   0: vertical
+        //   1: horizontal
+        //   2: both
+        if (this.orient == "vertical") {
+          if (event.detail == 1)
+            return;
+        }
+        else if (event.detail == 0) {
+          // horizontal scrollbox
+          return;
+        }
+
+        this.removeAttribute("notoverflowing");
+
+        try {
+          // See bug 341047, the overflow event is dispatched when the
+          // scrollbox already is mostly destroyed. This causes some code in
+          // _updateScrollButtonsDisabledState() to throw an error. It also
+          // means that the notoverflowing attribute was removed erroneously,
+          // as the whole overflow event should not be happening in that case.
+          this._updateScrollButtonsDisabledState();
+        }
+        catch (e) {
+          this.setAttribute("notoverflowing", "true");
+        }
+      ]]></handler>
+
+      <handler event="scroll" action="this._updateScrollButtonsDisabledState()"/>
+    </handlers>
+  </binding>
+
+  <binding id="autorepeatbutton" extends="chrome://global/content/bindings/scrollbox.xml#scrollbox-base">
+    <content repeat="hover">
+      <xul:image class="autorepeatbutton-icon"/>
+    </content>
+  </binding>
+
+  <binding id="arrowscrollbox-clicktoscroll" extends="chrome://global/content/bindings/scrollbox.xml#arrowscrollbox">
+    <content>
+      <xul:toolbarbutton class="scrollbutton-up"
+                         xbl:inherits="orient,collapsed=notoverflowing,disabled=scrolledtostart"
+                         anonid="scrollbutton-up"
+                         onclick="_distanceScroll(event);"
+                         onmousedown="if (event.button == 0) _startScroll(-1);"
+                         onmouseup="if (event.button == 0) _stopScroll();"
+                         onmouseover="_continueScroll(-1);"
+                         onmouseout="_pauseScroll();"/>
+      <xul:spacer class="arrowscrollbox-overflow-start-indicator"
+                  xbl:inherits="collapsed=scrolledtostart"/>
+      <xul:scrollbox class="arrowscrollbox-scrollbox"
+                     anonid="scrollbox"
+                     flex="1"
+                     xbl:inherits="orient,align,pack,dir">
+        <children/>
+      </xul:scrollbox>
+      <xul:spacer class="arrowscrollbox-overflow-end-indicator"
+                  xbl:inherits="collapsed=scrolledtoend"/>
+      <xul:toolbarbutton class="scrollbutton-down"
+                         xbl:inherits="orient,collapsed=notoverflowing,disabled=scrolledtoend"
+                         anonid="scrollbutton-down"
+                         onclick="_distanceScroll(event);"
+                         onmousedown="if (event.button == 0) _startScroll(1);"
+                         onmouseup="if (event.button == 0) _stopScroll();"
+                         onmouseover="_continueScroll(1);"
+                         onmouseout="_pauseScroll();"/>
+    </content>
+    <implementation implements="nsITimerCallback, nsIDOMEventListener">
+      <constructor><![CDATA[
+        try {
+          this._scrollDelay = this._prefBranch
+                                  .getIntPref("toolkit.scrollbox.clickToScroll.scrollDelay");
+        }
+        catch (ex) {
+        }
+      ]]></constructor>
+
+      <destructor><![CDATA[
+        // Release timer to avoid reference cycles.
+        if (this._scrollTimer) {
+          this._scrollTimer.cancel();
+          this._scrollTimer = null;
+        }
+      ]]></destructor>
+
+      <field name="_scrollIndex">0</field>
+      <field name="_scrollDelay">150</field>
+
+      <method name="notify">
+        <parameter name="aTimer"/>
+        <body>
+        <![CDATA[
+          if (!document)
+            aTimer.cancel();
+
+          this.scrollByIndex(this._scrollIndex);
+        ]]>
+        </body>
+      </method>
+
+      <field name="_arrowScrollAnim"><![CDATA[({
+        scrollbox: this,
+        requestHandle: 0, /* 0 indicates there is no pending request */
+        start: function arrowSmoothScroll_start() {
+          this.lastFrameTime = window.performance.now();
+          if (!this.requestHandle)
+            this.requestHandle = window.requestAnimationFrame(this.sample.bind(this));
+        },
+        stop: function arrowSmoothScroll_stop() {
+          window.cancelAnimationFrame(this.requestHandle);
+          this.requestHandle = 0;
+        },
+        sample: function arrowSmoothScroll_handleEvent(timeStamp) {
+          const scrollIndex = this.scrollbox._scrollIndex;
+          const timePassed = timeStamp - this.lastFrameTime;
+          this.lastFrameTime = timeStamp;
+
+          const scrollDelta = 0.5 * timePassed * scrollIndex;
+          this.scrollbox.scrollPosition += scrollDelta;
+
+          this.requestHandle = window.requestAnimationFrame(this.sample.bind(this));
+        }
+      })]]></field>
+
+      <method name="_startScroll">
+        <parameter name="index"/>
+        <body><![CDATA[
+          if (this._isRTLScrollbox)
+            index *= -1;
+          this._scrollIndex = index;
+          this._mousedown = true;
+          if (this.smoothScroll) {
+            this._arrowScrollAnim.start();
+            return;
+          }
+
+          if (!this._scrollTimer)
+            this._scrollTimer =
+              Components.classes["@mozilla.org/timer;1"]
+                        .createInstance(Components.interfaces.nsITimer);
+          else
+            this._scrollTimer.cancel();
+
+          this._scrollTimer.initWithCallback(this, this._scrollDelay,
+                                             this._scrollTimer.TYPE_REPEATING_SLACK);
+          this.notify(this._scrollTimer);
+        ]]>
+        </body>
+      </method>
+
+      <method name="_stopScroll">
+        <body><![CDATA[
+          if (this._scrollTimer)
+            this._scrollTimer.cancel();
+          this._mousedown = false;
+          if (!this._scrollIndex || !this.smoothScroll)
+            return;
+
+          this.scrollByIndex(this._scrollIndex);
+          this._scrollIndex = 0;
+          this._arrowScrollAnim.stop();
+        ]]></body>
+      </method>
+
+      <method name="_pauseScroll">
+        <body><![CDATA[
+          if (this._mousedown) {
+            this._stopScroll();
+            this._mousedown = true;
+            document.addEventListener("mouseup", this, false);
+            document.addEventListener("blur", this, true);
+          }
+        ]]></body>
+      </method>
+
+      <method name="_continueScroll">
+        <parameter name="index"/>
+        <body><![CDATA[
+          if (this._mousedown)
+            this._startScroll(index);
+        ]]></body>
+      </method>
+
+      <method name="handleEvent">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+          if (aEvent.type == "mouseup" ||
+              aEvent.type == "blur" && aEvent.target == document) {
+            this._mousedown = false;
+            document.removeEventListener("mouseup", this, false);
+            document.removeEventListener("blur", this, true);
+          }
+        ]]></body>
+      </method>
+
+      <method name="_distanceScroll">
+        <parameter name="aEvent"/>
+        <body><![CDATA[
+          if (aEvent.detail < 2 || aEvent.detail > 3)
+            return;
+
+          var scrollBack = (aEvent.originalTarget == this._scrollButtonUp);
+          var scrollLeftOrUp = this._isRTLScrollbox ? !scrollBack : scrollBack;
+          var targetElement;
+
+          if (aEvent.detail == 2) {
+            // scroll by the size of the scrollbox
+            let [start, end] = this._startEndProps;
+            let x;
+            if (scrollLeftOrUp)
+              x = this.scrollClientRect[start] - this.scrollClientSize;
+            else
+              x = this.scrollClientRect[end] + this.scrollClientSize;
+            targetElement = this._elementFromPoint(x, scrollLeftOrUp ? -1 : 1);
+
+            // the next partly-hidden element will become fully visible,
+            // so don't scroll too far
+            if (targetElement)
+              targetElement = scrollBack ?
+                              targetElement.nextSibling :
+                              targetElement.previousSibling;
+          }
+
+          if (!targetElement) {
+            // scroll to the first resp. last element
+            let elements = this._getScrollableElements();
+            targetElement = scrollBack ?
+                            elements[0] :
+                            elements[elements.length - 1];
+          }
+
+          this.ensureElementIsVisible(targetElement);
+        ]]></body>
+      </method>
+
+    </implementation>
+  </binding>
+</bindings>