익명 요소에 의사 요소 및 커서 스타일 및 이벤트 수신기 추가

Question

toolbarbutton xul 요소에이 익명 요소가 있습니다. xul:image입니다. 나는 그것을 의사 요소 (:before, :after)로주고 싶다. 그리고 호버에 나는 그것을주고 싶습니다 cursor:pointer 스타일. 나는 또한 addEventListener('click', ...)하고 싶다. 그러나 이것의 아무도는 작동하지 않는다.

심지어 XBL을 수정하여 내 스택 요소를 삽입 한 다음 스택 요소에서이 요소를 시도했지만 작동하지 않습니다.

이 작업을 도와주세요.

익명 요소 검사 DOM 검사기 추가 기능.

Answer 1

그것은이 중첩 된 익명 xul:image 노드 지원 (::before) 의사 요소를 전혀하지 않는 것을 (나는이 요소에 포인트를 설정하고 그것을 의사 요소를주고 그것을하면 onMouseDown 기능을 제공하기 위해 노력하고있어) . 아니면 toolbarbutton 바인딩이 display="xul:button"이기 때문일 수도 있습니다 ... 레이아웃 엔진 내부의 어딘가에서 상위 요소가 생성 된 ::before 의사 요소를 채택하는 것을 거부했기 때문에 디버거가 말합니다. XUL! = HTML을 기억하십시오.

그러나 새 바인딩에 물건을 바인딩하거나 다시 바인딩 할 수 있습니다.

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

그리고 새로운 바인딩 :

나는 (픽셀 완벽한 재현 될 것을 의미하지 질문 코멘트에서 예를 아날로그하지만) 스타일 동기화 버튼 바인드를 다시하기 위해 CSS를 사용 , 기본 바인딩을 기반으로 : 내가 그랬던 것처럼

<?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로 배지를 설정할 수 있습니다하거나, (바인딩에 즉 src=badge 상속) <toolbarbutton ... badge="{url}"/>를 사용.

addEventListener/cursor 내용 : 정확히 무엇을 요구하고 있는지 명확하지 않습니다.

당신은 그것의 하위 요소와 모든 일반적인 도구 모음 단추 (addEventListener, command=/oncommand=, ...)와 방법,하지만 사용할 수 있습니다.

cursor: 스타일은 toolbarbutton과 함께 사용할 수 있지만 하위 요소는 사용할 수 없습니다.

두 가지 모두 바인딩에 display="xul:button"이 원인입니다. 원하지 않으면 바인딩을 수정하여 display=을 사용하지 말고 중단되는 모든 것을 고칠 필요가 있습니다.