The next task on our list for a Selenium-IDE plugin is to get a button into the taskbar. Eventually it will do something, but that’s not the point of today’s missin. We simply want to be able to put a button there.

Again, it is relatively easy to figure out how to achieve this once you wrap your head around the notion of overlays. First, we need to register our new toolbar overlay with firefox in the chrome.manifest

content preflight  chrome/content/

locale  preflight  en-US chrome/locale/en-US/

overlay chrome://selenium-ide/content/selenium-ide-common.xul chrome://preflight/content/view/optionsOverlay.xul

overlay chrome://selenium-ide/content/selenium-ide.xul chrome://preflight/content/view/toolbarOverlay.xul

Then we create content/view/toolbarOverlay.xul.

<?xml version="1.0"??><?xml-stylesheet href="chrome://global/skin/" type="text/css"??><?xml-stylesheet href="toolbar.css" type="text/css"??><overlay id="toolbar_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><toolbar id="toolbar2"><toolbarseparator id="preflight-separator" insertafter="record-button"></toolbarseparator><toolbarbutton class="icon" command="cmd_selenium_testrunner" id="preflight-button" insertafter="preflight-separator" label="&preflightButton.tooltip;" tooltiptext="&preflightButton.tooltip;"></toolbarbutton></toolbar></overlay>

And since we have user-facing strings, they are references in ui.dtd, which like options.dtd only has once entry right now. Note that pressing this button will run the cmd_selenium_testrunner command. In the Preflight Checks plugin, this is essentially a placeholder. If you were building this out for something of your own, you would change it to do the relevant thing for your plugin.

That’s all that is needed to get somehting into the toolbar using overlays. Except, that when you load it you will get a big image of all the other toolbar icons. Observant readers will notice that toolbarOverlay.xul is including toolbar.css (which for now is also living in content/view). It is there specifically to tell firefox what to display as the icon for our toolbar.

#preflight-button {
    list-style-image: url("checkmark-box-small-green.png");
}

The image it is loading is also in content/view, but in theory could be elsewhere in the structure (and probably should be really). Interesting bits about the image is that it is 16px x 16px and has a transparent background.

Once that is in place, rerun the build script from the first post and witness a new button on the toolbar.

Note: This will only work is you run Se-IDE as a seperate window. Running it as a sidebar requires a different xul file to be overlaid which is not written in an extendable manner. (Currently.)