对匿名元素添加伪元素和光标样式以及事件侦听器

Question

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

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

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

Answer 1

看起来这些嵌套的匿名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"。如果您不想要，则需要修改绑定，不要使用display=并修复任何中断的内容。