Code Couch

Resizing the left-hand labels column in Gmail – a bug fix and extra user script compatibility

Dan — Wed, 09 May 2012 01:30:30 +0000

This is the latest version of my Gmail label column resizing code to address the Greasemonkey user script wrapper not working in Chrome, and to fix a minor z-index issue. I’ve also shrunk the bookmarklet version of the code by 7 bytes (because I could ), and have dropped the “some whitespace” version of the code from this post, as it served no real purpose.

Here’s a quick run-down of what’s in this post:

Compatibility
The code
Instructions for running the code as a bookmarklet
Instructions for running the code as a user script in Greasemonkey
Instructions for running the code as a user script in Chrome
Known issues

As usual, if you find bugs, can suggest improvements, or just have something to say about the code, please use the comment form at the end of the post. Use the code as you like, but please follow the terms of use and acknowledge where the code came from if you reproduce it anywhere.

Enjoy!

Compatibility

This code will not run in IE 8 or below. Other than that, I’ve tested the code on various versions of Chrome, Safari, Firefox, and Opera without any problems.

While I’ve implemented some detection for non-standard layouts (e.g. those created by some labs or plugins), it is impossible to guarantee 100% compatibility. I know the following labs worked fine during my testing and caused no issues:

Right-side chat
Navbar drag and drop
Move Icon Column
Google Docs gadget
Google Calendar gadget

The Xobni “Smartr Inbox” plugin is known to prevent my code from working.

I’ve had a 50% success rate running this as a user script in NinjaKit by using the Chrome user script wrapper and making minor modifications to the code. The other 50% was either nothing happening, or an error being thrown. I might look into this at some point, but it’s not high on my priority list at the moment.

The code

Here’s the bookmarklet version. If you’re unfamiliar with the concept of bookmarklets, read these instructions for running the code as a bookmarklet:

gmonkey.load(2,function(o){var i=o.getNavPaneElement(),l,r,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,t=0,x,w,n,g,Q='querySelector',W='width',U='parentNode',P='px',S='style',k=function(){r[W]=b[o]-l[o]-c+P};while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];n=c[U='childNodes'],w=[n[0],n[1]];if(c.cells)for(o in w){for(l in r=w[o][U])if(parseInt(r[l][S][W])){w[o]=r[l];break}}l=w[0],r=w[1][S],c=b[o='offsetWidth']-l[o]-w[1][o];g=i.appendChild(d.createElement('div'));n=l[Q]('[role^=n]');r[(U='cssText')+2]=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);g[S][U]=W+':4px;position:absolute;z-index:1;left:'+(l[o]-5)+'px;top:'+t+'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';top[n='addEventListener']('resize',k,0);g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX,r[U+3]=r[U],r[U]+=r[U+2],e.preventDefault())},0);d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);d[n]('mouseup',function(e){e.which==1&&(x=0,r[U]=r[U+3],k())},0)})

And the “full monty” version with comments and formatting for easy reading:

// Use the Gmail Greasemonkey API to reliably find the 2 main elements (the left- and right-hand columns). You do not need Greasemonkey installed 
// to use this API. See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for details (note: the documentation is out of date)
//
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
	/*
		Set up variables. To keep the code size down, some are re-used. There should be no global namespace pollution
 
		i		initially points to the parent element of the left-hand nav, ultimately points to the parent element of the grab bar
		l		initially used as a loop counter, ultimately points to the element that is resized to change the left-hand column width
		r		initially used as a temporary loop variable, ultimately points to the style object of the element that is resized in the right-hand column
		c		initially points to the parent element of the active view, then parent element of all columns, then used to hold the width of columns 3-n (if present)
		d		this points to the document in the frame we use
		b		this points to the body
		t		this is used to calculate the top coordinate of the grab bar
		x		this holds the initial x delta between mouse click and left-hand column width
		w		initially used to point to the left-hand and main column elements, then during dragging, this holds the new width of the left-hand column
		n		initially holds pointers to all the columns elements, then the left-hand nav, then holds the string 'addEventListener'
		g		this points to the grab bar element
		Q		this holds the string 'querySelector'
		W		this holds the string 'width'
		U		used for many things, most notably holding the strings 'parentNode', 'childNodes', and 'cssText'
		P		this holds the string 'px'
		S		this holds the string 'style'
		k		this is the function that sets the width of the right-hand column
	*/		
 
	var i=o.getNavPaneElement(), l, r, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, t=0, x, w, n, g, Q='querySelector', W='width', U='parentNode', P='px', S='style', k=function() { r[W]=b[o]-l[o]-c+P; };
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(i)&2) c=c[U];
	while(i[U]!=b) i=i[U];
 
	// Update n to hold pointers to all the column elements (even if more than 2 are present), and w to point to just the first 2
	n=c[U='childNodes'], w=[n[0], n[1]];
 
	// Detect if a table has been used for layout (this happens with some of the Gmail labs, e.g. Right-side chat). If present, find the first
	// element that is controlling the cell's width by finding the first element that has an explicit non-zero width style set. This isn't a
	// perfect detection method (working with all the child nodes might be better), but it's better than nothing, and works at the moment :-)
	if(c.cells)
		for(o in w) {						// Loop over the first two table cells
			for(l in r=w[o][U])				// Find all of the cell's child elements and loop over them
				if(parseInt(r[l][S][W])) {		// If the current child element has a non-zero style width explicitly set...
					w[o]=r[l];			// ... then assume it is the width-controlling element, and store in in the current item in w
					break;				// There's no point in continuing to check the children (doing a "When a stranger calls")
				}
		}
 
	// Update l and r to point to their intended elements, and determine how much space is taken up
	// by any other columns (if present) by subtracting the label & main columns widths from the body width
	l=w[0], r=w[1][S], c=b[o='offsetWidth']-l[o]-w[1][o];
 
	// Create the grab bar, and insert it into the page
	g=i.appendChild(d.createElement('div'));
 
	// Copy the inline style from the "Compose" button. At present, the only inline style is a browser-specific user-select style used to prevent text selection.
	// This is applied to the right-hand column while dragging is underway to stop the text being selected. It is removed afterwards so that text can be copied.
	// This approach keeps the code size down, as the Gmail code handles the browser detection so I don't have to deal with vendor prefixes.
	// Store the inline style in a property called 'cssText2' of the right-hand column's style object
	n=l[Q]('[role^=n]');
	r[(U='cssText')+2]=n[Q]('[role]')[S][U];
 
	// Calculate the top position for the grab bar
	while(t+=n.offsetTop, n=n.offsetParent);
 
	// Style the grab bar
	g[S][U] = W + ':4px;position:absolute;z-index:1;left:' + (l[o]-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add a resize event to the window to update the size of the right-hand column when the window is resized
	// While Gmail does this anyway, it doesn't take into account any size change to the left-hand column
	top[n='addEventListener']('resize', k, 0);
 
	// Add mouse event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n]('mousedown', function(e) {
		// Only trigger with the LMB on grab bar. Stores initial x coord and width of left-hand column
		// Save a copy of the existing right-hand column style so we can restore it later, then disable text selection
		// Call e.preventDefault() to stop a native drag operation from starting (this happens a lot in Fx)
		e.which==1 && (x=l[o]-e.pageX, r[U+3]=r[U], r[U]+=r[U+2], e.preventDefault());
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta then update the column widths and the grab bar position
		x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k());
	}, 0);
 
	d[n]('mouseup', function(e) {
		// If the LMB is released, stop the mousemove code from running and restore the right-hand column style
		// k() needs to be called again, as restoring the style could alter the width
		e.which==1 && (x=0, r[U]=r[U+3], k());
	}, 0);
});

Running the code as a bookmarklet

Bookmarklets are small pieces of code that are usually designed to add extra functionality to a web page, and they are normally run (activated) by visiting a bookmark (or favourite) in your web browser. Here’s how to create a bookmarklet:

Note: these instructions are generic, as different browsers will have different ways of creating a bookmark. If you have trouble getting the code to run, post a comment with the details of the browser you’re using.

Select / highlight the bookmarklet version of the code
Copy the selected code to your clipboard
Create a new bookmark (or edit an existing one)
Set the name of the bookmark to be anything you like, e.g. “Gmail resizer”
Set the URL / address of the bookmark to be the text “javascript:” (with the colon, without the quotes), followed immediately by the code you’ve just copied. Note: This first part of this step is very important: the code will not run without the “javascript:” prefix. I have not included the prefix in the code, as some browsers strip it when pasted as part of a URL for security reasons; typing the prefix has no such issue
Save the bookmark

To run the code:

Load Gmail
Wait for the page to finish loading
Visit the bookmark as you would any other bookmark (normally by selecting it from the “Bookmarks” menu or toolbar)
If all has gone to plan, you should see two thin dashed lines between the label column and the main content area. The dashes are grey in colour, so may not be visible if your theme clashes. The should look like this (without the red border):

If you do not see two dotted lines in the red box above, try adjusting your screen’s brightness or contrast settings, and failing that, check the compatibility section to make sure you are using a supported browser.

Running the code as a user script in Greasemonkey

