Firefox Tweaking

I’m finally getting around to creating a page (or maybe pages) related to how I’ve customized Firefox. I sure wish this page were a wiki, but it’s not. Anyway, on to Firefox (oh, this page is in BETA).

Here’s a screenshot of my Firefox build after installing all extensions, the Rein theme and tweaking the UI (Chris, click on the screenshot link).

Firefox is a great browser and a great example of how well open-source development can work. Straight out of the box, it’s very usable and is probably fine for most casual users. However, for power users — or users that just like tinkering — the design of Firefox facilitates a wide range of customization options. Add on programs (extensions), custom configuration files, themes and even custom binaries for specific CPUs all exist or can be created to modify Firefox to suit your tastes and needs. Here’s some notes on how I’ve used these items to customize my Firefox install.

Removing Items from Autocomplete

To remove items from the autocomplete field (eg, URLs that you entered incorrectly), move the focus to the item you want removed and hit shift+delete.

CPU-Optimized Firefox Builds

I’ve just started using (as of 2005-01-26) MOOX’s custom build of Firefox. These builds are designed to exploit features of particular processors and/or instruction sets. So far the build I’ve been using seems very stable. It’s definitely faster than the normal Firefox build. Make sure to read this page which guides you through which build is appropriate for your particular CPU (most newer processors use the M3 build). MOOX’s downloads can be found here.

Firefox Option Tweaks

I like to change a few Firefox options from the defaults. You can access the options menu through Tools >> Options

  1. Password Saving — I like to turn this off.
    Tools >> Options >> Privacy >> Saved Passwords and uncheck Save Passwords.
  2. Start Searching When You Begin Typing — Instead of having to press cntl+F to find something on a page, you can change this option so that Firefox begins searching as soon as you start typing. This used to be the default preference. To turn it back on goto: Tools >> Options >> Advanced >> Accessibility and check Begin finding when you begin typing.
  3. Download File Saving Location — I like to have Firefox ask me where it should save files that I am downloading everytime it downloads a file. To turn this option on goto: Tools >> Options >> Downloads and select the Ask me where to save every file radio button.
  4. Links from other Applications — I prefer to have links from other applications opened in a new tab in the most recent window. To set this goto: Tools >> Options >> Tabbed Browsing >> Open links from other applications in and select the a new tab in the most recent window radio button.
  5. Always Display Tab Bar — I like to have the tab bar displayed at all times… even when there is only one tab open. This keeps the UI consistent. To set this goto Tools >> Options >> Tabbed Browsing and uncheck the box called Hide the tab bar when only one web site is open.
  6. Del.icio.us Bookmarklet Popup Window — In order to allow the Del.icio.us bookmarklet to open in a new window, activate the bookmarklet. Firefox’s popup window blocking menu bar should then show up at the top of the web page. Click on the Click here for options area. Under the allowed sites at del.icio.us, and click Allow and then @OK@.

Configuration Files

You can read more about changing the Firefox configuration files here. Although there are lots of things you can change in these files, the one change that I really think is necessary is changing the background color of the active tab. When you have lots of tabs open, it’s sometimes are to tell which one is the active tab. Here’s the addition you need to make the the userchrome.css file to change the active tab’s background color to an eye-popping yellow:

Change Active Tab Color Background to Yellow

/* Change Active Tab Color */
tab {background-color: white !important; color:black !important}
tab[selected="false"] {color: black; background-color: white !important;}
tab[selected="true"] {color: blue; background-color: yellow !important;}

Here’s the code need to change move the sidebar to the right side of the browser.

Move the Sidebar to the Right

/* Place the sidebar on the right edge of the window  */
window > hbox {
   direction:rtl;
}
window > hbox > * {
   direction:ltr;
}

Themes

Themes allow you to change the look of Firefox by simply installed a theme file. A wide range of themes can be found on the official Firefox theme site. I prefer to have my Firefox theme to be minimal and clean — hence my use of the Rein theme. “Rein” is German for “purely.” If you are interested in using the Rein theme, just look around on the Rein page for the link to the .jar file which is the theme file.

