toolkit/content/widgets/colorpicker.xml@6474c204b198
toolkit/content/widgets/colorpicker.xml
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <?xml version="1.0"?>
2 <!-- This Source Code Form is subject to the terms of the Mozilla Public
3 - License, v. 2.0. If a copy of the MPL was not distributed with this
4 - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
7 <bindings id="colorpickerBindings"
8 xmlns="http://www.mozilla.org/xbl"
9 xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
10 xmlns:xbl="http://www.mozilla.org/xbl">
12 <binding id="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
13 <resources>
14 <stylesheet src="chrome://global/skin/colorpicker.css"/>
15 </resources>
17 <content>
18 <xul:vbox flex="1">
20 <xul:hbox>
21 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFFF" color="#FFFFFF"/>
22 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCCC" color="#FFCCCC"/>
23 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCC99" color="#FFCC99"/>
24 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF99" color="#FFFF99"/>
25 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFCC" color="#FFFFCC"/>
26 <xul:spacer class="colorpickertile cp-light" style="background-color: #99FF99" color="#99FF99"/>
27 <xul:spacer class="colorpickertile cp-light" style="background-color: #99FFFF" color="#99FFFF"/>
28 <xul:spacer class="colorpickertile cp-light" style="background-color: #CCFFFF" color="#CCFFFF"/>
29 <xul:spacer class="colorpickertile cp-light" style="background-color: #CCCCFF" color="#CCCCFF"/>
30 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCFF" color="#FFCCFF"/>
31 </xul:hbox>
32 <xul:hbox>
33 <xul:spacer class="colorpickertile" style="background-color: #CCCCCC" color="#CCCCCC"/>
34 <xul:spacer class="colorpickertile" style="background-color: #FF6666" color="#FF6666"/>
35 <xul:spacer class="colorpickertile" style="background-color: #FF9966" color="#FF9966"/>
36 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF66" color="#FFFF66"/>
37 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF33" color="#FFFF33"/>
38 <xul:spacer class="colorpickertile cp-light" style="background-color: #66FF99" color="#66FF99"/>
39 <xul:spacer class="colorpickertile cp-light" style="background-color: #33FFFF" color="#33FFFF"/>
40 <xul:spacer class="colorpickertile cp-light" style="background-color: #66FFFF" color="#66FFFF"/>
41 <xul:spacer class="colorpickertile" style="background-color: #9999FF" color="#9999FF"/>
42 <xul:spacer class="colorpickertile" style="background-color: #FF99FF" color="#FF99FF"/>
43 </xul:hbox>
44 <xul:hbox>
45 <xul:spacer class="colorpickertile" style="background-color: #C0C0C0" color="#C0C0C0"/>
46 <xul:spacer class="colorpickertile" style="background-color: #FF0000" color="#FF0000"/>
47 <xul:spacer class="colorpickertile" style="background-color: #FF9900" color="#FF9900"/>
48 <xul:spacer class="colorpickertile" style="background-color: #FFCC66" color="#FFCC66"/>
49 <xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF00" color="#FFFF00"/>
50 <xul:spacer class="colorpickertile cp-light" style="background-color: #33FF33" color="#33FF33"/>
51 <xul:spacer class="colorpickertile" style="background-color: #66CCCC" color="#66CCCC"/>
52 <xul:spacer class="colorpickertile" style="background-color: #33CCFF" color="#33CCFF"/>
53 <xul:spacer class="colorpickertile" style="background-color: #6666CC" color="#6666CC"/>
54 <xul:spacer class="colorpickertile" style="background-color: #CC66CC" color="#CC66CC"/>
55 </xul:hbox>
56 <xul:hbox>
57 <xul:spacer class="colorpickertile" style="background-color: #999999" color="#999999"/>
58 <xul:spacer class="colorpickertile" style="background-color: #CC0000" color="#CC0000"/>
59 <xul:spacer class="colorpickertile" style="background-color: #FF6600" color="#FF6600"/>
60 <xul:spacer class="colorpickertile" style="background-color: #FFCC33" color="#FFCC33"/>
61 <xul:spacer class="colorpickertile" style="background-color: #FFCC00" color="#FFCC00"/>
62 <xul:spacer class="colorpickertile" style="background-color: #33CC00" color="#33CC00"/>
63 <xul:spacer class="colorpickertile" style="background-color: #00CCCC" color="#00CCCC"/>
64 <xul:spacer class="colorpickertile" style="background-color: #3366FF" color="#3366FF"/>
65 <xul:spacer class="colorpickertile" style="background-color: #6633FF" color="#6633FF"/>
66 <xul:spacer class="colorpickertile" style="background-color: #CC33CC" color="#CC33CC"/>
67 </xul:hbox>
68 <xul:hbox>
69 <xul:spacer class="colorpickertile" style="background-color: #666666" color="#666666"/>
70 <xul:spacer class="colorpickertile" style="background-color: #990000" color="#990000"/>
71 <xul:spacer class="colorpickertile" style="background-color: #CC6600" color="#CC6600"/>
72 <xul:spacer class="colorpickertile" style="background-color: #CC9933" color="#CC9933"/>
73 <xul:spacer class="colorpickertile" style="background-color: #999900" color="#999900"/>
74 <xul:spacer class="colorpickertile" style="background-color: #009900" color="#009900"/>
75 <xul:spacer class="colorpickertile" style="background-color: #339999" color="#339999"/>
76 <xul:spacer class="colorpickertile" style="background-color: #3333FF" color="#3333FF"/>
77 <xul:spacer class="colorpickertile" style="background-color: #6600CC" color="#6600CC"/>
78 <xul:spacer class="colorpickertile" style="background-color: #993399" color="#993399"/>
79 </xul:hbox>
80 <xul:hbox>
81 <xul:spacer class="colorpickertile" style="background-color: #333333" color="#333333"/>
82 <xul:spacer class="colorpickertile" style="background-color: #660000" color="#660000"/>
83 <xul:spacer class="colorpickertile" style="background-color: #993300" color="#993300"/>
84 <xul:spacer class="colorpickertile" style="background-color: #996633" color="#996633"/>
85 <xul:spacer class="colorpickertile" style="background-color: #666600" color="#666600"/>
86 <xul:spacer class="colorpickertile" style="background-color: #006600" color="#006600"/>
87 <xul:spacer class="colorpickertile" style="background-color: #336666" color="#336666"/>
88 <xul:spacer class="colorpickertile" style="background-color: #000099" color="#000099"/>
89 <xul:spacer class="colorpickertile" style="background-color: #333399" color="#333399"/>
90 <xul:spacer class="colorpickertile" style="background-color: #663366" color="#663366"/>
91 </xul:hbox>
92 <xul:hbox>
93 <xul:spacer class="colorpickertile" style="background-color: #000000" color="#000000"/>
94 <xul:spacer class="colorpickertile" style="background-color: #330000" color="#330000"/>
95 <xul:spacer class="colorpickertile" style="background-color: #663300" color="#663300"/>
96 <xul:spacer class="colorpickertile" style="background-color: #663333" color="#663333"/>
97 <xul:spacer class="colorpickertile" style="background-color: #333300" color="#333300"/>
98 <xul:spacer class="colorpickertile" style="background-color: #003300" color="#003300"/>
99 <xul:spacer class="colorpickertile" style="background-color: #003333" color="#003333"/>
100 <xul:spacer class="colorpickertile" style="background-color: #000066" color="#000066"/>
101 <xul:spacer class="colorpickertile" style="background-color: #330099" color="#330099"/>
102 <xul:spacer class="colorpickertile" style="background-color: #330033" color="#330033"/>
103 </xul:hbox>
104 </xul:vbox>
105 <!-- Something to take tab focus
106 <button style="border : 0px; width: 0px; height: 0px;"/>
107 -->
108 </content>
110 <implementation implements="nsIDOMEventListener">
111 <property name="color">
112 <getter><![CDATA[
113 return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
114 ]]></getter>
115 <setter><![CDATA[
116 if (!val)
117 return val;
118 var uppercaseVal = val.toUpperCase();
119 // Translate standard HTML color strings:
120 if (uppercaseVal[0] != "#") {
121 switch (uppercaseVal) {
122 case "GREEN":
123 uppercaseVal = "#008000";
124 break;
125 case "LIME":
126 uppercaseVal = "#00FF00";
127 break;
128 case "OLIVE":
129 uppercaseVal = "#808000";
130 break;
131 case "TEAL":
132 uppercaseVal = "#008080";
133 break;
134 case "YELLOW":
135 uppercaseVal = "#FFFF00";
136 break;
137 case "RED":
138 uppercaseVal = "#FF0000";
139 break;
140 case "MAROON":
141 uppercaseVal = "#800000";
142 break;
143 case "PURPLE":
144 uppercaseVal = "#800080";
145 break;
146 case "FUCHSIA":
147 uppercaseVal = "#FF00FF";
148 break;
149 case "NAVY":
150 uppercaseVal = "#000080";
151 break;
152 case "BLUE":
153 uppercaseVal = "#0000FF";
154 break;
155 case "AQUA":
156 uppercaseVal = "#00FFFF";
157 break;
158 case "WHITE":
159 uppercaseVal = "#FFFFFF";
160 break;
161 case "SILVER":
162 uppercaseVal = "#C0C0C0";
163 break;
164 case "GRAY":
165 uppercaseVal = "#808080";
166 break;
167 default: // BLACK
168 uppercaseVal = "#000000";
169 break;
170 }
171 }
172 var cells = this.mBox.getElementsByAttribute("color", uppercaseVal);
173 if (cells.item(0)) {
174 this.selectCell(cells[0]);
175 this.hoverCell(this.mSelectedCell);
176 }
177 return val;
178 ]]></setter>
179 </property>
181 <method name="initColor">
182 <parameter name="aColor"/>
183 <body><![CDATA[
184 // Use this to initialize color without
185 // triggering the "onselect" handler,
186 // which closes window when it's a popup
187 this.mDoOnSelect = false;
188 this.color = aColor;
189 this.mDoOnSelect = true;
190 ]]></body>
191 </method>
193 <method name="initialize">
194 <body><![CDATA[
195 this.mSelectedCell = null;
196 this.mHoverCell = null;
197 this.mBox = document.getAnonymousNodes(this)[0];
198 this.mIsPopup = false;
199 this.mDoOnSelect = true;
201 this.hoverCell(this.mBox.childNodes[0].childNodes[0]);
203 // used to capture keydown at the document level
204 this.mPickerKeyDown = function(aEvent)
205 {
206 document._focusedPicker.pickerKeyDown(aEvent);
207 }
209 ]]></body>
210 </method>
212 <method name="_fireEvent">
213 <parameter name="aTarget"/>
214 <parameter name="aEventName"/>
215 <body>
216 <![CDATA[
217 try {
218 var event = document.createEvent("Events");
219 event.initEvent(aEventName, true, true);
220 var cancel = !aTarget.dispatchEvent(event);
221 if (aTarget.hasAttribute("on" + aEventName)) {
222 var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
223 var rv = fn.call(aTarget, event);
224 if (rv == false)
225 cancel = true;
226 }
227 return !cancel;
228 }
229 catch (e) {
230 Components.utils.reportError(e);
231 }
232 return false;
233 ]]>
234 </body>
235 </method>
237 <method name="resetHover">
238 <body><![CDATA[
239 if (this.mHoverCell)
240 this.mHoverCell.removeAttribute("hover");
241 ]]></body>
242 </method>
244 <method name="getColIndex">
245 <parameter name="aCell"/>
246 <body><![CDATA[
247 var cell = aCell;
248 var idx;
249 for (idx = -1; cell; idx++)
250 cell = cell.previousSibling;
252 return idx;
253 ]]></body>
254 </method>
256 <method name="isColorCell">
257 <parameter name="aCell"/>
258 <body><![CDATA[
259 return aCell && aCell.hasAttribute("color");
260 ]]></body>
261 </method>
263 <method name="hoverLeft">
264 <body><![CDATA[
265 var cell = this.mHoverCell.previousSibling;
266 this.hoverCell(cell);
267 ]]></body>
268 </method>
270 <method name="hoverRight">
271 <body><![CDATA[
272 var cell = this.mHoverCell.nextSibling;
273 this.hoverCell(cell);
274 ]]></body>
275 </method>
277 <method name="hoverUp">
278 <body><![CDATA[
279 var row = this.mHoverCell.parentNode.previousSibling;
280 if (row) {
281 var colIdx = this.getColIndex(this.mHoverCell);
282 var cell = row.childNodes[colIdx];
283 this.hoverCell(cell);
284 }
285 ]]></body>
286 </method>
288 <method name="hoverDown">
289 <body><![CDATA[
290 var row = this.mHoverCell.parentNode.nextSibling;
291 if (row) {
292 var colIdx = this.getColIndex(this.mHoverCell);
293 var cell = row.childNodes[colIdx];
294 this.hoverCell(cell);
295 }
296 ]]></body>
297 </method>
299 <method name="hoverTo">
300 <parameter name="aRow"/>
301 <parameter name="aCol"/>
303 <body><![CDATA[
304 var row = this.mBox.childNodes[aRow];
305 if (!row) return;
306 var cell = row.childNodes[aCol];
307 if (!cell) return;
308 this.hoverCell(cell);
309 ]]></body>
310 </method>
312 <method name="hoverCell">
313 <parameter name="aCell"/>
315 <body><![CDATA[
316 if (this.isColorCell(aCell)) {
317 this.resetHover();
318 aCell.setAttribute("hover", "true");
319 this.mHoverCell = aCell;
320 var event = document.createEvent('Events');
321 event.initEvent('DOMMenuItemActive', true, true);
322 aCell.dispatchEvent(event);
323 }
324 ]]></body>
325 </method>
327 <method name="selectHoverCell">
328 <body><![CDATA[
329 this.selectCell(this.mHoverCell);
330 ]]></body>
331 </method>
333 <method name="selectCell">
334 <parameter name="aCell"/>
336 <body><![CDATA[
337 if (this.isColorCell(aCell)) {
338 if (this.mSelectedCell)
339 this.mSelectedCell.removeAttribute("selected");
341 this.mSelectedCell = aCell;
342 aCell.setAttribute("selected", "true");
344 if (this.mDoOnSelect)
345 this._fireEvent(this, "select");
346 }
347 ]]></body>
348 </method>
350 <method name="handleEvent">
351 <parameter name="aEvent"/>
352 <body><![CDATA[
353 switch (aEvent.keyCode) {
354 case 37: // left
355 this.hoverLeft();
356 break;
357 case 38: // up
358 this.hoverUp();
359 break;
360 case 39: // right
361 this.hoverRight();
362 break;
363 case 40: // down
364 this.hoverDown();
365 break;
366 case 13: // enter
367 case 32: // space
368 this.selectHoverCell();
369 break;
370 }
371 ]]></body>
372 </method>
374 <constructor><![CDATA[
375 this.initialize();
376 ]]></constructor>
378 </implementation>
380 <handlers>
381 <handler event="mouseover"><![CDATA[
382 this.hoverCell(event.originalTarget);
383 ]]></handler>
385 <handler event="click"><![CDATA[
386 if (event.originalTarget.hasAttribute("color")) {
387 this.selectCell(event.originalTarget);
388 this.hoverCell(this.mSelectedCell);
389 }
390 ]]></handler>
393 <handler event="focus" phase="capturing">
394 <![CDATA[
395 if (!mIsPopup && this.getAttribute('focused') != 'true') {
396 this.setAttribute('focused','true');
397 document.addEventListener("keydown", this, true);
398 if (this.mSelectedCell)
399 this.hoverCell(this.mSelectedCell);
400 }
401 ]]>
402 </handler>
404 <handler event="blur" phase="capturing">
405 <![CDATA[
406 if (!mIsPopup && this.getAttribute('focused') == 'true') {
407 document.removeEventListener("keydown", this, true);
408 this.removeAttribute('focused');
409 this.resetHover();
410 }
411 ]]>
412 </handler>
413 </handlers>
414 </binding>
416 <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
417 extends="chrome://global/content/bindings/general.xml#basecontrol">
418 <resources>
419 <stylesheet src="chrome://global/skin/colorpicker.css"/>
420 </resources>
422 <content>
423 <xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
425 <xul:panel class="colorpicker-button-menupopup"
426 anonid="colorpopup" noautofocus="true" level="top"
427 onmousedown="event.stopPropagation()"
428 onpopupshowing="this._colorPicker.onPopupShowing()"
429 onpopuphiding="this._colorPicker.onPopupHiding()"
430 onselect="this._colorPicker.pickerChange()">
431 <xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
432 </xul:panel>
433 </content>
435 <implementation>
436 <property name="open"
437 onget="return this.getAttribute('open') == 'true'"
438 onset="this.showPopup();"/>
439 <property name="color">
440 <getter><![CDATA[
441 return this.getAttribute("color");
442 ]]></getter>
443 <setter><![CDATA[
444 this.mColorBox.style.backgroundColor = val;
445 this.setAttribute("color", val);
446 return val;
447 ]]></setter>
448 </property>
450 <method name="initialize">
451 <body><![CDATA[
452 this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
453 this.mColorBox.style.backgroundColor = this.color;
455 var popup = document.getAnonymousElementByAttribute(this, "anonid", "colorpopup")
456 popup._colorPicker = this;
458 this.mPicker = document.getAnonymousElementByAttribute(this, "anonid", "colorpicker")
459 ]]></body>
460 </method>
462 <method name="_fireEvent">
463 <parameter name="aTarget"/>
464 <parameter name="aEventName"/>
465 <body>
466 <![CDATA[
467 try {
468 var event = document.createEvent("Events");
469 event.initEvent(aEventName, true, true);
470 var cancel = !aTarget.dispatchEvent(event);
471 if (aTarget.hasAttribute("on" + aEventName)) {
472 var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
473 var rv = fn.call(aTarget, event);
474 if (rv == false)
475 cancel = true;
476 }
477 return !cancel;
478 }
479 catch (e) {
480 dump(e);
481 }
482 return false;
483 ]]>
484 </body>
485 </method>
487 <method name="showPopup">
488 <body><![CDATA[
489 this.mPicker.parentNode.openPopup(this, "after_start", 0, 0, false, false);
490 ]]></body>
491 </method>
493 <method name="hidePopup">
494 <body><![CDATA[
495 this.mPicker.parentNode.hidePopup();
496 ]]></body>
497 </method>
499 <method name="onPopupShowing">
500 <body><![CDATA[
501 if ("resetHover" in this.mPicker)
502 this.mPicker.resetHover();
503 document.addEventListener("keydown", this.mPicker, true);
504 this.mPicker.mIsPopup = true;
505 // Initialize to current button's color
506 this.mPicker.initColor(this.color);
507 ]]></body>
508 </method>
510 <method name="onPopupHiding">
511 <body><![CDATA[
512 // Removes the key listener
513 document.removeEventListener("keydown", this.mPicker, true);
514 this.mPicker.mIsPopup = false;
515 ]]></body>
516 </method>
518 <method name="pickerChange">
519 <body><![CDATA[
520 this.color = this.mPicker.color;
521 setTimeout(function(aPopup) { aPopup.hidePopup() }, 1, this.mPicker.parentNode);
523 this._fireEvent(this, "change");
524 ]]></body>
525 </method>
527 <constructor><![CDATA[
528 this.initialize();
529 ]]></constructor>
531 </implementation>
533 <handlers>
534 <handler event="keydown"><![CDATA[
535 // open popup if key is space/up/left/right/down and popup is closed
536 if ( (event.keyCode == 32 || (event.keyCode > 36 && event.keyCode < 41)) && !this.open)
537 this.showPopup();
538 else if ( (event.keyCode == 27) && this.open)
539 this.hidePopup();
540 ]]></handler>
541 </handlers>
542 </binding>
544 <binding id="colorpickertile" role="xul:colorpickertile">
545 </binding>
547 </bindings>
