A new Add-on and DevTools Inspector Search Suggestions

My brand new add-on just got fully reviewed. “Movie Critiques” – the name pretty much says what it does. You can search for movies and it will use the Rotten Tomatoes Developer API to get information on that movie. Then pulling some other hooks and kind of hacky methods, I get the IMDB and Meta Critic information of the movie and display it in the panel. The result is shown below.

Rotten Tomatoes API handles fuzzy matching the search query and gives the best possible movie. You can also restrict the search by year and IMDB. More information can be found about that from the add-on’s home page.

To make searching easier, I added movie suggestions in the search box. As you start typing any movie name, suggestions keep appearing in a drop down popup. You can continue typing your movie, or choose one from the suggestions. See the screenshot below.

I created this add-on for a friend and it was meant to be private only. But it turned out so good that I had to publish it .

Speaking of search suggestions, I am working on bug 831693 which brings search suggestions support to the search box in Inspector Developer Tool (which I introduced in bug 650804) . So what does it suggests ? In short – CSS Selectors. As you try to find the right node using the searchbox, many a times you will not be well versed with the DOM of the page. That is where suggestions will help you choose the correct node. There are a number of use cases for the feature. It shows the number of matching nodes to the selector, makes searching faster and easier and mostly it will help both developers and designers. See the screenshot of the suggestion panel below.

Fingers crossed for getting this in before merge (18th Feb) (sadly it will have to wait till Firefox 22).

In other news, I updated my another add-on Graphical Timeline of Events, bringing support for Developer Toolbox. More interesting stuff to come and I am very close to my 50 first bugs