1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/widgets/colorpicker.xml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,548 @@
1.4 +<?xml version="1.0"?>
1.5 +<!-- This Source Code Form is subject to the terms of the Mozilla Public
1.6 + - License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
1.8 +
1.9 +
1.10 +<bindings id="colorpickerBindings"
1.11 + xmlns="http://www.mozilla.org/xbl"
1.12 + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.13 + xmlns:xbl="http://www.mozilla.org/xbl">
1.14 +
1.15 + <binding id="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
1.16 + <resources>
1.17 + <stylesheet src="chrome://global/skin/colorpicker.css"/>
1.18 + </resources>
1.19 +
1.20 + <content>
1.21 + <xul:vbox flex="1">
1.22 +
1.23 + <xul:hbox>
1.24 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFFF" color="#FFFFFF"/>
1.25 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCCC" color="#FFCCCC"/>
1.26 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCC99" color="#FFCC99"/>
1.27 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF99" color="#FFFF99"/>
1.28 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFCC" color="#FFFFCC"/>
1.29 + <xul:spacer class="colorpickertile cp-light" style="background-color: #99FF99" color="#99FF99"/>
1.30 + <xul:spacer class="colorpickertile cp-light" style="background-color: #99FFFF" color="#99FFFF"/>
1.31 + <xul:spacer class="colorpickertile cp-light" style="background-color: #CCFFFF" color="#CCFFFF"/>
1.32 + <xul:spacer class="colorpickertile cp-light" style="background-color: #CCCCFF" color="#CCCCFF"/>
1.33 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCFF" color="#FFCCFF"/>
1.34 + </xul:hbox>
1.35 + <xul:hbox>
1.36 + <xul:spacer class="colorpickertile" style="background-color: #CCCCCC" color="#CCCCCC"/>
1.37 + <xul:spacer class="colorpickertile" style="background-color: #FF6666" color="#FF6666"/>
1.38 + <xul:spacer class="colorpickertile" style="background-color: #FF9966" color="#FF9966"/>
1.39 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF66" color="#FFFF66"/>
1.40 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF33" color="#FFFF33"/>
1.41 + <xul:spacer class="colorpickertile cp-light" style="background-color: #66FF99" color="#66FF99"/>
1.42 + <xul:spacer class="colorpickertile cp-light" style="background-color: #33FFFF" color="#33FFFF"/>
1.43 + <xul:spacer class="colorpickertile cp-light" style="background-color: #66FFFF" color="#66FFFF"/>
1.44 + <xul:spacer class="colorpickertile" style="background-color: #9999FF" color="#9999FF"/>
1.45 + <xul:spacer class="colorpickertile" style="background-color: #FF99FF" color="#FF99FF"/>
1.46 + </xul:hbox>
1.47 + <xul:hbox>
1.48 + <xul:spacer class="colorpickertile" style="background-color: #C0C0C0" color="#C0C0C0"/>
1.49 + <xul:spacer class="colorpickertile" style="background-color: #FF0000" color="#FF0000"/>
1.50 + <xul:spacer class="colorpickertile" style="background-color: #FF9900" color="#FF9900"/>
1.51 + <xul:spacer class="colorpickertile" style="background-color: #FFCC66" color="#FFCC66"/>
1.52 + <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF00" color="#FFFF00"/>
1.53 + <xul:spacer class="colorpickertile cp-light" style="background-color: #33FF33" color="#33FF33"/>
1.54 + <xul:spacer class="colorpickertile" style="background-color: #66CCCC" color="#66CCCC"/>
1.55 + <xul:spacer class="colorpickertile" style="background-color: #33CCFF" color="#33CCFF"/>
1.56 + <xul:spacer class="colorpickertile" style="background-color: #6666CC" color="#6666CC"/>
1.57 + <xul:spacer class="colorpickertile" style="background-color: #CC66CC" color="#CC66CC"/>
1.58 + </xul:hbox>
1.59 + <xul:hbox>
1.60 + <xul:spacer class="colorpickertile" style="background-color: #999999" color="#999999"/>
1.61 + <xul:spacer class="colorpickertile" style="background-color: #CC0000" color="#CC0000"/>
1.62 + <xul:spacer class="colorpickertile" style="background-color: #FF6600" color="#FF6600"/>
1.63 + <xul:spacer class="colorpickertile" style="background-color: #FFCC33" color="#FFCC33"/>
1.64 + <xul:spacer class="colorpickertile" style="background-color: #FFCC00" color="#FFCC00"/>
1.65 + <xul:spacer class="colorpickertile" style="background-color: #33CC00" color="#33CC00"/>
1.66 + <xul:spacer class="colorpickertile" style="background-color: #00CCCC" color="#00CCCC"/>
1.67 + <xul:spacer class="colorpickertile" style="background-color: #3366FF" color="#3366FF"/>
1.68 + <xul:spacer class="colorpickertile" style="background-color: #6633FF" color="#6633FF"/>
1.69 + <xul:spacer class="colorpickertile" style="background-color: #CC33CC" color="#CC33CC"/>
1.70 + </xul:hbox>
1.71 + <xul:hbox>
1.72 + <xul:spacer class="colorpickertile" style="background-color: #666666" color="#666666"/>
1.73 + <xul:spacer class="colorpickertile" style="background-color: #990000" color="#990000"/>
1.74 + <xul:spacer class="colorpickertile" style="background-color: #CC6600" color="#CC6600"/>
1.75 + <xul:spacer class="colorpickertile" style="background-color: #CC9933" color="#CC9933"/>
1.76 + <xul:spacer class="colorpickertile" style="background-color: #999900" color="#999900"/>
1.77 + <xul:spacer class="colorpickertile" style="background-color: #009900" color="#009900"/>
1.78 + <xul:spacer class="colorpickertile" style="background-color: #339999" color="#339999"/>
1.79 + <xul:spacer class="colorpickertile" style="background-color: #3333FF" color="#3333FF"/>
1.80 + <xul:spacer class="colorpickertile" style="background-color: #6600CC" color="#6600CC"/>
1.81 + <xul:spacer class="colorpickertile" style="background-color: #993399" color="#993399"/>
1.82 + </xul:hbox>
1.83 + <xul:hbox>
1.84 + <xul:spacer class="colorpickertile" style="background-color: #333333" color="#333333"/>
1.85 + <xul:spacer class="colorpickertile" style="background-color: #660000" color="#660000"/>
1.86 + <xul:spacer class="colorpickertile" style="background-color: #993300" color="#993300"/>
1.87 + <xul:spacer class="colorpickertile" style="background-color: #996633" color="#996633"/>
1.88 + <xul:spacer class="colorpickertile" style="background-color: #666600" color="#666600"/>
1.89 + <xul:spacer class="colorpickertile" style="background-color: #006600" color="#006600"/>
1.90 + <xul:spacer class="colorpickertile" style="background-color: #336666" color="#336666"/>
1.91 + <xul:spacer class="colorpickertile" style="background-color: #000099" color="#000099"/>
1.92 + <xul:spacer class="colorpickertile" style="background-color: #333399" color="#333399"/>
1.93 + <xul:spacer class="colorpickertile" style="background-color: #663366" color="#663366"/>
1.94 + </xul:hbox>
1.95 + <xul:hbox>
1.96 + <xul:spacer class="colorpickertile" style="background-color: #000000" color="#000000"/>
1.97 + <xul:spacer class="colorpickertile" style="background-color: #330000" color="#330000"/>
1.98 + <xul:spacer class="colorpickertile" style="background-color: #663300" color="#663300"/>
1.99 + <xul:spacer class="colorpickertile" style="background-color: #663333" color="#663333"/>
1.100 + <xul:spacer class="colorpickertile" style="background-color: #333300" color="#333300"/>
1.101 + <xul:spacer class="colorpickertile" style="background-color: #003300" color="#003300"/>
1.102 + <xul:spacer class="colorpickertile" style="background-color: #003333" color="#003333"/>
1.103 + <xul:spacer class="colorpickertile" style="background-color: #000066" color="#000066"/>
1.104 + <xul:spacer class="colorpickertile" style="background-color: #330099" color="#330099"/>
1.105 + <xul:spacer class="colorpickertile" style="background-color: #330033" color="#330033"/>
1.106 + </xul:hbox>
1.107 + </xul:vbox>
1.108 + <!-- Something to take tab focus
1.109 + <button style="border : 0px; width: 0px; height: 0px;"/>
1.110 + -->
1.111 + </content>
1.112 +
1.113 + <implementation implements="nsIDOMEventListener">
1.114 + <property name="color">
1.115 + <getter><![CDATA[
1.116 + return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
1.117 + ]]></getter>
1.118 + <setter><![CDATA[
1.119 + if (!val)
1.120 + return val;
1.121 + var uppercaseVal = val.toUpperCase();
1.122 + // Translate standard HTML color strings:
1.123 + if (uppercaseVal[0] != "#") {
1.124 + switch (uppercaseVal) {
1.125 + case "GREEN":
1.126 + uppercaseVal = "#008000";
1.127 + break;
1.128 + case "LIME":
1.129 + uppercaseVal = "#00FF00";
1.130 + break;
1.131 + case "OLIVE":
1.132 + uppercaseVal = "#808000";
1.133 + break;
1.134 + case "TEAL":
1.135 + uppercaseVal = "#008080";
1.136 + break;
1.137 + case "YELLOW":
1.138 + uppercaseVal = "#FFFF00";
1.139 + break;
1.140 + case "RED":
1.141 + uppercaseVal = "#FF0000";
1.142 + break;
1.143 + case "MAROON":
1.144 + uppercaseVal = "#800000";
1.145 + break;
1.146 + case "PURPLE":
1.147 + uppercaseVal = "#800080";
1.148 + break;
1.149 + case "FUCHSIA":
1.150 + uppercaseVal = "#FF00FF";
1.151 + break;
1.152 + case "NAVY":
1.153 + uppercaseVal = "#000080";
1.154 + break;
1.155 + case "BLUE":
1.156 + uppercaseVal = "#0000FF";
1.157 + break;
1.158 + case "AQUA":
1.159 + uppercaseVal = "#00FFFF";
1.160 + break;
1.161 + case "WHITE":
1.162 + uppercaseVal = "#FFFFFF";
1.163 + break;
1.164 + case "SILVER":
1.165 + uppercaseVal = "#C0C0C0";
1.166 + break;
1.167 + case "GRAY":
1.168 + uppercaseVal = "#808080";
1.169 + break;
1.170 + default: // BLACK
1.171 + uppercaseVal = "#000000";
1.172 + break;
1.173 + }
1.174 + }
1.175 + var cells = this.mBox.getElementsByAttribute("color", uppercaseVal);
1.176 + if (cells.item(0)) {
1.177 + this.selectCell(cells[0]);
1.178 + this.hoverCell(this.mSelectedCell);
1.179 + }
1.180 + return val;
1.181 + ]]></setter>
1.182 + </property>
1.183 +
1.184 + <method name="initColor">
1.185 + <parameter name="aColor"/>
1.186 + <body><![CDATA[
1.187 + // Use this to initialize color without
1.188 + // triggering the "onselect" handler,
1.189 + // which closes window when it's a popup
1.190 + this.mDoOnSelect = false;
1.191 + this.color = aColor;
1.192 + this.mDoOnSelect = true;
1.193 + ]]></body>
1.194 + </method>
1.195 +
1.196 + <method name="initialize">
1.197 + <body><![CDATA[
1.198 + this.mSelectedCell = null;
1.199 + this.mHoverCell = null;
1.200 + this.mBox = document.getAnonymousNodes(this)[0];
1.201 + this.mIsPopup = false;
1.202 + this.mDoOnSelect = true;
1.203 +
1.204 + this.hoverCell(this.mBox.childNodes[0].childNodes[0]);
1.205 +
1.206 + // used to capture keydown at the document level
1.207 + this.mPickerKeyDown = function(aEvent)
1.208 + {
1.209 + document._focusedPicker.pickerKeyDown(aEvent);
1.210 + }
1.211 +
1.212 + ]]></body>
1.213 + </method>
1.214 +
1.215 + <method name="_fireEvent">
1.216 + <parameter name="aTarget"/>
1.217 + <parameter name="aEventName"/>
1.218 + <body>
1.219 + <![CDATA[
1.220 + try {
1.221 + var event = document.createEvent("Events");
1.222 + event.initEvent(aEventName, true, true);
1.223 + var cancel = !aTarget.dispatchEvent(event);
1.224 + if (aTarget.hasAttribute("on" + aEventName)) {
1.225 + var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
1.226 + var rv = fn.call(aTarget, event);
1.227 + if (rv == false)
1.228 + cancel = true;
1.229 + }
1.230 + return !cancel;
1.231 + }
1.232 + catch (e) {
1.233 + Components.utils.reportError(e);
1.234 + }
1.235 + return false;
1.236 + ]]>
1.237 + </body>
1.238 + </method>
1.239 +
1.240 + <method name="resetHover">
1.241 + <body><![CDATA[
1.242 + if (this.mHoverCell)
1.243 + this.mHoverCell.removeAttribute("hover");
1.244 + ]]></body>
1.245 + </method>
1.246 +
1.247 + <method name="getColIndex">
1.248 + <parameter name="aCell"/>
1.249 + <body><![CDATA[
1.250 + var cell = aCell;
1.251 + var idx;
1.252 + for (idx = -1; cell; idx++)
1.253 + cell = cell.previousSibling;
1.254 +
1.255 + return idx;
1.256 + ]]></body>
1.257 + </method>
1.258 +
1.259 + <method name="isColorCell">
1.260 + <parameter name="aCell"/>
1.261 + <body><![CDATA[
1.262 + return aCell && aCell.hasAttribute("color");
1.263 + ]]></body>
1.264 + </method>
1.265 +
1.266 + <method name="hoverLeft">
1.267 + <body><![CDATA[
1.268 + var cell = this.mHoverCell.previousSibling;
1.269 + this.hoverCell(cell);
1.270 + ]]></body>
1.271 + </method>
1.272 +
1.273 + <method name="hoverRight">
1.274 + <body><![CDATA[
1.275 + var cell = this.mHoverCell.nextSibling;
1.276 + this.hoverCell(cell);
1.277 + ]]></body>
1.278 + </method>
1.279 +
1.280 + <method name="hoverUp">
1.281 + <body><![CDATA[
1.282 + var row = this.mHoverCell.parentNode.previousSibling;
1.283 + if (row) {
1.284 + var colIdx = this.getColIndex(this.mHoverCell);
1.285 + var cell = row.childNodes[colIdx];
1.286 + this.hoverCell(cell);
1.287 + }
1.288 + ]]></body>
1.289 + </method>
1.290 +
1.291 + <method name="hoverDown">
1.292 + <body><![CDATA[
1.293 + var row = this.mHoverCell.parentNode.nextSibling;
1.294 + if (row) {
1.295 + var colIdx = this.getColIndex(this.mHoverCell);
1.296 + var cell = row.childNodes[colIdx];
1.297 + this.hoverCell(cell);
1.298 + }
1.299 + ]]></body>
1.300 + </method>
1.301 +
1.302 + <method name="hoverTo">
1.303 + <parameter name="aRow"/>
1.304 + <parameter name="aCol"/>
1.305 +
1.306 + <body><![CDATA[
1.307 + var row = this.mBox.childNodes[aRow];
1.308 + if (!row) return;
1.309 + var cell = row.childNodes[aCol];
1.310 + if (!cell) return;
1.311 + this.hoverCell(cell);
1.312 + ]]></body>
1.313 + </method>
1.314 +
1.315 + <method name="hoverCell">
1.316 + <parameter name="aCell"/>
1.317 +
1.318 + <body><![CDATA[
1.319 + if (this.isColorCell(aCell)) {
1.320 + this.resetHover();
1.321 + aCell.setAttribute("hover", "true");
1.322 + this.mHoverCell = aCell;
1.323 + var event = document.createEvent('Events');
1.324 + event.initEvent('DOMMenuItemActive', true, true);
1.325 + aCell.dispatchEvent(event);
1.326 + }
1.327 + ]]></body>
1.328 + </method>
1.329 +
1.330 + <method name="selectHoverCell">
1.331 + <body><![CDATA[
1.332 + this.selectCell(this.mHoverCell);
1.333 + ]]></body>
1.334 + </method>
1.335 +
1.336 + <method name="selectCell">
1.337 + <parameter name="aCell"/>
1.338 +
1.339 + <body><![CDATA[
1.340 + if (this.isColorCell(aCell)) {
1.341 + if (this.mSelectedCell)
1.342 + this.mSelectedCell.removeAttribute("selected");
1.343 +
1.344 + this.mSelectedCell = aCell;
1.345 + aCell.setAttribute("selected", "true");
1.346 +
1.347 + if (this.mDoOnSelect)
1.348 + this._fireEvent(this, "select");
1.349 + }
1.350 + ]]></body>
1.351 + </method>
1.352 +
1.353 + <method name="handleEvent">
1.354 + <parameter name="aEvent"/>
1.355 + <body><![CDATA[
1.356 + switch (aEvent.keyCode) {
1.357 + case 37: // left
1.358 + this.hoverLeft();
1.359 + break;
1.360 + case 38: // up
1.361 + this.hoverUp();
1.362 + break;
1.363 + case 39: // right
1.364 + this.hoverRight();
1.365 + break;
1.366 + case 40: // down
1.367 + this.hoverDown();
1.368 + break;
1.369 + case 13: // enter
1.370 + case 32: // space
1.371 + this.selectHoverCell();
1.372 + break;
1.373 + }
1.374 + ]]></body>
1.375 + </method>
1.376 +
1.377 + <constructor><![CDATA[
1.378 + this.initialize();
1.379 + ]]></constructor>
1.380 +
1.381 + </implementation>
1.382 +
1.383 + <handlers>
1.384 + <handler event="mouseover"><![CDATA[
1.385 + this.hoverCell(event.originalTarget);
1.386 + ]]></handler>
1.387 +
1.388 + <handler event="click"><![CDATA[
1.389 + if (event.originalTarget.hasAttribute("color")) {
1.390 + this.selectCell(event.originalTarget);
1.391 + this.hoverCell(this.mSelectedCell);
1.392 + }
1.393 + ]]></handler>
1.394 +
1.395 +
1.396 + <handler event="focus" phase="capturing">
1.397 + <![CDATA[
1.398 + if (!mIsPopup && this.getAttribute('focused') != 'true') {
1.399 + this.setAttribute('focused','true');
1.400 + document.addEventListener("keydown", this, true);
1.401 + if (this.mSelectedCell)
1.402 + this.hoverCell(this.mSelectedCell);
1.403 + }
1.404 + ]]>
1.405 + </handler>
1.406 +
1.407 + <handler event="blur" phase="capturing">
1.408 + <![CDATA[
1.409 + if (!mIsPopup && this.getAttribute('focused') == 'true') {
1.410 + document.removeEventListener("keydown", this, true);
1.411 + this.removeAttribute('focused');
1.412 + this.resetHover();
1.413 + }
1.414 + ]]>
1.415 + </handler>
1.416 + </handlers>
1.417 + </binding>
1.418 +
1.419 + <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
1.420 + extends="chrome://global/content/bindings/general.xml#basecontrol">
1.421 + <resources>
1.422 + <stylesheet src="chrome://global/skin/colorpicker.css"/>
1.423 + </resources>
1.424 +
1.425 + <content>
1.426 + <xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
1.427 +
1.428 + <xul:panel class="colorpicker-button-menupopup"
1.429 + anonid="colorpopup" noautofocus="true" level="top"
1.430 + onmousedown="event.stopPropagation()"
1.431 + onpopupshowing="this._colorPicker.onPopupShowing()"
1.432 + onpopuphiding="this._colorPicker.onPopupHiding()"
1.433 + onselect="this._colorPicker.pickerChange()">
1.434 + <xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
1.435 + </xul:panel>
1.436 + </content>
1.437 +
1.438 + <implementation>
1.439 + <property name="open"
1.440 + onget="return this.getAttribute('open') == 'true'"
1.441 + onset="this.showPopup();"/>
1.442 + <property name="color">
1.443 + <getter><![CDATA[
1.444 + return this.getAttribute("color");
1.445 + ]]></getter>
1.446 + <setter><![CDATA[
1.447 + this.mColorBox.style.backgroundColor = val;
1.448 + this.setAttribute("color", val);
1.449 + return val;
1.450 + ]]></setter>
1.451 + </property>
1.452 +
1.453 + <method name="initialize">
1.454 + <body><![CDATA[
1.455 + this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
1.456 + this.mColorBox.style.backgroundColor = this.color;
1.457 +
1.458 + var popup = document.getAnonymousElementByAttribute(this, "anonid", "colorpopup")
1.459 + popup._colorPicker = this;
1.460 +
1.461 + this.mPicker = document.getAnonymousElementByAttribute(this, "anonid", "colorpicker")
1.462 + ]]></body>
1.463 + </method>
1.464 +
1.465 + <method name="_fireEvent">
1.466 + <parameter name="aTarget"/>
1.467 + <parameter name="aEventName"/>
1.468 + <body>
1.469 + <![CDATA[
1.470 + try {
1.471 + var event = document.createEvent("Events");
1.472 + event.initEvent(aEventName, true, true);
1.473 + var cancel = !aTarget.dispatchEvent(event);
1.474 + if (aTarget.hasAttribute("on" + aEventName)) {
1.475 + var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
1.476 + var rv = fn.call(aTarget, event);
1.477 + if (rv == false)
1.478 + cancel = true;
1.479 + }
1.480 + return !cancel;
1.481 + }
1.482 + catch (e) {
1.483 + dump(e);
1.484 + }
1.485 + return false;
1.486 + ]]>
1.487 + </body>
1.488 + </method>
1.489 +
1.490 + <method name="showPopup">
1.491 + <body><![CDATA[
1.492 + this.mPicker.parentNode.openPopup(this, "after_start", 0, 0, false, false);
1.493 + ]]></body>
1.494 + </method>
1.495 +
1.496 + <method name="hidePopup">
1.497 + <body><![CDATA[
1.498 + this.mPicker.parentNode.hidePopup();
1.499 + ]]></body>
1.500 + </method>
1.501 +
1.502 + <method name="onPopupShowing">
1.503 + <body><![CDATA[
1.504 + if ("resetHover" in this.mPicker)
1.505 + this.mPicker.resetHover();
1.506 + document.addEventListener("keydown", this.mPicker, true);
1.507 + this.mPicker.mIsPopup = true;
1.508 + // Initialize to current button's color
1.509 + this.mPicker.initColor(this.color);
1.510 + ]]></body>
1.511 + </method>
1.512 +
1.513 + <method name="onPopupHiding">
1.514 + <body><![CDATA[
1.515 + // Removes the key listener
1.516 + document.removeEventListener("keydown", this.mPicker, true);
1.517 + this.mPicker.mIsPopup = false;
1.518 + ]]></body>
1.519 + </method>
1.520 +
1.521 + <method name="pickerChange">
1.522 + <body><![CDATA[
1.523 + this.color = this.mPicker.color;
1.524 + setTimeout(function(aPopup) { aPopup.hidePopup() }, 1, this.mPicker.parentNode);
1.525 +
1.526 + this._fireEvent(this, "change");
1.527 + ]]></body>
1.528 + </method>
1.529 +
1.530 + <constructor><![CDATA[
1.531 + this.initialize();
1.532 + ]]></constructor>
1.533 +
1.534 + </implementation>
1.535 +
1.536 + <handlers>
1.537 + <handler event="keydown"><![CDATA[
1.538 + // open popup if key is space/up/left/right/down and popup is closed
1.539 + if ( (event.keyCode == 32 || (event.keyCode > 36 && event.keyCode < 41)) && !this.open)
1.540 + this.showPopup();
1.541 + else if ( (event.keyCode == 27) && this.open)
1.542 + this.hidePopup();
1.543 + ]]></handler>
1.544 + </handlers>
1.545 + </binding>
1.546 +
1.547 + <binding id="colorpickertile" role="xul:colorpickertile">
1.548 + </binding>
1.549 +
1.550 +</bindings>
1.551 +
