7 Inch Apps Gmail with Greasemonkey

I posted a few days ago about a Greasemonkey script that I had written to customize Gmail to the 7 inch screen of my EeePC. Shortly after that post, I got myself set up with my new domain and email address an as a result I wasn't able to use the Terminal theme upon which my script was based, so no more 7 Inch Gmail for me.

Until now!

Below is another Greasemonkey script that will maximize the message area of your screen by creating panels on the top and left side of the screen that will let you toggle the visibility of those areas and make the most of otherwise limited screen real estate.

To use this script, you'll need to be using Firefox and the Greasmonkey add-on. Open up your Gmail window and right-click on the Greasmonkey icon in the lower right of the screen and select "New User Script". Give it whatever name you like, the only important field is "Includes (One per line)" which should read:

http*://mail.google.com/a/*

Once you've done this and clicked on "Ok", just paste the code below into your text editor and save it. Reload your Gmail window and you should see something like this:

// ==UserScript==
// @name           My Gapps Mail
// @namespace      Google Mail
// @include        http*://mail.google.com/a/*
// ==/UserScript==

function topTog()
{
 if (topBar.style.display == "none") { topBar.style.display = ""; }
 else { topBar.style.display = "none"; }
}

function leftTog()
{
 if (leftBar.style.display == "none") { leftBar.style.display = ""; }
 else { leftBar.style.display = "none"; }
}

function onLoadHandler()
{
 if(window.parent!=null &&
  window.parent.parent!=null &&
  window.parent.parent.document.getElementById("canvas_frame")!=null)
 {
  var oTopTog = window.parent.parent.document.createElement("DIV");
  oTopTog.id = "topTog";
  oTopTog.innerHTML = " ";
  oTopTog.style.cursor = "default";
  oTopTog.style.background = "#03AFFF";
  oTopTog.style.position = "absolute";
  oTopTog.style.top = "0px";
  oTopTog.style.left = (window.outerWidth / 3) + "px";
  oTopTog.style.height = "10px";
  oTopTog.style.width = (window.outerWidth / 3) + "px";
  oTopTog.addEventListener('click', topTog, true);
  window.parent.parent.document.body.appendChild(oTopTog);

  var oLeftTog = window.parent.parent.document.createElement("DIV");
  oLeftTog.id = "leftTog";
  oLeftTog.innerHTML = "   ";
  oLeftTog.style.cursor = "default";
  oLeftTog.style.background = "#03AFFF";
  oLeftTog.style.position = "absolute";
  oLeftTog.style.left = "0px";
  oLeftTog.style.top = (window.outerHeight / 4) + "px";
  oLeftTog.style.height = (window.outerHeight / 3) + "px";
  oLeftTog.style.zIndex = "101";
  oLeftTog.addEventListener('click', leftTog, true);
  window.parent.parent.document.body.appendChild(oLeftTog);

  frmDoc = window.parent.parent.document.getElementById("canvas_frame").contentDocument;   topBar = frmDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]
  topBar.style.display = "none";
  leftBar = topBar.nextSibling.childNodes[0].childNodes[1];
  leftBar.style.position = "absolute";
  leftBar.style.left = "10px";
  leftBar.style.top = "5px";
  leftBar.style.zIndex = "100";
  leftBar.style.display = "none"
  leftBar.style.background = "white";
  leftBar.style.opacity = ".75";
  leftBar.style.filter = "alpha(opacity=75)";
  leftBar.nextSibling.style.width = (window.outerWidth - 30) + "px";
  leftBar.nextSibling.style.top = "13px";
 }
}


window.addEventListener('load',onLoadHandler,true);