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