Must Have Extensions

  1. ViewSourceWith — ViewSourceWith is a Firefox extension that lets you use an external application to view the source of a page instead of the built-in source viewer in Firefox (e.g., in a new tab or window).
  2. IEView - Adds View page in Internet Explorer links to the content and link context menu. This rocks. Since I don’t have Flash installed in Firefox (which is nice for blocking evil UI elements and ads), IEView lets me quickly load the page in IE in all of its Flash glory (or gory). Also good for pages that don’t load well in Firefox.
  3. Context Search — Changes the Search Web for context item into a menu containing your search plugins.
  4. Compact Menu - Allows you to free up some vertical space my cramming all of the menu controls (i.e., File, View, etc.) under a fish icon.. why the fish, I don’t know. Note that the Rein theme has a replacement icon for the fish.
  5. Linkification - Turns textual URLs links into hyperlinks.
  6. Tabbrowser Extensions — Greatly increases control over your tabs. An essential extension. Don’t settle for substitutes… this is THE tabbed browser extension to install. Coming to you directly from Japan. Hint: When installing, use the author’s settings as I wrote about here.
  7. SpellBound — A feature-rich spell checker for Firefox. Use it in TypePad (just be sure to click on the field you want to check before initiating it). Add-on dictionaires for international language support can be found here. Installing Spellbound can be a little tricky if you are using the MOOX builds. Fortunately, there is a custom install web page for Spellbound that automatically detects your Firefox build type. It can be found here and makes installation easy.
  8. Scrapbook - Facilitates capture of full or partial web pages and creation of plain-text or HTML notes. You can change the directory that Scrapbook stores its entries in under Tools/Settings/Advance.
  9. ColorZilla — Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.
  10. Feedview — Allows the browser to render RSS feeds. Similar to the functionality found in Apple’s Safari browser.
  11. All-in-One Gestures — This extension allows you to execute common commands using mouse gestures, rocker navigation, scroll wheel navigation and page scrolling.
  12. LiveLines — Livelines activates the new Firefox RSS icon with 1-click Bloglines feed subscriptions. I have mine set up to add the RSS feed to Bloglines.
  13. Foxylicious — This extension syncs your del.icio.us bookmarks into your browser bookmarks. You can sync all of your bookmarks with Del.icio.us or just one folder (be careful when setting this up so you don’t overwrite all of your existing bookmarks). Backing up your bookmarks before you install this extension is recommended.

