Google+ Timeline for the New UI

google.timeline.user.js

// ==UserScript==
// @name Google+ Timeline for the New UI
// @id	google_plus_ui_sucks_pokerface
// @namespace	  in.co.tossing.toolkit.google
// @description	Turn the G+ post stream into a timeline!!
// @license	GPL v3 or later version
// @updateURL	  http://userscripts.org/scripts/source/130658.meta.js
// @exclude		*://plus.google.com/_/apps-static/*
// @exclude		*://plus.google.com/u/0/_/notifications/frame?*
// @include		*://plus.google.com/*
// @version	0.6
// @author	Pokerface - Kevin
// ==/UserScript==


// width 1240 is the minimal requirement
if (screen.width < 1240)
	console.debug('Your screen width actually isn\'t supported by this script.  Remove this script to save your performance or go get a new monitor!');

var $$d = document,
	body = $$d.querySelector('body');

// css disctionary
var dictionary = [
	[/{mainContent}/g, '.RazREb.ZI35oe'],
	[/{post}/g, '.Wbhcze.Te'],
	[/{leftSideMenu}/g, '.ZXy9Tc.VR8ITe'],
	[/{chatBox}/g, '.AOaixb.yRwDId.eub5Ne'],	// maxmized chatbox
	[/{streamContainer}/g, '.lzqA1d']
];

// append css
function css($css, $do_not_append) {
	for (var i=0; i<dictionary.length; i++)
		$css = $css.replace(dictionary[i][0], dictionary[i][1]);
	if (!$do_not_append)
		GM_addStyle($css);
	return $css;
}


function getNavigator() {  
  var navigatorString = navigator.userAgent.toLowerCase(),  
    rBrowsers = [  
      /.*(msie) ([\w.]+).*/,   
      /.*(firefox)\/([\w.]+).*/,  
      /(opera).+version\/([\w.]+)/,    
      /.*(chrome)\/([\w.]+).*/,   
      /.*version\/([\w.]+).*(safari).*/  
    ],  
      
    ret = {  
      language: navigator.language || navigator.userLanguage || ''  
    };  
      
  for (var i = 0, match=null; i < rBrowsers.length; ++i) 
    if ( match = rBrowsers[i].exec(navigatorString) ) {  
      ret.name = match[1] || 'none';  
      ret.version = match[2] || '0';  
      ret[ret.name] = true;
	  break;
    }
  
  return ret;  
}

var browser = getNavigator();

// main style that enable timeline feature
css(
	'@media '+
		(browser.name == "firefox" ?
			// for Firefox
			'(min-width: 1200px)' :
			// for Chrome
			'(min-width: 1070px)'
		)+
	'{'+
		'.tNsA5e-yd[token^="photos/"] {mainContent} { margin-left : 0px }'+	// prevent album becoming ugly
		'{mainContent}:not(.Z77zM), .oJ8yxb.kSwsJc { margin-left : 19% }'+	//	center the main stream, except on the page 'photo from your phone'
		'{streamContainer} { list-style-type: none; margin: 0 auto; padding:20px; margin-left:-250px; margin-bottom:10px; width:1150px; background: url(https://goagent-k9.appspot.com/img/timeline.png) top center repeat-y; }'+
		'.kM5Oeb-RxwvHe.YleYsd.o8dQjb { margin-left:-250px; margin-top: -100px; }'+ // 'block someone' button on profile page
		'.kM5Oeb-OKUawf.hsHREd { margin-top: -40px }'+	// photo on profile page
		'{streamContainer} .x7iMqd { background-color:white } ' +// when there is no content
		'.SG.rnILlb[guidedhelpid="streamcontent"] { margin-top:75px }'+
		'{post} { display:inline-block; -moz-border-radius:2px; webkit-border-radius:2px; padding:5px; margin:-10px 0 20px 0; }'+
		'{post}:nth-last-child(even) .Ye > .k-Qf-C-RySO6d.oP, {post}:nth-last-child(even) .Ye > .nINTy { position:absolute; display:block; margin-left:578px } '+
		'{post}:nth-last-child(even) .MrKoMd { background: no-repeat url(//ssl.gstatic.com/s2/oz/images/sprites/stream-a577cb9e1965785ee8ad2e71f3e8cc5e.png) 0px -21px; margin-left:496px; } '+
		'{post}:nth-last-child(even) .Ns { text-align:right; margin-right: 25px; }'+
		'{post}:nth-last-child(even) .PJOqb { margin-left:10px;float:right }'+
		'{post}:nth-last-child(odd) { clear: both;float:right; }'+
		'.r4gluf, .VepHtd { background-color: white !important }' + // white backgroud for photos
		'.HX2qEd { min-height: 95px }'+ // live where - profile page
		'.vmfs3b { border-bottom: 1px solid #ccc; }'+
		'.L9ru2b.c-wa-Da { display:none }'+ // trending box
		'{mainContent} .v1WCLe .vu9JXc.tuRX2, .v1WCLe .k-Qf-C-RySO6d.oP { display : none }'+ // photos on the left side of sharebox
	'}'+
	'{mainContent} .vcard, .oJ8yxb.kSwsJc, .jbhX0d.YQqIy { margin-top: 90px }'+	// profile page
	// deal with the trending box
	'@media '+
		(browser.name == "firefox" ?
			// for Firefox
			'(min-width: 1200px)' :
			// for Chrome
			'(min-width: 1070px)'
		)+
	'{'+
		'.L9ru2b.c-wa-Da { display:none }'+ // trending box
		'body[display-circle-info] {mainContent} .vcard .L9ru2b.c-wa-Da {'+ // 'xxx' have you in circle
			'display:block !important; margin-top:10px; z-index:10; background-color:white; border:1px solid #ccc;'+
		'}'+
	'}'
);


// new style that enable auto hiding the left side mennu
css(
	// hide the chatbox
	'@media '+
		(browser.name == "firefox" ?
			// for Firefox
			'(max-width: 1540px)' :
			// for Chrome
			'(max-width: 1380px)'
		)+
		'{'+
		'{chatBox} {'+
			'transition: right .8s ease;'+
			'-moz-transition: right .8s ease;'+
			'-webkit-transition: right .8s ease;'+
			'right : -160px;'+
			'z-index: 980;'+
		'}'+
		'{chatBox}:hover {'+
			'right: 0px;'+
		'}'+
		'.EziK2e.k-fa.ZeMNWc, .uWF1Ke.atQfbd.GjYYId {'+
			'margin-right:65px;'+
		'}'+
	'}'+
	// hide the left side menu
	'@media '+
		(browser.name == "firefox" ?
			// for Firefox
			'(min-width: 1200px) and (max-width: 1360px)' :
			// for Chrome
			'(min-width: 1070px) and (max-width: 1210px)'
		)+
	'{'+
		'{leftSideMenu} {'+
			'left: -90px;'+
			'transition: left .8s ease;'+
			'-moz-transition: left .8s ease;'+
			'-webkit-transition: left .8s ease;'+
		'}'+
		'{leftSideMenu}:hover { left: 0px; }' +
		'.k-fa, .atQfbd { margin-left:0px !important; }'+
	'}'+
	// place the navigation buttons on the black bar
	'@media (min-width: 1450px) {'+
		'body[black-navigation-exist] .k-YB-nb.k-YB-nb-Zg ~ #content nav[role="navigation"] {'+
			'position:fixed;'+
			'top: -14px;'+
			'left: 750px;'+
			'z-index: 990;'+
			'background-color: transparent;'+
		'}'+
		'body[black-navigation-exist] .k-YB-nb.k-YB-nb-Zg ~ #content nav[role="navigation"] .fn.c-wa-Da.nhsZYd {'+
			'color: white;'+	// Profile name
		'}'+
		'.NeLhq.fsfr2c  {'+
			'background-color: transparent;'+
			'height: 0;'+
			'border-bottom : 0px;'+
		'}'+
		'.z-ea-n[role="listbox"], .urrzYd.c-o[role="menu"] { z-index: 995 }'+ // setting menu
	'}'
);

