2

toolbarbutton我在xul 元素中有这个匿名元素。这是一个xul:image。我想给它一个伪元素（:before，:after）。在悬停时，我想赋予它cursor:pointer风格。我也想要addEventListener('click', ...)。然而，这些都不起作用。

我什至修改了 XBL 以注入我自己的堆栈元素，然后在堆栈元素上尝试这些东西，但它不起作用。

检查匿名元素 DOM Inspector 插件。（我试图在这个元素上设置点并给它一个伪元素并给它 onMouseDown 功能）

截屏

4

1 回答 1

3

xul:image这些嵌套的匿名节点似乎根本不支持 ( ::before) 伪元素。或者可能是因为toolbarbutton绑定是display="xul:button"......在布局引擎的深处，父元素完全拒绝采用生成的::before伪元素，我的调试器说。请记住XUL!= HTML。

但是，您可以将内容绑定和/或重新绑定到新绑定。

我使用这个 CSS 重新绑定和设置同步按钮的样式（类似于问题评论中的示例，但并不意味着是像素完美的再现）：

#PanelUI-fxa-status {
  -moz-binding: url(toolbarbutton.xml#toolbarbutton);
}
#PanelUI-fxa-status .toolbarbutton-badge {
  list-style-image: url(chrome://browser/skin/places/query.png);
  transform: translate(8px,8px) scale(0.7);
  border: 1px solid red;
}

以及基于默认绑定的新绑定：

<?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
   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="toolbarbutton" display="xul:button" role="xul:toolbarbutton"
           extends="chrome://global/content/bindings/button.xml#button-base">
    <resources>
      <stylesheet src="chrome://global/skin/toolbarbutton.css"/>
    </resources>

    <content>
      <children includes="observes|template|menupopup|panel|tooltip"/>
      <xul:stack>
        <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=bage,label"/>
        <xul:image class="toolbarbutton-badge" xbl:inherits="validate,src=image,label"/>
      </xul:stack>
      <xul:label class="toolbarbutton-text" crop="right" flex="1"
                 xbl:inherits="value=label,accesskey,crop,wrap"/>
      <xul:label class="toolbarbutton-multiline-text" flex="1"
                 xbl:inherits="xbl:text=label,accesskey,wrap"/>
    </content>
  </binding>
</bindings>

您可以像我一样使用 CSS 设置徽章，也可以使用<toolbarbutton ... badge="{url}"/>（即src=badge绑定中的继承）。

关于addEventListener/的cursor东西：这里不太清楚你到底要什么？

您可以将所有常用方法与工具栏按钮 ( addEventListener, command=/ oncommand=, ...) 一起使用，但不能与它的子元素一起使用。

您可以将cursor:样式与 . 一起使用toolbarbutton，但不能与它的子元素一起使用。

两者都是由于display="xul:button"在绑定。如果您不希望这样，则需要修改绑定以不使用 adisplay=并修复任何损坏的东西。

于 2014-06-25T06:08:34.167 回答