# Grippy toolbar

### gtoolbar.xml

Download the grippytoolbar.tar
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 xul 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' a binding from the gtoolbar.xml to your xul interface you add a reference to it in the stylesheet for your xul file:

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

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

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

    toolbargrippy {
           -moz-binding: 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;
    }

***Note that the .toolbargrippy-arrow class is for styling the xul:image that is included in the grippy. There is also the .toolbargrippy-texture class that is for styling the xul:spacer included in the grippy but not used in this example. The xul:spacer has it's flex="1". The xul:image is placed in the grippy first and the xul:spacer is placed in the grippy second.

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.

How it works:

The grippy displays as a button and includes a xul:image and xul:spacer that can be styled. When a grippy is clicked the grippyTriggered method is called and if collapsed=true then toolbox.expandtoolbar(this.id) is called else if attribute Collapsable="true" call toolbox.collapseToolbar(toolbar).

When a toolbar or menubar is collapsed, by clicking the expanded grippy, it's collapsed attribute="true" and a default, as styled in gtoolbar.css or styled elsewhere, collapsed grippy is created and placed in the toolbox tray and the id is set to the string "moz_tb_collapsed_"+BarID, i.e "moz_tb_collapsed_BarID" where BarID is the id of the current bar being collapsed.

When a collapsed toolbar or menubar is expanded, by clicking the collapsed grippy, the moz_tb_collapsed_BarID child element is removed from the toolbox tray and the toolbar or menubar attribute collapsed="false"

The grippy styling for the toolbar with the id=VKboard1 expanded and collapsed state:

    #VKboard1 > toolbargrippy:hover:active > .toolbargrippy-arrow {
    	height: 50px;
    	width: 55px
    	background-color: #ffffff;
    	list-style-image: url("chrome://kiosk/content/VKeyboard/images/VKeyboard.png");

    }

    toolbargrippy[moz_grippy_collapsed="true"][id="moz_tb_collapsed_VKboard1"] > .toolbargrippy-arrow {
    	margin: 1px 0px 1px 3px;
    	width: 105px;
    	height: 20px;
    	background-color: #ffffff;
    	list-style-image: url("chrome://kiosk/content/VKeyboard/images/VKeyboardH1.png");
    }

    toolbargrippy[id="moz_tb_collapsed_VKboard1"]:hover:active > .toolbargrippy-arrow {
    	margin: 1px 0px 1px 3px;
    	width: 105px;
    	height: 20px;
    	list-style-image: url("chrome://kiosk/content/VKeyboard/images/VKeyboardH3.png");
    }

page created by JTJ Software
Send comments to Jim