I decided to devote some time this week to digging through the various features of Fluid to see just what was possible. What I ended-up with is a Gmail client that is a huge improvement over the standard (and, arguably, already pretty good) Gmail experience. The sections below will take you through the various steps I used to create the Ultimate Gmail Browser.

Create the SSB

The first step is to install Fluid and create your Gmail SSB. Upon launching Fluid you’re presented with a pretty simple dialog that asks you to fill in a few fields:

• The starting URL for the browser. Here I’m using my Google Apps mail URL, but regular Gmail users will want to use https://mail.google.com.
• The name for the SSB. This is the name that will be assigned to the “application” that is created.
• The location where the SSB app will be created. Your Applications folder is probably a good choice.
• The icon to associate with the SSB. This is the icon that will be used to represent the application in both the Finder and Dock.

By default, Fluid will attempt to retrieve the favicon.ico image from the destination site and use that as the application icon. This would be great if it weren’t for the fact that these icons are typically 16×16 pixels. If you want something that is going to look nice when displayed in the Dock you’ll need something with a bit better resolution.

Luckily, there is an entire Flickr group dedicated entirely to aggregating high quality Fluid icons. I’ve included PNG versions of my two favorite Gmail icons here.

Enable the Dock Badge

For certain sites (Gmail, Google Reader and Yahoo! Mail) Fluid will automatically add a little badge to the Dock icon that indicates the number of unread items you have. This is a pretty cool little feature that just makes the SSB feel even more like a real desktop application.

The dock badge should be enabled by default, but if you find that it is not displaying there are two settings to check:

1. In the Preferences dialog for your Gmail SSB application check to make sure that the “Fluid attempts to show Dock badge labels” option is enabled.
2. In the settings for your Gmail account go to the “Labs” tab and verify that the “Hide Unread Counts” feature is disabled. When this feature is enabled it causes Gmail to suppress the unread message count indicators that typically appear in the navigation menu next to your folders/labels. Fluid uses the message count that appears next to the Inbox link to determine how many unread messages you have — if this value isn’t being displayed, Fluid won’t render the dock badge.

Tweak the Gmail UI

Fluid has a feature called Userstyles which allows you to specify a custom style sheet for pages that are displayed in the SSB. As long as you are fluent in CSS, this essentially gives you the ability to completely re-skin any site. Firefox users may be familiar with the Stylish add-on which gives you the same capability.

The Userstyles feature is accessed via the SSB’s Preferences dialog. You simply need to specify the URL pattern and the CSS rules that you want applied to those URLs.

In the example above, I’ve defined a custom style sheet for any URL that contains mail.google.com. I’m not going to even attempt a complete overhaul of the Gmail UI — I’ll leave that as an exercise for people far more talented than myself (you may want to check out userstyles.org to see what cool things other people have done). However, there are some minor tweaks that I would like to make to the default Gmail theme.

The screenshot below shows my Gmail SSB before applying my custom style sheet. The numbered items are the UI elements that I want to remove or change in some way with my style sheet. In the section below I’ll discuss each of the numbered items and specify the CSS rule(s) I used to alter them.

1. The first thing on the cut list is the little green Labs icon which, when clicked, takes you directly to the Labs tab of the Gmail settings. You can get to exactly the same screen via the Settings link so I’m gonna ditch it.

   1 2 3

   div#guser span[title*='Labs'] { display: none !important; }

   You’ll see that for most of these styles I try to make my CSS selectors pretty specific so that I don’t accidentally target other elements on the page. In this case, I’m looking specifically for a span whose title attribute contains the word “Labs” and is a child of a div with an ID of “guser”.

2. I’m not interested in the older version of the Gmail UI, so I’m going to get rid of this link as well.

   4 5 6

   div#guser a[href$='ui=1'] { display: none !important; }

3. Not once have I ever “starred” a message. Gone.

   7 8 9

   div.nH.qj > div.nH > div.nH:nth-child(2) { display: none !important; }

4. I don’t use Google Chat so there’s no need for this menu item either.

   10 11 12

   div.nH.qj > div.nH > div.nH:nth-child(3) { display: none !important; }

5. This one is a little different — I still want the link to my spam folder, but I don’t want to be constantly reminded of the thousands of messages I have in there. The clever CSS trick below hides the existing spam link and then redraws the string “Spam” on top of it.

   13 14 15 16 17 18 19 20 21 22

   .pX a[href$='#spam'] { visibility: hidden; }   .pX a[href$='#spam']::before { content: 'Spam'; visibility: visible; font-weight: 400; text-decoration: underline; }

   I actually lifted this little bit of CSS from the Gmail Spam-count Hide script I found on userscripts.org. Note that you can use Gmail’s “Hide Unread Counts” feature to accomplish this same thing, but it also hides the unread count for the inbox folder. We already saw that the Fluid dock badge feature is dependent on the inbox unread count and the Growl integration that I’ll introduce in the next section will be dependent upon it as well.

