Frank Yan

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');
this.__proto__ = Services.wm.getMostRecentWindow('navigator:browser');

Then, window becomes a ChromeWindow that represents the current browser window, and autocompletion even works on its properties! For example, try typing the following:
(Watch the tab bar when you press enter!)

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!

Hello, Mozilla; Goodbye, Paper Cuts!

frankyan — Sat, 24 Jul 2010 21:41:06 +0000

Hello, Planet Mozilla! I’m Frank Yan, and I’m working as a Firefox engineering intern. This means that I get to spend my summer making Firefox more awesome! As one of my side projects, I’ve been hacking on “paper cut” issues, which are small bugs that get in your way and little features that you wish your browser had.

The first paper cut that I tackled finds its origins in 2006. That year, tabbed browsing was becoming all the rage, and Mozilla shipped Firefox 2 as its first release to handle tab overflow. Since most mouse wheels only supported vertical scrolling, we enabled the horizontal tab bar to be scrolled by vertical scroll events too. After laptops started rolling out with multi-touch trackpads, users could scroll in both axes simultaneously using two fingers. An unexpected side effect was that, when scrolling with the trackpad even slightly diagonally, the tab bar would sometimes try to scroll both left and right, resulting in sporadic bounces. The effect wasn’t exactly spectacular, so I added logic to scroll the bar only when scroll events are consistently along a particular axis. This will provide a smoother scrolling experience in Firefox 4.

Stay tuned for more patched-up papercuts!