Grippy toolbar

History:
The grippy toolbar began as toolbar.xml - an xbl binding for the toolbox, toolbar, menubar. Original code by mozilla and the original author is unknow to me. Picked out of mozilla-1.0.0 on 10/24/2002. It's bad implementation/use in the mozilla classic and modern skins lead the developers at mozilla.org to just remove the grippy functionality from this xbl definition, I assume they forgot how to use this bug, err, feature. The grippy, a.k.a collapsable toolbars, lives on here. You can use the collapsable function of the grippy to include multiple interfaces in one xul document not just toolbars and menubars.

Overview:
The gtoolbar.xml is an xbl widget that includes <toolbox/> <toolbar/> and <menubar/> and provides an area, a button, to the toolbar and menubar for a graphic and tooltip. If you've used another UI toolkit the gtoolbar.xml would be called a 'compound widget' there are some differences but that is the basic idea. When a menubar or toolbar is wrapped in a <toolbox/> the collapsable to icon/expand from icon functionality is enabled. The <toolbox/> has a tray area that holds any collapsed toolbars or menubars. The <toolbox/> can also contain other xul elements. The styling default of the toolbox, toolbar, menubar is done in the gtoolbar.css or bound to any stylesheet you choose. <toolbox/>, toolbar/>, <menubar/> may be manipulated through the dom also.

Enhancements:
There are a few enhancements that have been made to the gtoolbar:

Collapsable - when Collapsable="true" is an attribute in a toolbar or menubar definition and that toolbar or menubar is wrapped in a toolbox tag the bar will be collapsable. This way you can have collapsable and non-collapable toolbars and menubars in the same toolbox. The default is non collapsable
UPgrippytooltiptext - when UPgrippytooltiptext="Some usefull tooltip" attribute is included in a toolbar or menubar definition the UPgrippytooltiptext value will be the tooltip displayed for the bar in it's expanded state. So grippytooltiptext is for the collapsed state and UPgrippytooltiptext is for the expanded state.

Fixes:
These could be called bug fixes:

Fixed the problem of a blank tooltip in collapsed grippy when no tooltip or grippytooltip was defined.
Added .setAttribute("collapsed", "true") and .setAttribute("collapsed", "false") to make the gtoolbar.xml compatible with mozilla-1.2
Default to non-collapsable. Add a Collapsable="true" attribute to enable the collapsable feature.

Usage:
To 'hook-up' the gtoolbar.xml to your xul interface you add a reference to it in your xul files stylesheet:

toolbox {

url: ("chrome://your/mozilla/project/path/gtoolbar.xml#toolbox");
    }

    toolbar {
   url: ("chrome://your/mozilla/project/path/gtoolbar.xml#toolbar");
    }

    menubar {
url: ("chrome://your/mozilla/project/path/gtoolbar.xml#menubar");
    }

    toolbargrippy {
url: ("chrome://your/mozilla/project/path/gtoolbar.xml#toolbargrippy");
    }
The above four style definitions add the gtoolbar.xml bindings to the <toolbox/>, <toolbar/>, <menubar/> and toolbargrippy to those three xul elements. Now you may style these bindings as with any xul element.

Below is the style definition for a toolbargrippy:

toolbargrippy {
	cursor: pointer;
}

toolbargrippy {
/*  -moz-box-orient: vertical;
  -moz-box-align: center;
  -moz-box-pack: end;
  -moz-box-direction: reverse;
  border-top: 1x solid #EEF0F3;
  border-right: 1px solid #86929E;
  border-bottom: 1px solid #86929E;
  border-left: 1px solid #EEF0F3; */
  list-style-image: url(" ");
}

toolbargrippy:hover:active {
 /* border-color: #67737E;
  background-color: #9DA9B6; */
  list-style-image: url(" ");
}

.toolbargrippy-arrow {
  margin: 0px 0px 0px 0px;
  width: 0px;
  height: 0px;
}

Here, below, is a style defintion for a menubar grippy:

menubar > toolbargrippy { 
  border-top: 1px solid #EBF4FF;
  border-right: 1px solid #B9BFC7;
  border-bottom: 1px solid #B9BFC7;
  border-left: 1px solid #F4FAFF;
  background-color: #DDE3EB;
  list-style-image: url(" ");
}

The collapse/expand functionality is achived by wrapping a toolbar or menubar in the toolbox tag:

<toolbox>

   <toolbar>

    <menubar/>

   </toolbar>

</toolbox>

If no collapse functionality is desired then wrap your toolbars and menubars in an vbox or hbox:

<vbox>

   <toolbar>

    <menubar/>

   </toolbar>

</vbox>

Here is a definition that shows a non-collapsable menubar and a collapsable toolbar with tooltips for collapsed and expanded states:

<toolbox>

          <menubar UPgrippytooltiptext="Expanded menubar"

      grippytooltiptext="Collapsed menubar" Collapsable="false" />

   <toolbar UPgrippytooltiptext="Expanded toolbar"

      grippytooltiptext="Collapsed toolbar" Collapsable="true" />

</toolbox>

Notice in the above toolbar definition the Collapsable parameter. This may be used in a toolbar or menubar when they are grouped together in a toolbox and some are collapsable and some are not.