gecko/toolkit/content/widgets/colorpicker.xml

<?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, 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="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" extends="xul:menu">
    <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"
                 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 implements="nsIAccessibleProvider, nsIDOMXULControlElement">
      <property name="accessibleType" readonly="true">
        <getter>
          <![CDATA[
            return Components.interfaces.nsIAccessibleProvider.XULColorPicker;
          ]]>
        </getter>
      </property>
    
      <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.setAttribute("style", "background-color: " + 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();
          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[
          // 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.open)
          this.showPopup();
        else if ( (event.keyCode == 27) && this.open)
          this.hidePopup();
      ]]></handler>
    </handlers>
  </binding>

  <binding id="colorpickertile">
    <implementation implements="nsIAccessibleProvider">
      <property name="accessibleType" readonly="true">
        <getter>
          <![CDATA[
            return Components.interfaces.nsIAccessibleProvider.XULColorPickerTile;
          ]]>
        </getter>
      </property>
    </implementation>
  </binding>

</bindings>