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="colorpickerBindings"
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="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/colorpicker.css"/>
michael@0:     </resources>
michael@0:     
michael@0:     <content>
michael@0:       <xul:vbox flex="1">
michael@0: 
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFFF" color="#FFFFFF"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCCC" color="#FFCCCC"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCC99" color="#FFCC99"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF99" color="#FFFF99"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFCC" color="#FFFFCC"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #99FF99" color="#99FF99"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #99FFFF" color="#99FFFF"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #CCFFFF" color="#CCFFFF"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #CCCCFF" color="#CCCCFF"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCFF" color="#FFCCFF"/>
michael@0:         </xul:hbox>
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #CCCCCC" color="#CCCCCC"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FF6666" color="#FF6666"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FF9966" color="#FF9966"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF66" color="#FFFF66"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF33" color="#FFFF33"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #66FF99" color="#66FF99"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #33FFFF" color="#33FFFF"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #66FFFF" color="#66FFFF"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #9999FF" color="#9999FF"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FF99FF" color="#FF99FF"/>
michael@0:         </xul:hbox>
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #C0C0C0" color="#C0C0C0"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FF0000" color="#FF0000"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FF9900" color="#FF9900"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FFCC66" color="#FFCC66"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF00" color="#FFFF00"/>
michael@0:           <xul:spacer class="colorpickertile cp-light" style="background-color: #33FF33" color="#33FF33"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #66CCCC" color="#66CCCC"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #33CCFF" color="#33CCFF"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #6666CC" color="#6666CC"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #CC66CC" color="#CC66CC"/>
michael@0:         </xul:hbox>
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #999999" color="#999999"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #CC0000" color="#CC0000"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FF6600" color="#FF6600"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FFCC33" color="#FFCC33"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #FFCC00" color="#FFCC00"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #33CC00" color="#33CC00"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #00CCCC" color="#00CCCC"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #3366FF" color="#3366FF"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #6633FF" color="#6633FF"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #CC33CC" color="#CC33CC"/>
michael@0:         </xul:hbox>
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #666666" color="#666666"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #990000" color="#990000"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #CC6600" color="#CC6600"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #CC9933" color="#CC9933"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #999900" color="#999900"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #009900" color="#009900"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #339999" color="#339999"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #3333FF" color="#3333FF"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #6600CC" color="#6600CC"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #993399" color="#993399"/>
michael@0:         </xul:hbox>
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #333333" color="#333333"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #660000" color="#660000"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #993300" color="#993300"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #996633" color="#996633"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #666600" color="#666600"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #006600" color="#006600"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #336666" color="#336666"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #000099" color="#000099"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #333399" color="#333399"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #663366" color="#663366"/>
michael@0:         </xul:hbox>
michael@0:         <xul:hbox>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #000000" color="#000000"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #330000" color="#330000"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #663300" color="#663300"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #663333" color="#663333"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #333300" color="#333300"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #003300" color="#003300"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #003333" color="#003333"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #000066" color="#000066"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #330099" color="#330099"/>
michael@0:           <xul:spacer class="colorpickertile" style="background-color: #330033" color="#330033"/>
michael@0:         </xul:hbox>
michael@0:       </xul:vbox>
michael@0:       <!-- Something to take tab focus
michael@0:       <button style="border : 0px; width: 0px; height: 0px;"/>
michael@0:       -->
michael@0:     </content>
michael@0:     
michael@0:     <implementation implements="nsIDOMEventListener">
michael@0:       <property name="color">
michael@0:         <getter><![CDATA[
michael@0:           return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
michael@0:         ]]></getter>
michael@0:         <setter><![CDATA[
michael@0:           if (!val)
michael@0:             return val;
michael@0:           var uppercaseVal = val.toUpperCase();
michael@0:           // Translate standard HTML color strings:
michael@0:           if (uppercaseVal[0] != "#") {
michael@0:             switch (uppercaseVal) {
michael@0:               case "GREEN":
michael@0:                 uppercaseVal = "#008000";
michael@0:                 break;
michael@0:               case "LIME":
michael@0:                 uppercaseVal = "#00FF00";
michael@0:                 break;
michael@0:               case "OLIVE":
michael@0:                 uppercaseVal = "#808000";
michael@0:                 break;
michael@0:               case "TEAL":
michael@0:                 uppercaseVal = "#008080";
michael@0:                 break;
michael@0:               case "YELLOW":
michael@0:                 uppercaseVal = "#FFFF00";
michael@0:                 break;
michael@0:               case "RED":
michael@0:                 uppercaseVal = "#FF0000";
michael@0:                 break;
michael@0:               case "MAROON":
michael@0:                 uppercaseVal = "#800000";
michael@0:                 break;
michael@0:               case "PURPLE":
michael@0:                 uppercaseVal = "#800080";
michael@0:                 break;
michael@0:               case "FUCHSIA":
michael@0:                 uppercaseVal = "#FF00FF";
michael@0:                 break;
michael@0:               case "NAVY":
michael@0:                 uppercaseVal = "#000080";
michael@0:                 break;
michael@0:               case "BLUE":
michael@0:                 uppercaseVal = "#0000FF";
michael@0:                 break;
michael@0:               case "AQUA":
michael@0:                 uppercaseVal = "#00FFFF";
michael@0:                 break;
michael@0:               case "WHITE":
michael@0:                 uppercaseVal = "#FFFFFF";
michael@0:                 break;
michael@0:               case "SILVER":
michael@0:                 uppercaseVal = "#C0C0C0";
michael@0:                 break;
michael@0:               case "GRAY":
michael@0:                 uppercaseVal = "#808080";
michael@0:                 break;
michael@0:               default: // BLACK
michael@0:                 uppercaseVal = "#000000";
michael@0:                 break;
michael@0:             }
michael@0:           }
michael@0:           var cells = this.mBox.getElementsByAttribute("color", uppercaseVal);
michael@0:           if (cells.item(0)) {
michael@0:             this.selectCell(cells[0]);
michael@0:             this.hoverCell(this.mSelectedCell);
michael@0:           }
michael@0:           return val;
michael@0:         ]]></setter>
michael@0:       </property>
michael@0: 
michael@0:       <method name="initColor">
michael@0:         <parameter name="aColor"/>
michael@0:         <body><![CDATA[
michael@0:           // Use this to initialize color without
michael@0:           //  triggering the "onselect" handler,
michael@0:           //  which closes window when it's a popup
michael@0:           this.mDoOnSelect = false;
michael@0:           this.color = aColor;
michael@0:           this.mDoOnSelect = true;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="initialize">
michael@0:         <body><![CDATA[
michael@0:           this.mSelectedCell = null;
michael@0:           this.mHoverCell = null;
michael@0:           this.mBox = document.getAnonymousNodes(this)[0];
michael@0:           this.mIsPopup = false;
michael@0:           this.mDoOnSelect = true;
michael@0: 
michael@0:           this.hoverCell(this.mBox.childNodes[0].childNodes[0]);
michael@0:           
michael@0:           // used to capture keydown at the document level
michael@0:           this.mPickerKeyDown = function(aEvent)
michael@0:           {
michael@0:             document._focusedPicker.pickerKeyDown(aEvent);
michael@0:           }
michael@0: 
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="_fireEvent">
michael@0:         <parameter name="aTarget"/>
michael@0:         <parameter name="aEventName"/>
michael@0:         <body>
michael@0:         <![CDATA[      
michael@0:           try {
michael@0:             var event = document.createEvent("Events");
michael@0:             event.initEvent(aEventName, true, true);
michael@0:             var cancel = !aTarget.dispatchEvent(event);
michael@0:             if (aTarget.hasAttribute("on" + aEventName)) {
michael@0:               var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
michael@0:               var rv = fn.call(aTarget, event);
michael@0:               if (rv == false)
michael@0:                 cancel = true;
michael@0:             }
michael@0:             return !cancel;  
michael@0:           }
michael@0:           catch (e) { 
michael@0:             Components.utils.reportError(e);
michael@0:           }
michael@0:           return false;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="resetHover">
michael@0:         <body><![CDATA[
michael@0:           if (this.mHoverCell)
michael@0:             this.mHoverCell.removeAttribute("hover");
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="getColIndex">
michael@0:         <parameter name="aCell"/>
michael@0:         <body><![CDATA[
michael@0:           var cell = aCell;
michael@0:           var idx;
michael@0:           for (idx = -1; cell; idx++)
michael@0:             cell = cell.previousSibling;
michael@0: 
michael@0:           return idx;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="isColorCell">
michael@0:         <parameter name="aCell"/>
michael@0:         <body><![CDATA[
michael@0:           return aCell && aCell.hasAttribute("color");
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="hoverLeft">
michael@0:         <body><![CDATA[
michael@0:           var cell = this.mHoverCell.previousSibling;
michael@0:           this.hoverCell(cell);
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="hoverRight">
michael@0:         <body><![CDATA[
michael@0:           var cell = this.mHoverCell.nextSibling;
michael@0:           this.hoverCell(cell);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="hoverUp">
michael@0:         <body><![CDATA[
michael@0:           var row = this.mHoverCell.parentNode.previousSibling;
michael@0:           if (row) {
michael@0:             var colIdx = this.getColIndex(this.mHoverCell);
michael@0:             var cell = row.childNodes[colIdx];
michael@0:             this.hoverCell(cell);
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="hoverDown">
michael@0:         <body><![CDATA[
michael@0:           var row = this.mHoverCell.parentNode.nextSibling;
michael@0:           if (row) {
michael@0:             var colIdx = this.getColIndex(this.mHoverCell);
michael@0:             var cell = row.childNodes[colIdx];
michael@0:             this.hoverCell(cell);
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="hoverTo">
michael@0:         <parameter name="aRow"/>
michael@0:         <parameter name="aCol"/>
michael@0:         
michael@0:         <body><![CDATA[
michael@0:           var row = this.mBox.childNodes[aRow];
michael@0:           if (!row) return;
michael@0:           var cell = row.childNodes[aCol];
michael@0:           if (!cell) return;
michael@0:           this.hoverCell(cell);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="hoverCell">
michael@0:         <parameter name="aCell"/>
michael@0:         
michael@0:         <body><![CDATA[
michael@0:           if (this.isColorCell(aCell)) {
michael@0:             this.resetHover();
michael@0:             aCell.setAttribute("hover", "true");
michael@0:             this.mHoverCell = aCell;
michael@0:             var event = document.createEvent('Events');
michael@0:             event.initEvent('DOMMenuItemActive', true, true);
michael@0:             aCell.dispatchEvent(event);
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="selectHoverCell">
michael@0:         <body><![CDATA[
michael@0:           this.selectCell(this.mHoverCell);
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="selectCell">
michael@0:         <parameter name="aCell"/>
michael@0:         
michael@0:         <body><![CDATA[
michael@0:           if (this.isColorCell(aCell)) {
michael@0:             if (this.mSelectedCell)
michael@0:               this.mSelectedCell.removeAttribute("selected");
michael@0: 
michael@0:             this.mSelectedCell = aCell;
michael@0:             aCell.setAttribute("selected", "true");
michael@0: 
michael@0:             if (this.mDoOnSelect)
michael@0:               this._fireEvent(this, "select");
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="handleEvent">
michael@0:         <parameter name="aEvent"/>
michael@0:         <body><![CDATA[
michael@0:           switch (aEvent.keyCode) {
michael@0:             case 37: // left
michael@0:               this.hoverLeft();
michael@0:               break;
michael@0:             case 38: // up
michael@0:               this.hoverUp();
michael@0:               break;
michael@0:             case 39: // right
michael@0:               this.hoverRight();
michael@0:               break;
michael@0:             case 40: // down
michael@0:               this.hoverDown();
michael@0:               break;
michael@0:             case 13: // enter
michael@0:             case 32: // space
michael@0:               this.selectHoverCell();
michael@0:               break;
michael@0:           }
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0: 	  <constructor><![CDATA[
michael@0:         this.initialize();
michael@0:       ]]></constructor>
michael@0: 
michael@0:     </implementation>    
michael@0:     
michael@0:     <handlers>
michael@0:       <handler event="mouseover"><![CDATA[
michael@0:         this.hoverCell(event.originalTarget);
michael@0:       ]]></handler>
michael@0:       
michael@0:       <handler event="click"><![CDATA[
michael@0:         if (event.originalTarget.hasAttribute("color")) {
michael@0:           this.selectCell(event.originalTarget);
michael@0:           this.hoverCell(this.mSelectedCell);
michael@0:         }
michael@0:       ]]></handler>
michael@0: 
michael@0: 
michael@0:       <handler event="focus" phase="capturing">
michael@0:       <![CDATA[
michael@0:         if (!mIsPopup && this.getAttribute('focused') != 'true') {
michael@0:           this.setAttribute('focused','true');
michael@0:           document.addEventListener("keydown", this, true);
michael@0:           if (this.mSelectedCell)
michael@0:             this.hoverCell(this.mSelectedCell);
michael@0:         }
michael@0:       ]]>
michael@0:       </handler>
michael@0:     
michael@0:       <handler event="blur" phase="capturing">
michael@0:       <![CDATA[
michael@0:         if (!mIsPopup && this.getAttribute('focused') == 'true') {
michael@0:           document.removeEventListener("keydown", this, true);
michael@0:           this.removeAttribute('focused');
michael@0:           this.resetHover();
michael@0:         }
michael@0:       ]]>
michael@0:       </handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
michael@0:            extends="chrome://global/content/bindings/general.xml#basecontrol">
michael@0:     <resources>
michael@0:       <stylesheet src="chrome://global/skin/colorpicker.css"/>
michael@0:     </resources>
michael@0:     
michael@0:     <content>
michael@0:       <xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
michael@0: 
michael@0:       <xul:panel class="colorpicker-button-menupopup"
michael@0:                  anonid="colorpopup" noautofocus="true" level="top"
michael@0:                  onmousedown="event.stopPropagation()"
michael@0:                  onpopupshowing="this._colorPicker.onPopupShowing()"
michael@0:                  onpopuphiding="this._colorPicker.onPopupHiding()"
michael@0:                  onselect="this._colorPicker.pickerChange()">
michael@0:         <xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
michael@0:       </xul:panel>
michael@0:     </content>
michael@0:     
michael@0:     <implementation>
michael@0:       <property name="open"
michael@0:                 onget="return this.getAttribute('open') == 'true'"
michael@0:                 onset="this.showPopup();"/>
michael@0:       <property name="color">
michael@0:         <getter><![CDATA[
michael@0:           return this.getAttribute("color");
michael@0:         ]]></getter>
michael@0:         <setter><![CDATA[
michael@0:           this.mColorBox.style.backgroundColor = val;
michael@0:           this.setAttribute("color", val);
michael@0:           return val;
michael@0:         ]]></setter>
michael@0:       </property>
michael@0:       
michael@0:       <method name="initialize">
michael@0:         <body><![CDATA[
michael@0:           this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
michael@0:           this.mColorBox.style.backgroundColor = this.color;
michael@0:         
michael@0:           var popup = document.getAnonymousElementByAttribute(this, "anonid", "colorpopup")
michael@0:           popup._colorPicker = this;
michael@0:           
michael@0:           this.mPicker = document.getAnonymousElementByAttribute(this, "anonid", "colorpicker")
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="_fireEvent">
michael@0:         <parameter name="aTarget"/>
michael@0:         <parameter name="aEventName"/>
michael@0:         <body>
michael@0:         <![CDATA[      
michael@0:           try {
michael@0:             var event = document.createEvent("Events");
michael@0:             event.initEvent(aEventName, true, true);
michael@0:             var cancel = !aTarget.dispatchEvent(event);
michael@0:             if (aTarget.hasAttribute("on" + aEventName)) {
michael@0:               var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
michael@0:               var rv = fn.call(aTarget, event);
michael@0:               if (rv == false)
michael@0:                 cancel = true;
michael@0:             }
michael@0:             return !cancel;  
michael@0:           }
michael@0:           catch (e) { 
michael@0:             dump(e);
michael@0:           }
michael@0:           return false;
michael@0:         ]]>
michael@0:         </body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="showPopup">
michael@0:         <body><![CDATA[
michael@0:           this.mPicker.parentNode.openPopup(this, "after_start", 0, 0, false, false);
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="hidePopup">
michael@0:         <body><![CDATA[
michael@0:           this.mPicker.parentNode.hidePopup();
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="onPopupShowing">
michael@0:         <body><![CDATA[
michael@0:           if ("resetHover" in this.mPicker)
michael@0:             this.mPicker.resetHover();
michael@0:           document.addEventListener("keydown", this.mPicker, true);
michael@0:           this.mPicker.mIsPopup = true;
michael@0:           // Initialize to current button's color
michael@0:           this.mPicker.initColor(this.color);
michael@0:         ]]></body>
michael@0:       </method>
michael@0:       
michael@0:       <method name="onPopupHiding">
michael@0:         <body><![CDATA[
michael@0:           // Removes the key listener
michael@0:           document.removeEventListener("keydown", this.mPicker, true);
michael@0:           this.mPicker.mIsPopup = false;
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <method name="pickerChange">
michael@0:         <body><![CDATA[
michael@0:           this.color = this.mPicker.color;
michael@0:           setTimeout(function(aPopup) { aPopup.hidePopup() }, 1, this.mPicker.parentNode);
michael@0:           
michael@0:           this._fireEvent(this, "change");
michael@0:         ]]></body>
michael@0:       </method>
michael@0: 
michael@0:       <constructor><![CDATA[
michael@0:         this.initialize();
michael@0:       ]]></constructor>
michael@0:       
michael@0:     </implementation>
michael@0: 
michael@0:     <handlers>
michael@0:       <handler event="keydown"><![CDATA[
michael@0:         // open popup if key is space/up/left/right/down and popup is closed
michael@0:         if ( (event.keyCode == 32 || (event.keyCode > 36 && event.keyCode < 41)) && !this.open)
michael@0:           this.showPopup();
michael@0:         else if ( (event.keyCode == 27) && this.open)
michael@0:           this.hidePopup();
michael@0:       ]]></handler>
michael@0:     </handlers>
michael@0:   </binding>
michael@0: 
michael@0:   <binding id="colorpickertile" role="xul:colorpickertile">
michael@0:   </binding>
michael@0: 
michael@0: </bindings>
michael@0: