Andrew's Blog

I really don't like change.

When websites, especially Web 2.0 applications, change their layout, I have to relearn where to look, where to click, really how to think with the application. While this doesn't sound like a big deal, I'm someone who can recite most of the OSX keyboard shortcuts from memory: UI changes cause me a lot of stress and relearning. I don't like them.

What I do like, however, is Greasemonkey. Greasemonkey allows you to change web site behavior by injecting customized JavaScript code into a website. I use a lot of Greasemonkey scripts, in addition to the few I've posted here.

Anyway, the new UI "improvement" that has me bugged is, as you might guess from the title, the redesign of Twitter. While, for the most part, the new site is really awesome, I have two major issues with the new layout:

1. The site reverses the order of the columns from the previous site. The dashboard column is now on the left instead of the right.
2. The text box to post a new tweet is now small and aligned at the bottom of this dashboard column.

Using a quick Greasemonkey, I was able to fix problem #1. Problem #2 ended up taking some more time to fix (I won't bore you with the details, but it involves XPath).

You can download this quick-fix for the Twitter UI by clicking on this link.

Here's the source code:

// ==UserScript==
// @name           Twitter Column Order Reverse
// @namespace      http://andrew.pilsch.com
// @description    Reverse the Order of Columns in New Twitter
// @include        http://twitter.com
// @include        http://*.twitter.com
// @include        http://twitter.com/*
// @include        http://*.twitter.com/*
// @include        https://twitter.com
// @include        https://*.twitter.com
// @include        https://twitter.com/*
// @include        https://*.twitter.com/*
// ==/UserScript==

/* 
 * This file is a Greasemonkey user script. To install it, you need 
 * the Firefox plugin "Greasemonkey" (URL: http://greasemonkey.mozdev.org/)
 * After you installed the extension, restart Firefox and revisit 
 * this script. Now you will see a new menu item "Install User Script"
 * in your tools menu.
 * 
 * To uninstall this script, go to your "Tools" menu and select 
 * "Manage User Scripts", then select this script from the list
 * and click uninstall :-)
 *
 * Creative Commons Attribution License (--> or Public Domain)
 * http://creativecommons.org/licenses/by/2.5/
*/

(function(){



    //object constructor
    function example(){

        // modify the stylesheet
        this.append_stylesheet('.content-main { float: left !important; } .dashboard { float: right; } .twitter-anywhere-tweet-box-editor{width: 96% !important;} .tweet-user { background: #FFF !important; padding-top: 15px !important; }');

    };

    //create a stylesheet
    example.prototype.append_stylesheet = function(css){

        var styletag = document.createElement("style");
        styletag.setAttribute('type', 'text/css');
        styletag.setAttribute('media', 'screen');
        styletag.appendChild(document.createTextNode(css));

        document.getElementsByTagName('head')[0].appendChild(styletag);

    };

    //

    //instantiate and run 
    var example = new example();


})();

/* Generic frontend for XPATH queries. I found this here:
    https://www.userscripts.org/scripts/show/37841

   We have to use XPATH queries because, for some reason I can't figure out, document.getElementById 
   stops working at some point during the page loading process on Twitter. I could be being stupid or they
   could be doing something to mess with it. I would believe it's my fault.
*/
function $x(p,context) {
    if (!context) context = document;
    var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
    for (i = 0; item = xpr.snapshotItem(i); i++) arr.push(item);
    return arr;
}

function move_new_tweet_box(){
    /* We select the tweet box that gets loaded in the sidebar (or dashboard) */
    var target_box = $x("//div[contains(@class,'tweet-box')]")[0];

    /* Problematically, this box does not get loaded automatically, but comes in via an AJAX query (fun).
       To counteract this problem, we check to see if the above XPATH request found anything. If it didn't,
       we sleep the function for 100ms to try again. It takes a few loads, usually. */
    if (!target_box) {
        window.setTimeout(move_new_tweet_box,100);
        return;
    }

    /* Find the header DIV to load the tweet box into using another XPATH request. */
    var target_header = $x("//div[contains(@class,'header-inner')]")[0];

    /* Remove the tweet box from the dashboard. */
    target_box.parentNode.removeChild(target_box);

    /* Add the tweet box to the header. */
    target_header.appendChild(target_box);
}

move_new_tweet_box();