Continuing yesterday’s initial add-on for a Restartless Dominant Color, I’ve taken some ideas from the Firefox UX team to associate search engines with a color.

Colorful tabs appear along the whole bottom edge on install

Here I’ve used the dominant color to add search engine tabs to the bottom of the screen. Normally they’re hidden away, but when you first install the restartless add-on, all the tabs appear for a few seconds. You can also see that all installed search engines are available, such as the one for Twitter Address Bar Search.

Selecting text shows colored tips

When you select some text or start typing in a text box (including those in the Firefox interface like the AwesomeBar!), the tabs will peek up from below only to show their transparent color-filled tips. If you do point at one of the tabs, it’ll become fully opaque and pop up to show the icon. Clicking it will let you search for whatever you have selected or typed.

Install Search Tabs on Firefox 4 without needing a restart. Just reply back in comments if you have any feedback. Or check the code on GitHub and file suggestions or issues!

I’ve packaged Margaret’s getDominantColor code into a restartless add-on and put the source up on GitHub for people to try out and tweak the logic.

After installing the add-on, hold shift while pointing at an image to have it report the color and show it behind the image. One slight difference from Margaret’s code is that color and transparency values are rounded down to a multiple of 16.

Pointing at an image in about:addons

Download the add-on and check out the code!

mfinkle’s recent posts [starkravingfinkle.org] on restartless add-ons reminded me that I was going to write a more detailed post about my restartless GitHub repository, but I’ve been distracted with another project. 😉

So briefly, I’ve put together some helper functions [github.com] that have been useful for developing various restartless add-ons. I’ve organized the repository to have a bunch of “examples/” branches that build on top of other named branches that implement helper functions.

These first few are very simple examples:

– examples/autoReload: saves a step when developing a restartless addon by automatically re-enabling when you disable the add-on from about:addons

– examples/ensureEnabled: the install method always gets executed even when disabled, so this code makes sure the add-on runs on install; useful when combined with the following..

– examples/oneTime: run once and disable itself; useful for debugging problems on other people’s Firefox without doing the usual “copy/paste this into the Error Console”

The next couple helper functions have been incredibly useful for the restartless add-ons I’ve written:

– unload: add a callback to run when the add-on is disabled by calling unload(callback). This function makes it easy to ensure Firefox returns to its original state when a restartless add-on is disabled (which is very important for developing as you’re likely to disable and re-enable many times!) (example)

– watchWindows: add a callback to run when the main Firefox browser window is open (navigator:browser) by calling watchWindows(callback). The callback will be called immediately for existing windows and future windows, so put whatever browser UI modification code you want inside the callback. (example)

One last helper in the repository is the getString function that adds some l10n support to get the correct .properties file for the current locale. It shows off getting additionally packaged files and picking the right locale and some plural forms. I’ve put together a silly example at examples/l10nDialogs.

With all these helper functions, Erik Vold and Nils Maier helped put together some code that loads packaged scripts. We ended up with some code that makes use of getResourceURI so that it correctly works if the addon is .xpi packaged or an extension proxy file. Separating out the code this way lets you better organize the code and makes it easier to share.

– Brainstorm next Prospector experiments

At the Mozilla All Hands last week, and we held a discussion to brainstorm various ideas to try out in the Prospector family of experiments. A couple of the current experiments like Speak Words and Instant Preview help users get back to top sites almost instantly with just one key stroke, but these mainly help for the relatively small set of sites that users frequent and not so much the remainder of the history available in Firefox.

So the next set of experiments will focus on improving the experience of searching for pages in Firefox. Interesting findings from Query Stats could help identify relevant pages or help build a better view of your past browsing behavior. Additional data about each page could be tracked by Firefox such as unique phrases from the page or how long a tab was opened and interacted with.

Displaying the search results also received some attention as to how to add all this extra information in a clean way. Some ideas ranged from being more space efficient by showing location bar results on one line to taking up more vertical space as one might not need to use the page when searching. This led to ideas of using the whole tab content area to show rich results and provide interaction such as grouping/switching of types of results like pages, apps, videos, etc.

– Prepare search bar -> button demo

Along the lines of combining the location bar and the search bar, I’ve been hacking together a Prospector experiment that changes the search bar into a list of buttons. This allows for explicit control for the user to decide when searching should be local to Firefox’s history or over the web. It also makes it apparent that there are multiple search engines to choose from and clicking another button switches the current search request to another provider.

When clicking a button, it inserts a keyword and focuses the location bar, so it’s like doing a smart bookmark keyword search with the first location bar suggestion being the search. Combined with Instant Preview, it’ll automatically update the results immediately as you type more words or switch engines.

– Attend Open Web App discussions

I was curious what kind of web-apps were being created in general across the various web-app stores available today because I wanted to see if the search bar -> button experiment above could add to the types of available apps. This is because generally speaking, these search buttons processes some words from the user and converts it to a url or a set of results.

From the screenshot above, the last button is actually for Google Translate, so when I click the button and type “hola mis amigos”, Google translates it immediately as I type to “hello my friends“. This somewhat feels Ubiquity-like, which had all sorts of commands, so potentially allowing the web app manifest to describe these “searches” or “actions” could lead to web-apps that are more than just bookmarks.

– Push restartless code examples to GitHub

I’ve been hacking on restartless add-ons for a while now and noticed that I copy/paste some useful helper functions for when I start a new add-on. Other people hacking on these bootstrapped add-ons could make use of them as well, so I created a “restartless” repository on GitHub. I’ll write a post going into more detail later, but briefly, it’s a collection of git branches where each branch contains a helper function or provides an example usage or pattern.

– Tracking down flash crashes

I’ve been running into Flash crashes on OS X for a while and noticed other people were in a similar situation. So to help resolve it, I started tracking down the various flash crash reports, and I’ve posted about my findings and issues that I ran into.