Google Apps Script Editor Styler

.googleappsscripteditorstyler.en.md

Google Apps Script Editor Styler

The script's managers are Greasemonkey or Tampermonkey. Just add it to your browser.

The script's hosting gist.github.com. Just click it.

The script use Google Fonts Hosting. Use a font name from there.

googleappsscripteditorstyler.screenshot.png

googleappsscripteditorstyler.user.js

// ==UserScript==
// @name          Google Apps Script Editor Styler
// @description   Style the Google Apps Script Editor
// @namespace     https://github.io/oshliaer
// @domain        script.google.com
// @include       https://script.google.com/d/*
// @include       https://script.google.com/macros/d/*
// @include       https://script.google.com/a/*/d/*
// @include       https://script.google.com/macros/a/*/d/*
// @author        +AlexanderIvanov
// @developer     +AlexanderIvanov
// @version       2017.2.28
// @grant         GM_addStyle
// @grant         GM_getValue
// @grant         GM_setValue
// @icon          https://ssl.gstatic.com/images/icons/product/script_chrome_only-256.png
// @screenshot    https://gist.githubusercontent.com/oshliaer/518246959a67699ff8fb414ad6c7aa3d/raw/googleappsscripteditorstyler.screenshot.png
// @license       WTFPL; http://www.wtfpl.net/txt/copying
// ==/UserScript==

//var GOGLEFONTSCOLLECTION = ['Roboto', 'Droid Sans Mono', 'Ubuntu Mono'];

var userFontSettings = GM_getValue('userFontSettings', {
    fontFamily: 'default'
});

//console.log('userFontSettings', userFontSettings);

if(userFontSettings.fontFamily !== 'default'){
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css?family=' + userFontSettings.fontFamily;
    document.head.appendChild(link);
}

var style = '' +

    //Autocomplete padding items
    '*,html{font-family: ' + userFontSettings.fontFamily + ' !important;}' +

    //Autocomplete padding items
    '.gwt-Label.item{padding-top:2px !important; padding-bottom:2px !important;}' +

    //Autocomplete padding invert active
    '.gwt-Label.item.selected{background-color:black !important;color:white !important;}' +

    // modal-dialog log
    '.script-logging-dialog{min-width:1000px !important; min-height:700px !important;}' +

    //Settings panel
    'div.tm_settings{position:absolute;bottom:0;right:0;opacity:0.3;z-index:9999;background:#000;color:#fff}';

GM_addStyle(style);

window.addEventListener("load", function load(event){
    var newElement = document.createElement('div');
    var docsTitleInner = document.getElementById('docs-titlebar');
    var typeOfLocation = getTypeOfLocation(window.location.href);
    newElement.innerHTML = typeOfLocation.name;
    newElement.setAttribute('style', 'text-align: center');
    docsTitleInner.appendChild(newElement);

    var settingsDiv = document.createElement('div');
    settingsDiv.className = 'tm_settings';

    var formSettingsDiv = document.createElement('div');
    formSettingsDiv.className = 'tm_form_settings';
    formSettingsDiv.style.display = 'none';

    var toggleButton = document.createElement('button');
    toggleButton.innerHTML = '_';
    toggleButton.addEventListener('click', function(){
        if(formSettingsDiv.style.display === 'none'){
            formSettingsDiv.style.display = 'block';
            toggleButton.innerHTML = 'X';
        }else{
            formSettingsDiv.style.display = 'none';
            toggleButton.innerHTML = '_';
        }
    });

    var fontInput = document.createElement('input');
    fontInput.value = userFontSettings.fontFamily;

    var reloadButton = document.createElement('button');
    reloadButton.innerHTML = 'ok';
    reloadButton.addEventListener('click', function(){
        GM_setValue('userFontSettings', {
            fontFamily: fontInput.value
        });
        location.reload();
    });

    formSettingsDiv.appendChild(fontInput);
    formSettingsDiv.appendChild(reloadButton);
    settingsDiv.appendChild(toggleButton);
    settingsDiv.appendChild(formSettingsDiv);
    document.body.appendChild(settingsDiv);

},false);

function getTypeOfLocation(href){
    var types = [
        {mask: '^https:\/\/script\.google\.com\/a\/.*?\/macros\/d\/.*$', name: 'BOUND SCRIPT / GSUITE', color: ''},
        {mask: '^https:\/\/script\.google\.com\/a\/.*?\/d\/.*$', name: 'STANDALONE SCRIPT / GSUITE', color: ''},
        {mask: '^https:\/\/script\.google\.com\/macros\/d\/.*$', name: 'BOUND SCRIPT', color: ''},
        {mask: '^https:\/\/script\.google\.com\/d\/.*$', name: 'STANDALONE SCRIPT', color: ''},
    ];
    for(var i = 0; i < types.length; i++){
        var patt = new RegExp(types[i].mask);
        if(patt.test(href, 'i'))
            return types[i];
    }
    return {
        mask: '',
        name:'',
        color: ''
    };
}