xbl 扩展 - 不能覆盖属性答案

【问题标题】：xbl extends - can't override propertyxbl 扩展 - 不能覆盖属性
【发布时间】：2014-04-23 13:20:19
【问题描述】：

我正在尝试扩展 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-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==);
}

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

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

我做错了什么？

谢谢。

【问题讨论】：

这个人在 xbl 上帮了我很多，我在 stackoverflow 上没有任何帮助，尝试在那里发帖：ask.mozilla.org/question/297/…
我找不到任何有关此的信息，但有人提到我遇到的问题是因为我将皮肤 url 用于 .xml 并且确实如果我将其更改为内容 (chrome:// example/content/myxbl.xml) 然后它工作正常。
是的，我在使用资源 url 时遇到了问题，我不得不使用 chrome，我忘了向你提及，谢谢提醒 +1

标签： css firefox-addon xbl

【解决方案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");
}

【讨论】：