Using greasemonkey and/or gmail API to reduce width of mail pane.

Question

Hi there. I'm on my way to creating a greasemonkey script for gmail.

The first thing I want to play with is reducing the size of 'main' pane. This is where either the list of emails are or where the email message is being displayed.

Using Firebug, I can find two separate instances of a "<div class="nH nn" style="width: 1013px;">" tag. One changes the width of the background of the relevant pane, the other changes the width of the messages contained in the pane. Using Firebug I can change the width values in each of these tags to have the middle pane take up half the available space, for example.

How should I do this using Greasemonkey? Is the gmailAPI the way to go? The wiki here:

http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API

doesn't give much description for each method. Would gmail.getMastheadElement() maybe be it?

Or would more of a standard DOM transverse approach be better than dealing with the API? If so, I'm not sure how to target those particular divs. They're only using the classes "nH nn" for identification, which seem to be reused multiple times throughout the gmail code.

Thanks.

UPDATE: Wish we could put code in replies to answers... here's the thing that I'm trying. Where is this going wrong?

window.addEventListener('load', function() {
  if (unsafeWindow.gmonkey) {
    unsafeWindow.gmonkey.load('1.0', function(gmail) {

      gmail.getActiveViewElement().style.width = "500px";

    });
  }
}, true);

Answer 1

gmail greasemonkey api is the way to go.

gmail.getActiveViewElement (along with gmail.getActiveViewType) seems to be what you are looking for.

Edit: Responding to your comment - I have never tried this before but I typed the following in my firebug console (when gmail was open and gm enabled) and it worked perfectly (reduced the width of the conversations view).

gmonkey.load("1.0", function() { 
    var gmail = gmonkey.get("1.0");
    gmail.getActiveViewElement().style.width = "500px";
});

Also, you can visually inspect what element is returned by the functions if you console.log the element. When you hover over the result in console, Firebug highlights it in the html document.

Edit 2 : The following worked for me.

window.addEventListener('load', function() {
  if (unsafeWindow.gmonkey) {
    unsafeWindow.gmonkey.load('1.0', function(gmail) {
      setTimeout(function() {gmail.getActiveViewElement().style.width = "500px";},0);
    });
  }
}, true);

Now I have no idea why a setTimeout helps here. Maybe gmail does a lot of its own dom manipulation stuff on window.load burying your change. Here's a related SO discussion on that!