To get the code to work in Greasemonkey, the “gmonkey” variable reference must be prefixed with “unsafeWindow.”. Here’s the wrapper I used around the above “full monty” code:

// ==UserScript==
// @name           Gmail label column resizer
// @namespace      http://www.codecouch.com/
// @description    User script that allows the labels column in Gmail to be resized
// @include        http://mail.google.com/*
// @include        https://mail.google.com/*
// ==/UserScript==
 
// Insert the code here, but don't forget to prefix "gmonkey" with "unsafeWindow."
// The first line of code should now read:
//
// 	unsafeWindow.gmonkey.load(2, function(o) {

Running the code as a user script in Chrome

User scripts running in Chrome do not have access to all Greasemonkey features, including access to the “unsafeWindow” variable. Therefore, a different method is used to deliver the code.

To install the code into Chrome, follow these steps:

Copy the code below into a text editor
Copy the “full monty” code above and paste it into the text editor after the line that reads “// Insert code here.”
Save the file with a name that ends in “.user.js”, for example, “chromeGmailResizer.user.js”. Note: the “.user.js” extension is important as tells Chrome that this code is to be installed as a user script
Drag the file into Chrome.
You should see a security message similar to this:

Click the “Continue” button
You should see another security message similar to this:

Click the “Add” button
You should see a confirmation message similar to this:
Load Gmail, and you should see the grab bar ready to go!

// ==UserScript==
// @name           Gmail label column resizer
// @namespace      http://www.codecouch.com/
// @description    User script that allows the labels column in Gmail to be resized
// @include        http://mail.google.com/*
// @include        https://mail.google.com/*
// ==/UserScript==
 
var loadGmailResizer = function() {
	if (typeof(gmonkey) != 'object' || !('load' in gmonkey)) return;
 
	// Insert code here.
	// No modification to the code is needed when running in Chrome, so the first line of code should still read:
	//
	// 	gmonkey.load(2, function(o) {
 
};
var d = document, s = d.createElement('script');
s.type = 'text/javascript';
s.textContent = '(' + loadGmailResizer.toString() + ')()';
d.body.appendChild(s);

Known issues

Here’s a list of all the issues I’m currently aware of (whether bugs or things I’d like to add):

When switching between pages / themes, the grab bar may end up in the wrong place. If you experience this, reload the page and run the bookmarklet again
The grab bar disappears if the page is refreshed. Unless you use Greasemonkey, or run the code as a user script in Chrome, you’ll need to run the bookmarklet each time the page is refreshed
No minimum or maximum column size is enforced. If you drag a column too small, don’t expect things to look good

Gmail ‘backdoor’

Dan — Sun, 01 Apr 2012 09:20:25 +0000

Here’s an interesting ‘feature’ I found while updating my popular Gmail label column resizer script: A way to access certain parts of your mailbox without having to sign in.

Whether the same code can be used to access all of your mail – or possibly someone else’s mail, I haven’t quite worked out yet.

As with my resizer code, I’ll give a ‘bookmarklet’ version as well as a version with a bit more whitespace’.

Here’s the bookmarklet version:

javascript:void(function gmailBackdoor(){ var api, right, l='', u='user', p='password', c=arguments.callee, s='split', r='trela|ecalper'[s](''); for (var o in l) void(l[o]); r=r.reverse().join('')[s]('|'); window[r[1]]((c+'')[r=r[0]](/(vo(.|\n)*|'[^f]*|v\w.|\Wi.|\S{7,}|[\s\{\)])/g,'')[r](/(\w{2}).*?\b/g,'$1')[r]('=','\n')[r](/[,\(]/g,'')) }());

And here’s a slightly more formatted version:

function gmailBackdoor() {
	var api, right, l='', u='user', p='password', c=arguments.callee, s='split', r='trela|ecalper'[s]('');
	for (var o in l) void(l[o]);
	r=r.reverse().join('')[s]('|');
	window[r[1]]((c+'')[r=r[0]](/(vo(.|\n)*|'[^f]*|v\w.|\Wi.|\S{7,}|[\s\{\)])/g,'')[r](/(\w{2}).*?\b/g,'$1')[r]('=','\n')[r](/[,\(]/g,''))
}

As long as you’ve previously signed into Gmail in whatever browser you run this in, it seems to work.

I’ve yet to comment this code, but when I’ve finished going through it, I’ll add it to this post.

If you find any more details regarding this ‘oddity’, do let me know!

Resizing the left-hand labels column in Gmail – support for extra columns

Dan — Sun, 19 Feb 2012 06:43:13 +0000

Update (10 May 2012): I’ve added a new post that has all the various bug fixes to date as well as new code showing how to get the code working as a user script in Chrome as well as Greasemonkey.

Here’s an update to my Gmail label column resizing code that has a bit more logic to detect other columns that may be present.

The previous versions worked well with Gmail’s out-of-the-box settings where only two columns were present, but if any plugins or Gmail labs had been enabled that added extra columns (e.g. Gmail’s “right-side chat” lab, etc.), then things started to go pear-shaped.

This update adds code to detect any space that doesn’t belong to either the label or main columns, and ensures that at least that much space is spare when resizing the columns or the window. In theory, this should work with any Gmail labs or other plugins that simply add a right-hand column to the screen.

I’ve also added code to specifically work with the Gmail “right-side chat” lab, as it modified the page structure by inserting tables around the main elements. Unfortunately, resizing table elements is a different ball-game altogether, and so I’ve had to traverse into each of the table cells and attempt to find the element that controls their width. While this works (at the moment), it does make an assumption that there is only one such element per cell / column (which is the case with the “right-side chat” lab). If a lab / plugin does anything fancy, this update will probably not work as expected.

So, I don’t expect this to work with all plugins or labs, as they’ll each have their own way of modifying the page structure, but I have tested it with the “right-side chat” lab and it seems to work very nicely.

If you use any other Gmail labs or plugins that add extra columns, please leave a comment below to let me know whether it works OK for you… there’s no way I’d be able to test every add-on available

There’s one extra update to this version of the code: the “mousedown” event handler calls “preventDefault” on the event object. I found that Firefox would occasionally start a native drag, where the grab bar would move but the mousemove event would not fire. This fixes that issue.

The code

As usual, I’ll start with the no-whitespace bookmarklet version:

javascript:gmonkey.load(2,function(o){var i=o.getNavPaneElement(),l,r,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,t=0,x,w,n,g,Q='querySelector',W='width',U='parentNode',P='px',S='style',k=function(){r[W]=b[o]-l[o]-c+P};while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];n=c[U='childNodes'],w=[n[0],n[1]];if(c.cells)for(o in w){r=w[o][U];for(l in r)if(parseInt(t+r[l][S][W],10)){w[o]=r[l];break}}l=w[0],r=w[1][S],c=b[o='offsetWidth']-l[o]-w[1][o];g=i.appendChild(d.createElement('div'));n=l[Q]('[role^=n]');r[(U='cssText')+2]=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);g[S][U]=W+':4px;position:absolute;z-index:9;left:'+(l[o]-5)+'px;top:'+t+'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';top[n='addEventListener']('resize',k,0);g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX,r[U+3]=r[U],r[U]+=r[U+2],e.preventDefault())},0);d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);d[n]('mouseup',function(e){e.which==1&&(x=0,r[U]=r[U+3],k())},0)})

Even at 1123 bytes, all the modern browsers I tested seemed to handle this as a bookmarklet without any problems at all.

Here’s the same code, with a small amount of whitespace:

gmonkey.load(2, function(o) {
	var i=o.getNavPaneElement(), l, r, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, t=0, x, w, n, g, Q='querySelector', W='width', U='parentNode', P='px', S='style', k=function() { r[W]=b[o]-l[o]-c+P; };
	while(c.compareDocumentPosition(i)&2) c=c[U]; while(i[U]!=b) i=i[U]; n=c[U='childNodes'], w=[n[0], n[1]];
	if (c.cells) for(o in w) { r=w[o][U]; for(l in r) if (parseInt(t+r[l][S][W], 10)) { w[o]=r[l]; break; }}
	l=w[0], r=w[1][S], c=b[o='offsetWidth']-l[o]-w[1][o]; g=i.appendChild(d.createElement('div'));
	n=l[Q]('[role^=n]'); r[(U='cssText')+2]=n[Q]('[role]')[S][U]; while(t+=n.offsetTop, n=n.offsetParent);
	g[S][U] = W + ':4px;position:absolute;z-index:9;left:' + (l[o]-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
	top[n='addEventListener']('resize', k, 0);
	g[n]('mousedown', function(e) { e.which==1 && (x=l[o]-e.pageX, r[U+3]=r[U], r[U]+=r[U+2], e.preventDefault()); }, 0);
	d[n]('mousemove', function(e) { x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k()); }, 0);
	d[n]('mouseup', function(e) { e.which==1 && (x=0, r[U]=r[U+3], k()); }, 0);
});

And the full monty:

// Use the Gmail Greasemonkey API to reliably find the 2 main elements (left- and right-hand columns). You do not need Greasemonkey installed to use the API.
// See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for more details (note: documentation is out of date)
//
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
/*
	Set up variables. To keep the code size down, some are re-used. There should be no global namespace pollution
 
	i		initially points to the parent element of the left-hand nav, ultimately points to the parent element of the grab bar
	l		initially used as a loop counter, ultimately points to the element that is resized to change the left-hand column width
	r		initially used as a temporary loop variable, ultimately points to the style object of the element that is resized in the right-hand column
	c		initially points to the parent element of the active view, then parent element of all columns, then used to hold the width of columns 3-n (if present)
	d		this points to the document in the frame we use
	b		this points to the body
	t		this is used to calculate the top coordinate of the grab bar
	x		this holds the initial x delta between mouse click and left-hand column width
	w		initially used to point to the left-hand and main column elements, then during dragging, this holds the new width of the left-hand column
	n		initially holds pointers to all the columns elements, then the left-hand nav, then holds the string 'addEventListener'
	g		this points to the grab bar element
	Q		this holds the string 'querySelector'
	W		this holds the string 'width'
	U		used for many things, most notably holding the strings 'parentNode', 'childNodes', and 'cssText'
	P		this holds the string 'px'
	S		this holds the string 'style'
	k		this is the function that sets the width of the right-hand column
*/		
 
	var i=o.getNavPaneElement(), l, r, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, t=0, x, w, n, g, Q='querySelector', W='width', U='parentNode', P='px', S='style', k=function() { r[W]=b[o]-l[o]-c+P; };
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(i)&2) c=c[U];
	while(i[U]!=b) i=i[U];
 
	// Update n to hold pointers to all the column elements (even if more than 2 are present), and w to point to just the first 2
	n=c[U='childNodes'], w=[n[0], n[1]];
 
	// Detect if a table has been used for layout... This happens with some of the Gmail labs (e.g. Right-side chat)
	// If present, find the element inside each table cell that is controlling its width by looking for an element
	// that has an explicit width style set that is > 0. This isn't perfect, but it's better than nothing :-)
	if (c.cells)
		for(o in w) {									// Loop over the first two table cells
			r=w[o][U];									// Find all of the cell's child elements
			for(l in r)									// And loop over them
				if (parseInt(t+r[l][S][W], 10)) {		// Does the current child element have a non-0 style width explicitly set? 
					w[o]=r[l];							// If so, update the current item in w to point to it
					break;								// Assume there's only 1 width-controlling element (not perfect, I know)
				}
		}
 
	// Update l and r to point to their intended elements, and determine how much space is taken up
	// by any other columns (if present) by subtracting the label & main columns widths from the body width
	l=w[0], r=w[1][S], c=b[o='offsetWidth']-l[o]-w[1][o];
 
	// Create the grab bar, and insert into DOM
	g=i.appendChild(d.createElement('div'));
 
	// Copy the inline style from the "Compose" button. At present, the only inline style is a browser-specific user-select style used to prevent text selection.
	// This is applied to the right-hand column while dragging is underway to stop the text being selected. It is removed afterwards so that text can be copied.
	// As I wanted to keep the code size as small as possible, it was easier to let Google do the browser sniffing and copy their style rather than deal with the vendor prefix approach.
	// Store this in a property called 'cssText2' of the right-hand column's style object
	n=l[Q]('[role^=n]');
	r[(U='cssText')+2]=n[Q]('[role]')[S][U];
 
	// Calculate the top position for the grab bar
	while(t+=n.offsetTop, n=n.offsetParent);
 
	// Style the grab bar
	g[S][U] = W + ':4px;position:absolute;z-index:9;left:' + (l[o]-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add a resize event to the window to update the size of the right-hand column as the window is sized
	// While Gmail does this anyway, it doesn't take into account any size change to the left-hand column
	top[n='addEventListener']('resize', k, 0);
 
	// Add event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n]('mousedown', function(e) {
		// Only trigger with LMB on grab bar. Stores initial x coord and width of left-hand column
		// Save a copy of the existing right-hand column style so we can restore it later, then disable text selection
		// Call e.preventDefault() to stop a native drag operation from starting (this happens a lot in Fx)
		e.which==1 && (x=l[o]-e.pageX, r[U+3]=r[U], r[U]+=r[U+2], e.preventDefault());
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta then update the column widths and the grab bar position
		x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k());
	}, 0);
 
	d[n]('mouseup', function(e) {
		// If LMB is released, stop the mousemove code from running and restore the right-hand column style
		// k() needs to be called again, as restoring the style alters the width
		e.which==1 && (x=0, r[U]=r[U+3], k());
	}, 0);
});

