Question

I'm trying extend some functionality of colorpicker (chrome://global/content/bindings/colorpicker.xml) which requires modification of color property. So far I've managed add some content, but property setter not being overrided at all. It seems anything in implementation section being ignored

Here is what I have so far:

colorpicker_extended.xml

<?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">
-->
  <binding id="colorpicker" extends="chrome://global/content/bindings/colorpicker.xml#colorpicker">
    <implementation implements="nsIDOMEventListener">
      <property name="color">
        <getter><![CDATA[
          return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
        ]]></getter>
        <setter><![CDATA[
//allow empty value
//but doesn't work
//          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>
    </implementation>    
  </binding>

<!--
  <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
           extends="chrome://global/content/bindings/general.xml#basecontrol">
-->
  <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
           extends="chrome://global/content/bindings/colorpicker.xml#colorpicker-button">
  </binding>

  <binding id="extended" extends="chrome://global/content/bindings/colorpicker.xml#colorpicker">
    <content>
      <children/>
      <xul:hbox>
        <xul:spacer class="colorpickertile" color=""/>
      </xul:hbox>
    </content>
  </binding>

</bindings>

And colorpicker-exteneded.css:

colorpicker
{
    -moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#colorpicker");
}
colorpicker[type="button"]
{
    -moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#colorpicker-button");
}
colorpicker > vbox
{
    -moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#extended");
}
.colorpickertile[color=""],
colorpicker[type="button"][color=""] > hbox
{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXZ3uX///9HjKIIAAAAHElEQVR42mJgBAIGIIDRDGQIkKkNRWCQuAMgwABFEACBx3mMOgAAAABJRU5ErkJggg==);
}

There is a new "transparent" color added to the table, selecting it works, the button also shows correct "transparent" background, but when colors table opens the transparent color not pre-selected.

From what I could see is that my new "color" property setter is not being used at all.

What am I doing wrong?

Thank you.

Was it helpful?

Solution

It turned out the problem is how the binding is being applied in CSS. You can't use skin url for xbl file:

Bad:

-moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#colorpicker");

Good:

-moz-binding: url("chrome://myextension/content/colorpicker-extended.xml#colorpicker");

So in my case since I had skin folder inside content all I had to do is change css to this:

colorpicker
{
    -moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#colorpicker");
}
colorpicker[type="button"]
{
    -moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#colorpicker-button");
}
colorpicker > vbox
{
    -moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#extended");
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top