// always functional css part
css(
	/* not bug free currently
	'#gb #gbw #gbu { top: -19px; z-index: 998; }'+	// put photo into the black navigation bar
	'body[enableUI-timeline][chatbox-autohiding] #gb #gbw #gbu { margin-right:-10px; }'+	// when the screen is too small
	'#gb #gbw #gbu.gbes { top: -10px; }'+
	'#gbx3 { opacity: 0.8 }'+	// transparent the black bar
	'body:not([enableUI-display-white-bar]) #gb #gbq {'+	// hide the search box
		'top: -80px;'+
	'}'+
	'#gbq {'+	// animation for the hiding of search box
		'transition: top .8s ease;'+
		'-moz-transition: top .8s ease;'+
		'-webkit-transition: top .8s ease;'+
	'}'+
	'body[enableUI-display-white-bar] {mainContent} { top: -72px} '+	// cover the sharebox
	'#gbx1, .k-YB-nb .muo2Sd.HC { display : none } '+	// bottom line & grey background
	'.k-YB-nb #gb.gbes, .k-YB-nb #gb.gbesi { height:24px }'+	// black bar
	'body[enableUI-display-white-bar] .k-YB-nb #gb.gbes, body[enableUI-display-white-bar] .k-YB-nb #gb.gbesi { height: 69px }'+
	'body:not([enableUI-display-white-bar]) .k-Qf-YB-nb-dd { max-height : 29px }'+
	'body[enableUI-display-white-bar] #gb #gbq, body[enableUI-display-white-bar] #gb #gbx1, body[enableUI-display-white-bar] .k-YB-nb .muo2Sd.HC { display:block }'+	// show white bar
	'.gbt .gbg4p { margin-top:0px }'+ // fix top-right the user photo offset
	'.k-YB-nb #gbx1.gbes {display:none}'+	// clear the grey bar
	'#gbwc.gbmwca { top: -50px !important; }' + // fix the notification offset
	'.gbgt#gbg6 #gbi4t { color:white } '+ // color the name to white
	'#gbq1.gbt {display : none }'+	// hide the 'Google' logo
	'body[enableUI-timeline][chatbox-autohiding] .gbgt#gbg6 #gbi4t { display:none } '+ // hide the name
	*/
	'.r4gluf, .VepHtd { background-color: white !important }'  // white backgroud for photos
);

function checkBlackNavigation() {
	var blackNavigation = $$d.querySelector('#gbx3'),
		blackNavigationExistAttr = body.getAttribute('black-navigation-exist');
	if (blackNavigation) {
		if (!blackNavigationExistAttr) {
			$$d.querySelector('#gbx3').addEventListener('mouseover', function () {
				body.setAttribute('display-circle-info', 'yes');
			});
			body.setAttribute('black-navigation-exist','yes');
		}
	}
	else {
		if (blackNavigationExistAttr)
			body.removeAttribute('black-navigation-exist');
	}
}

// reveal the white bar when mouse on the black bar
var bar_animation_lock = false, timeout_lock;
if ($$d.querySelector('#gbx3')) {
	$$d.querySelector('#gbx3').addEventListener('mouseover', function () {
		body.setAttribute('display-circle-info', 'yes');

		if (bar_animation_lock)
			return;
		bar_animation_lock = true;
		timeout_lock = setTimeout(function () {
			//body.setAttribute('enableUI-display-white-bar', "yes");
			bar_animation_lock = false;
		}, 850);
	});
	// the bar will not show when mouse is out too early
	$$d.querySelector('#gbx3').addEventListener('mouseout', function () {
		clearTimeout(timeout_lock);
		bar_animation_lock = false;
	});
}

$$d.querySelector('#content').addEventListener('click', function () {
	body.removeAttribute('display-circle-info');
	//body.removeAttribute('enableUI-display-white-bar');
});

// to make sure the amount of posts is always even/odd
setInterval((function () {
	var postSelector = css('{post}', true),
		selector = '.null-post'+postSelector,
		lastPostId = null;
		
	css(selector +'{ display: none }');
	return function () {
		checkBlackNavigation();
		var stream = $$d.querySelector(css('{streamContainer}',true)),
			lastPost = stream.querySelector(postSelector+ '[id]:last-of-type');
		if (!lastPostId || !lastPost) {	// first-time run
			if (lastPost)
				lastPostId = lastPost.getAttribute('id');
			return;
		}
		var currentLastPostId = lastPost.getAttribute('id');
		if (currentLastPostId == lastPostId)
			return;
		if (stream.querySelectorAll(postSelector+ '[id="'+ lastPostId +'"] ~ '+ postSelector+'[id]').length % 2 != 0) {
			var nullPost = $$d.querySelector(selector);
			if (nullPost)
				stream.removeChild(nullPost);
			else {
				var div = $$d.createElement('div');
				div.className = selector.replace(/\./g, ' ');
				stream.appendChild(div);
			}
		}
		lastPostId = currentLastPostId;
	}
})(), 200);