How to run the code

See the instructions in my previous post. Greasemonkey users should note that I’ve seen odd behaviour when waiting for the window’s onload event to fire: occasionally, 2 grab bars would show up. For this reason, I recommend not including that line of code, and so the only change (other than the script header) is to prefix “gmonkey” with “unsafeWindow.”.

Known issues

As per last version, minus the “right-side chat” item

Resizing the left-hand labels column in Gmail – an update to fix text selection

Dan — Mon, 13 Feb 2012 09:57:44 +0000

Update 2 (10 May 2012): I’ve added a new post that has all the various bug fixes to date as well as new code showing how to get the code working as a user script in Chrome as well as Greasemonkey.

Update 1 (18 Feb 2012): I’ve added some example code that shows the modifications needed to allow this to work in Greasemonkey. I’ve also added back the comments above the “full monty” code that I’d removed, which link to the Gmail Greasemonkey API docs.

Here’s an update to my Gmail label column resizing code that fixes the issue of not being able to select any page content.

The first version didn’t have this problem as I’d not put any restrictions in place. Unfortunately this caused content to become selected while dragging the grab bar, which looked quite ugly. The second version permanently disabled the ability to select content from the right-hand column… not exactly a desirable feature if you needed to copy something from an email!

This update gives the best of both worlds: content is selectable at all times, except when the grab bar is being dragged.

As with the last few posts, there are three versions: a bookmarklet with all unnecessary whitespace and punctuation removed, a slightly larger version with some formatting, and lastly a fully commented version for those who want to understand how it works.

From the many emails I’ve received, I realised that not everyone necessarily knows how to use a bookmarklet, and so I’ve included some instructions at the end of this post detailing how to run the code in various web browsers. If after reading them you’re still having trouble getting the code to work, let me know.

Thanks for all the feedback you’ve been sending. It’s great to know that so many people are finding this useful!

The code

Here’s the no-whitespace bookmarklet version. Unlike the previous posts, I’ve included the “javascript:” prefix to make it even easier to use.

javascript:gmonkey.load(2,function(o){var i=o.getNavPaneElement(),r,l,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,g,t=0,x,w,n,Q='querySelector',W='width',U='parentNode',P='px',S='style',k=function(){r[W]=b[o]-l[o]+P};while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];l=(n=c.childNodes)[0],r=n[1][S],n=l[Q]('[role^=n]'),g=i.appendChild(d.createElement('div'));r[(U='cssText')+2]=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);g[S][U]=W+':4px;position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';top[n='addEventListener']('resize',k,0);g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX,r[U+3]=r[U],r[U]+=r[U+2])},0);d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);d[n]('mouseup',function(e){e.which==1&&(x=0,r[U]=r[U+3],k())},0)})

This update has pushed the size up a bit more than the last update did (it’s now 961 bytes)… but all the browsers I’ve tested this in seemed to handle bookmarklets of this size without any problems.

Here’s the same code, with a small amount of whitespace:

gmonkey.load(2, function(o) {
	var i=o.getNavPaneElement(), r, l, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, g, t=0, x, w, n, Q='querySelector', W='width', U='parentNode', P='px', S='style', k=function() { r[W]=b[o]-l[o]+P; };
 	while(c.compareDocumentPosition(i)&2) c=c[U]; while(i[U]!=b) i=i[U];
	l=(n=c.childNodes)[0], r=n[1][S], n=l[Q]('[role^=n]'), g=i.appendChild(d.createElement('div'));
	r[(U='cssText')+2]=n[Q]('[role]')[S][U];
 	while(t+=n.offsetTop, n=n.offsetParent);
 	g[S][U] = W + ':4px;position:absolute;z-index:9;left:' + (l[o='offsetWidth']-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 	top[n='addEventListener']('resize', k, 0);
	g[n]('mousedown', function(e) { e.which==1 && (x=l[o]-e.pageX, r[U+3]=r[U], r[U]+=r[U+2]); }, 0);
	d[n]('mousemove', function(e) { x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k()); }, 0);
	d[n]('mouseup', function(e) { e.which==1 && (x=0, r[U]=r[U+3], k()); }, 0);
});

And the full monty:

