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