The 1.2 release of the Dojo Toolkit is focused on the overall Look and Feel. Patches have been landing thick and fast to tighten up the visual polish. Most you might be hard-pressed to notice at first glance, but the devil is always in the details, and for a toolkit with the promise and scope of Dojo we have to sweat the small stuff.

Take Dijit’s toolbar buttons. In the editor, you have a row of graphical buttons for bold, italic, etc. For some time the rendering in Firefox has been inconsistent with the other browsers – there’s some extra space around the buttons. The result is that the toolbar is a little wider, and it’s just not tight.

Here’s how it should look (screenshot from Safari 3)

Toolbar in Safari 3

Here’s how it look(ed) in FF2

Gappy toolbar in FF2

Button rendering is definitely subject to some of the most pronounced cross-browser differences. In this case the accessibility requirements of the toolbar buttons and the need for reuse across the toolkit end up forcing us to use a <button> element wrapped around a span that has the actual icon image as background.

Button markup in Firebug screenshot

Firebug shows us that while the inner span is 18px square, the button that wraps it has a computed width of 24px?!? Yet, here in the theme stylesheet (dijit/themes/tundra/Toolbar.css), great pains have been taken to zero any padding and shrink-wrap it as tightly as possible: 

.tundra .dijitToolbar .dijitButtonNode {
	background: none;
	margin: 0px !important;
	padding: 0px !important;	
	border: none;
	font-size: 12px;
}

Despite using the largest hammer CSS gives us in the !important flag, Firebug shows there’s still something imparting padding to our button. Here’s a rare wobble in the illusion of deep and transparent insight that Firebug gives us, because there’s actually another element at play here. A trip through <span class="geckoResourceUrl">resource://gre/res/forms.css</span> reveals the culprit: 

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0px 2px 0px 2px;
  border: 1px dotted transparent;
}

The button::-moz-focus-inner pseudo-element has a 1px border and 2px side padding. There’s our missing 6px.

forms.css is the internal stylesheet Firefox uses to render form controls – including the button elements used by our toolbar buttons. (The <span class="geckoResourceUrl">resource://</span> url is just one way of viewing these internal resources – search your local filesystem or even download the entire Firefox source for more.)

You know the outline you get on a button when you put focus on it? The gecko-based browsers have actually introduced a special element in order to render that. Now that we know its name, our solution is only a CSS rule away: 

.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner {
	padding:0;
}

You might be tempted to also whack the 1px border we saw in there. Don’t. Doing so prevents the button from accepting focus, and a button that cant be focused isn’t really a button anymore – use a div. Our fix is targeted only at gecko-based browsers with the .dj_gecko prefix on the selector. See Dijit’s CSS Sniff for more details.

Here’s how it looks now:

Tighter toolbar in FF2

It’s subtle, but tightening up that spacing could easily make the difference that prevents a toolbar from wrapping in Firefox in your application, making a more professional and consistent user-interface across all your supported browsers.

Remember, the Dojo Toolkit is produced as an fully open-source project. This issue is tracked as ticket #6264, use username/password guest/guest to login and add comments in the Dojo bug database. If you have general feedback on widget look & feel please add your thoughts to the theme discussion. If this article describes the kind of thing you do well, we’d love for you to get involved.