One not-used-as-much-as-it-should-be-feature of Se-IDE is that it can be opened as a sidebar (View -> Sidebar -> Selenium IDE). The catch with though is that if you overlay the toolbar in the main Se-IDE window, you have to overlay it on the sidebar too otherwise you end up with a button in one but not the other. Kinda annoying, but I can understand why they did it that way.

Before the actual ‘here is how you do it’, a quick not on how overlays work. XUL is just XML of a specific notation, so all the usual rules apply. When an extension is loaded, the list of files it overlays is generated and the ‘id’ attributes of its elements are aligned. When both the element name and the ‘id’ attribute match, then the overlay is applied. The end result is that you are out of luck if something you want overlaid does not have ids. This was the case with the sidebar in Se-IDE. Or was until I fixed it. But this means our Preflight Checks plugin is now dependent on a specific version of Se-IDE which means we have to update out install.rdf to reflect this.

<?xml version="1.0" encoding="UTF-8"??><rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"><description about="urn:mozilla:install-manifest"><id>preflight@adam.goucher</id><name>preflight</name><version>1.0</version><creator>Adam Goucher</creator><description>A sample plugin for a Selenium-IDE API</description><type>2</type><optionsurl>chrome://preflight/content/view/options.xul</optionsurl><targetapplication><description><id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id><minversion>1.5</minversion><maxversion>3.5.*</maxversion></description></targetapplication><requires><description><id>{a6fd85ed-e919-4a43-a5af-8da18bda539f}</id><minversion>1.0.4-SNAPSHOT</minversion><maxversion>1.*</maxversion></description></requires></description></rdf>

With that done, it is a a simple matter of adding our overlay to the chrome.manifest and creating the overlay.

Here is what chrome.manifest looks like now

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
# toolbar button
overlay chrome://selenium-ide/content/selenium-ide.xul chrome://preflight/content/view/toolbarOverlay.xul
# sidebar button
overlay chrome://selenium-ide/content/selenium-ide-sidebar.xul chrome://preflight/content/view/sidebarToolbarOverlay.xul

And this is the overlay

<?xml version="1.0"??><?xml-stylesheet href="chrome://global/skin/" type="text/css"??><?xml-stylesheet href="toolbar.css" type="text/css"??><overlay id="preflight_sidebar_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><toolbar id="sidebarToolbar_controls"><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>

That’s all there is. And just like the regular toolbar example, our button doesn’t do anything special right now. But will in time.