Чем вам поможет Хабракомментатор или новый способ навигации по комментариям

Начну с того, что идея как-то пришла мне в голову, когда я в очередной раз читал пост на тему отображения комментариев. Естественно тема зашла про то что комментарии при древовидной структуре расположения ответов, стремятся к правому краю, сжимаются и становятся нечитабельными.
Тогда я решил, что надо передвинуть левый край левее, чтобы узкие комментарии стали шире, как это выглядит? Не очень понятно. И ладно! Я написал букмарклет, чтобы вы всё сами увидели! Создан он специально для Хабра, так что можете пользоваться им постоянно.

Букмарклет

Для тех кто не знает, что такое букмарклет читаем статью в википедии.
Открываем bookmarklet.txt, копируем строку, создаём новую запись в закладках, вставляем строку в поле «URL»

Javascript

Если вы переживаете по поводу кражи кукисов, можете сделать букмарклет из кода. Кстати, очень удобно делать букмарклеты с помощью JS minifier.
if(!commentsPatched){
var commentsPatched = true;

var comments = $('commentsdiv').getElementsByClassName('comment_item');
var commentsLength = comments.length;
for(var i=0;i<commentsLength; i++){
var margin= parseInt(comments[i].style.marginLeft);
if(margin>0){

var toLeft = document.createElement('img');
toLeft.setAttribute('src','http://habr.rumkin.ru/images/to-left.gif');
toLeft.setAttribute('style','cursor:pointer;cursor:hand;');
toLeft.setAttribute('onclick','commentToLeft(this);');
comments[i].appendChild(toLeft);

var toRight= document.createElement('img');
toRight.setAttribute('src','http://habr.rumkin.ru/images/to-right.gif');
toRight.setAttribute('style','cursor:pointer;cursor:hand;');
toRight.setAttribute('onclick','commentToRight(this);');
comments[i].appendChild(toRight);
}
}

alert('Patched');
}

function commentToLeft(obj){
var boundElement = obj.parentNode.childNodes[1].firstChild;
var bound = getBounds(boundElement);
if(bound.left > 38){
var commentsDiv = $('commentsdiv');
var margin= parseInt(commentsDiv.style.marginLeft);
if(!margin) margin = 0;
var parentMargin = parseInt(obj.parentNode.style.marginLeft);
if(!parentMargin) parentMargin = 0;
commentsDiv.style.marginLeft = (-1*parentMargin)+'px';
}

}

function commentToRight(obj){
var commentsDiv = $('commentsdiv');
var margin= parseInt(commentsDiv.style.marginLeft);
if(!margin) margin = 0;

var parentMargin = parseInt(obj.parentNode.style.marginLeft);
if(!parentMargin) parentMargin = 0;
if(margin<0){
if((-1*parentMargin)>margin){
commentsDiv.style.marginLeft = (margin+30)+'px';
} else {
commentsDiv.style.marginLeft = 0 +'px';
}
}
}
function getBounds(element)
{
var left = element.offsetLeft;
var top = element.offsetTop;
for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
{
left += parent.offsetLeft;
top += parent.offsetTop;
}
return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}


Примечание

• Это первая версия, поэтому, вам придётся дождаться окончания загрузки страницы, прежде чем включить Хабракомментатор!
• Очень хорошая лесенка комментариев для тестирования.
• Тестировалось в FF 3.0, Opera 9.5 и Safari
• использует prototype.js версии 1.4 установленный на Хабре