6. I don’t use the chat feature in Gmail at all, so I’m going to completely remove this widget.

   23 24 25

   div.nH.s { display: none !important; }

   I could probably handle both #4 and #6 by simply disabling the Google Apps chat feature, but it appears that having chat enabled is a requirement for using the tasks feature which I do like to use.

7. I think I’ve already seen all the tips Gmail has to offer, this is just noise at this point.

   26 27 28

   div.nH.l2.ov div.mn { display: none !important; }

8. More links related to chat and the baisc HTML mode.

   29 30 31

   div.nH.l2.ov div.mp { display: none !important; }

9. I’m not particularly interested in the terms of service (which I’m surely violating with my UI alterations) or privacy policy so I’m going to remove the remainder of the page footer.

   32 33 34

   div.nH.l2.ov div.ma { visibility: hidden !important; }

Obviously, this is just my nit-picky list of UI tweaks. I won’t go into specifics here but I’m sure that you could identify other adnoying features of Gmail that would be nice to remove.

If you’re interested in making your own changes I highly recommend using Firefox and the Firebug add-on to explore the Gmail DOM and understand the various tags, IDs and classes that are employed.

After applying my custom style sheet to the Gmail UI, the result looks like this:

Add Growl Support

The final step in configuring the ultimate Gmail browser is to enable Growl support. If you’re not familiar with Growl it’s basically a universal notification system for OS X. Any application that is Growl-aware (and there are lots of them) can post status messages to Growl and then Growl takes responsibility for presenting those messages to the user. The nice thing about it is that it standardizes the presentation of status messages across all of your applications and gives you a central place to control and customize those notifications. Trust me, it’s cool — install it.

Like many applications, Fluid has Growl support built-in. More importantly, Fluid exposes an API for sending your own Growl notifications. Using this capability, we can write a script that will check for new messages in your inbox and send a notification to Growl whenever you have new mail. This type of integration with the OS is the sort of thing you typically lose when you use a web-based application.

On my system, I have Growl configured to make a little beep and display the following notification pop-up whenever it receives a notification from my Gmail SSB.

In much the same way that Fluid allows you to create your own style sheet via the Userstyles feature, there is a Userscript feature that allows you to run Javascript code in the SSB that interacts with the current page. This concept should be familiar to anyone that has played with the Firefox Greasemonkey add-on.

I wrote the script below (also posted on userscripts.org) which will watch the unread message count of your inbox and post a message to Growl anytime it sees that number increase (Note: Any changes that google makes to the structure of the HTML has the potential to break this script — I’ll do my best to keep this script up-to-date and working. The most recent version of this code can be found at the userscripts.org link above.).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// ==UserScript==
// @name        Gmail Growl
// @namespace   http://dehamer.com
// @description Gmail Growl Notification for Fluid
// @include     http://mail.google.com/*
// @include     http://*.google.com/mail/*
// @include     https://mail.google.com/*
// @include     https://*.google.com/mail/*
// @author      Brian DeHamer
// ==/UserScript==
 
(function () {
 
    if (!window.fluid) {
        return;
    }
 
    var unreadMsgCount = 0;
 
    function growlNewMessages() {
 
        var oldCount = unreadMsgCount;
 
        // Locate the DIV containing the Inbox hyperlink
        inboxDiv = document.getElementById("canvas_frame")
            .contentDocument.getElementById(":r2");
 
        if (inboxDiv) {
 
            // Grab the title of the Inbox hyperlink and locate the
            // unread message count
            inboxLinkTitle = inboxDiv.getElementsByTagName('a')[0].title;
            matches = inboxLinkTitle.match(/\((\d*)\)/);
 
            if (matches) {
                unreadMsgCount = matches[1];
            } else {
                unreadMsgCount = 0;
            }
        }
 
        // If the unread message count is greater than it was the last
        // time we checked, we know that we've received one or more new
        // messages.
        if (unreadMsgCount > oldCount) {
 
            fluid.showGrowlNotification({
                title: "Gmail",
                description: unreadMsgCount + " unread message(s)",
                priority: 0,
                sticky: false
            });
        }
    }
 
    // Check for new messages every 10 seconds
    window.setInterval(function(){growlNewMessages();}, 10 * 1000);
 
})();

To install this script you can simply go to the Fluid script menu and select the “New Userscript…” option. Give the script a name, paste in the code above and you should be good to go (you may have to restart the SSB for the script to take effect).

There you have it. You’ve now got the Ultiamte Gmail Browser. Let me know if you’ve got any customizations of your own.