Using the Findbar in Your Firefox Add-ons – Part 3/3

Abracadabra! Close Button Gone!

This is the last 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.

Getting Rid of the Close Button Altogether

The solution I provided in the previous post fixes the colour problem with the close button. I wanted to remove the close button altogether. As I mentioned earlier, lets take a little detour first to cover some widget internals, viz., XBL and Anonymous IDs before we make the close button disappear.

The XML Binding Language

XBL or Extensible Bindings Language or XML Bindings Language as it is sometimes called, is the secret glue that most widgets in Firefox use. As the Mozilla page about it says,

XBL is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the bound element, acquires the new behavior specified by the binding. Bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted underneath the bound element.

Basically, you can do a lot of stuff with XBL. Many widgets provided by Firefox have been implemented using XBL. The findbar widget is also implemented using XBL. So if you want to take a look at all the gory details of how the findbar widget has been created, you need to look at the underlying XBL implementation.

Get the Findbar Source Code Using Chrome URL

Another interesting thing to know is that you can view the source code residing inside Firefox using chrome URLs. Chrome URLs are URLs starting with chrome:. Firefox understands these special chrome URLs for accessing some resources that have been installed in Firefox. Take a look at the Chrome URL page on Mozilla development center for more information on these URLs. You can access the source code of the findbar widget that is inside your Firefox by accessing its chrome URL. You can open this link chrome:global/content/bindings/findbar.xml (Firefox only, copy shortcut and past in new window) and see for yourself. This will show the real code that is powering the findbar in your Firefox browser right now! I had to take a look into it to figure out how to solve the close button issue.

Sub-widgets and Javascript

Some widgets, for example, the Findbar widget are composed of other widgets. I call these internal widgets as sub-widgets. Usually you will not need to access these sub-widgets at all. Sometime, it may be necessary to do so, like in this case of hiding the close button. The first thing is to find out what is the type of these sub-widgets and what their IDs are. The way I usually do this is by looking through the XBL source code. The sub-widgets cannot be accessed by the usual means like the getElementById() function. Like normal elements can have an id, these sub-widgets do not have an id, but have another slightly different attribute known as an anonymous id called anonid. There is a function getAnonymousElementByAttribute() to get elements using their anonid. The function takes three parameters, viz., the widget you want to get the sub widgets from, the attribute name – “anonid” in our case, and the actual anonid of the sub-widget. Here is how you use it through an example of hiding the close button using Javascript.

document.getAnonymousElementByAttribute(
    document.getElementById("FindToolbar"),
    "anonid",
    "find-closebutton"
).hidden = "true";

Once I found the anonid for the close button was ‘find-closebutton’ using the XBL source code in findbar.xml. It was a simple matter of getting the close button sub-widget and using normal Javascript to hide it.

Styling Sub-widgets Using CSS

Another power method is to apply CSS rules directly to these sub-widgets. You have already seen an example in my previous post to fix the background colour of the close button. You can specify the CSS rule using the usual attribute selector with anonid as the attribute name, i.e., [anonid=”PutActualAnonIdHere”]. Here is an example of how to hide the close button using this technique.

#FindToolbar *[anonid="find-closebutton"] {
 display: none !important;
}

Poof! Its gone!!!