Re: Color Picker/ Slider

I found this code ....

<binding id="color-input">
 <content>
    <xul:hbox>
       <xul:textbox anonid="color-textbox" inherits="value"
                    onchange="this.parentNode.parentNode.value = this.value; return true;" />
       <xul:colorpicker anonid="color-picker" type="button" inherits="color=value"
                        onselect="this.parentNode.parentNode.value = this.mPicker.color; return true;" />
    </xul:hbox>
 </content>
 <implementation>
    <constructor><![CDATA[
      var picker =
        document.getAnonymousElementByAttribute(this, "anonid", "color-picker");
      var color = this.getAttribute("value");
      picker.initialize();
      /* avoid problems with templates. */
      if (color && (color.search("rdf:") < 0)) {
        this.value = color;
      } else {
        this.value = "#000000";
      }
    ]]></constructor>
    <property name="value"
              onget="return this.getAttribute('value');">
       <setter><![CDATA[
         var picker =
           document.getAnonymousElementByAttribute(this, "anonid", "color-picker");
         var textbox =
           document.getAnonymousElementByAttribute(this, "anonid", "color-textbox");
         picker.color = val;
         textbox.value = val;
         this.setAttribute("value", val);
       ]]></setter>
    </property>
 </implementation>
 <handlers>
    <handler event="DOMAttrModified"><![CDATA[
      if(event.attrName == "value") {
        this.value = event.newValue;
      }
    ]]></handler>
 </handlers>
</binding>

The color input would then be used in my XUL file as follows:

<colorinput value="black" />

----------------------------------------------------------------------
I actually use XUL a lot in Custombuttons (add-on extension to Firefox)

var menu = <menupopup xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
		      xmlns:cb="http://xsms.nm.ru/custombuttons/"
		      onclick="this. parentNode. handleClick (event);">



<scale min="1" max="20"/>


<colorpicker type="button" color="#CC0080" />



</menupopup>;
var bool = XML.prettyPrinting;
XML.prettyPrinting = false;
var el = new DOMParser().parseFromString(menu.toXMLString(), "application/xml").documentElement;
XML.prettyPrinting = bool;
this.appendChild(el);
this.type = "menu";
this.orient = "horizontal";
this.menuClick = function(event) {
var menuitem = event. target;
  event.preventDefault();
  event.stopPropagation();
  this.open = false;
}


this.setAttribute("onclick", "this.buttonClick(event)");

------------------------------------------------------------------

The application is I have a button I can darken a web page background as like sites with light backgrounds with video players 

----------------------------------------------------------------

var element = content.document.getElementById("blackify");
if (element) {
  element.parentNode.removeChild(element);
} else {
  var style = content.document.createElement("style");
  style.setAttribute("type", "text/css");
  style.setAttribute("id", "blackify");
  style.innerHTML = "*         { background: #000000 !important; } " +
                    "*         { background-color value : #000000 !important; } " +
                    
                    "a:yt-uix-button-dark:hover{      color: #000000 !important; } " +
   
                    "*         {      color: #44aa44 !important; } " +
                    "a         {      color: #FFCC66 !important; } " +
                    "a:hover   {      color: #000000 !important; } " +
                    "*         { border:none !important; } " + 
                    "*         { button-border:none !important; } " + 
                    "*         { yt-uix-button-color: #000000 !important; } " + 
                    "*         { border-color:#000000 !important; } " + 
                    "*         { border-bottom-color:#000000 !important; } " +                    
                    "*         { border-left-color:#000000 !important; } " + 
                    "*         { border-right-color:#000000 !important; } " + 
                    "*         { border-top-color:#000000 !important; } " +                    
                    "a:visited {      color: #FFB720 !important; } ";
                    
                
  content.document.getElementsByTagName("head")[0].appendChild(style);
}

------------------------------------------------------

That said I was hoping to to make a button with a drop down menu with a XUL Buttons (Slider and Color Picker) The slider would set to middle(5) and 1 would be white 10 would be black and color picker would go to changing text color.