Other Interesting Extensions

  1. Web Developer — The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. For example, you can edit a site’s CSS file locally to see how it changes the site’s layout.
  2. Slogger — Slogger is an extension for Mozilla Firefox which can create a customizable browser history, automatically store all pages you visit locally, log pages via various search providers, and more. Slogger has many options and is designed to be highly customizable. You can change the location of where Slogger stores the history files in the preferences menu.
  3. Foxylicious
    Foxylicious allows you to sync your Del.icio.us bookmarks with Firefox. You can sync your Del.icio.us bookmarks to a folder within your Firefox bookmarks, or have it replace all of your Firefox bookmarks with your Del.icio.us bookmarks (so be careful how you set it up). I recommend backing up your bookmarks.html file before installing.
  4. A9 Toolbar — Has an A9 search box, saves your history and bookmarks online. Really used to receive the A9 discount at Amazon (which is a little over 1%).
  5. Sage — A lightweight RSS and ATOM feed aggregator
  6. MapIt — Select addresses from a web page and open a map of it using the context menu.
  7. Digger — Adds a button to the toolbar and a link in the context menu that with tools to easily dig through the directories of the URL you are currently browsing.
  8. SessionSaver — Remembers loaded tabs and their history items when Firefox is manually closed, then restores the tabs and history items when next started. The saved session can also be manually restored or updated at any later time via the items in the File menu.
  9. QuickNote — Take notes in the sidebar, and save them to a local file. Kind of handy.
  10. FoxyTunes — Control your media player from Firefox’s status bar.
  11. OpenBook — This extension allows for customization of the Add Bookmark dialog. The bookmarks tree can be automatically opened and elements can be added or removed.
  12. Bloglines Toolkit — Customizes Firefox with advanced Bloglines features, including a notifier embedded in browser window which alerts users when new information is posted to their Bloglines feed list.
  13. Mozilla Archive Format — The MAF project is an archive extension that allows complete web pages to be saved in a single archive file.
  14. Scollbar Anywhere — Scrollbar Anywhere allows to scroll the page as if the scrollbar is under your mouse pointer. Just hold the right (or any other) mouse button down and move the mouse.
  15. Open link in… — Adds a bunch of options to the context menu. However, the one you really need — “Open Link in Background Tab” — is not included!
  16. Menu Editor — Allows you to edit context menu items (which you can also do in the UserChrome.css file). Still in beta as of 2005-05-09.
  17. Search Keys — Search Keys lets you go to search results by pressing the number of the search result instead of clicking. For example, pressing 1 takes you to the first result. Hold Alt (Windows/Mac) or Ctrl (Linux) to open results in new tabs, or Shift to open results in new windows.
  18. Xinha Here! — Xinha Here! is a wrapper for the Xinha HTML editorthat enables WYSIWYG editing in any html textarea and text inputelements. XinhaHere! opens Xinha editor on the client side. This allowsyou to edit the fields data in a WYSIWYG on any website without copingand pasting to secondary editor.
  19. Del.icio.us — Included in the extension are two buttons which allow you to easily post items to del.icio.us, and access your saved items from del.icio.us. In addition to the buttons, the extension allows for right-click posting functionality. A del.icio.us menu is also installed which allows for quick access to common pages on del.icio.us as well as keyboard shortcuts. The extension also installs the del.icio.us search plug-in right into the existing Firefox search toolbar.

Extensions to Evaluate

  1. Locate in Bookmark Folders — Locates a bookmark in Bookmarks Manager’s folders tree or in the Bookmarks Sidebar, complementing the Bookmark Search feature of Firefox.
  2. Enhanced Bookmark Search — As the name implies.
  3. Enhanced History Manager — As the name implies.

Search Engine Plugins

You can add search engines to Firefox so that they show up as options in the search box (located up in the top right corner of Firefox). You can find all the search engine plugins here. Here are the ones that I add to my Firefox build.

  1. A9 — Amazon’s web and shopping search.
  2. Dictionary.com — Online dictionary.
  3. NewEgg — Geek stuff fast and cheap (I don’t think this is available anymore).
  4. Wikipedia — The incredible free encyclopedia.
  5. Yahoo! — Do you?

User-Interface Customization

I really like to tweak the UI of Firefox. My main goals of these tweaks is to increase the vertical space that is available for the content (i.e., the web pages you are viewing), and to remove as much of the chrome (menus, buttons, etc.) as possible. Here’s a summary of how I customize the UI of Firefox.

  1. Compact Menu — After you have installed the Compact Menu extension, right click on the upper menu bar, and click on Customize.... In the window that opens, find the Compact Menu button and drag it onto the upper most menu bar. This should eliminate all of the textual menu elements (e.g., File, Edit, etc.). You can access these elements by clicking on the Compact Menu buttom.
  2. Small Menu Buttons — Right click on the upper menu bar, and click on Customize.... Check the Use Small Icons box.
  3. Remove Buttons — Right click on the upper menu bar, and click on Customize.... Drag the Search Box, Go button and Home button into the window that popped up to remove them from the chrome. I never use the Go and Home buttons, and have eliminated the need for the Search Box by using keyword shortcuts.
  4. Move All Remaining Chrome Elements to Top Menu Bar — Right click on the upper menu bar, and click on Customize.... Then drag all the remaining UI elements (e.g., the Address Bar, the Bookmarks Toolbar Items, etc.) onto the top menu bar. Moving these elements to the top menu bar allows you to turn off the Navigation Toolbar and the Bookmarks Toolbar_. Now you are down to just one line of UI at the top which maximizes your vertical viewing space.

Other Tweak Guides

  1. Tweakguides.com — I haven’t read this one, so this is just a place marker, but it has been updated for 1.5.

