Ruler for button in adaptive Chameleons

// ==UserScript==
// @name       Add ruler for button in adaptive Chameleons
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  Tool for visial testing
// @downloadURL https://gist.githubusercontent.com/yoksel/6cf7db8d931dea5f8016/raw/657ebbe89f25e532cefdb751701b334d998934ab/Ruler%2520for%2520button%2520in%2520adaptive%2520Chameleons
// @match      http://*/*
// @copyright  2015+, Me
// @grant          GM_addStyle
// ==/UserScript==


var doc = document;
var betaControls = doc.querySelector('.js--sidebar-controls');
var socials = doc.querySelector('.j-social-networks-nav');
var socLink = doc.querySelector('.j-social-networks-nav-item A');
var socIcon = doc.querySelector('.j-social-networks-icon .svgicon');
var textBox = doc.querySelector('.textbox-commenttext');

var stylesElem = doc.createElement('style');
stylesElem.id = 'buttinRulerStyles';
doc.head.appendChild( stylesElem );

var outputElem = doc.createElement('div');
outputElem.classList.add('js--buttons-debug');
doc.body.appendChild(outputElem);

window.onresize = function() {
    setLine();
};

if ( window.innerWidth > 1000 || betaControls === null ) {
    return;
}

setLine();

function setLine() {
    
    if ( window.innerWidth > 1000 ) {
        stylesElem.innerHTML = '';
        return;
    }
    
    var buttonTop = betaControls.style.top;
    var buttonHeight = betaControls.getBoundingClientRect().height;
    var socialsTop = socLink.getBoundingClientRect().top;
    var socLinkHeight = socLink.getBoundingClientRect().height;
    var socHeight = socIcon.clientHeight;
    var textBoxFontSize = '';
    var buttonTopVal = buttonTop;
    
    if ( buttonHeight > socLinkHeight || buttonTop !== socialsTop ) {
        var buttonTopRecommend = socialsTop - ( buttonHeight - socLinkHeight ) / 2;
        var topNum = Number(buttonTop.slice(0,-2));
        
        if ( topNum !== buttonTopRecommend ) {
            buttonTopVal += ' <b>( &rarr; ' + buttonTopRecommend + ')</b>';
        }
    }
    
    buttonHeight += 'px';
    
    var output = ['Button height: ' + buttonHeight,
                  'Button top: ' + buttonTopVal,
                  'Social Link height: ' + socLinkHeight,
                  'Social top: ' + socialsTop]
    
    if ( textBox !== null ) {
        textBoxFontSize = getComputedStyle( textBox )["font-size"];
        output.push('Comment text font: ' + textBoxFontSize)
    }
    
    output = output.join('<br> ');
    
    outputElem.innerHTML = output;
    
    var rulerStyles = [
        'content: ""',
        'display: block',
        'position: fixed',
        'z-index: 5000',
        'top: ' + buttonTop,
        'width: 100%',
        'height: ' + buttonHeight,
        'box-sizing: border-box',
        'border: 1px solid red',
        'border-width: 1px 0',
        'background: rgba(0,0,0,.35)',
        'text-indent: 20px',
        'line-height: ' + buttonHeight,
        'color: #FFF'
    ].join(';\n');
    
    var styles = ".j-l-wrapper:before {\n " + rulerStyles + " \n}\n";
    
    var outputStyles = [
        'position: fixed',
        'z-index: 100',
        'top: 60%',
        'left: 0',
        'padding: 1em',
        'transform: translate(0,-50%)',
        'background: rgba(255,255,255,.9)',
        'border: 5px solid hsla(80, 61%, 50%,.5)',
        'color: #000'
    ].join(';\n');
        
    styles += ".js--buttons-debug {\n " + outputStyles + " \n}\n";
    
    var socItemStyles = [
        'box-shadow: 0 0 0 2px hsla(0, 100%, 50%,.9)'
    ].join(';\n');
        
    styles += ".j-social-networks-nav-item {\n " + socItemStyles + " \n}\n";
        
    stylesElem.innerHTML = styles;
}