☰

Google Apps Script Editor Styler

Style the Google Apps Script Editor

  1. // ==UserScript==
  2. // @name          Google Apps Script Editor Styler
  3. // @description   Style the Google Apps Script Editor
  4. // @namespace     https://github.io/oshliaer
  5. // @domain        script.google.com
  6. // @include       https://script.google.com/d/*
  7. // @include       https://script.google.com/macros/d/*
  8. // @include       https://script.google.com/a/*/d/*
  9. // @include       https://script.google.com/macros/a/*/d/*
  10. // @author        +AlexanderIvanov
  11. // @developer     +AlexanderIvanov
  12. // @version       2017.2.28
  13. // @grant         GM_addStyle
  14. // @grant         GM_getValue
  15. // @grant         GM_setValue
  16. // @icon          https://ssl.gstatic.com/images/icons/product/script_chrome_only-256.png
  17. // @screenshot    https://gist.githubusercontent.com/oshliaer/518246959a67699ff8fb414ad6c7aa3d/raw/googleappsscripteditorstyler.screenshot.png
  18. // @license       WTFPL; http://www.wtfpl.net/txt/copying
  19. // ==/UserScript==
  20.  
  21. //var GOGLEFONTSCOLLECTION = ['Roboto', 'Droid Sans Mono', 'Ubuntu Mono'];
  22.  
  23. var userFontSettings = GM_getValue('userFontSettings', {
  24.     fontFamily: 'default'
  25. });
  26.  
  27. //console.log('userFontSettings', userFontSettings);
  28.  
  29. if(userFontSettings.fontFamily !== 'default'){
  30.     var link = document.createElement('link');
  31.     link.rel = 'stylesheet';
  32.     link.href = 'https://fonts.googleapis.com/css?family=' + userFontSettings.fontFamily;
  33.     document.head.appendChild(link);
  34. }
  35.  
  36. var style = '' +
  37.  
  38.     //Autocomplete padding items
  39.     '*,html{font-family: ' + userFontSettings.fontFamily + ' !important;}' +
  40.  
  41.     //Autocomplete padding items
  42.     '.gwt-Label.item{padding-top:2px !important; padding-bottom:2px !important;}' +
  43.  
  44.     //Autocomplete padding invert active
  45.     '.gwt-Label.item.selected{background-color:black !important;color:white !important;}' +
  46.  
  47.     // modal-dialog log
  48.     '.script-logging-dialog{min-width:1000px !important; min-height:700px !important;}' +
  49.  
  50.     //Settings panel
  51.     'div.tm_settings{position:absolute;bottom:0;right:0;opacity:0.3;z-index:9999;background:#000;color:#fff}';
  52.  
  53. GM_addStyle(style);
  54.  
  55. window.addEventListener("load", function load(event){
  56.     var newElement = document.createElement('div');
  57.     var docsTitleInner = document.getElementById('docs-titlebar');
  58.     var typeOfLocation = getTypeOfLocation(window.location.href);
  59.     newElement.innerHTML = typeOfLocation.name;
  60.     newElement.setAttribute('style', 'text-align: center');
  61.     docsTitleInner.appendChild(newElement);
  62.  
  63.     var settingsDiv = document.createElement('div');
  64.     settingsDiv.className = 'tm_settings';
  65.  
  66.     var formSettingsDiv = document.createElement('div');
  67.     formSettingsDiv.className = 'tm_form_settings';
  68.     formSettingsDiv.style.display = 'none';
  69.  
  70.     var toggleButton = document.createElement('button');
  71.     toggleButton.innerHTML = '_';
  72.     toggleButton.addEventListener('click', function(){
  73.         if(formSettingsDiv.style.display === 'none'){
  74.             formSettingsDiv.style.display = 'block';
  75.             toggleButton.innerHTML = 'X';
  76.         }else{
  77.             formSettingsDiv.style.display = 'none';
  78.             toggleButton.innerHTML = '_';
  79.         }
  80.     });
  81.  
  82.     var fontInput = document.createElement('input');
  83.     fontInput.value = userFontSettings.fontFamily;
  84.  
  85.     var reloadButton = document.createElement('button');
  86.     reloadButton.innerHTML = 'ok';
  87.     reloadButton.addEventListener('click', function(){
  88.         GM_setValue('userFontSettings', {
  89.             fontFamily: fontInput.value
  90.         });
  91.         location.reload();
  92.     });
  93.  
  94.     formSettingsDiv.appendChild(fontInput);
  95.     formSettingsDiv.appendChild(reloadButton);
  96.     settingsDiv.appendChild(toggleButton);
  97.     settingsDiv.appendChild(formSettingsDiv);
  98.     document.body.appendChild(settingsDiv);
  99.  
  100. },false);
  101.  
  102. function getTypeOfLocation(href){
  103.     var types = [
  104.         {mask: '^https:\/\/script\.google\.com\/a\/.*?\/macros\/d\/.*$', name: 'BOUND SCRIPT / GSUITE', color: ''},
  105.         {mask: '^https:\/\/script\.google\.com\/a\/.*?\/d\/.*$', name: 'STANDALONE SCRIPT / GSUITE', color: ''},
  106.         {mask: '^https:\/\/script\.google\.com\/macros\/d\/.*$', name: 'BOUND SCRIPT', color: ''},
  107.         {mask: '^https:\/\/script\.google\.com\/d\/.*$', name: 'STANDALONE SCRIPT', color: ''},
  108.     ];
  109.     for(var i = 0; i < types.length; i++){
  110.         var patt = new RegExp(types[i].mask);
  111.         if(patt.test(href, 'i'))
  112.             return types[i];
  113.     }
  114.     return {
  115.         mask: '',
  116.         name:'',
  117.         color: ''
  118.     };
  119. }