STUFF I NEED TO CLEAN UP IS BELOW

Quick Tips

  1. Switching Tab Focus — cntrl+tab rotates the focus between Firefox tabs (cntrl+shift+tab rotates focus in the opposite direction).
  2. Bookmark Keyword Shortcuts — Click on any bookmark, and enter a keyword. Now, Firefox will open this bookmark when you enter this keyword into the address field.
  3. Shifting Focus to Search Box — Cntrl+e locks focus on the search box in the upper right corner.
  4. Changing Search Engines in Search Box — Once focus is on the search box, cntrl+arrowup/down scrolls through your search engines.
  5. Open Link in New Background Tab — To open a link in a new background tab use the shift+click keyboard/mouse key combination.
  6. Load Bookmark in Sidebar — NOTE: Talk about use of Bookmarks Toolbar Folder and using the option to load bookmark in sidebar (as in del.icio.us). Right Click Bookmark > Properties > Load in Sidebar.

How to Manage Keyword Shortcuts
Discus it.

Speed Enhancement Settings
Look at: http://windowssecrets.com/041202/
User.js
// This one makes a huge difference. Last value in milliseconds (default is 250)
user_pref("nglayout.initialpaint.delay", 0);

// Stop reusing active windows:
user_pref("advanced.system.supportDDEExec", false);

// disable target="_blank" (open in same window):
user_pref("browser.block.target_new_window", true);

// Change to normal Google search:
user_pref("keyword.URL", "http://google.com/search?btnG=Google+Search&q=");

// Put an end to <blink> tags!
user_pref("browser.blink_allowed", false);

// Enable pipelining:
user_pref("network.http.pipelining", true);
user_pref("network.http.proxy.pipelining", true);
user_pref("network.http.pipelining.maxrequests", 100);

// Turn off Automatic Image Resizing:
user_pref("browser.enable_automatic_image_resizing", false);

// turn on timer-based reflow management
user_pref("content.notify.ontimer", true);

// sets the allowed time between reflows in microseconds
user_pref("content.notify.interval", 100);

// set the number of reflows to do before waiting for the rest of the page to arrive
user_pref("content.notify.backoffcount", 200);

UserChrome.css
UserChrome.css
//
UserChrome.css
(found in C:\Documents and Settings\user_name\Application Data\Phoenix\Profiles\default\wfkd6mnh.slt\chrome)
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/

/*
* This file can be used to customize the look of Mozilla’s user interface
* You should consider using !important on rules which you want to
* override default settings.
*/

/*
* Do not remove the @namespace line — it’s required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/* Kill icons on normal bookmarks */


/*================================================
*   Main Window Edits
================================================/
window {
  font-size: 9pt !important;
  font-family: Verdana !important;
}

#sidebar {
  font-size: 9pt !important;
  font-family: Verdana !important;
}

/*============================================
*   Tab Edits
============================================/
/* change the font style on the tabs */
.tab-text {
    font-size: 9pt !important;
    font-family: Verdana !important;
}

/* make inactive tabs hardly visible :) */
tab:not([selected="true"]) {
    -moz-opacity: 0.5 !important;
}

/*
.tabbrowser-strip tab:not([selected="true"]) .tab-text {
    font-size: 14pt !important;
    font-weight: bold !important;
}
*/

/* hide the text of the inactive tabs */
/*
.tabbrowser-strip tab:not([selected="true"]) .tab-text {
display: none !important;
}
*/

/* never show "Open in New Window" when right clicking */
#context-openlink {

    display: none !important;
}

/* Don’t Display Icons in Bookmarks menu and add Blue to folders */
menu.bookmark-item > .menu-iconic-left {
  display: none;
}

menuitem.bookmark-item > .menu-iconic-left {
  display: none;
}
menu.bookmark-item {
  color: navy !important;
  font-weight: 900 !important;
}

/* Change Active Tab Color */
tab {background-color: white !important; color:black !important}
tab[selected="false"] {color: black; background-color: white !important;}
tab[selected="true"] {color: blue; background-color: yellow !important;}

Technorati Profile |