Hacking the Firefox UI from the Web Console

frankyan — Wed, 20 Jul 2011 05:42:47 +0000

I am excited by the ongoing awesome work of our Developer Tools team and have been playing with Firefox’s new, rapidly improving Web Console. By default, commands typed into the console run in more or less the scope of the current content window, which is great for web development, but as a Firefox front-end engineer, I often want to use it to hack on Firefox’s own UI. To make Web Console behave as if it were in the scope of the browser window, simply open about: in a new tab, open the Web Console (ctrl/cmd+shift+k), and paste the following two lines:

Components.utils.import('resource://gre/modules/Services.jsm');
var win = Services.wm.getMostRecentWindow('navigator:browser');

This makes the variable win reference the current Firefox browser window! To see what I mean, try typing the following:
(Watch the selected tab in the tab strip when you press enter!)

win.gBrowser.selectedTab.style.cssText =
  '-moz-transition: .5s; -moz-transform: scaleX(-1);'

Happy hacking!

Making tab closing as easy as click, click, click

frankyan — Fri, 30 Jul 2010 07:04:14 +0000

The best user interface anticipates actions that you want to perform and never gets in your way. When planning out the new tabbed browsing features for Firefox 4, this principle guided our focus. One of the things we think Google Chrome really nailed is its tab closing behavior: when you close a tab with the mouse, the remaining tabs shift or resize so that the next tab’s close tab button moves right under your cursor. This way, you can click the same spot to close the next tab.

Back in December, Basil Safwat wrote a fantastic piece, full of screenshots, that details these behaviors.

We’re working on implementing this in Firefox, so it will be super easy to close a whole row of tabs without moving your cursor a pixel:

[ YouTube HTML5 (if available) ]

We are also taking it a step further and including support for the tab overflow mode that Firefox has had for a while. No matter how your tabs scroll and move and resize, you can always count on the close button being in the right location when you need to close them:

[ YouTube HTML5 (if available) ]

Finally, let’s talk about a design decision made in Firefox’s earlier days: we placed the tab close buttons on the right side of each tab for all platforms, including OS X. To some people, this seems to break with the design of Apple’s platform, since Safari and OS X windows have close buttons on the left side instead. (It’s also worth noting that several of Apple’s applications have the close button on the right too — iChat, Pages and Automator all do this in various parts of their UI.)

Now imagine if we put the close buttons on the left. With that configuration, when closing the rightmost tab, we would have to shift the remaining tabs to the right to move the next close button to the same place, leaving an awkward gap on the left side of the tab bar. Placing the close button on the right (for left-to-right locales) is the more intuitive choice.

Another important aspect we have found is that favicons on tabs are the primary way people identify and navigate tabs, so we give them prominent placement.

This optimized close/resize behavior is just one of the many improvements to tabbed browsing we’re working on. Be sure to check out other new tabbed browsing features in upcoming Firefox 4 betas!

Frank Yan

Hacking the Firefox UI from the Web Console

Making tab closing as easy as click, click, click