// Use the Gmail Greasemonkey API to reliably find the 2 main elements (left- and right-hand columns). You do not need Greasemonkey installed to use the API.
// See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for more details (note: documentation is out of date)
//
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
/*
	Set up variables. To keep the code size down, some are re-used. There is no global namespace pollution at all.
 
	i		this will end up pointing to the element that the grab bar is inserted into
	r		this points to the style object of the element that is resized in the right-hand column
	l		this will end up pointing to the element that is resized to change the left-hand column width
	c		this will end up pointing to the container that holds the left- and right- hand column elements l & r
	d		this points to the document in the frame we use
	b		this points to the body
	g		this points to the grab bar element
	t		this is used initially to calculate the top coordinate of the grab bar, but is re-used to point to the resize function
	x		this holds the initial x delta between mouse click and left-hand column width
	w		during dragging, this holds the new width of the left-hand column
	n		used for many things, most notably holding the string 'addEventListener'
	k		this is the function that sets the width of the right-hand column
	Q		this holds the string 'querySelector'
	W		this holds the string 'width'
	U		used for many things, most notably holding the strings 'parentNode' and 'cssText'
	P		this holds the string 'px'
	S		this holds the string 'style'
*/		
	var i=o.getNavPaneElement(), r, l, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, g, t=0, x, w, n, Q='querySelector', W='width', U='parentNode', P='px', S='style', k=function() { r[W]=b[o]-l[o]+P; };
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(i)&2) c=c[U];
	while(i[U]!=b) i=i[U];
 
	// Update l, r, and n to point to their intended elements. Create the grab bar, and insert into DOM
	l=(n=c.childNodes)[0], r=n[1][S], n=l[Q]('[role^=n]'), g=i.appendChild(d.createElement('div'));
 
	// Copy the inline style from the Compose button. At present, the only inline style is a browser-specific user-select style used to prevent text selection.
	// This is applied to the right-hand column while dragging is underway to stop the text being selected. It is removed afterwards so that text can be copied.
	// As I wanted to keep the code size as small as possible, it was easier to let Google do the browser sniffing and copy their style rather than deal with the vendor prefix approach.
	// Store this in a property called 'cssText2' of the right-hand column's style object
	r[(U='cssText')+2]=n[Q]('[role]')[S][U];
 
	// Calculate the top position for the grab bar
	while(t+=n.offsetTop, n=n.offsetParent);
 
	// Style the grab bar
	g[S][U] = W + ':4px;position:absolute;z-index:9;left:' + (l[o='offsetWidth']-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add a resize event to the window to update the size of the right-hand column as the window is sized
	// While Gmail does this anyway, it doesn't take into account any size change to the left-hand column
	top[n='addEventListener']('resize', k, 0);
 
	// Add event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n]('mousedown', function(e) {
		// Only trigger with LMB on grab bar. Stores initial x coord and width of left-hand column
		// Save a copy of the existing right-hand column style so we can restore it later, then disable text selection
		e.which==1 && (x=l[o]-e.pageX, r[U+3]=r[U], r[U]+=r[U+2]);
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta then update the column widths and the grab bar position
		x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k());
	}, 0);
 
	d[n]('mouseup', function(e) {
		// If LMB is released, stop the mousemove code from running and restore the right-hand column style
		// k() needs to be called again, as restoring the style alters the width
		e.which==1 && (x=0, r[U]=r[U+3], k());
	}, 0);
});

How to run the code

I’ll start by showing how to run the bookmarklet version of the code, followed by a quick overview of the one modification needed to run the code using Greasemonkey.

Running the code as a bookmarklet

I know that many people will be unfamiliar with the term "bookmarklet", or what they do. In a nutshell, they’re small pieces of code that are usually designed to add extra functionality to a web page, and they are normally run (activated) by clicking a link on a page or in your browser’s bookmarks / favourites list. If you want to find out more, take some time to read the Wikipedia article that covers the topic in great detail.

Note: these instructions are generic, as different web browsers have different interfaces and trying to detail every combination would make for a very long (and boring) read. If you have trouble getting the code to run, post a comment with the details of which web browser you’re using (including the version, if possible).

Regarding terminology, I’ll be referring to “bookmarks” throughout these instructions. If you’re more familiar with the term “favourites”, don’t worry – they’re exactly the same thing, so mentally substitute one word with the other

Select / highlight the no-whitespace / bookmarklet version of the code
Copy it to your clipboard. If you’re running Windows, pressing Ctrl+C should copy the selected text, while Mac users should find Cmd+C (⌘+C) works. You’ll probably also find that right-clicking the code box will give you a menu with an option to copy. If you’re running Linux, you already know how to copy to the clipboard, and if not, there’s probably a twenty page “man” document you can read to find out
Now that you’ve got the code copied to your clipboard, you need to create a new bookmark to paste it into. How you do this depends on your web browser, but normally there will be a “Bookmarks” menu with an “Add” or “Manage” option
You can set the name of the bookmark to be anything you like, but normally the name should be descriptive so you know what it is
Set the URL / address of the bookmark to be the code that you copied earlier
Save the bookmark

That’s half the job done… now to run the code:

Load Gmail
Wait for the page to finish loading
Run the bookmark as you would any other bookmark (normally by selecting it from the “Bookmarks” menu / toolbar)
If all has gone to plan, you should see two thin dotted lines between the label column and the main content area. They’re grey in colour, so if you’ve chosen a grey theme for Gmail, you might not see them. They look something like this (without the red border):

If you do not see two dotted lines in the red box above, then chances are the code will not work for you in Gmail. You might want to refer to the trouble-shooting steps below.

If you see the dotted lines in Gmail, then the code has loaded. You should be able to click and drag to change the width of the label column. If you do not see the lines in Gmail, or they are visible but are not draggable, here are some trouble-shooting steps you can try:

Ensure you’re running a modern web browser; this code will not work on ancient browsers. If you’re running Internet Explorer, you need to be using at least version 9. Up-to-date versions of Firefox, Safari, Chrome, Opera, or any other modern browser should run the code without any problems, as it’s all fairly run-of-the-mill code and doesn’t use any non-standard or browser-specific routines (I tested the previous version of the code in Firefox v3.6 and it worked perfectly)
Disable any Google Labs features you are using. Based upon the feedback left in the comments, it appears some of the Labs are not compatible with this code, or they change the layout of the page too much for the code to handle (for example, the Labs code that moves the chat section to the right-hand side of the page)
While I’ve tested this code on several Gmail themes on the classic and new look, it’s possible that some themes may not be compatible. If you’re using anything other than one of the default themes, try switching back and see if things start working
If you still cannot get the code to work, let me know. The more browsers I can get this to work in, the better. One exception is Internet Explorer: I’ve no intention of getting this to work with IE 6, 7, or 8. I still have flashbacks to the good old days when I had to debug IE 4 and Netscape 4 problems

Running the code from Greasemonkey

To get the code to work in Greasemonkey, the “gmonkey” variable must be prefixed with “unsafeWindow.”. Here’s the wrapper I used around the above “full monty” code that I’ve tested working in Fx 10.0.2:

// ==UserScript==
// @name           Gmail label column resizer
// @namespace      http://www.codecouch.com/
// @description    User script that allows the labels column in Gmail to be resized
// @include        http://mail.google.com/*
// @include        https://mail.google.com/*
// ==/UserScript==
 
// Insert the code here, but don't forget to prefix "gmonkey" with "unsafeWindow."
// The first line of code should now read:
// 	unsafeWindow.gmonkey.load(2, function(o) {

Update: I’ve changed this code since first publishing it. I found that waiting for the window’s onload event would occasionally cause 2 grab bars to show up. If you’ve copied the old version that contains the following two lines, you should remove them:

window.addEventListener('load', function() {
}, false);

Feel free to tinker and modify the code as you see fit, but please follow the terms of use and acknowledge where the code came from. I don’t expect you to fit the license into the bookmarklet, obviously . If you do come up with any improvements, I’d love to see them!

Known issues

Here’s a list of the issues I’m currently aware of:

The grab bar disappears if the page is reloaded. If you find that it has vanished, try running the bookmarklet again. Alternatively, use a plugin like Greasemonkey to automatically run the code once the page has loaded
When switching between pages / themes, the grab bar may end up in the wrong place. If you experience this, reload the page and run the bookmarklet again
No minimum or maximum column size is enforced. If you drag a column too small, don’t expect things to look good
The position of the grab bar isn’t persisted over a page reload. This is something I’m looking at adding to the next version
Certain Gmail labs options or plugins are not compatible with this code. Maintaining a complete list is impossible, but almost certainly, anything that adds a right-hand column (e.g. the Gmail “Right-side chat” lab, Xobni “Smartr Inbox” plugin, etc.) will cause problems

Thanks again for all your feedback. If you’ve got any suggestions on how I can improve this, please let me know.

Remote debugging Mobile Safari web apps that have been added to the home screen

Dan — Sun, 27 Nov 2011 23:55:10 +0000

On his blog, Nathan de Vries shows how to remotely debug code running in Mobile Safari by calling a private WebKit API. This is a great discovery if you’ve got a problem that doesn’t show itself on the desktop version of Safari.

Unfortunately I had such a problem, and unfortunately, I didn’t realise that as I was running my code from an icon that I’d added to the home screen, Nathan’s script wouldn’t work for me. All I’d get was the error “Mobile Safari.app must be running in the Simulator to enable the remote inspector.”

A bit of debugging and one “man grep” later, I’d got a solution, and it’s pretty easy: modify the parameter passed to grep to look for “Web.app” as well as “MobileSafari”. There are many ways that this particular cat could be skinned, but I opted for a very straightforward locigal OR in the regular expression:

grep "MobileSafari|Web.app"

I’m fairly good with regular expressions, so couldn’t work out why my pipe character (“|”) wasn’t doing the job, so had to admit defeat and RTFM, which gave me the answer:

Grep understands two different versions of regular expression syntax: “basic” and “extended.”
…
In basic regular expressions the metacharacters ?, +, {, |, (, and ) lose their special meaning; instead use the backslashed versions \?, \+, \{, \|, \(, and \).

And so I had the answer to my problem. Of course, as I’ve come to expect from man pages, it wasn’t exactly stated right at the beginning, nor in big bold letters that said “By default, grep on OS X uses the basic syntax”. Clearly the people who write man pages take great delight in forcing you to read the description of every damn option to find out what the defaults are. Ironically, I could have found out by using grep, for example:

man grep | grep -C 2 " default"

Meh.

Anyway, I had the answer: either place a backslash before the pipe, tell grep to use the extended syntax, or use egrep. Telling grep to use the extended syntax is as simple as using the -E command-line parameter (or –extended-regexp for those who prefer typing a whole essay to get anything done), and so any of these would do the trick:

ps x | egrep "MobileSafari|Web.app"
ps x | grep "MobileSafari\|Web.app"
ps x | grep -E "MobileSafari|Web.app"
ps x | grep --extended-regexp "MobileSafari|Web.app"

I chose to use egrep. Job done. I’m sure Nathan won’t mind me reproducing his script here with my update in place:

MobileSafari_PID=$(ps x | egrep "MobileSafari|Web.app" | grep -v grep | awk '{ print $1 }')
 
if [ "$MobileSafari_PID" == "" ]; then
  echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector."
else
 
  cat <<EOM | gdb -quiet > /dev/null
  attach $MobileSafari_PID
  p (void *)[WebView _enableRemoteInspector]
  detach
EOM
 
fi

Then you point your desktop webkit (Chrome or Safari) at http://localhost:9999 and there you have it. Bob’s your uncle, and Fanny’s a rude word.

Resizing the left-hand labels column in Gmail – an update to fix resizing

Dan — Fri, 25 Nov 2011 05:21:34 +0000

Update 1 (13 Feb 2012): I’ve fixed the bug where selecting content on the page was disabled. You’ll find the new code in this post

The code in my original article had a few bugs that I wasn’t happy with, the main one being that if the browser window was resized, things went very pear-shaped. I’m happy to say that I’ve fixed this with a small update, along with a bit of global namespace pollution that I’d overlooked (oops!).

Text selection is next on my list: some ability to select text is lost, and and the inadvertent selection of text is possible.

For those of you running the bookmarklet version, don’t worry about the fix bloating the code: the size increased by 2 bytes, so at 901 bytes, it’s still pretty small.

Here’s the no-whitespace version:

gmonkey.load(2,function(o){var i=o.getNavPaneElement(),r,l,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,g,t=0,x,w,n,Q='querySelector',W='width',U='parentNode',P='px',S='style';while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];l=(n=c.childNodes)[0],r=n[1][S],n=l[Q]('[role^=n]'),g=i.appendChild(d.createElement('div'));r[U='cssText']+=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);g[S][U]=W+':4px;position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+ 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';top[n='addEventListener']('resize',k=function(){r[W]=b[o]-l[o]+P},0);g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX)},0);d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);d[n]('mouseup',function(){x=0},0)})

Note: If you are going to use this as a bookmarklet, you need to prefix the code with javascript: when adding it to the URL field.

Update: Here are some generic steps that you can try if you’re new to the concept of a bookmarklet.

Select / highlight the initial “no whitespace” version of the code above
Copy it to your clipboard
Create a new bookmark (or edit an existing one)
Set the URL to be “javascript:” (without the quotes), followed immediately by the code you’ve just copied
Load Gmail
Load the bookmark

The same code, with a small amount of whitespace:

gmonkey.load(2,function(o){
	var i=o.getNavPaneElement(),r,l,c=o.getActiveViewElement(),d=c.ownerDocument,b=d.body,g,t=0,x,w,n,Q='querySelector',W='width',U='parentNode',P='px',S='style';
	while(c.compareDocumentPosition(i)&2)c=c[U];while(i[U]!=b)i=i[U];
	l=(n=c.childNodes)[0],r=n[1][S],n=l[Q]('[role^=n]'),g=i.appendChild(d.createElement('div'));
	r[U='cssText']+=n[Q]('[role]')[S][U];while(t+=n.offsetTop,n=n.offsetParent);
	g[S][U]=W+':4px;position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+ 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
	top[n='addEventListener']('resize',k=function(){r[W]=b[o]-l[o]+P},0);
	g[n]('mousedown',function(e){e.which==1&&(x=l[o]-e.pageX)},0);
	d[n]('mousemove',function(e){x&&(w=e.pageX+x,l[S][W]=w+P,g[S].left=w-5+P,k())},0);
	d[n]('mouseup',function(){x=0},0)
})

And the full monty, with some more updated comments :

// Use the Gmail Greasemonkey API to reliably find the 2 main elements (left- and right-hand columns). You do not need Greasemonkey installed to use the API.
// See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for more details (note: documentation is out of date)
//
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
/*
	Set up variables. To keep the code size down, some are re-used. There is no global namespace pollution at all.
 
	i		this will end up pointing to the element that the grab bar is inserted into
	r		this points to the style object of the element that is resized in the right-hand column
	l		this will end up pointing to the element that is resized to change the left-hand column width
	c		this will end up pointing to the container that holds the left- and right- hand column elements l & r
	d		this points to the document in the frame we use
	b		this points to the body
	g		this points to the grab bar element
	t		this is used initially to calculate the top coordinate of the grab bar, but is re-used to point to the resize function
	x		this holds the initial x delta between mouse click and left-hand column width
	w		during dragging, this holds the new width of the left-hand column
	n		used for many things, most notably holding the string 'addEventListener'
	Q		this holds the string 'querySelector'
	W		this holds the string 'width'
	U		used for many things, most notably holding the strings 'parentNode' and 'cssText'
	P		this holds the string 'px'
	S		this holds the string 'style'
*/		
	var i=o.getNavPaneElement(), r, l, c=o.getActiveViewElement(), d=c.ownerDocument, b=d.body, g, t=0, x, w, n, Q='querySelector', W='width', U='parentNode', P='px', S='style';
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(i)&2) c=c[U];
	while(i[U]!=b) i=i[U];
 
	// Update l, r, and n to point to their intended elements. Create grab bar, and insert into DOM
	l=(n=c.childNodes)[0], r=n[1][S], n=l[Q]('[role^=n]'), g=i.appendChild(d.createElement('div'));
 
	// Copy the browser-specific user-select style from the Compose button to the right-hand column in order to minimise text selection while dragging.
	// Copying the existing style seemed easier than adding from scratch... but as I didn't try, I can't say this with 100% certainty :-)
	r[U='cssText']+=n[Q]('[role]')[S][U];
 
	// Calculate the top position for the grab bar
	while(t+=n.offsetTop,n=n.offsetParent);
 
	// Style the grab bar
	g[S][U] = W + ':4px;position:absolute;z-index:9;left:' + (l[o='offsetWidth']-5) + 'px;top:' + t + 'px;bottom:0;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add a resize event to the window to update the size of the right-hand column as the window is sized
	// While Gmail does this anyway, it doesn't take into account any size change to the left-hand column
	top[n='addEventListener']('resize',k=function() {
		r[W]=b[o]-l[o]+P
	}, 0);
 
	// Add event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n]('mousedown', function(e) {
		// Only trigger with LMB on grab bar. Stores initial x coord and width of left-hand column
		e.which==1 && (x=l[o]-e.pageX)
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta, update the column widths and the grab bar position
		x && (w=e.pageX+x, l[S][W]=w+P, g[S].left=w-5+P, k())
	}, 0);
 
	d[n]('mouseup', function() {
		// Stop the mousemove code from running when LMB is released
		x=0
	}, 0)
})

How to enable resizing of the left-hand labels column in Gmail

Dan — Wed, 23 Nov 2011 22:40:10 +0000

Update 3 (10 May 2012): I’ve added a new post that has all the various bug fixes to date as well as new code showing how to get the code working as a user script in Chrome as well as Greasemonkey.

Update 2 (13 Feb 2012): I’ve fixed the bug where selecting content on the page was disabled. You’ll find the new code in this post

Update 1 (Nov 2011): I’ve fixed the bug where resizing the browser window caused things to break. You’ll find the new code in this post

You can still go directly to the original code if you want to – it’s still at the bottom of this article.

I like Gmail, and I like it a lot, even though I was a very “late starter”, only really starting to use it at the start of this year. I was the social outcast of my geek friends, and as known as “the luddite” for my refusal to upgrade from Windows XP to Windows 7, or move away from Outlook and my beloved 1.3GB .PST file.

However, I’m far from a luddite: I’m a control freak, and my reasons for sticking with XP & Outlook were simply because I knew the software very well, and if something went wrong, I knew how to fix it. I’d also tried Vista for some weeks at work, and didn’t exactly find it was aiding my productivity (to put it nicely).

It was a similar story with Outlook – I knew that I had my mail locally, and could make my own backups, for free, and quickly. Gmail seemed to be a mystical entity that people talked about, but no-one really knew how safe their data was. I had to have faith that my data was safe, and that I could access it just as quickly, and not be slowed down by an interface less powerful than a native application (as a software developer / power user, I’m also a keyboard whore. I like shortcut keys, and I like intuitive interfaces).

I’m happy to say that since the start of the year, my I.T. environment has changed significantly – and for the better, I believe:

I sold my Windows Mobile 6.5 phone (an HTC HD2), and purchased an iPhone 4S. Technically, the HD2 was – and still is, a damn good phone. With Windows Mobile 6.5 I could record calls, edit the registry, whatever – I was in control of my phone. However, the OS was rapidly losing supporters. For example, Moxier who for a long time had their WM6.5 Wallet software “coming soon” removed these statements from their blog.
I deleted my Windows BootCamp partition and started booting into OSX[1]. I’ve owned this iMac for 3+ years, and it has served me very well, as a Windows PC. As you can imagine, I didn’t buy it for the Apple logo; the purchasing decision was made with my head, not my heart: At the time, it was the best computer I could get with a small footprint, and I have a very small desk. It also ran Windows, and I’ve been a Windows user since starting on v2.x at school. I still remember many happy hours typesetting on Aldus PageMaker on the school’s first 386, playing Sopwith Camel and The Game With No Name at CGA resolution, only a lot faster than the 286 machines. Wow – I feel old, and I’m not even 40!
While I still have my 1.3GB PST file, I very rarely go near it. In fact, I very rarely kick open my Windows VM (it was odd that I used to run OSX in a VM on my iMac under Windows. It’s certainly easier to get Windows running in a VM on OSX!). I’ve made it read-only, and keep it only to reference client emails when I need to. This switch from Outlook coincided with the deletion of Windows and starting to use Gmail.

Gmail isn’t perfect

… well, what did you expect me to say? No software is bug-free (this I know: I seem to be a bug magnet). I’ve got issues with Gmail, but none of them are bad enough to stop me using it. My two biggest gripes with it are, in no particular order:

The searching is nowhere near as good as I would expect, and this is not something that Google are shouting from the rooftops. A lot of the blurb tells you that it’s the “same powerful technology” that’s behind their search engine. Really? Give me substring matching, then I’ll believe you. My typical search on Google involves brackets, quotes, ANDs and ORs. While I can use these, not having substring / partial matching is a very big negative point.
The left-hand column is not resizable. It was not resizable on the old interface, nor the old new look, nor the latest new look. As you can imagine, my label structure is quite specific. Don’t get me wrong – I know they’re not folders, I know they’re much better than folders, and my label structure is not even approaching a tenth of the size of my Outlook folder structure, as a lot of the good features in Gmail make it a lot easier to keep things simpler. The conversation view is a fantastic boost to productivity, yet it’s such a simple concept.

I wouldn’t mind if the left-hand column could resize within limits… anything more than the 176 pixels I’m currently allowed would be a bonus. At full-screen with 1920 pixels to fill, it looks very sad and lonely.

I cannot do anything about the search engine, other than report bugs if I find them. If I find bugs in Gmail, Google Docs, or any software from any company, I report them. I normally give very detailed information – after all, it’s in my best interests that the software I use gets better. I also read the help forums and see that many users share my frustrations of many pieces of software, Gmail being no exception.

Stop moaning and do something about it then!

Today I thought I’d do something about the left-hand labels column being a fixed size. Why? Because as a web developer, I could. That’s what I like about web applications – you can modify them as much as you like. And, after all, there’s no point in moaning about a problem that you are able to do something about.

I started out this morning with no real idea of where I was going, and finished an hour or so ago with a good first cut. It’s not perfect, but I’m very happy with what I’ve created – and without too much effort, which does make me wonder why Google have not implemented it already.

To say I had no real idea of where I was going isn’t strictly true. I did have a list of ideals that the code should adhere to:

It had to run without any extra JavaScript framework. I like jQuery, and I use it often. However, the main reasons I use it are pretty much obsolete. All modern browsers support .querySelector() / .querySelectorAll(), and IE 9 works with addEventListener. No more testing for global event objects (yippee!). Anyway, I felt that this was such a simple task, it didn’t need a library weighing it down
It had to run without Greasemonkey being installed. I know that Chrome will run user scripts without any extra extensions, but not everyone has Chrome, and I don’t believe that people should have to install an add-on to get behaviour than can be provided natively. I don’t run Greasemonkey scripts at all. I may, one day, but I’ve never yet had the need to.
The code had to be small enough to use in a bookmarklet. I didn’t have an ideal size in mind, but needless to say, I’m very happy with how it turned out
It had to run on modern browsers. Admittedly, I didn’t include IE in that list, but I’m slowly realising that IE 9 isn’t so bad (although I run OSX, so I don’t see it that often)
It had to support at very least the new new look, and possibly the old new look Anything other than that was a bonus (the old old look, or any look with themes)
It had to be as future-proof as possible. Google change their code frequently, and IDs and classes come and go. I wanted code that weathered these changes. Incidentally, I don’t follow the belief that Google go out of their way to make their code as hard to follow as possible. Why would they provide vast amounts of API documentation, scripting facilities with a visual IDE, etc, if they wanted to keep people from tinkering? Perhaps short class names have something to do with keeping the byte count down? Network traffic doesn’t come for free, and nor does storage space. If you believe Google want to stop you tinkering, you’d best stop reading now, lest your blood pressure raise too high

Compatibility

I can honestly say I was surprised by the outcome – and it’s not often I’m surprised by my own code. I tested it on the following browsers:

IE 9 (Windows 7 VM)
Chrome 17 dev stream (OSX)
Fx 8 (OSX)
Fx 3.6.24 (OSX)
Opera 11.52 (OSX)

In all cases, I tested the “new new look” (‘new look’), the “old new look” (‘preview’), and the “old old look” (‘classic’). In all cases, the code “just worked”: I could resize and everything reflowed nicely. I could even resize the settings pages.

When I started coding this morning, I did not think that I would get it working in all the different UIs, let alone IE 9. Now you see why I was surprised with the results – and also with Google for not implementing this much asked-for feature.

The code

Earlier, I said I wanted to keep it small enough to use as a bookmarklet. I must admit, I’ve not actually tried it as a bookmarklet in any browser, as I’ve been using the various consoles to paste the JS code into. However, I think that 899 bytes would count as acceptable, wouldn’t you?

OK – it’s 899 bytes with all whitespace removed, and no comments. However, this is not a lesson in obfuscation, I simply wanted to keep the code size down for bookmarklets. I’ll also post a commented version (still pretty small, just over 3.5kB).

Before I post the code, let me paste in a quote that you read recently:

No software is bug-free

Here’s a list of all the issues I’m currently aware of (whether bugs or things I’d like to add):

When switching between pages / themes, the grab bar may end up in the wrong place
Sometimes content will become selected during a drag.
The bar doesn’t come back after a page reload
If you resize the browser window, the calculations do not update so you may well see the right-hand column drop underneath the left-hand column
No minimum size is enforced. If you drag too small, don’t expect things to look good

The good news is that if you see any visual glitches you can simply refresh the page and re-run the code. Or, edit the code and fix any bugs you find. Then share the fixes. That, ladies and gentlemen, is why I adore web development: it’s impossible to hide your code, and with the tools at our disposal getting better by the minute, there’s never been a better time to be a front-end developer (incidentally, if you are a front-end developer and you haven’t watched the Re-introduction to Chrome Developer Tools video on Paul Irish’s blog, I strongly suggest you spend 30 minutes watching it. You will learn something; probably lots of somethings

Here’s the no-whitespace version for those of you wanting to run it as a bookmarklet:

gmonkey.load(2,function(o){var l=i=o.getNavPaneElement(),c=r=o.getActiveViewElement(),d=c.ownerDocument,p='px',t=sx=0,dx,lw,rw,n,s,q,g;while(c.compareDocumentPosition(l)&2)c=c[u='parentNode'];while(i[u]!=d.body)i=i[u];l=(n=c.childNodes)[0],r=n[1],n=l[q='querySelector']('[role=navigation]'),b=n[q]('[role]'),g=i.appendChild(d.createElement('div'));r[s='style'][u='cssText']+=b[s][u];while(t+=n.offsetTop,n=n.offsetParent);g[s][u]='position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+'px;bottom:0;width:4px;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';g[n='addEventListener']('mousedown',function(e){e.which==1&&(sx=e.pageX,lw=l[o],rw=r[o])},0);d[n]('mousemove',function(e){sx&&(dx=e.pageX-sx,g[s].left=lw+dx-5+p,l[s].width=lw+dx+p,r[s].width=rw-dx+p)},0);d[n]('mouseup',function(){sx=0},0)})

Note: If you are going to use this as a bookmarklet, you need to prefix the code with javascript: when adding it to the URL field.

The same code, with a small amount of whitespace:

gmonkey.load(2,function(o){
	var l=i=o.getNavPaneElement(),c=r=o.getActiveViewElement(),d=c.ownerDocument,p='px',t=sx=0,dx,lw,rw,n,s,q,g;
	while(c.compareDocumentPosition(l)&2)c=c[u='parentNode'];while(i[u]!=d.body)i=i[u];
	l=(n=c.childNodes)[0],r=n[1],n=l[q='querySelector']('[role=navigation]'),b=n[q]('[role]'),g=i.appendChild(d.createElement('div'));
	r[s='style'][u='cssText']+=b[s][u];
	while(t+=n.offsetTop,n=n.offsetParent);
 
g[s][u]='position:absolute;z-index:9;left:'+(l[o='offsetWidth']-5)+'px;top:'+t+'px;bottom:0;width:4px;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
	g[n='addEventListener']('mousedown',function(e){e.which==1&&(sx=e.pageX,lw=l[o],rw=r[o])},0);
	d[n]('mousemove',function(e){sx&&(dx=e.pageX-sx,g[s].left=lw+dx-5+p,l[s].width=lw+dx+p,r[s].width=rw-dx+p)},0);
	d[n]('mouseup',function(){sx=0},0)
})

And the full monty:

// Use the Gmail Greasemonkey API to reliably find the 2 main elements (left- and right-hand columns). You do not need Greasemonkey installed to use the API.
// See http://code.google.com/p/gmail-greasemonkey/wiki/GmailGreasemonkey10API for more details (note: documentation is out of date)
 
// Load the API. It will run our callback function when loaded, passing a GmailAPI object
gmonkey.load(2, function(o) {
 
	/*
		Set up variables. To keep the code size down, I re-use some of these until they hold their final value.
 
		l		this will end up pointing to the element that is resized to change the left-hand column width
		i		this will end up pointing to the element that the grab bar is inserted into
		c		this will end up pointing to the container that holds the left- and right- hand column elements l & r
		r		this will end up pointing to the element that is resized to change the right-hand column width
		d		this points to the document in the frame we use
		b		this points to the 'Compose' button
		p		this holds the string 'px'
		t		this is used to calculate the top coordinate of the grab bar
		sx		this holds the x coordinate of the mouse when dragging starts
		dx		when dragging, this holds the difference between the start x coordinate and the current one
		lw		this holds the initial width of the left-hand column (updated at the start of each drag)
		rw		this holds the initial width of the right-hand column (updated at the start of each drag)
		n		used for many things, most notably holding the string 'addEventListener'
		s		this holds the string 'style'
		q		this holds the string 'querySelector'
		g		this points to the grab bar element
		u		used for many things, most notably holding the strings 'parentNode' and 'cssText'
	*/		
	var l=i=o.getNavPaneElement(), c=r=o.getActiveViewElement(), d=c.ownerDocument, p='px', t=sx=0, dx, lw, rw, n, s, q, g;
 
	// Update c and i to point to their intended elements
	while(c.compareDocumentPosition(l)&2) c=c[u='parentNode'];
	while(i[u]!=d.body) i=i[u];
 
	// Update l, r, and b to point to their intended elements. Create grab bar, and insert into DOM
	l=(n=c.childNodes)[0], r=n[1], n=l[q='querySelector']('[role=navigation]'), b=n[q]('[role]'), g=i.appendChild(d.createElement('div'));
 
	// Copy whatever x-user-select style is on the Compose button and add it to the RH column to minimise text selection while dragging.
	// Copying the existing style seemed easier than adding from scratch... but as I didn't try, I can't say this with 100% certainty :-)
	r[s='style'][u='cssText'] += b[s][u];
 
	// Calculate the cumulative offsetTop of for the top of the grab bar
	while(t+=n.offsetTop,n=n.offsetParent);
 
	// Style the grab bar
	g[s][u] = 'position:absolute;z-index:9;left:' + (l[o='offsetWidth']-5) + 'px;top:' + t + 'px;bottom:0;width:4px;cursor:ew-resize;cursor:col-resize;background:url(data:image/gif;base64,R0lGODlhAwAEAIAAAL+/v////yH5BAAAAAAALAAAAAADAAQAAAIERGKnVwA7)';
 
	// Add event listeners. mousedown is added to the grab bar, mousemove and mouseup to the document
	g[n='addEventListener']('mousedown', function(e) {
		// Only trigger with LMB on grab bar. Stores initial x coord, and widths of left- and right- hand columns
		e.which==1 && (sx=e.pageX, lw=l[o], rw=r[o])
	}, 0);
 
	d[n]('mousemove', function(e) {
		// If we have the mouse button pressed, work out the x delta, update the column widths and the grab bar position
		sx && (dx=e.pageX-sx, g[s].left=lw+dx-5+p, l[s].width=lw+dx+p, r[s].width=rw-dx+p)
	}, 0);
 
	d[n]('mouseup', function() {
		// Stop the mousemove code from running when LMB is released
		sx=0
	}, 0)
})

How do I run it?

I’m going to follow the advice of a very good friend of mine, as much as it hurts my aesthetes to do so:

There’s no noun you can’t verb

The short answer: Google it.

The long answer: Google for ‘bookmarklet’

If you find bugs, make improvements, or whatever, do let me know. Other than that, use the code as you like, but please follow the terms of use and acknowledge where the code came from. I don’t expect you to fit the license into the bookmarklet, obviously

Enjoy!

Detecting orientation changes in mobile Safari on iOS, and other supported browsers

Dan — Sun, 20 Nov 2011 22:58:24 +0000

I’ve been writing a tool for the iPad recently, and found a need to detect when its orientation had changed (whether from landscape to portrait or vice versa).

If I were writing this post years ago, I’d probably advise that the best way of detecting this change would be to have a timer run a function every half a second or so, with that function detecting the width of the window. I’m happy to report that times have changed since 2007, when this blog post was written.

These days, things are a lot easier and less clunky: you can listen for the orientationchange event which is fired on iOS devices whenever they change orientation. Having said that, it appears that Safari running on any iPhone doesn’t fire the 180 degree event and does not rotate the screen when in that orientation (I tested on my 3g, 4, and 4S models). Safari on my iPad fires it for all four positions (0, 90, 180, 270 degrees).

Enough waffle, here is Apple’s sample code taken from the Handling Orientation Events section of their Safari Web Content Guide:




    
    Orientation test
    <script type="text/javascript">
        function updateOrientation() {
            var displayStr = 'Orientation: ';
 
            switch(window.orientation) {
                case 0:
                    displayStr += 'Portrait';
                    break;
 
                case -90:
                    displayStr += 'Landscape (right, screen turned clockwise)';
                    break;
 
                case 90:
                    displayStr += 'Landscape (left, screen turned counterclockwise)';
                    break;
 
                case 180:
                    displayStr += 'Portrait (upside-down portrait)';
                    break;
            }
 
            document.getElementById('output').innerHTML = displayStr;
        }
    script>

There are two things I would change about this code (other than the XHTML 1.0 Strict DOCTYPE, which I’ve already changed for the much more memorable HTML5 DOCTYPE). The first is the attachment of the event handler as an attribute on the element – I’d attach an event listener (it’s much cleaner IMHO). The second issue both irks and puzzles me: the orientation has to be read from the window object instead of being passed in with the event data. Why is this? I can’t think of another case where data associated with an event not made available through the event data in some form or other. So why not with this event type?

Reducing the amount of code needed

I’m not a fan of switch statements. Don’t get me wrong, I’ll use them when they are appropriate, but I don’t believe this is such an occasion. All I wanted to do was determine whether my iPad was in landscape or portrait orientation; I really didn’t care whether the home button was to the left or to the right. After puzzling it over for a few minutes, I realised I could apply the same bitwise AND trick used to determine odd / even numbers (n & 1), using the value 2 instead of 1.

For those of you unfamiliar with bitwise operators, the Bitwise Operators page at MDN is a good all-round read covering a bit of everything, and JavaScript Binary Operations – the easy way is definitely worth a read as well. Anyway, here is my take on how it could be done, followed by an explanation of how it works:




    
    Orientation test
    <script type="text/javascript">
        window.addEventListener('orientationchange', function() {
            document.getElementById('output').innerHTML = 'Orientation: ' + ['Portrait',,'Landscape'][window.orientation & 2];
        }, false);
    script>

I’m not going to go into detail about addEventListener in this article, as event handling is already very well documented. All I need to say on the subject is that if you prefer to use the method shown in Apple’s sample code to attach the event handler from my code, everything should still work correctly.

So how does it work?

The window object has a read-only property named orientation that holds one of four numbers: 0, -90, 90, or 180. As you might have deduced, these values are the angle of rotation in degrees, from the default upright portrait position.

To better understand how my code works, let’s take a look at the binary representations of the 5 numbers (I’m limiting the number of bits to 16 for brevity. In reality, they are operated on as 32-bit numbers):

Decimal    Binary
 
   0       0000000000000000
  90       0000000001011010
 180       0000000010110100
 -90       1111111110100110
   2       0000000000000010

As with the topic of event handling, the topic of bitwise logic and bitwise operations deserves much more in-depth coverage than I want to go into, so I’ll keep this brief: the result of a bitwise AND operation between any two bits will be 1 if and only if both operands are 1. In all other cases (0/0, 0/1, 1/0), the result will be 0. Here are the results for all for orientation values after the logical AND:

                   Portrait           Landscape            Portrait           Landscape
 
(Decimal)                 0                  90                 180                 -90
Binary     0000000000000000    0000000001011010    0000000010110100    1111111110100110
& 2        0000000000000010    0000000000000010    0000000000000010    0000000000000010
Result     0000000000000000    0000000000000010    0000000000000000    0000000000000010
(Decimal)                 0                   2                   0                   2

Hopefully my very brief explanation makes sense. In a nutshell, the results of the bitwise AND operations are as follows:

  0 & 2 == 0
180 & 2 == 0
 90 & 2 == 2
-90 & 2 == 2

What to do with the result of the bitwise operation

If you need to know only whether the device is in landscape mode or not, or portrait mode or not, then you can simply return the result of the bitwise operation and use that in any tests. Remember, 0 equates to false and 2 equates to true, as does 1, or 42, or 109.6, etc. If you really need it as a boolean, the simplest way is to perform two logical NOT operations by using !!, e.g:




    
    Orientation test
    <script type="text/javascript">
        window.addEventListener('orientationchange', function() {
 
            // You can test like this (on the values 0 and 2):
 
            if (window.orientation & 2) {
                // Do something if in landscape mode
            } else {
                // Do something if in portrait mode
            }
 
 
            // Or, if you really need to have boolean values, then logical NOT the result of the bitwise AND twice
            // The first NOT converts it to a boolean of the opposite state, the second restores its state
 
            if (!!(window.orientation & 2)) {
                // Do something if in landscape mode
            } else {
                // Do something if in portrait mode
            }
 
        }, false);
    script>

What about the weird array syntax? What do the double commas mean?

There’s nothing special about the double-comma syntax used in the array; it simply means that I’ve chosen not to define one element of the array (or to put it another way, I’ve chosen to skip over that position). Therefore, the element at that position in the array will be undefined. The array will still have a length of 3, and it still holds 3 values – it just so happens that one of these is the value undefined. Element 0 will be the string ‘Portrait’, element 1 will be undefined, and element 2 will be the string ‘Landscape’:

var arr = ['Portrait',,'Landscape'];
alert(arr[0]);         // 'Portrait'
alert(arr[1]);         // undefined
alert(arr[2]);         // 'Landscape'
alert(arr.length);     // 3

So, the bitwise AND returns either 0 or 2, and I’ve got an array with data at elements 0 and 2. If it hasn’t done so yet, the penny should now be well and truly dropping: the result of the bitwise AND is being used to select one of the two array elements containing data – data that gives us the orientation.

Here’s an example of how this might be used in a real situation: The device orientation is added as an attribute to the element, and this is used by the CSS to ensure that content (in this case, an image) is always displayed at the same position on the screen, no matter what the orientation, or where the status bar is. This avoids the problem of having to resize the content – which can become tricky, depending on the content. Note: this example was designed for the resolution and aspect ratio of the iPad screen. While the image does rotate on an iPhone, it doesn’t fit nicely. As the code I’m writing is not designed to be run on an iPhone (the small screen makes it impractical), I haven’t spent any time getting these examples to look perfect on an iPhone. However, it should be good enough to get the idea across .

There are two things I’d like to point out about this example: In addition to the orientationchange event, the attribute on the is being updated once the page has loaded so the device doesn’t have to be rotated to ensure everything is sized correctly. The second point is the issue of the empty CSS rule body[orient="landscape"] {}. On my iPad running iOS 4.3.3, if I do not include this line, the code fails to size the image as expected – even though the rule contains no styling, and thus should make no difference. Unfortunately, I don’t have an iPad 2 to test it on. If anyone would like to donate one to me, I’d be only too happy to accept it

If anyone can tell me why this might be happening, or how to fix it without having to frig my code in a manner I thought I’d seen the last of with IE6 (correction: that was until I found that Safari/iOS will not fire touchstart events on anchors containing semi-opaque PNGs… Apple must have got the IE6 devs going cheap. Read more on the PNG bug).




    
    
    Orientation test
    <script type="text/javascript">
        function updateOrientation() {
            document.body.setAttribute('orient', ['portrait',,'landscape'][window.orientation & 2]);
            window.scrollTo(0, 0);
        };
        window.addEventListener('orientationchange', updateOrientation, false);
        window.addEventListener('load', updateOrientation, false);
    script>

A quick note on decimal / binary conversion

You can easily convert from decimal to binary in JavaScript by passing 2 as the radix (base) into the toString() method available on every Number instance, and from binary back to decimal by passing 2 as the radix to parseInt. There are some caveats, but for positive integer numbers, you should find these two methods are reliable:

alert(6..toString(2));            // '110'
alert(42..toString(2));           // '101010'
alert(parseInt('110', 2));        // 6
alert(parseInt('101010', 2));     // 42

I mentioned a few caveats. These are that you will not be able to use the same methods to convert to and from floating point numbers, and negative numbers will need another step or two. As you may have already discovered, the toString representation of -90 in binary is nothing like the number I used:

The -90 I used (16-bit)    1111111110100110
The -90 I used (8-bit)             10100110
-90..toString(2)                   -1011010

The representation I used is the two’s complement of the positive number (90, in this case). Here’s the quick-and-dirty method I mentioned to give me the correct negative binary representation, which does require specifying a number of bits. For -90/90, an 8-bit number is fine, but I’ll show the 16-bit version as well:

var bitCount = 8;                                                        // 8 bit version
var negativeNum = -90;                                                   // Negative number to use
var combosForBitCount = Math.pow(2, bitCount);                           // 2 ** 8 == 256
// Here's the conversion to binary and back to decimal
var negativeBinary = (combosForBitCount + negativeNum).toString(2);      // 10100110
var negativeDecimal = parseInt(negativeBinary, 2) - combosForBitCount;   // -90
 
var bitCount = 16;                                                       // 16 bit version
var negativeNum = -90;                                                   // Negative number to use
var combosForBitCount = Math.pow(2, bitCount);                           // 2 ** 16 == 65536
// Here's the conversion to binary and back to decimal
var negativeBinary = (combosForBitCount + negativeNum).toString(2);      // 1111111110100110
var negativeDecimal = parseInt(negativeBinary, 2) - combosForBitCount;   // -90

It’s probably worth mentioning that there are multiple ways of converting negative binary numbers, and the method I’ve given above shouldn’t be used without ensuring that it is providing valid results. I really only included it so you could see how I obtained the binary value for -90. If you haven’t lost the will to live just yet, I’d read through the Binary Numbers page at Celtic Kane Online and the Wikipedia article on Signed number representations.

The floating point issue is easy to understand: parseInt can’t be used to convert a floating point number (the clue is in its name), and parseFloat doesn’t take a radix. Converting to and from floating point binary numbers, while not overly tricky, isn’t something I will go into here. I can recommend Essential Computer Mathematics by Seymour Lipschutz (Schaum’s Outline Series) as a fantastic all-round read (I still refer to my 1982 copy today, and have even taught the occasional class with the book as my only aid). 40+ million students can’t be wrong!

How to stop Internet Explorer from caching AJAX requests

Dan — Sat, 31 Jan 2009 13:53:34 +0000

I recently had to revisit the issue of IE’s default cache settings causing problems when making AJAX requests. Out-of-the-box, the cache setting is ‘Automatically’, where pages are only fetched from the server if the cached content is from an earlier day, old or from an earlier session.

This can be a nightmare to deal with, as you cannot ask all users of a web site to change their browser settings.

One workaround is to use a ‘cache buster’ parameter in your GET request. Something like this:

var urlToFetch = 'whatever.php?randNum=' + new Date().getTime();

This works very well, but can have drawbacks, depending on your server setup. For example, if your application server sits behind a caching layer, you wouldn’t want the URL to be different every time for idempotent requests, as the cached version would never get used, and so your application server would get a direct hit every time.

One way around this without using to parameters is to set the ‘Cache-Control’ response header to direct the browser how to cache the response.

The ‘Cache-Control’ header can have various values, one of which is ‘no-cache’. This tells the browser that it should not cache the response, so the next time the same URL is requested, new content will always be sent (as there is no previous version in the browser’s cache).

This is how we do it using Groovy:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store"

So really, which method you use boils down to this: If you know that the cache buster will have a performance hit on your setup, then don’t use it, otherwise use whichever method you prefer.

Also, as a developer, I can highly recommend changing your IE cache settings to ‘Every visit to the page’.

Update 10/02/2008

We’re finding that with some of our automated testing, IE 7 still caches the odd file now and then. To get around this, we have modified our ‘Cache-Control’ header to include two non-standard properties, ‘post-check’ and ‘pre-check’, and added an ‘Expires’ header as well:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0";
response.addHeader "Expires", "Mon, 26 Jul 1997 05:00:00 GMT"

Speed up your Javascript

Jeff — Mon, 26 Jan 2009 12:31:38 +0000

I came across some very interesting and informative articles on Javascript performance improvement from Nicolas Zakas (the author of the newly released Professional JavaScript, Second Edition book):

This is an ongoing series of articles with specific Javascript examples that make sense.