The Tor Browser: toolkit/content/widgets/colorpicker.xml@6474c204b198 (annotated)

toolkit/content/widgets/colorpicker.xml@6474c204b198 (annotated)

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.

 <?xml version="1.0"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.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 implements="nsIDOMEventListener">
       <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 (uppercaseVal) {
               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 = "#C0C0C0";
                 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, true, 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) {
             Components.utils.reportError(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', true, 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="handleEvent">
         <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');
           document.addEventListener("keydown", this, true);
           if (this.mSelectedCell)
             this.hoverCell(this.mSelectedCell);
         }
       ]]>
       </handler>
       <handler event="blur" phase="capturing">
       <![CDATA[
         if (!mIsPopup && this.getAttribute('focused') == 'true') {
           document.removeEventListener("keydown", this, true);
           this.removeAttribute('focused');
           this.resetHover();
         }
       ]]>
       </handler>
     </handlers>
   </binding>
   <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
            extends="chrome://global/content/bindings/general.xml#basecontrol">
     <resources>
       <stylesheet src="chrome://global/skin/colorpicker.css"/>
     </resources>
     <content>
       <xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
       <xul:panel class="colorpicker-button-menupopup"
                  anonid="colorpopup" noautofocus="true" level="top"
                  onmousedown="event.stopPropagation()"
                  onpopupshowing="this._colorPicker.onPopupShowing()"
                  onpopuphiding="this._colorPicker.onPopupHiding()"
                  onselect="this._colorPicker.pickerChange()">
         <xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
       </xul:panel>
     </content>
     <implementation>
       <property name="open"
                 onget="return this.getAttribute('open') == 'true'"
                 onset="this.showPopup();"/>
       <property name="color">
         <getter><![CDATA[
           return this.getAttribute("color");
         ]]></getter>
         <setter><![CDATA[
           this.mColorBox.style.backgroundColor = val;
           this.setAttribute("color", val);
           return val;
         ]]></setter>
       </property>
       <method name="initialize">
         <body><![CDATA[
           this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
           this.mColorBox.style.backgroundColor = this.color;
           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, true, 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.openPopup(this, "after_start", 0, 0, false, false);
         ]]></body>
       </method>
       <method name="hidePopup">
         <body><![CDATA[
           this.mPicker.parentNode.hidePopup();
         ]]></body>
       </method>
       <method name="onPopupShowing">
         <body><![CDATA[
           if ("resetHover" in this.mPicker)
             this.mPicker.resetHover();
           document.addEventListener("keydown", this.mPicker, true);
           this.mPicker.mIsPopup = true;
           // Initialize to current button's color
           this.mPicker.initColor(this.color);
         ]]></body>
       </method>
       <method name="onPopupHiding">
         <body><![CDATA[
           // Removes the key listener
           document.removeEventListener("keydown", this.mPicker, true);
           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.open)
           this.showPopup();
         else if ( (event.keyCode == 27) && this.open)
           this.hidePopup();
       ]]></handler>
     </handlers>
   </binding>
   <binding id="colorpickertile" role="xul:colorpickertile">
   </binding>
 </bindings>

The Tor Browser / annotate

toolkit/content/widgets/colorpicker.xml@6474c204b198 (annotated)

toolkit/content/widgets/colorpicker.xml