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: <bindings id="marqueeBindings"
michael@0:           xmlns="http://www.mozilla.org/xbl"
michael@0:           xmlns:html="http://www.w3.org/1999/xhtml"
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: 
michael@0:   <binding id="marquee">
michael@0: 
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://xbl-marquee/content/xbl-marquee.css"/>
michael@0:     </resources>
michael@0:     <implementation>
michael@0: 
michael@0:       <property name="scrollAmount" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           var val = parseInt(this.getAttribute("scrollamount"));
michael@0: 
michael@0:           if (val <= 0 || isNaN(val))
michael@0:             return this._scrollAmount;
michael@0: 
michael@0:           return val;
michael@0:           ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this.setAttribute("scrollamount", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="scrollDelay" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           var val = parseInt(this.getAttribute("scrolldelay"));
michael@0: 
michael@0:           if (val <= 0 || isNaN(val))
michael@0:             return this._scrollDelay;
michael@0: 
michael@0:           return val;
michael@0:           ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this.setAttribute("scrolldelay", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="trueSpeed" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           if (!this.hasAttribute("truespeed"))
michael@0:             return false;
michael@0: 
michael@0:           return true;
michael@0:           ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:           <![CDATA[
michael@0:           if (val)
michael@0:             this.setAttribute("truespeed", "truespeed");
michael@0:           else
michael@0:             this.removeAttribute('truespeed');
michael@0:           ]]>
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="direction" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           return this.getAttribute("direction");
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this.setAttribute("direction", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="behavior" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           return this._behavior;
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this.setAttribute("behavior", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0: 
michael@0:       <property name="loop" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           <![CDATA[
michael@0:           var val = parseInt(this.getAttribute('loop'));
michael@0:     
michael@0:           if (val < -1 || isNaN(val))
michael@0:             return this._loop;
michael@0: 
michael@0:           return val;
michael@0:           ]]>
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this.setAttribute("loop", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0: 
michael@0:       <property name="onstart" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           return this.getAttribute("onstart");
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this._setEventListener("start", val, true);
michael@0:           this.setAttribute("onstart", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="onfinish" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           return this.getAttribute("onfinish");
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this._setEventListener("finish", val, true);
michael@0:           this.setAttribute("onfinish", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="onbounce" exposeToUntrustedContent="true">
michael@0:         <getter>
michael@0:           return this.getAttribute("onbounce");
michael@0:         </getter>
michael@0:         <setter>
michael@0:           this._setEventListener("bounce", val, true);
michael@0:           this.setAttribute("onbounce", val);
michael@0:         </setter>
michael@0:       </property>
michael@0: 
michael@0:       <property name="outerDiv"
michael@0:         onget="return document.getAnonymousNodes(this)[0]"
michael@0:       />
michael@0: 
michael@0:       <property name="innerDiv"
michael@0:         onget="return document.getAnonymousElementByAttribute(this, 'class', 'innerDiv');"
michael@0:       />
michael@0: 
michael@0:       <property name="height" exposeToUntrustedContent="true"
michael@0:         onget="return this.getAttribute('height');"
michael@0:         onset="this.setAttribute('height', val);"
michael@0:       />
michael@0: 
michael@0:       <property name="width" exposeToUntrustedContent="true"
michael@0:         onget="return this.getAttribute('width');"
michael@0:         onset="this.setAttribute('width', val);"
michael@0:       />
michael@0: 
michael@0:       <method name="_set_scrollDelay">
michael@0:         <parameter name="aValue"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (aValue <= 0 || isNaN(aValue) || aValue == null)
michael@0:             return false;
michael@0: 
michael@0:           if (aValue < 60) {
michael@0:             if (this.trueSpeed == true)
michael@0:               this._scrollDelay = aValue;
michael@0:             else
michael@0:               this._scrollDelay = 60;
michael@0:           }
michael@0:           else {
michael@0:             this._scrollDelay = aValue;
michael@0:           }
michael@0:           return true;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_set_scrollAmount">
michael@0:         <parameter name="aValue"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (aValue < 0 || isNaN(aValue) || aValue == null)
michael@0:             return false;
michael@0: 
michael@0:           this._scrollAmount = aValue;
michael@0:           return true;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_set_behavior">
michael@0:         <parameter name="aValue"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (typeof aValue == 'string')
michael@0:             aValue = aValue.toLowerCase();
michael@0:           if (aValue != 'alternate' && aValue != 'slide' && aValue != 'scroll')
michael@0:             return false;
michael@0: 
michael@0:           this._behavior = aValue;
michael@0:           return true;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_set_direction">
michael@0:         <parameter name="aValue"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (typeof aValue == 'string')
michael@0:             aValue = aValue.toLowerCase();
michael@0:           if (aValue != 'left' && aValue != 'right' && aValue != 'up' && aValue != 'down')
michael@0:             return false;
michael@0: 
michael@0:           if (aValue != this._direction)
michael@0:             this.startNewDirection = true;
michael@0:           this._direction = aValue;
michael@0:           return true;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_set_loop">
michael@0:         <parameter name="aValue"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           if (!aValue || isNaN(aValue))
michael@0:             return false;
michael@0: 
michael@0:           if (aValue < -1)
michael@0:             aValue = -1;
michael@0: 
michael@0:           this._loop = aValue;
michael@0:           return true;
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_setEventListener">
michael@0:         <parameter name="aName"/>
michael@0:         <parameter name="aValue"/>
michael@0:         <parameter name="aIgnoreNextCall"/>
michael@0:         <body>
michael@0:           <![CDATA[
michael@0:           if (this._ignoreNextCall)
michael@0:             return this._ignoreNextCall = false;
michael@0: 
michael@0:           if (aIgnoreNextCall)
michael@0:             this._ignoreNextCall = true;
michael@0: 
michael@0:           if (typeof this["_on" + aName] == 'function')
michael@0:             this.removeEventListener(aName, this["_on" + aName], false);
michael@0: 
michael@0:           switch (typeof aValue)
michael@0:           {
michael@0:             case "function":
michael@0:               this["_on" + aName] = aValue;
michael@0:               this.addEventListener(aName, this["_on" + aName], false);
michael@0:             break;
michael@0: 
michael@0:             case "string":
michael@0:               if (!aIgnoreNextCall) {
michael@0:                 try {
michael@0:                   // Things to watch out for here:
michael@0:                   // * Weird |new| precedence.
michael@0:                   // * Getting the correct constructor (via Xrays).
michael@0:                   // * Waiving the constructor before invoking it, so that we can
michael@0:                   //   call it (since XBL gets opaque non-callable wrappers to content).
michael@0:                   // * The fact that contentFn is transitively waived, which we need
michael@0:                   //   in order to be able to invoke it.
michael@0:                   this["_on" + aName] = new (XPCNativeWrapper.unwrap(window.Function))("event", aValue);
michael@0:                 }
michael@0:                 catch(e) {
michael@0:                   return false;
michael@0:                 }
michael@0:                 this.addEventListener(aName, this["_on" + aName], false);
michael@0:               }
michael@0:               else {
michael@0:                 this["_on" + aName] = aValue;
michael@0:               }
michael@0:             break;
michael@0: 
michael@0:             case "object":
michael@0:               this["_on" + aName] = aValue;
michael@0:             break;
michael@0: 
michael@0:             default:
michael@0:               this._ignoreNextCall = false;
michael@0:               throw new Error("Invalid argument for Marquee::on" + aName);
michael@0:           }
michael@0:           return true;
michael@0:           ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_fireEvent">
michael@0:         <parameter name="aName"/>
michael@0:         <parameter name="aBubbles"/>
michael@0:         <parameter name="aCancelable"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           var e = document.createEvent("Events");
michael@0:           e.initEvent(aName, aBubbles, aCancelable);
michael@0:           this.dispatchEvent(e);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="start" exposeToUntrustedContent="true">
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (this.runId == 0) {
michael@0:             var myThis = this;
michael@0:             var lambda = function myTimeOutFunction(){myThis._doMove(false);}
michael@0:             this.runId = window.setTimeout(lambda, this._scrollDelay - this._deltaStartStop);
michael@0:             this._deltaStartStop = 0;
michael@0:           }
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="stop" exposeToUntrustedContent="true">
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           if (this.runId != 0) {
michael@0:             this._deltaStartStop = Date.now()- this._lastMoveDate;
michael@0:             clearTimeout(this.runId);
michael@0:           }
michael@0: 
michael@0:           this.runId = 0;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="_doMove">
michael@0:         <parameter name="aResetPosition"/>
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           this._lastMoveDate = Date.now();
michael@0: 
michael@0:           //startNewDirection is true at first load and whenever the direction is changed
michael@0:           if (this.startNewDirection) {
michael@0:             this.startNewDirection = false; //we only want this to run once every scroll direction change
michael@0: 
michael@0:             var corrvalue = 0;
michael@0: 
michael@0:             switch (this._direction)
michael@0:             {
michael@0:               case "up":
michael@0:                 var height = document.defaultView.getComputedStyle(this, "").height;
michael@0:                 this.outerDiv.style.height = height;
michael@0:                 if (this.originalHeight > this.outerDiv.offsetHeight)
michael@0:                     corrvalue = this.originalHeight - this.outerDiv.offsetHeight;
michael@0:                 this.innerDiv.style.padding = height + " 0";
michael@0:                 this.dirsign = 1;
michael@0:                 this.startAt = (this._behavior == 'alternate') ? (this.originalHeight - corrvalue) : 0;
michael@0:                 this.stopAt  = (this._behavior == 'alternate' || this._behavior == 'slide') ? 
michael@0:                                 (parseInt(height) + corrvalue) : (this.originalHeight + parseInt(height));
michael@0:               break;
michael@0: 
michael@0:               case "down":
michael@0:                 var height = document.defaultView.getComputedStyle(this, "").height;
michael@0:                 this.outerDiv.style.height = height;
michael@0:                 if (this.originalHeight > this.outerDiv.offsetHeight)
michael@0:                     corrvalue = this.originalHeight - this.outerDiv.offsetHeight;
michael@0:                 this.innerDiv.style.padding = height + " 0";
michael@0:                 this.dirsign = -1;
michael@0:                 this.startAt  = (this._behavior == 'alternate') ?
michael@0:                                 (parseInt(height) + corrvalue) : (this.originalHeight + parseInt(height));
michael@0:                 this.stopAt = (this._behavior == 'alternate' || this._behavior == 'slide') ? 
michael@0:                               (this.originalHeight - corrvalue) : 0;
michael@0:               break;
michael@0: 
michael@0:               case "right":
michael@0:                 if (this.innerDiv.offsetWidth > this.outerDiv.offsetWidth)
michael@0:                     corrvalue = this.innerDiv.offsetWidth - this.outerDiv.offsetWidth;
michael@0:                 this.dirsign = -1;
michael@0:                 this.stopAt  = (this._behavior == 'alternate' || this._behavior == 'slide') ? 
michael@0:                                (this.innerDiv.offsetWidth - corrvalue) : 0;
michael@0:                 this.startAt = this.outerDiv.offsetWidth + ((this._behavior == 'alternate') ? 
michael@0:                                corrvalue : (this.innerDiv.offsetWidth + this.stopAt));   
michael@0:               break;
michael@0: 
michael@0:               case "left":
michael@0:               default:
michael@0:                 if (this.innerDiv.offsetWidth > this.outerDiv.offsetWidth)
michael@0:                     corrvalue = this.innerDiv.offsetWidth - this.outerDiv.offsetWidth;
michael@0:                 this.dirsign = 1;
michael@0:                 this.startAt = (this._behavior == 'alternate') ? (this.innerDiv.offsetWidth - corrvalue) : 0;
michael@0:                 this.stopAt  = this.outerDiv.offsetWidth + 
michael@0:                                ((this._behavior == 'alternate' || this._behavior == 'slide') ? 
michael@0:                                corrvalue : (this.innerDiv.offsetWidth + this.startAt));
michael@0:             }
michael@0: 
michael@0:             if (aResetPosition) {
michael@0:               this.newPosition = this.startAt;
michael@0:               this._fireEvent("start", false, false);
michael@0:             }
michael@0:           } //end if
michael@0: 
michael@0:           this.newPosition = this.newPosition + (this.dirsign * this._scrollAmount);
michael@0: 
michael@0:           if ((this.dirsign == 1 && this.newPosition > this.stopAt) ||
michael@0:               (this.dirsign == -1 && this.newPosition < this.stopAt))
michael@0:           {
michael@0:             switch (this._behavior) 
michael@0:             {
michael@0:               case 'alternate':
michael@0:                 // lets start afresh
michael@0:                 this.startNewDirection = true;
michael@0: 
michael@0:                 // swap direction
michael@0:                 const swap = {left: "right", down: "up", up: "down", right: "left"};
michael@0:                 this._direction = swap[this._direction];
michael@0:                 this.newPosition = this.stopAt;
michael@0: 
michael@0:                 if ((this._direction == "up") || (this._direction == "down"))
michael@0:                   this.outerDiv.scrollTop = this.newPosition;
michael@0:                 else
michael@0:                   this.outerDiv.scrollLeft = this.newPosition;
michael@0: 
michael@0:                 if (this._loop != 1)
michael@0:                   this._fireEvent("bounce", false, true);
michael@0:               break;
michael@0: 
michael@0:               case 'slide':
michael@0:                 if (this._loop > 1)
michael@0:                   this.newPosition = this.startAt;
michael@0:               break;
michael@0: 
michael@0:               default:
michael@0:                 this.newPosition = this.startAt;
michael@0: 
michael@0:                 if ((this._direction == "up") || (this._direction == "down"))
michael@0:                   this.outerDiv.scrollTop = this.newPosition;
michael@0:                 else
michael@0:                   this.outerDiv.scrollLeft = this.newPosition;
michael@0: 
michael@0:                 //dispatch start event, even when this._loop == 1, comp. with IE6
michael@0:                 this._fireEvent("start", false, false);
michael@0:             }
michael@0: 
michael@0:             if (this._loop > 1)
michael@0:               this._loop--;
michael@0:             else if (this._loop == 1) {
michael@0:               if ((this._direction == "up") || (this._direction == "down"))
michael@0:                 this.outerDiv.scrollTop = this.stopAt;
michael@0:               else
michael@0:                 this.outerDiv.scrollLeft = this.stopAt;
michael@0:               this.stop();
michael@0:               this._fireEvent("finish", false, true);
michael@0:               return;
michael@0:             }
michael@0:           }
michael@0:           else {
michael@0:             if ((this._direction == "up") || (this._direction == "down"))
michael@0:               this.outerDiv.scrollTop = this.newPosition;
michael@0:             else
michael@0:               this.outerDiv.scrollLeft = this.newPosition;
michael@0:           }
michael@0: 
michael@0:           var myThis = this;
michael@0:           var lambda = function myTimeOutFunction(){myThis._doMove(false);}
michael@0:           this.runId = window.setTimeout(lambda, this._scrollDelay);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="init">
michael@0:         <body>
michael@0:         <![CDATA[
michael@0:           this.stop();
michael@0: 
michael@0:           if ((this._direction != "up") && (this._direction != "down")) {
michael@0:             var width = window.getComputedStyle(this, "").width;
michael@0:             this.innerDiv.parentNode.style.margin = '0 ' + width;
michael@0: 
michael@0:             //XXX Adding the margin sometimes causes the marquee to widen, 
michael@0:             // see testcase from bug bug 364434: 
michael@0:             // https://bugzilla.mozilla.org/attachment.cgi?id=249233
michael@0:             // Just add a fixed width with current marquee's width for now
michael@0:             if (width != window.getComputedStyle(this, "").width) {
michael@0:               var width = window.getComputedStyle(this, "").width;
michael@0:               this.outerDiv.style.width = width;
michael@0:               this.innerDiv.parentNode.style.margin = '0 ' + width;
michael@0:             }
michael@0:           }
michael@0:           else {
michael@0:             // store the original height before we add padding
michael@0:             this.innerDiv.style.padding = 0;
michael@0:             this.originalHeight = this.innerDiv.offsetHeight;
michael@0:           }
michael@0: 
michael@0:           this._doMove(true);
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <constructor>
michael@0:         <![CDATA[
michael@0:           // Set up state.
michael@0:           this._scrollAmount = 6;
michael@0:           this._scrollDelay = 85;
michael@0:           this._direction = "left";
michael@0:           this._behavior = "scroll";
michael@0:           this._loop = -1;
michael@0:           this.dirsign = 1;
michael@0:           this.startAt = 0;
michael@0:           this.stopAt = 0;
michael@0:           this.newPosition = 0;
michael@0:           this.runId = 0;
michael@0:           this.originalHeight = 0;
michael@0:           this.startNewDirection = true;
michael@0: 
michael@0:           // hack needed to fix js error, see bug 386470
michael@0:           var myThis = this;
michael@0:           var lambda = function myScopeFunction() { if (myThis.init) myThis.init(); }
michael@0: 
michael@0:           this._set_direction(this.getAttribute('direction'));
michael@0:           this._set_behavior(this.getAttribute('behavior'));
michael@0:           this._set_scrollDelay(this.getAttribute('scrolldelay'));
michael@0:           this._set_scrollAmount(this.getAttribute('scrollamount'));
michael@0:           this._set_loop(this.getAttribute('loop'));
michael@0:           this._setEventListener("start", this.getAttribute("onstart"));
michael@0:           this._setEventListener("finish", this.getAttribute("onfinish"));
michael@0:           this._setEventListener("bounce", this.getAttribute("onbounce"));
michael@0:           this.startNewDirection = true;
michael@0: 
michael@0:           // init needs to be run after the page has loaded in order to calculate
michael@0:           // the correct height/width
michael@0:           if (document.readyState == "complete")
michael@0:             lambda();
michael@0:           else
michael@0:             window.addEventListener("load", lambda, false);
michael@0:         ]]>
michael@0:       </constructor>
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="DOMAttrModified" phase="target">
michael@0:         <![CDATA[
michael@0:           var attrName = event.attrName.toLowerCase();
michael@0:           var oldValue = event.prevValue.toLowerCase();
michael@0:           var newValue = event.newValue.toLowerCase();
michael@0:           var attributeRemoval = false;
michael@0:           if (event.attrChange == event.REMOVAL) {
michael@0:             newValue = null;
michael@0:             attributeRemoval = true;
michael@0:           };
michael@0: 
michael@0:           if (oldValue != newValue) {
michael@0:             switch (attrName) {
michael@0:               case "loop":
michael@0:                 if (!this._set_loop(newValue)) {
michael@0:                   if (attributeRemoval) {
michael@0:                     this._loop = -1;
michael@0:                     if (this.runId == 0)
michael@0:                       this.start();
michael@0:                   }
michael@0:                   else
michael@0:                     throw new Error("Invalid argument for Marquee::loop");
michael@0:                 }
michael@0:                 if (this.rundId == 0)
michael@0:                   this.start();
michael@0:                 break;
michael@0:               case "scrollamount":
michael@0:                 if (!this._set_scrollAmount(newValue)) {
michael@0:                   if (attributeRemoval)
michael@0:                     this._scrollAmount = 6;
michael@0:                   else
michael@0:                     throw new Error("Invalid argument for Marquee::scrollAmount");
michael@0:                 }
michael@0:                 break;
michael@0:               case "scrolldelay":
michael@0:                 if (!this._set_scrollDelay(newValue)) {
michael@0:                   if (attributeRemoval)
michael@0:                     this._scrollDelay = 85;
michael@0:                   else
michael@0:                     throw new Error("Invalid argument for Marquee::scrollDelay");
michael@0:                 }
michael@0:                 this.stop();
michael@0:                 this.start();
michael@0:                 break;
michael@0:               case "truespeed":
michael@0:                 //needed to update this._scrollDelay
michael@0:                 var myThis = this;
michael@0:                 var lambda = function() {myThis._set_scrollDelay(myThis.getAttribute('scrolldelay'));}
michael@0:                 window.setTimeout(lambda, 0);
michael@0:                 break;
michael@0:               case "behavior":
michael@0:                 if (!this._set_behavior(newValue)) {
michael@0:                   if (attributeRemoval)
michael@0:                     this._behavior = "scroll";
michael@0:                   else
michael@0:                     throw new Error("Invalid argument for Marquee::behavior");
michael@0:                 }
michael@0: 
michael@0:                 this.startNewDirection = true;
michael@0:                 if ((oldValue == "slide" && this.newPosition == this.stopAt) ||
michael@0:                     newValue == "alternate" || newValue == "slide") {
michael@0:                   this.stop();
michael@0:                   this._doMove(true);
michael@0:                 }
michael@0:                 break;
michael@0:               case "direction":
michael@0:                 if (!this._set_direction(newValue)) {
michael@0:                   if (attributeRemoval)
michael@0:                     this._direction = "left";
michael@0:                   else
michael@0:                     throw new Error("Invalid argument for Marquee::direction");
michael@0:                 }
michael@0:                 break;
michael@0:               case "width":
michael@0:               case "height":
michael@0:                 this.startNewDirection = true;
michael@0:                 break;
michael@0:               case "onstart":
michael@0:                 this._setEventListener("start", newValue);
michael@0:                 break;
michael@0:               case "onfinish":
michael@0:                 this._setEventListener("finish", newValue);
michael@0:                 break;
michael@0:               case "onbounce":
michael@0:                 this._setEventListener("bounce", newValue);
michael@0:                 break;
michael@0:             }
michael@0:           }
michael@0:         ]]>
michael@0:       </handler>
michael@0:     </handlers>
michael@0: 
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="marquee-horizontal"
michael@0:            extends="chrome://xbl-marquee/content/xbl-marquee.xml#marquee"
michael@0:            inheritstyle="false">
michael@0: 
michael@0:     <!-- White-space isn't allowed because a marquee could be 
michael@0:          inside 'white-space: pre' -->
michael@0:     <content>
michael@0:       <html:div style="display: -moz-box; overflow: hidden; width: -moz-available;"
michael@0:         ><html:div style="display: -moz-box;"
michael@0:           ><html:div class="innerDiv" style="display: table; border-spacing: 0;"
michael@0:             ><html:div
michael@0:               ><children
michael@0:             /></html:div
michael@0:           ></html:div
michael@0:         ></html:div
michael@0:       ></html:div>
michael@0:     </content>
michael@0: 
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="marquee-vertical"
michael@0:            extends="chrome://xbl-marquee/content/xbl-marquee.xml#marquee"
michael@0:            inheritstyle="false">
michael@0: 
michael@0:     <!-- White-space isn't allowed because a marquee could be 
michael@0:          inside 'white-space: pre' -->
michael@0:     <content>
michael@0:       <html:div style="overflow: hidden; width: -moz-available;"
michael@0:         ><html:div class="innerDiv"
michael@0:           ><children
michael@0:         /></html:div
michael@0:       ></html:div>
michael@0:     </content>
michael@0: 
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="marquee-horizontal-editable"
michael@0:            inheritstyle="false">
michael@0: 
michael@0:     <!-- White-space isn't allowed because a marquee could be 
michael@0:          inside 'white-space: pre' -->
michael@0:     <content>
michael@0:       <html:div style="display: inline-block; overflow: auto; width: -moz-available;"
michael@0:         ><children
michael@0:       /></html:div>
michael@0:     </content>
michael@0: 
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="marquee-vertical-editable"
michael@0:            inheritstyle="false">
michael@0: 
michael@0:     <!-- White-space isn't allowed because a marquee could be 
michael@0:          inside 'white-space: pre' -->
michael@0:     <content>
michael@0:       <html:div style="overflow: auto; height: inherit; width: -moz-available;"
michael@0:         ><children/></html:div>
michael@0:     </content>
michael@0: 
michael@0:   </binding>
michael@0: 
michael@0: </bindings>