16 September 2010 - 18:55Find Suggest: Words from the Page

There’s a few main ways to do search in Firefox. You can use the location bar to search for pages that you’ve visited or bookmarked. You can use the find bar to search for words on the page that you’re currently looking at. You can use the search bar to find new pages on the internet. As I mentioned last week, I’m taking a look into ways to improve searches in Firefox as part of Mozilla Labs, so this covers all of these types of searching.

Today I’ve quickly hacked together an initial prototype that helps you find words on a page. Instead of typing letters into the find box only to end up getting a “Phrase not found” message, the find bar will now show suggestions of words that will match on the page as you type. The find bar will only let you find words that are on the page anyway, so why not use those available words to guide the user?

Suggestion of words from the current page (buttons removed to fit screenshot)

This is similar to how mobile phones will suggest words based on the letters you’ve entered so far. Except instead of showing possible words from the dictionary, the find bar will only show words from a custom dictionary.

You can try out this feature by installing Find Suggest. It’s a restartless add-on that runs on recent Firefox 4 betas [mozilla.com], so you can start playing around with it immediately.

This is a quick prototype, so you can only fill in the suggestions by clicking on them. Ideally there would be some keyboard mechanism to fill in the suggestion such as hitting <Tab> to fill in the common prefix like on the command line. But even with the limited functionality, it’s a useful guide to quickly see what words will match on the page without having to type them out.

13 Comments | Tags: Add-on, Labs, Mozilla, Search

10 September 2010 - 14:34Running Code Without Error Console

Being able to run chrome-privileged code from the Error Console has been very convenient for me to help users debug issues with Firefox or an add-on when they get stuck in some strange state. I can quickly test an idea or a snippet of code and have the user run it to track down where things are going wrong. However, there’s some issues that make it tricky to use:

  • Users get confused doing Tools -> Error Console -> Paste -> Evaluate
  • Users might not copy/paste correctly or perhaps the code got wrapped oddly
  • Javascript version seems to be 1.6, so let needs to be replaced with var, etc.
  • Scripts are heavily GCed, so modules are imported to attach objects to keep them alive
  • Everything needs to be on one line, so beware of any lines with // comments!
  • Console output is html-like and strips tags and empty output leading to confusion

One additional drawback in Firefox 4 is the Error Console is now disabled by default, so having users first go to about:config and toggling devtools.errorconsole.enabled to true is an extra step where users can get lost. (Don’t forget about the click-through warning page! ;)) Additionally, I believe enabling the Error Console requires a restart, so debugging a live instance is troublesome unless the problem is easily reproduced.

New preference to enable the Error Console (under the Tools menu)

Fortunately, Firefox 4 comes with restartless add-ons! You can just package up an add-on with two files: bootstrap.js and install.rdf, with the relevant code running from the startup() function. It’s simpler for users to try out as it looks like any other add-on install, so just point to the .xpi and click Install.

Just make sure that if you want the code to only run once, have the add-on uninstall itself after running. Otherwise it’ll be like any other add-on that runs when Firefox starts.

Code snippets to for one-time scripts and easy reloading of scripts

Another neat trick for reloading or running an updated script is having the add-on auto-enable itself when it’s disabled. I can now just make changes to the files and click Disable once from about:addons, and it’ll automatically reload itself instead of needing to click Enable. Also because now I can just edit the file and not need to copy/paste into Error Console, I can easily track my changes with revision control software. 🙂

I’ve provided the bootstrap.js and install.rdf files needed for this simple restartless add-on. From there you just need to:

  1. Delete one of the auto-uninstall or auto-enable snippets from bootstrap.js
  2. Add in the code you want to run inside startup() of bootstrap.js
  3. Package up the files into an xpi: zip restartless.xpi bootstrap.js install.rdf
  4. Distribute/install restartless.xpi

4 Comments | Tags: Add-on, Development, Mozilla

9 September 2010 - 17:04What’s in your Searchbar?

I’m looking into ways to improve how people search in Firefox. My previous contributions focused on getting useful pages to show up in the AwesomeBar when searching history, and I collected plenty of useful feedback to see what users wanted or didn’t want in the results.

