New Twitter User Interface Tweeks

newtwitter.user.js

/**
 * @match https://www.twitter.com/#!/
 * @version 2.0
 * New Twitter Interface Tweaks
 * By @onteria_
 * User Script Installation: http://www.chromium.org/developers/design-documents/user-scripts
 * 
 * I found twitter web's new interface to be too cramped, so this user sript adjusts the 
 * CSS of the page to optimize screen real estate. I use variables to make it easier to 
 * tweek the widths accordingly. 
 *
 * Please note that this is meant to target Google Chrome, so I'm uncertain if the node
 * tree traversal works in other browsers (also uses CSS3 selectors).
 */

/** Config Values **/

// Max Width - I set this to 100% to use all of the screen
var max_width="98%";
// The width of the dashboard
var left_block_width = "16%"
// How far to the left the dashboard is
var left_block_left_margin = "8%"
// The width of the main tweet area
var right_block_width = "60%"
// Basically the spacing between the dashboard and the tweet area
var right_block_left_margin = "2%"
// Add some spacing to the right

/** Initialization and stuff **/

// Page Container - This is the main container of the widgets
var main_container = document.getElementById('page-container');
// Set values
main_container.style.width = max_width;
main_container.style.margin = "0px;";
 
// # Left Block - These are the values for the left block, or dashboard #
// Identifier - The DOM traversal used to obtain the dashboard area
var left_block = document.getElementById('page-node-home').children[0];
// Set values
left_block.style.width = left_block_width;
left_block.style.marginLeft = left_block_left_margin;
 
// Right Block - These are the values for the right block, or tweet area
// Identifier - The dom traversal used to obtain the tweet area
var right_block = document.getElementById('page-node-home').children[1];
// Set values
right_block.style.width = right_block_width;
right_block.style.marginLeft = right_block_left_margin;
// Bring things closer together
right_block.style.float = 'left';