About

From Wikipedia:
“XUL (XML User Interface Language) is a user interface markup language developed to support Mozilla applications like Mozilla Firefox and Mozilla Thunderbird. [...]
Some common widgets - such as spinbox, slider, and canvas - are not available in the current XUL widget set, but are planned for XUL 2.0”

NB: canvas widget is available since Firefox 1.5.

As I was in need of a spinner or spinbox widget, I decided to write one using XBL binding. My implementation use the spinbuttons widget provided by XUL.

Description, usage

Increment and decrement occurs when clicking small arrow on the right of the spinner, when using arrows key, when using page up/down keys (fast increment/decrement), when using mouse wheel (over the spinner). A custom tooltip with allowed input informations is shown when hovering.

Parameters

Parameters	Description	Default value
min	minimal value	0
max	maximal value	0
step	step value used when in-/de-crementing	1
faststep	step value used when fast in-/de-crementing	10 * step
width	width of the spinner box	computed
value	initial value	0
preference	linked preference	none
precision	float-point precision	0

Fields/Properties

spinner inherits from textbox so all textbox's fields/properties are available. Additionally, min, max, step, faststep, precision and lastGood are provided. lastGood is the last valid value of the widget.

Methods

All textbox's methods are available. Additionally, adjust(s), up(), down(), fastup(), fastdown(), format(), log() and check(sf) are provided to adjust (i.e. step the value by s), increment, decrement, fast increment, fast decrement, format (i.e. float formatting), log and check (i.e. validate) the spinner value. check() call format() if sf is true. log() require a xul:textbox with id='log' in the document containing the spinner (cf. spinner.xml)

Usage

Copy 'spinner.xml' and 'spinner.css' where your XUL file is, add one or more spinners in your XUL code, then add a CSS rule like:

spinner { -moz-binding: url(spinner.xml#spinner); }

in your existing stylesheet (or create a new one).

Download & Demo

You can download a package of all files needed to use it, or launch a small XUL demo (your browser must understand XUL, browser cache can store an old version, be aware).

NB: v0.1 has been tested on Windows XP SP2 / Royale Theme (Firefox 1.6a1, default theme), Suse 10 / Gnome Desktop (Firefox 1.5, default theme), OS X 10.4.4 / Graphite theme (Firefox 1.5 unofficial, GrApple Classic).

Screenshot

Screen capture of the demo window (showing the tooltip) under Windows XP SP2 / Royale Theme (Firefox 1.6a1, default theme):

History

v0.4

• Fixed: was broken by bug 155053 landing

v0.3.2

• Minor README update

v0.3.1

• Fixed problem with tooltip icon on Linux

v0.3

• Added log feature
• Added faststep as a field and fastup/fastdown methods
• Better input handling
• Added information tooltip
• Code changes to handle future deprecation of Components.reportError()

v0.2

• Added floats support
• XBL code cleaning (removed useless properties)
• Embedded graphics into CSS code (as data-URI)

v0.1

• First release

Credits

Huge thanks to:

• Firefox Classic theme (win32) graphics designer (small arrows)
• Robert Lehardy (OS X testing)
• Marty Vance (float support idea)
• Architetto Francesco Rollandin (warning icon designer)

Contact

You can contact me by email here: