Question

我正在尝试扩展colorpicker的一些功能（chrome：//global/content/bindings/colorpicker.xml），这需要修改颜色属性。到目前为止，我已经管理了添加一些内容，但属性设置器根本没有被覆盖。似乎实现部分中的任何内容都被忽略

这是我到目前为止所做的：

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>

和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==);
}

表格中添加了一个新的“透明”颜色，选择它有效，按钮也显示正确的“透明”背景，但是当颜色表打开时，未预先选择透明颜色。

从我能看到的是我的新“颜色”属性设置器根本没有被使用。

我做错了什么？

谢谢。

Answer 1

原来问题是如何在CSS中应用绑定。您不能将皮肤网址用于xbl文件：

坏：

-moz-binding：url（＆＃34; chrome：// myextension / skin /colorpicker-extended.xml#colorpicker"）;

好：

-moz-binding：url（＆＃34; chrome：// myextension / content /colorpicker-extended.xml#colorpicker"）;

所以在我的情况下，因为我在内容中有皮肤文件夹所有我不得不做的就是将css更改为：

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

xbl extends - 无法覆盖属性

1 个答案: