Welcome to Code Couch

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

Posted by at 5:21am on November 25, 2011.


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 (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.

  1. Select / highlight the initial “no whitespace” version of the code above
  2. Copy it to your clipboard
  3. Create a new bookmark (or edit an existing one)
  4. Set the URL to be “javascript:” (without the quotes), followed immediately by the code you’ve just copied
  5. Load Gmail
  6. 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)
})

Post to Twitter

Comments

There are 23 responses to this post.

  1. So hows does a newbie civilian get this implemented? I find the inability to re-size the left column to be quite frustrating, especially on a 23" landscape monitor!
  2. Hi Michael, Sorry I've not replied sooner; I'm on holiday at the moment, showing my parents around New Zealand's beautiful South Island. I'll do a more in-depth article soon(ish), but until then, I've added a few steps at the top of this article that you can try.
  3. Your patch is great, but has a bug. When you view email messages, you can't highlight text anymore.
  4. please let me know when there is a more detailed description of how a non-coder can implement the above functionality that allows re-sizing of lefthand (labels) column. also, must it be done separately in each browser that is used to view gmail, or is there any way to implement it into one's gmail account / display settings so that it would always display that way? so far, i've had no success in inserting the javascript into any type of bookmark or bookmarklet (don't know the difference). must i have greasemonkey installed and how to i integrate the javascript code you provided into greasemonkey / browser? thanks for any help you can provide, as it is amazingly frustrating that the column cannot be re-sized and full label names cannot be displayed if longer than available space. hopefully gmail will change this feature so as to be user manipulable. thanks!!
  5. Hi Jason, I hope to have a post up in the next week that fix a few issues, this one included. I'll look at hiding the overlay when dragging has finished. Thanks for the feedback!
  6. Dan, I join many others in hoping you will make the process of setting this up simple to those of us who are non-coders. The lack of ability to resize the width of the labels area at left of Gmail has been my biggest complaint with Gmail from the very beginning. I cannot believe they simply do not realize what a nuisance this is for so many users. My labels are almost all too wide to fit and therefore are cut off, while the main window is FAR WIDER than needed. Don't those people ever read feedback about this?? One has to wonder why they refuse to fix this.
  7. Hi Reg, I'll be working on this from Feb 12th, and soon after that hope to have the remaining bugs ironed out, and a more in-depth tutorial. Watch this space, as they say!
  8. Thanks Dan! I did try following the previous instructions but it did not work for me. I have Windows 7. I find it very strange that the Google team do nothing to fix this obvious flaw in the otherwise excellent Gmail interface. Am I missing something here? Is there some reason it is so difficult for them to deal with and correct, modify or revise, or what do you think the reason can be they don't do this for us? It would be beneficial to EVERYONE who uses Gmail.
  9. just as a QA test thing, if you have the chat names column moved to the right side by Labs option, your code doesn't works. I just see the line, both columns get highlighted but can't move them. It works if you disable that Lab gadget
  10. @Jason - I've fixed the bug where text wasn't able to be selected. Check out the latest post for the details. @Beau @Reg - In my latest post, I've given some more instructions on how to install and run the code. Hopefully they'll work for you!
  11. Hi Enric, I've added a new post with updated code that works with Gmail's "right-side chat" lab, so give it a blast!
  12. Brilliant...
  13. Thank you very much! you can't imagine how your code will change my life! Stay sure I will respect the term of use you expressly reported and will acknowledge you as the source of this magic! From Italy, Paolo
  14. I had no luck with this code there is bar that I can move but the left hand pane does not change in size
  15. Hi Adele, Which browser are you using, and what version is it (e.g. IE9, Fx10, etc). Also which OS?
  16. Great little script. Not sure why google couldn't have given us this functionality!
  17. Hi Dan, I'm also having the problem Adele had: only the dotted bar is showed but I can not resize the pane. My browser is Chrome "18.0.1025.162 m". Thanks for your effort and attention.
  18. I've added a new post dated 10 May 2012 that shows how to get this working as a user script in Chrome as well as Greasemonkey. See the update at the top of this post for details.
  19. Is there any way to make it have a fixed width? On refresh the width returns to stock, I would like to keep it fixed (min-width), re-sizable but wider by default.
  20. Hi When I try to resize left bar using divider, my right screen (including all emails) disappeared. A white screen comes up in right pane.
  21. @Ashwani: Do you have any labs or gmail plugins enabled? If so, try disabling them and see if that helps.
  22. All: For anyone finding that this code no longer works since late March 2013, please read my latest post dated 31st March 2013. It offers an updated wrapper that works with the latest Gmail changes.
  23. Thanks so much! Being able to resize the labels column is so nice!

Leave a reply

You must either log in or enter your name and email address to post a comment.

Your email address will not be published.

  • You do not need to log in to comment, but you can if you wish.
  • Log in