动态解除绑定动态绑定 XBL 的方法

Question

我在一个无需重启的插件中应用这样的绑定：

var css = '.findbar-container { -moz-binding:url("' + self.path.chrome + 'findbar.xml#matchword") }';
var cssEnc = encodeURIComponent(css);
var newURIParam = {
    aURL: 'data:text/css,' + cssEnc,
    aOriginCharset: null,
    aBaseURI: null
}
cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
myServices.sss.loadAndRegisterSheet(cssUri, myServices.sss.USER_SHEET);

findbar.xml 内容为：

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="matchword">
        <content>
            <children/>
            <xul:toolbarbutton anonid="matchwordbtn" accesskey="w" class="tabbable" label="Whole Word Only" tooltiptext="Match only whole words" oncommand="console.log('hi')" type="checkbox"/>
        </content>
    </binding>
</bindings>

这只是在FindBar 中添加了一个按钮，标记为“仅全字”。但现在要删除它，我只是用myServices.sss.unregisterSheet(cssUri, myServices.sss.USER_SHEET); 取消注册样式表，但这并不是取消绑定它。

answer on ask.mozilla.org 告诉我这是预期行为，但没有提供解决方案。

我在想也许我应该动态添加绑定而不是通过 CSS，我没有对此进行测试，但它不符合 XBL 更新的 3 个原因：

1. 绑定元素匹配指定不同绑定的样式规则
2. 元素已从绑定文档中移除
3. 元素被销毁（例如，通过关闭文档）

答案告诉我这是意料之中但时髦的行为。

Answer 1

嗯，我只记得我有一些工作代码可以（重新）绑定不同的 XBL 绑定。

是这样的：

• 是否存在基本绑定（在您的情况下是 .findbar-container 的原始绑定）。
• 然后我有多个类定义不同的-moz-bindings。
• 这些类在运行时设置和删除。

既然这对我有用，理论上它应该对你有用：

• 在您的风格中，没有针对元素本身的规则，而是针对一个类，例如

  .findbar-container.myaddonclass { moz-binding: ... }
  

• 在您的代码中，在加载时添加该新类，例如

  Array.forEach(
    document.querySelectorAll(".findbar-container"),
    e => e.classList.add("myaddonclass")
    );
  

• 在您的代码中，卸载时再次删除该类：

  Array.forEach(
    document.querySelectorAll(".findbar-container"),
    e => e.classList.remove("myaddonclass")
    );
  

这应该强制重新评估 CSS 规则，并使用它重新评估绑定，因此符合“绑定元素匹配指定不同绑定的样式规则”规则。

当然，如果不是所有要重新绑定的元素都已在加载加载项时出现，这很糟糕，但 MutationObserver 可以帮助解决这个问题...