0

我正在尝试扩展颜色选择器（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-extended.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==);
}

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

据我所知，我的新“颜色”属性设置器根本没有被使用。

我究竟做错了什么？

谢谢你。

4

1 回答 1

1

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

坏的：

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

好的：

-moz-binding: url("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");
}
于 2014-04-30T01:10:52.850 回答