xbl extends - 속성을 재정의 할 수 없습니다.

Question

color 속성을 수정해야하는 colorpicker (chrome : //global/content/bindings/colorpicker.xml)의 일부 기능을 확장하려고합니다. 지금까지 일부 콘텐츠를 추가 관리했지만 속성 설정자는 전혀 무시되지 않았습니다.

colorpicker_extended.xml

<?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 id="colorpickerBindings" 
    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="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol"> 
--> 
    <binding id="colorpicker" extends="chrome://global/content/bindings/colorpicker.xml#colorpicker"> 
    <implementation implements="nsIDOMEventListener"> 
     <property name="color"> 
     <getter><![CDATA[ 
      return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null; 
     ]]></getter> 
     <setter><![CDATA[ 
//allow empty value 
//but doesn't work 
//   if (!val) 
//   return val; 
      var uppercaseVal = val.toUpperCase(); 
      // Translate standard HTML color strings: 
      if (uppercaseVal[0] != "#") { 
      switch (uppercaseVal) { 
       case "GREEN": 
       uppercaseVal = "#008000"; 
       break; 
       case "LIME": 
       uppercaseVal = "#00FF00"; 
       break; 
       case "OLIVE": 
       uppercaseVal = "#808000"; 
       break; 
       case "TEAL": 
       uppercaseVal = "#008080"; 
       break; 
       case "YELLOW": 
       uppercaseVal = "#FFFF00"; 
       break; 
       case "RED": 
       uppercaseVal = "#FF0000"; 
       break; 
       case "MAROON": 
       uppercaseVal = "#800000"; 
       break; 
       case "PURPLE": 
       uppercaseVal = "#800080"; 
       break; 
       case "FUCHSIA": 
       uppercaseVal = "#FF00FF"; 
       break; 
       case "NAVY": 
       uppercaseVal = "#000080"; 
       break; 
       case "BLUE": 
       uppercaseVal = "#0000FF"; 
       break; 
       case "AQUA": 
       uppercaseVal = "#00FFFF"; 
       break; 
       case "WHITE": 
       uppercaseVal = "#FFFFFF"; 
       break; 
       case "SILVER": 
       uppercaseVal = "#C0C0C0"; 
       break; 
       case "GRAY": 
       uppercaseVal = "#808080"; 
       break; 
       default: // BLACK 
       uppercaseVal = "#000000"; 
       break; 
      } 
      } 
      var cells = this.mBox.getElementsByAttribute("color", uppercaseVal); 
      if (cells.item(0)) { 
      this.selectCell(cells[0]); 
      this.hoverCell(this.mSelectedCell); 
      } 
      return val; 
     ]]></setter> 
     </property> 
    </implementation>  
    </binding> 

<!-- 
    <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker" 
      extends="chrome://global/content/bindings/general.xml#basecontrol"> 
--> 
    <binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker" 
      extends="chrome://global/content/bindings/colorpicker.xml#colorpicker-button"> 
    </binding> 

    <binding id="extended" extends="chrome://global/content/bindings/colorpicker.xml#colorpicker"> 
    <content> 
     <children/> 
     <xul:hbox> 
     <xul:spacer class="colorpickertile" color=""/> 
     </xul:hbox> 
    </content> 
    </binding> 

</bindings> 

그리고 ColorPicker를-exteneded.css :

colorpicker 
{ 
    -moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#colorpicker"); 
} 
colorpicker[type="button"] 
{ 
    -moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#colorpicker-button"); 
} 
colorpicker > vbox 
{ 
    -moz-binding: url("chrome://myextension/skin/colorpicker-extended.xml#extended"); 
} 
.colorpickertile[color=""], 
colorpicker[type="button"][color=""] > hbox 
{ 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEXZ3uX///9HjKIIAAAAHElEQVR42mJgBAIGIIDRDGQIkKkNRWCQuAMgwABFEACBx3mMOgAAAABJRU5ErkJggg==); 
} 

을 내가 지금까지 무엇을 구현 섹션에 아무것도 여기

무시되고있는 것 같다 거기에 새로운 "투명"색상이 테이블에 추가, 그것이 작동 선택, 버튼도 올바른 "투명"backgro를 보여줍니다 und,하지만 색상 표가 열리면 투명한 색이 미리 선택되지 않습니다.

내가 볼 수있는 것은 새로운 "색상"속성 설정자가 전혀 사용되지 않고 있다는 것입니다.

내가 뭘 잘못하고 있니?

감사합니다.

Answer 1

문제는 CSS에서 바인딩이 적용되는 방법입니다.

나쁜 :

-moz 결합 : 홈페이지 ("크롬 : // 내 Extension/피부 /colorpicker-extended.xml#colorpicker") 당신은 XBL 파일에 대한 피부 URL을 사용할 수 없습니다 ;

좋은 :

-moz 결합 : 홈페이지 ("크롬 : // 내 Extension/내용 /colorpicker-extended.xml#colorpicker"); 나는이 내용 안에 피부 폴더를 가지고 있기 때문에

그래서 내 경우에는 내가해야 할 일을했을 모든이에 대한 변경 CSS입니다 :이 사람이 여기 나에게 XBL에 많은 도움이

colorpicker 
{ 
    -moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#colorpicker"); 
} 
colorpicker[type="button"] 
{ 
    -moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#colorpicker-button"); 
} 
colorpicker > vbox 
{ 
    -moz-binding: url("chrome://myextension/content/skin/colorpicker-extended.xml#extended"); 
}