0

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.

3
  • this guy here helped me a lot with xbl, i got no help on stackoverflow, try posting there: ask.mozilla.org/question/297/…
    – Noitidart
    Apr 23, 2014 at 16:44
  • 1
    I can't find any information regarding this, but someone mention that the probkem I'm having is because I use skin url for .xml And indeed if I change it to content (chrome://example/content/myxbl.xml) then it works fine.
    – vanowm
    Apr 29, 2014 at 18:40
  • Yeah i had problem using resource url i had to use chrome to I forgot to mention that to you, thx for reminnder +1
    – Noitidart
    Apr 30, 2014 at 3:21

1 Answer 1

1

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");
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.