The Close Button Issue
This is the second post of a three part series that details my experiences with the findbar widget which is available in Firefox and also provides a bit of information on XBL and anonymous ids.
Controlling the Findbar Visibility
The findbar created as shown in the examples in my part 1 will initially be hidden. Though it is tempting to simply add a hidden=”false” attribute to make it visible, don’t do it. As this would appear to work on the first glance, but problems will soon surface. I discovered that the localised messages and labels did not work as expected. Using the open([mode]) method or the startFind(mode) method is required to make the findbar visible.
document.getElementById("FindToolbar").open(0);
or
document.getElementById("FindToolbar").startFind(0);
A close method is available to hide the findbar. While I suspect that setting the hidden=”true” attribute should work, I did not try using it.
document.getElementById("FindToolbar").close();
Once the findbar has been linked to a browser widget and made visible, it is ready to be used! As the users type text into the Find textbox, the search will be carried out in the linked browser widget and the buttons on the findbar will be active allowing the user to navigate through the matching occurrences of the search term. Further, some shortcut keys like single apostrophe (‘), slash (/), function key 3 (F3), escape (Esc) will also be made available.
A Small Problem Surfaces
There is a small problem with this, sometimes it just does not work! Even if you enter text in the find textbox, the buttons remain greyed out and no search is carried out. I have another post detailing my investigation about this issue. The conclusion is that some versions of Firefox wrongly have the bindings for the find textbox in the theme style sheet. The solution is simple and all you need to do is include the correct style sheet in your xul file with the following line near the top of the file.
<?xml-stylesheet href="chrome://global/skin/findBar.css"
type="text/css"?>
The Close Button Issue
By now all works mostly fine. I discovered another small issue with the close button. When you move your mouse over the close button, the area around the close button is not consistent with the rest of the find toolbar. I am sure that there is a simpler solution somewhere out there. To resolve this issue, I had to explicitly provide the style for the close button. This meant digging into the internals of findbar which I have detailed later. Here is the style I applied to get it working.
#FindToolbar *[anonid="find-closebutton"]:hover {
background-color: -moz-Dialog !important;
}
#FindToolbar *[anonid="find-closebutton"]:hover:active {
background-color: -moz-Dialog !important;
}
Now, you have a working findbar. In the next part we will see how to dig deeper into widgets to identify individual elements that the widget is composed of and apply styles to them.