I’ve written a restartless add-on that lets you see how you use the searchbar in Firefox. It scans through what you’ve previously typed into the searchbar and groups your searches by the words you’ve typed. The first set of results shows words that you frequently use across different searches, and the second set shows searches that you repeat multiple times.

If you’re running a recent Firefox 4 beta [mozilla.com], install the add-on, and it’ll open a new tab with your results (without sending that data anywhere). This is a restartless add-on that will also uninstall itself after it runs.

If you feel like sharing your results, please leave a comment or send me an email: edilee@gmail.com.

Unique and repeated search queries from my own searchbar history data

From my personal usage, the unique search queries set has many searches that I only do once to find out information on some topic like “mozilla” or “starcraft”. This contrasts with my repeated searches where I have terms like “time” or “movie”. I do make heavy use of keyword searches and smart bookmarks, but I happen to not have set any for these repeated searches probably because search engines like Google and Bing provide useful information on the results page.

Are your results like mine? Do you have a totally different search behavior? Any suggestions for how you would improve searching?

4 Comments | Tags: Add-on, AwesomeBar, Labs, Mozilla, Search

30 August 2010 - 15:31Synchronous and Asynchronous APIs

In designing the Firefox-facing APIs of Account Manager, thunder [sandmill.org] and I decided to make most of the interfaces take a callback/continuation. Two main reasons were 1) to allow add-ons to add extra account types like OpenID and 2) to find out if you’re logged-in to a site over multiple network requests.

For an add-on to provide a new account type, it needs to be able to tell Firefox what saved accounts are available and how to connect to them. These might need to read data from disk and/or network; or perhaps request more information from the user like a 1-time code sent over SMS. For Firefox to support these more-complex interactions, it can’t assume that a method implemented by the add-on can return a value immediately.

Asking for additional information to connect to a banking site

In this particular mockup, the site has told Firefox not to use the basic username-password account type but instead to use an account type that asks for more information. Here, an add-on has already saved the username/password and doesn’t to ask for them, but it can’t immediately connect without asking for more information, so it tells Firefox to show this popup. With the async. API, the add-on can later tell Firefox that it has finished the connect process.

The second reason for going async. overlaps with the first of supporting add-ons; Account Manager and account types need to talk over the network to other machines. These requests can take more than just a few milliseconds, so blocking the rest of Firefox when you click on the “Sign in” button using a synchronous request would be bad. In the case of finding the account status, Firefox might need to make requests for any or all of host-meta, AMCD and the session status.

The Password Manager API in Firefox happens to be synchronous—as are many other interfaces in Firefox. Converting it to be asynchronous for use in the username/password account type was fairly simple, but there’s a couple things to keep in mind: when the work is done and when the result is given.

Implementing the async. interface with the synchronous Password Manager

Here, we’ve made the call to savedAccounts immediately do the work of finding the logins, so this means the caller might have to wait before the asynchronous savedAccounts call returns. We could have just as easily delayed this work to run after the function returns by moving the logic into the async function call, but one needs to be aware that if the arguments are live objects, the contents might change by the time async triggers the callback.

The second point of “when the result is given” is less flexible. The function above could have been written to just call onComplete(accounts) immediately without the async wrapper, but that could break the caller as the implementation is no longer truly asynchronous. The caller would stop working if code is supposed to execute after the call to savedAccounts but before the call to continuation, onComplete.

Trivial example of how non-async. implementations could break

For web developers, implementing async is pretty simple as the global window object has setTimeout. So one implementation could look like function async(callback) setTimeout(callback, 0);

Making the choice of having the APIs be asynchronous does have some drawbacks in terms of code structure. Any function that eventually calls an async. function will be forced to take a callback as well, and if it needs to call multiple async. functions, the logic needs to be broken up into multiple callbacks. If you want to share variables across these callbacks, you’ll end up creating many nested anonymous functions (closures).

Additionally, some simple things like doing Array.reduce (fold), which visits each array item and applies a function to produce a single result, can get pretty complicated if you want to pass in an async. function. In a later post, I’ll describe a way to have asynchronous functions look like they’re synchronous so that you can avoid some of this callback craziness. 😉

No Comments | Tags: Account Manager, Add-on, Development, Labs, Mozilla