为匿名元素添加伪元素和游标样式和事件侦听器 [英] To anonymous element add pseudo element and cursor style and event listeners

问题描述

在 toolbarbutton xul元素中有这个匿名元素。这是一个 xul：image 。我想给它一个伪元素（：在之前，：在之后）。悬停我想给它 cursor：pointer style。我也想要 addEventListener（'click'，...）它。但是，这些都没有成功。

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

请帮我做到这一点。

检查匿名元素DOM Inspector附加组件。 （我试图设置这个元素的点，并给它一个伪元素，并给它onMouseDown的功能）

解决方案

像这些嵌套的匿名 xul：image 节点支持（ :: before ）伪元素。也许是因为 toolbarbutton 绑定是 display =xul：button ...引擎的父元素彻底拒绝采用生成的 :: before 伪元素，我的调试器说。请记住 XUL ！= HTML 。

你可以绑定和/或重新绑定的东西到一个新的绑定。

我用这个CSS重新绑定和风格的同步按钮（类似于你的例子从问题的意见，但并不意味着像素完美再现）：

pre $＃$ c $＃> 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纯红色;
}


与新绑定一样，基于默认绑定：

 <？xml version =1.0？> 
 <！ - 此源代码表格受Mozilla公共
  - 许可证第2.0版的条款约束。如果MPL的副本没有与
文件一起分发，您可以从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> 
 
  extends =chrome：//global/content/bindings/button.xml ＃按钮基> 
<资源> 
< stylesheet src =chrome：//global/skin/toolbarbutton.css/> 
< /资源> 
 
< content> 
< children includes =observes | template | menupopup | panel | tooltip/> 
< xul：stack> 
  < / xul：stack> 
  xbl：inherits =value = label，accesskey，crop，wrap/> 
< xul：label class =toolbarbutton-multiline-textflex =1
 xbl：inherits =xbl：text = label，accesskey，wrap/> 
< / content> 
< / binding> 
< / bindings> 
  

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

关于 addEventListener / 游标你可以用工具栏按钮（ addEventListener >）来使用所有常用的方法， ， command = / oncommand = ，...），但不包含子元素。

使用 toolbarbutton 可以使用 cursor：样式，但不能子元素。

这两个都是由绑定中的 display =xul：button引起的。如果你不想这样做，你需要修改绑定，不要使用 display = ，并修复所有破坏的东西。

I have this anonymous element in the toolbarbutton xul element. It's a xul:image. I want to give it a pseudo element (:before, :after). And on hover I want to give it cursor:pointer style. I also want to addEventListener('click', ...) it. However none of this works.

I even modified the XBL to inject my own stack element and then try this stuff on the stack element but it just doesnt work.

Please help me to accomplish this.

Inspecting the anonymous elements DOM Inspector add-on. (I'm trying to set point on this element and give it a pseudo element and give it onMouseDown functionality)

解决方案

It doesn't seem like these nested, anonymous xul:image nodes support (::before) pseudo-elements at all. Or maybe it is because the toolbarbutton binding is display="xul:button"... Somewhere deep inside the layout engine the parent element outright refused to adopt the generated ::before pseudo-element, my debugger says. Remember that XUL != HTML.

However, you can bind and/or rebind stuff to a new binding.

I used this CSS to re-bind and style the sync button (analog to your example from the question comments, but not meant to be a pixel-perfect reproduction):

#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;
}

And the new binding, based on the default binding:

<?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>

You could either set the badge with CSS, as I did, or using <toolbarbutton ... badge="{url}"/> (i.e. the src=badge inheritance in the binding).

Regarding the addEventListener/cursor stuff: It is not quite clear here what exactly you are asking for?

You can use all the usual methods with the toolbar button (addEventListener, command=/oncommand=, ...), but not with child elements of it.

You can use cursor: styles with the toolbarbutton, but not with child elements of it.

Both are due to display="xul:button" in the binding. If you don't want that, you'll need to modify the binding not to use a display= and fix any stuff that breaks.

这篇关于为匿名元素添加伪元素和游标样式和事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！