Archives

Chrome-like tabs in Fx4

I've updated my style which creates a chrome-like tab strip and tweaks some more things for Firefox 4 beta. The original post can be found here. A few changes were necessary to keep up with changes in Firefox 4 itself, especially changes in the drawing of the title bar and the orange app button.

Some minor updates only

Please read the notes before installing it. You'll definitely need a very recent build of Firefox 4 and the style is designed to work best on Vista or 7 with the Aero theme active. Also, it is not intended to be used with a persona theme (a.k.a. lightweight theme), because the tabs are not transparent enough to look good with a persona theme.

Where to get it?

The style is available from userstyles.org.

Original post

This post describes the style in more detail. Most things are still valid with the exception of the combined stop/reload button. This is now a default feature in Firefox 4 and a user style is no longer needed to implement it.

A while ago I wrote about Direct2D and DirectWrite rendering in Firefox 4 and explained how to activate it. Recently, the method to activate D2D has changed somewhat, because the developers decided that it is about time to make D2D the default on platforms that can support it (Windows Vista SP2 or later).

Around August 15, 2010, the method changed and now works as follows:

• If mozilla.widget.render-mode is set to -1 (which is the default value for a fresh install), Firefox will automatically activate D2D when available. It will test operating system version and video drivers for DirectX10 support and make sure to run on a supported OS service pack level.
• If mozilla.widget.render-mode is set to 0 (can be done in about:config - restart required), D2D will be disabled, regardless of OS and driver support.

Other values (like the old value of 6 which activated it) are probably still supported, but they are no longer needed. Should you prefer to disable D2D, because of its remaining issues, simply set mozilla.widget.render-mode to 0.

Update on this

There is now a new visible option to control D2D behavior in recent nightly builds and this option will also be in b5. Options->Advanced->General->Use hardware acceleration when available is what you want to modify. Uncheck it to disable D2D even when your operating system and hardware supports it. Using about:config to control its behavior is no longer necessary.

Another feature "borrowed" from another browser :)

In Google Chrome, when you open or close tabs, they will smoothly slide into or out of view. It's a neat little piece of eye candy and people tend to love it. Consequently, there is an addon that implements animations for opening and closing tabs in Firefox. The author states that he was inspired by a feature planned for Firefox 4 - tab animations.

And indeed, the feature has recently landed on trunk and already works with recent nigthly builds of Firefox 4, but since it is a new and experimental feature, it is disabled by default and there is no option for it. As always, about:config will be more than happy to help :)

Look for browser.tabs.animate and set it to true. If the setting does - for whatever reason - not yet exist in your profile, create a new Boolean value and set it to true. A restart of Firefox is required after changing this setting.

You need to have a very recent nightly version of Firefox 4. If it doesn't work after adding the value in about:config, your version is probably too old. Get a newer one.

One warning though

There is one issue which will result in "ghost tabs" - when you close a tab, it will lose its label, icon and close button, but the tab outline will remain on the tab strip. This happens when you have modified your maximum tab width (here is an article that tells you how to do this) which apparently confuses the animation code. Just make sure to NOT use a modified maximum tab width and all should be fine. The bug is not triggered when only changing the minimum tab width.

What it does?

• Make the tabs like Google Chrome's tabs :)
• Change the look of the app button (the orange Firefox logo in the top left corner).
• Change the look of the personal tool bar (bookmarks bar) to be more compact and using a tool bar skin.
• Combine the Reload/Stop button with the URL bar (like in Google Chrome).
• Change the appearance of the URL and search fields in the navigation bar (less rounded corners, closer to the look of text fields in the Windows Explorer).
• Change the minimum width of tabs to a much lower value. The default in Firefox 4 is, in my opinion, way too high. See here for a more detailed description.

Read more...

Want smaller tabs?

While playing around with Firefox 4 testing builds, I found myself being unable to set a minimum tab width in the way it was working with FF 2 or 3 where you could set the config variables:

• browser.tabs.tabMinWidth for the minimum width of tabs before adding the scrolling ability

• browser.tabs.tabMaxWidth for the maximum allowed width for a single tab.

In current "Minefield" builds of Firefox 4, these configuration variables simply do not work any longer and that's something I found disturbing, because the default (and now apparently hardcoded) limit for the minimum width of 140 pixels is way to high when working with lots of tabs.

Solution:

The values can be overridden in userChrome.css with the following code:

.tabbrowser-tab:not([pinned]) {
  max-width: 250px !important;
  min-width: 40px !important;
}

See this issue for reasons why the config variables do no longer work. They were recently removed from the code and possible solutions require userChrome.css editing.

So far, the only way to fix this was to disable tab animations in Firefox 4 by setting the browser.tabs.animate configuration variable to false. However, many people like the animations and would probably love to keep them while still being able to reduce the minimum tab width.

As described in this bugzilla report and submitted in the comments section of this article, there is a solution for the animation issue:

.tabbrowser-tab:not([fadein]) {
   max-width: 1px !important; min-width: 1px !important;
   max-width: 1px; min-width: 1px;
 }

Add the code above to your userChrome.css and you should be able to use tab animations together with the modification for the default minimum and maximum tab width.

Credits:

Tip for fixing the tab animation issues submitted by anonymous comment author.

Firefox 4 and Direct2D on Windows 7

Right now, I'm testing the 3rd beta of Firefox 4 and so far, I like what I'm seeing. I turned away from Firefox when it started to become more and more bloated - a development that culminated in version 3.5 and that made me switch to Google Chrome because of its more modern and sleeker design.

Now, after a while, I wanted to see what the next major Firefox version will bring and I'm pretty impressed. First of all, the UI is much improved, although it doesn't seem that FF will bring new innovations, it merely copies a few things from other browsers, especially Chrome and that was to be expected, because Chrome did introduce some new and fresh things to the browser world.