☰

Greasy Fork is available in English.

GitHub Dark Script

GitHub Dark in userscript form, with a settings panel

Fra 18.06.2016. Se den seneste versjonen.

  1. // ==UserScript==
  2. // @name         GitHub Dark Script
  3. // @version      2.0.0
  4. // @description  GitHub Dark in userscript form, with a settings panel
  5. // @namespace    https://github.com/StylishThemes
  6. // @include      /https?://((gist|guides|help|raw|status|developer)\.)?github\.com((?!generated_pages\/preview).)*$/
  7. // @include      /render\.githubusercontent\.com/
  8. // @include      /raw\.githubusercontent\.com/
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @grant        GM_info
  13. // @grant        GM_xmlhttpRequest
  14. // @grant        GM_registerMenuCommand
  15. // @connect      githubusercontent.com
  16. // @connect      raw.githubusercontent.com
  17. // @run-at       document-start
  18. // @require      https://greatest.deepsurf.us/scripts/15563-jscolor/code/jscolor.js?version=106439
  19. // ==/UserScript==
  20. /* global GM_addStyle, GM_getValue, GM_setValue, GM_info, GM_xmlhttpRequest, GM_registerMenuCommand, jscolor */
  21. /* eslint-disable indent, quotes */
  22. /* jshint esnext:true */
  23. (() => {
  24.   'use strict';
  25.  
  26.   const version = GM_info.script.version,
  27.  
  28.   // delay until package.json allowed to load
  29.   delay = 8.64e7, // 24 hours in milliseconds
  30.  
  31.   // Keyboard shortcut to open ghd panel (only a two key combo coded)
  32.   keyboardOpen = 'g+0',
  33.   keyboardToggle = 'g+-',
  34.   // keyboard shortcut delay from first to second letter
  35.   keyboardDelay = 1000,
  36.  
  37.   // base urls to fetch style and package.json
  38.   root = 'https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/',
  39.  
  40.   defaults = {
  41.     attach : 'scroll',
  42.     color  : '#4183C4',
  43.     enable : true,
  44.     font   : 'Menlo',
  45.     image  : 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGBAMAAACDAP+3AAAAGFBMVEUfHx8eHh4dHR0bGxshISEiIiIlJSUjIyM9IpsJAAAFjUlEQVR4AT3UuZLcOBaF4QuI2XJxboIhF/eQFe1WovoBAAqccpkaZpc5+4yrXa8/RGpx/lrIXPjFCYjTp9z8REqF4VYNWB3Av3zQJ6b6xBwlKB/9kRkCjXVwGH3ziK5UcjFHVkmgY6osiBsGDFfseqq2ZbTz7E00qBDpzOxnD7ToABeros1vM6MX0rBQaG1ith1A/HJkvkHxsPGJ82dP8vVCyWmbyPTaAfGzg40bgIdrv2f3pBVPycUcufx+BSUUWDuCZi6zBqdM50ElKYPODqtLDjc31rBb9CZ59lbN/JScuMxHLUBcGiy6QRH9zpwgZGhRj8qSydPVgNNVgbWqYX3HbM9K2rqTnKVmsmwKWzc1ffEd20+Zq3Ji65kl6TSjALNvzmJt4Pi2f1etytGJmy5erLAgbNY4bjykC3YCLIS3nSZMKgwRsBarWgjdeVzIEDzpTkoOUArTF4WFXYHwxY585sT0nmTYMxmXfs8fzwswfnam8TMU49bvqSRnyRPnqlno4tVQQiH2A9Za8tNTfXQ0lxbSxUaZna0uLlj9Q0XzD96CpsOZUftolINKBWJpAOoAJC0T6QqZnOtfvcfJFcDrD4Cuy5Hng316XrqzJ204HynyHwWed6i+XGF40Uw2T7Lc71HyssngEOrgONfBY7wvW0UZdVAma5xmSNjRp3xkvKJkW6aSg7PK4K0+mbKqYB0WYBgWwxCXiS74zBCVlEFpYQDEwjcA1qccb5yO6ZL8ozt/h3wHSCdWzLuqxU2ZZ9ev9MvRMbMvV9BQgN0qrFjlkzPQanI9nuaGCokVK2LV1Y2egyY1aFQGxjM9I7RBBAgyGEJtpKHP0lUySSeWCpyKHMT2pmM/vyP55u2Rw5lcSeabAfgiG5TPDX3uP3QvcoSipJXQByUCjS4C8VXqxEEZOJxzmJoyogFNJBRsCJs2XmoWWrWFqTsnbwtSn43gNFTTob9/SEpaPJNhUBKDGoZGCMINxvBv8vuKbb//lg/sK0wfPgBica/QsSk5F3KK4Ui6Yw+uv4+DWEOFbhdPOnbY5PLFpzrZMhakeqomY0Vz0TO+elQGTWdCk1IYFAOaoZg0IJQhT+YreXF+yia+O1cgtGufjXxQw28f85RPXfd15zv13ABoD15kB7FKJ/7pbHKP6+9TgNgkVj68NeV8Tp24f7OOndCgJzR3RNJBPNFReCmstMVqvjjzBoeK4GOFoBN32CPxu+4TwwBDa4DJTe/OU9c9ku7EGyfOVxh+fw9g/AATxPqKTEXJKEdCIBkB4iBUlO6MjUrWi6M5Kz31YAqFsYaCeB0KJC5d1+foo3LQWSfRaDrwdAQrMEC27yDZXJf7TlOJ2Bczr1di3OWvZB6XrvvqPuWJPDk9dAHgm7LvuZJTEdKqO3J3XgostArEnvkqgUznx3PX7cSzz1FXZyvakTA4XVVMbCPFPK1cFj66S0WoqQI1XG2uoU7CMPquO2VaUDJFQMdVgXKD2bpz6ufzzxXbxszHQ9fGO/F7A998yBQG6cShE+P+Pk7t1FwfF1QHN1Eui1VapRxCdj8tCtI1bog1Fo011Sx9u3o6c9bufI6wAT26Av9xJ+WWpTKbbBPp3K/1LbC4Vuhv396RCbJw4untjxVPndj+dIB9dVD8z2dylZ+6vMeJwbYChHJkvHV2J3fdHsJPASeHhrXq6QheXu1nBhUr5u6ryT0I13BFKD01ViZ/n3oaziRG7c6Ayg7g1LPeztNdT36ueMqcN4XGv3finjfv+7I/kMJ4d046MUanOA1QtMH1kLlfFasm99NiutSw63yNDeH4zeL1Uu8XKHNfcThPSSNwchGMbgUETScwkCcK77pH2jsgrAssvVyB8FLJ7GrmwyD8eVqsHoY/FwIv9T7lPu9+Yf8/9+w4nS1ma78AAAAASUVORK5CYII=")',
  46.     tab    : 4,
  47.     theme  : 'Twilight',
  48.     type   : 'tiled',
  49.     wrap   : false,
  50.  
  51.     // toggle buttons
  52.     enableCodeWrap  : true,
  53.     enableMonospace : true,
  54.     // diff toggle + accordion mode
  55.     modeDiffToggle  : '1',
  56.  
  57.     // internal variables
  58.     date         : 0,
  59.     version      : 0,
  60.     rawCss       : '',
  61.     themeCss     : '',
  62.     processedCss : '',
  63.     last         : {}
  64.  
  65.   },
  66.  
  67.   // extract style & theme name
  68.   regex = /\/\*! [^\*]+ \*\//,
  69.   // "themes/" prefix not included here
  70.   themes = {
  71.     'Ambiance' : 'ambiance.min.css',
  72.     'Chaos' : 'chaos.min.css',
  73.     'Clouds Midnight' : 'clouds-midnight.min.css',
  74.     'Cobalt' : 'cobalt.min.css',
  75.     'Idle Fingers' : 'idle-fingers.min.css',
  76.     'Kr Theme' : 'kr-theme.min.css',
  77.     'Merbivore' : 'merbivore.min.css',
  78.     'Merbivore Soft' : 'merbivore-soft.min.css',
  79.     'Mono Industrial' : 'mono-industrial.min.css',
  80.     'Mono Industrial Clear' : 'mono-industrial-clear.min.css',
  81.     'Monokai' : 'monokai.min.css',
  82.     'Obsidian' : 'obsidian.min.css',
  83.     'Pastel on Dark' : 'pastel-on-dark.min.css',
  84.     'Solarized Dark' : 'solarized-dark.min.css',
  85.     'Terminal' : 'terminal.min.css',
  86.     'Tomorrow Night' : 'tomorrow-night.min.css',
  87.     'Tomorrow Night Blue' : 'tomorrow-night-blue.min.css',
  88.     'Tomorrow Night Bright' : 'tomorrow-night-bright.min.css',
  89.     'Tomorrow Night Eigthies' : 'tomorrow-night-eighties.min.css',
  90.     'Twilight' : 'twilight.min.css',
  91.     'Vibrant Ink' : 'vibrant-ink.min.css'
  92.   },
  93.  
  94.   type = {
  95.     tiled : `
  96.       background-repeat: repeat !important;
  97.       background-size: auto !important;
  98.       background-position: left top !important;
  99.     `,
  100.     fit : `
  101.       background-repeat: no-repeat !important;
  102.       background-size: cover !important;
  103.       background-position: center top !important;
  104.     `
  105.   },
  106.  
  107.   wrapCss = {
  108.     wrapped : `
  109.       white-space: pre-wrap !important;
  110.       word-break: break-all !important;
  111.       overflow-wrap: break-word !important;
  112.       display: block !important;
  113.     `,
  114.     unwrap  : `
  115.       white-space: pre !important;
  116.       word-break: normal !important;
  117.       display: block !important;
  118.     `
  119.   },
  120.  
  121.   // https://github.com/StylishThemes/GitHub-code-wrap/blob/master/github-code-wrap.css
  122.   wrapCodeCss = `
  123.     /* GitHub: Enable wrapping of long code lines */
  124.       .blob-code-inner,
  125.       .markdown-body pre > code,
  126.       .markdown-body .highlight > pre { ${wrapCss.wrapped} }
  127.       td.blob-code-inner {
  128.         display: table-cell !important;
  129.       }
  130.   `,
  131.  
  132.   wrapIcon = `
  133.     <svg xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768">
  134.       <path d="M544.5 352.5q52.5 0 90 37.5t37.5 90-37.5 90-90 37.5H480V672l-96-96 96-96v64.5h72q25.5 0 45-19.5t19.5-45-19.5-45-45-19.5H127.5v-63h417zm96-192v63h-513v-63h513zm-513 447v-63h192v63h-192z"/>
  135.     </svg>
  136.   `,
  137.  
  138.   monospaceIcon = `
  139.     <svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
  140.       <path d="M5.91 7.31v8.41c0 .66.05 1.09.14 1.31.09.21.23.37.41.48.18.11.52.16 1.02.16v.41H2.41v-.41c.5 0 .86-.05 1.03-.14.16-.11.3-.27.41-.5.11-.23.16-.66.16-1.3V11.7c0-1.14-.04-1.87-.11-2.2-.04-.26-.13-.42-.24-.53-.11-.1-.27-.14-.46-.14-.21 0-.48.05-.77.18l-.18-.41 3.14-1.28h.52v-.01zm-.95-5.46c.32 0 .59.11.82.34.23.23.34.5.34.82 0 .32-.11.59-.34.82-.23.22-.51.34-.82.34-.32 0-.59-.11-.82-.34s-.36-.5-.36-.82c0-.32.11-.59.34-.82.24-.23.51-.34.84-.34zm19.636 19.006h-3.39v-1.64h5.39v9.8h3.43v1.66h-9.18v-1.66h3.77v-8.16h-.02zm.7-6.44c.21 0 .43.04.63.13.18.09.36.2.5.34s.25.3.34.5c.07.18.13.39.13.61 0 .22-.04.41-.13.61s-.19.36-.34.5-.3.25-.5.32c-.2.09-.39.13-.62.13-.21 0-.43-.04-.61-.12-.19-.07-.35-.19-.5-.34-.14-.14-.25-.3-.34-.5-.07-.2-.13-.39-.13-.61s.04-.43.13-.61c.07-.18.2-.36.34-.5s.31-.25.5-.34c.17-.09.39-.12.6-.12zM2 30L27.82 2H30L4.14 30H2z"/>
  141.     </svg>
  142.   `,
  143.  
  144.   fileIcon = `
  145.     <svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="10" height="6.5" viewBox="0 0 10 6.5">
  146.       <path d="M0 1.497L1.504 0l3.49 3.76L8.505.016 10 1.52 4.988 6.51 0 1.496z"/>
  147.     </svg>
  148.   `,
  149.  
  150.   $style = make({
  151.     el: 'style',
  152.     cl4ss: 'ghd-style',
  153.     // add style tag to head
  154.     appendTo: 'head'
  155.   });
  156.  
  157.   let timer, picker, // jscolor picker
  158.   isInitialized = false,
  159.   // prevent mutationObserver from going nuts
  160.   isUpdating = false,
  161.   // set when css code to test is pasted into the settings panel
  162.   testing = false,
  163.   //
  164.   debug = GM_getValue('debug', false),
  165.   data = {};
  166.  
  167.   function updatePanel() {
  168.     if (!isInitialized) { return; }
  169.     // prevent multiple change events from processing
  170.     isUpdating = true;
  171.  
  172.     let temp, el,
  173.       body = $('body'),
  174.       panel = $('#ghd-settings-inner');
  175.  
  176.     $('.ghd-attach', panel).value = data.attach || defaults.attach;
  177.     $('.ghd-font', panel).value = data.font || defaults.font;
  178.     $('.ghd-image', panel).value = data.image || defaults.image;
  179.     $('.ghd-tab', panel).value = data.tab || defaults.tab;
  180.     $('.ghd-theme', panel).value = data.theme || defaults.theme;
  181.     $('.ghd-type', panel).value = data.type || defaults.type;
  182.  
  183.     $('.ghd-enable', panel).checked = isBool('enable');
  184.     $('.ghd-wrap', panel).checked = isBool('wrap');
  185.  
  186.     $('.ghd-codewrap-checkbox', panel).checked = isBool('enableCodeWrap');
  187.     $('.ghd-monospace-checkbox', panel).checked = isBool('enableMonospace');
  188.  
  189.     el = $('.ghd-diff-select', panel);
  190.     temp = '' + (data.modeDiffToggle || defaults.modeDiffToggle);
  191.     el.value = temp;
  192.     toggleClass(el, 'enabled', temp !== '0');
  193.  
  194.     // update version tooltip
  195.     $('.ghd-versions', panel).setAttribute('aria-label', getVersionTooltip());
  196.  
  197.     temp = data.color || defaults.color;
  198.     $('.ghd-color').value = temp;
  199.     // update swatch color & color picker value
  200.     $('#ghd-swatch').style.backgroundColor = temp;
  201.  
  202.     if (picker) {
  203.       picker.fromString(temp);
  204.     }
  205.     $style.disabled = !data.enable;
  206.  
  207.     toggleClass(body, 'ghd-disabled', !data.enable);
  208.     toggleClass(body, 'nowrap', !data.wrap);
  209.  
  210.     if (data.enableCodeWrap !== data.lastCW ||
  211.       data.enableMonospace !== data.lastMS ||
  212.       data.modeDiffToggle !== data.lastDT) {
  213.  
  214.       data.lastCW = data.enableCodeWrap;
  215.       data.lastMS = data.enableMonospace;
  216.       data.lastDT = data.modeDiffToggle;
  217.       updateToggles();
  218.     }
  219.  
  220.     isUpdating = false;
  221.   }
  222.  
  223.   function getStoredValues(init) {
  224.     data = GM_getValue('data', defaults);
  225.     if (debug) {
  226.       if (init) {
  227.         console.log('GitHub-Dark Script initializing!');
  228.       }
  229.       console.log('Retrieved stored values', data);
  230.     }
  231.   }
  232.  
  233.   function setStoredValues(reset) {
  234.     data.processedCss = $style.textContent;
  235.     GM_setValue('data', reset ? defaults : data);
  236.     updatePanel();
  237.     if (debug) {
  238.       console.log((reset ? 'Resetting' : 'Saving') + ' current values', data);
  239.     }
  240.   }
  241.  
  242.   // convert version "1.2.3" into "001002003" for easier comparison
  243.   function convertVersion(val) {
  244.     let index,
  245.       parts = val ? val.split('.') : '',
  246.       str = '',
  247.       len = parts.length;
  248.     for (index = 0; index < len; index++) {
  249.       str += ('000' + parts[index]).slice(-3);
  250.     }
  251.     if (debug) {
  252.       console.log(`Converted version "${val}" to "${str}" for easy comparison`);
  253.     }
  254.     return val ? str : val;
  255.   }
  256.  
  257.   function checkVersion() {
  258.     if (debug) {
  259.       console.log('Fetching package.json');
  260.     }
  261.     GM_xmlhttpRequest({
  262.       method : 'GET',
  263.       url : root + 'package.json',
  264.       onload : response => {
  265.         let pkg = JSON.parse(response.responseText);
  266.  
  267.         // save last loaded date, so package.json is only loaded once a day
  268.         data.date = new Date().getTime();
  269.  
  270.         let ver = convertVersion(pkg.version);
  271.         // if new available, load it & parse
  272.         if (ver > data.version) {
  273.           if (data.version !== 0 && debug) {
  274.             console.log('Updating from ${data.version} to ${ver}');
  275.           }
  276.           data.version = ver;
  277.           fetchAndApplyStyle();
  278.         } else {
  279.           addSavedStyle();
  280.         }
  281.         // save new date/version
  282.         GM_setValue('data', data);
  283.       }
  284.     });
  285.   }
  286.  
  287.   function fetchAndApplyStyle() {
  288.     if (debug) {
  289.       console.log(`Fetching ${root}github-dark.css`);
  290.     }
  291.     GM_xmlhttpRequest({
  292.       method : 'GET',
  293.       url : root + 'github-dark.css',
  294.       onload : response => {
  295.         data.rawCss = response.responseText;
  296.         processStyle();
  297.       }
  298.     });
  299.   }
  300.  
  301.   // load syntax highlighting theme
  302.   function fetchAndApplyTheme() {
  303.     if (!data.enable) {
  304.       if (debug) {
  305.         console.log('Disabled: stop theme processing');
  306.       }
  307.       return;
  308.     }
  309.     if (data.lastTheme === data.theme && data.themeCss !== '') {
  310.       return applyTheme();
  311.     }
  312.     let name = data.theme || 'Twilight',
  313.       themeUrl = root + 'themes/' + themes[name];
  314.     if (debug) {
  315.       console.log(`Fetching ${name} theme`, themeUrl);
  316.     }
  317.     GM_xmlhttpRequest({
  318.       method : 'GET',
  319.       url : themeUrl,
  320.       onload : response => {
  321.         let theme = response.responseText;
  322.         if (response.status === 200 && theme) {
  323.           data.themeCss = theme;
  324.           data.lastTheme = name;
  325.           applyTheme();
  326.         } else {
  327.           throw Error(`Failed to load theme file: "${theme}"`);
  328.         }
  329.       }
  330.     });
  331.   }
  332.  
  333.   function applyTheme() {
  334.     if (debug) {
  335.       console.log('Adding syntax theme "' + (data.themeCss || '').match(regex) + '" to css');
  336.     }
  337.     let css = data.processedCss || '';
  338.     css = css.replace('/*[[syntax-theme]]*/', data.themeCss || '');
  339.     applyStyle(css);
  340.     setStoredValues();
  341.     isUpdating = false;
  342.   }
  343.  
  344.   function processStyle() {
  345.     let url = /^url/.test(data.image || '') ? data.image :
  346.       (data.image === 'none' ? 'none' : 'url("' + data.image + '")');
  347.     if (!data.enable) {
  348.       if (debug) {
  349.         console.log('Disabled: stop processing');
  350.       }
  351.       return;
  352.     }
  353.     if (debug) {
  354.       console.log('Processing set styles');
  355.     }
  356.  
  357.     let processed = (data.rawCss || '')
  358.       // remove moz-document wrapper
  359.       .replace(/@-moz-document regexp\((.*)\) \{(\n|\r)+/, '')
  360.       // replace background image; if no 'url' at start, then use 'none'
  361.       .replace(/\/\*\[\[bg-choice\]\]\*\/ url\(.*\)/, url)
  362.       // Add tiled or fit window size css
  363.       .replace('/*[[bg-options]]*/', type[data.type || 'tiled'])
  364.       // set scroll or fixed background image
  365.       .replace('/*[[bg-attachment]]*/ fixed', data.attach || 'scroll')
  366.       // replace base-color
  367.       .replace(/\/\*\[\[base-color\]\]\*\/ #\w{3,6}/g, data.color || '#4183C4')
  368.       // add font choice
  369.       .replace('/*[[font-choice]]*/', data.font || 'Menlo')
  370.       // add tab size
  371.       .replace(/\/\*\[\[tab-size\]\]\*\/ \d+/g, data.tab || 4)
  372.       // code wrap css
  373.       .replace('/*[[code-wrap]]*/', data.wrap ? wrapCodeCss : '')
  374.       // remove default syntax
  375.       .replace(/\s+\/\* grunt build - remove to end of file(.*(\n|\r))+\}$/m, '');
  376.  
  377.     // see https://github.com/StylishThemes/GitHub-Dark/issues/275
  378.     if (/firefox/i.test(navigator.userAgent)) {
  379.       processed = processed
  380.         // line in github-dark.css = "select, input:not(.btn-link), textarea"
  381.         .replace('select, input:not(.btn-link)', 'input { color:#eee !important; } select')
  382.         .replace(/input\[type=\"checkbox\"\][\s\S]+?}/gm, '');
  383.     }
  384.     data.processedCss = processed;
  385.     fetchAndApplyTheme();
  386.   }
  387.  
  388.   function applyStyle(css) {
  389.     if (debug) {
  390.       console.log('Applying style', '"' + (css || '').match(regex) + '"');
  391.     }
  392.     $style.textContent = css || '';
  393.   }
  394.  
  395.   function addSavedStyle() {
  396.     if (debug) {
  397.       console.log('Adding previously saved style');
  398.     }
  399.     // apply already processed css to prevent FOUC
  400.     $style.textContent = data.processedCss;
  401.   }
  402.  
  403.   function updateStyle() {
  404.     isUpdating = true;
  405.  
  406.     if (debug) {
  407.       console.log('Updating user settings');
  408.     }
  409.  
  410.     let body = $('body'),
  411.       panel = $('#ghd-settings-inner');
  412.  
  413.     data.attach = $('.ghd-attach', panel).value;
  414.     // get hex value directly
  415.     data.color = picker.toHEXString();
  416.     data.enable = $('.ghd-enable', panel).checked;
  417.     data.font   = $('.ghd-font', panel).value;
  418.     data.image  = $('.ghd-image', panel).value;
  419.     data.tab    = $('.ghd-tab', panel).value;
  420.     data.theme  = $('.ghd-theme', panel).value;
  421.     data.type   = $('.ghd-type', panel).value;
  422.     data.wrap   = $('.ghd-wrap', panel).checked;
  423.  
  424.     data.enableCodeWrap  = $('.ghd-codewrap-checkbox', panel).checked;
  425.     data.enableMonospace = $('.ghd-monospace-checkbox', panel).checked;
  426.  
  427.     data.modeDiffToggle  = $('.ghd-diff-select', panel).value;
  428.  
  429.     $style.disabled = !data.enable;
  430.  
  431.     toggleClass(body, 'ghd-disabled', !data.enable);
  432.     toggleClass(body, 'nowrap', !data.wrap);
  433.  
  434.     if (testing) {
  435.       processStyle();
  436.       testing = false;
  437.     } else {
  438.       fetchAndApplyStyle();
  439.     }
  440.     isUpdating = false;
  441.   }
  442.  
  443.   // user can force GitHub-dark update
  444.   function forceUpdate(css) {
  445.     if (css) {
  446.       // add raw css directly for style testing
  447.       data.rawCss = css;
  448.       processStyle();
  449.     } else {
  450.       // clear saved date
  451.       data.version = 0;
  452.       data.themeCss = '';
  453.       GM_setValue('data', data);
  454.       closePanel('forced');
  455.     }
  456.   }
  457.  
  458.   function getVersionTooltip() {
  459.     let indx,
  460.       ver = [],
  461.       // convert stored css version from "001014049" into "1.14.49" for tooltip
  462.       parts = String(data.version).match(/\d{3}/g),
  463.       len = parts && parts.length || 0;
  464.     for (indx = 0; indx < len; indx++) {
  465.       ver.push(parseInt(parts[indx], 10));
  466.     }
  467.     return `Script v${version}\nCSS ${(ver.length ? 'v' + ver.join('.') : 'unknown')}`;
  468.   }
  469.  
  470.   function buildSettings() {
  471.     if (debug) {
  472.       console.log('Adding settings panel & GitHub Dark link to profile dropdown');
  473.     }
  474.     // Script-specific CSS
  475.     GM_addStyle(`
  476.       #ghd-menu:hover { cursor:pointer }
  477.       #ghd-settings { position:fixed; z-index:65535; top:0; bottom:0; left:0; right:0; opacity:0; visibility:hidden; }
  478.       #ghd-settings.in { opacity:1; visibility:visible; background:rgba(0,0,0,.5); }
  479.       #ghd-settings-inner { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:25rem; box-shadow:0 .5rem 1rem #111; color:#c0c0c0 }
  480.       #ghd-settings label { margin-left:.5rem; position:relative; top:-1px }
  481.       #ghd-settings-close { height:1rem; width:1rem; fill:#666; float:right; cursor:pointer }
  482.       #ghd-settings-close:hover { fill:#ccc }
  483.       #ghd-settings .ghd-right { float:right; padding:5px; }
  484.       #ghd-settings p { line-height:22px; }
  485.       #ghd-settings .form-select, #ghd-settings input[type="text"] { height:30px; min-height:30px; }
  486.       #ghd-swatch { width:25px; height:22px; display:inline-block; margin:3px 10px; border-radius:4px; }
  487.       #ghd-settings input, #ghd-settings select { border:#555 1px solid; }
  488.       #ghd-settings .ghd-attach, #ghd-settings .ghd-diff-select { padding-right:25px; }
  489.       #ghd-settings input[type="checkbox"] { margin-top:3px; width: 16px !important; height: 16px !important; border-radius: 3px !important; }
  490.       #ghd-settings .boxed-group-inner { padding:0; }
  491.       #ghd-settings .ghd-footer { padding:10px; border-top:#555 solid 1px; }
  492.       #ghd-settings .ghd-settings-wrapper { max-height:60vh; overflow-y:auto; padding:4px 10px; }
  493.       #ghd-settings .ghd-tab { width:5em; }
  494.       #ghd-settings .octicon { vertical-align:text-bottom !important; }
  495.       #ghd-settings .ghd-paste-area { position:absolute; bottom:50px; top:37px; left:2px; right:2px; width:396px !important; height:-moz-calc(100% - 85px); border-style:solid; z-index:0; }
  496.  
  497.       /* code wrap toggle: https://gist.github.com/silverwind/6c1701f56e62204cc42b
  498.       icons next to a pre */
  499.       .ghd-wrap-toggle { position:absolute; right:1.4em; margin-top:.2em; -moz-user-select:none; -webkit-user-select:none; cursor:pointer; z-index:20; }
  500.       /* file & diff code tables */
  501.       .ghd-wrap-table .blob-code-inner { white-space:pre-wrap !important; word-break:break-all !important; }
  502.       .ghd-unwrap-table .blob-code-inner { white-space:pre !important; word-break:normal !important; }
  503.       .ghd-wrap-toggle > *, .ghd-monospace > *, .ghd-file-toggle > * { pointer-events:none; vertical-align:middle !important; }
  504.       /* icons inside a wrapper immediatly around a pre */
  505.       .highlight > .ghd-wrap-toggle { right:.5em; top:.5em; margin-top:0; }
  506.       /* icons for non-syntax highlighted code blocks; see https://github.com/gjtorikian/html-proofer/blob/master/README.md */
  507.       .markdown-body:not(.comment-body) .ghd-wrap-toggle:not(:first-child) { right:3.4em; }
  508.       .ghd-wrap-toggle svg { height:1.25em; width:1.25em; fill:rgba(110,110,110,.4); }
  509.       /* wrap disabled (red) */
  510.       .ghd-wrap-toggle.unwrap:hover svg, .ghd-wrap-toggle:hover svg { fill:#8b0000; }
  511.       /* wrap enabled (green) */
  512.       body:not(.nowrap) .ghd-wrap-toggle:not(.unwrap):hover svg, .ghd-wrap-toggle.wrapped:hover svg { fill:#006400; }
  513.       .blob-wrapper, .markdown-body pre, .markdown-body .highlight { position:relative; }
  514.       /* monospace font toggle */
  515.       .ghd-monospace-font { font-family:"${data.font}", Menlo, Inconsolata, "Droid Mono", monospace !important; font-size:1em !important; }
  516.       /* file collapsed icon */
  517.       .ghd-file-collapsed > :not(.file-header) { display:none !important; }
  518.       .ghd-file-collapsed .ghd-file-toggle svg { -webkit-transform:rotate(90deg); transform:rotate(90deg); }
  519.     `);
  520.  
  521.     let panel, indx, theme, icon,
  522.       opts = '',
  523.       ver = getVersionTooltip(),
  524.       names = Object.keys(themes),
  525.       len = names.length;
  526.     for (indx = 0; indx < len; indx++) {
  527.       theme = names[indx];
  528.       opts += `<option value="${theme}">${theme}</option>`;
  529.     }
  530.  
  531.     // circle-question-mark icon
  532.     icon = `
  533.       <svg class="octicon" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 16 14">
  534.         <path d="M6 10h2v2H6V10z m4-3.5c0 2.14-2 2.5-2 2.5H6c0-0.55 0.45-1 1-1h0.5c0.28 0 0.5-0.22 0.5-0.5v-1c0-0.28-0.22-0.5-0.5-0.5h-1c-0.28 0-0.5 0.22-0.5 0.5v0.5H4c0-1.5 1.5-3 3-3s3 1 3 2.5zM7 2.3c3.14 0 5.7 2.56 5.7 5.7S10.14 13.7 7 13.7 1.3 11.14 1.3 8s2.56-5.7 5.7-5.7m0-1.3C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7S10.86 1 7 1z" />
  535.       </svg>
  536.     `;
  537.  
  538.     // Settings panel markup
  539.     panel = make({
  540.       el : 'div',
  541.       appendTo: 'body',
  542.       attr : { id: 'ghd-settings' },
  543.       html : `
  544.         <div id="ghd-settings-inner" class="boxed-group">
  545.           <h3>GitHub-Dark Settings
  546.             <a href="https://github.com/StylishThemes/GitHub-Dark-Script/wiki" class="tooltipped tooltipped-e" aria-label="See documentation">${icon}</a>
  547.             <svg id="ghd-settings-close" xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="160 160 608 608"><path d="M686.2 286.8L507.7 465.3l178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"/></svg>
  548.           </h3>
  549.           <div class="boxed-group-inner">
  550.             <form>
  551.               <div class="ghd-settings-wrapper">
  552.                 <p class="ghd-checkbox">
  553.                   <label>Enable GitHub-Dark<input class="ghd-enable ghd-right" type="checkbox"></label>
  554.                 </p>
  555.                 <p>
  556.                   <label>Color:</label>
  557.                   <input class="ghd-color ghd-right" type="text" value="#4183C4">
  558.                   <span id="ghd-swatch" class="ghd-right"></span>
  559.                 </p>
  560.                 <h4>Background</h4>
  561.                 <p>
  562.                   <label>Image:</label>
  563.                   <input class="ghd-image ghd-right" type="text">
  564.                   <a href="https://github.com/StylishThemes/GitHub-Dark/wiki/Image" class="tooltipped tooltipped-e" aria-label="Click to learn about GitHub\'s Content Security&#10;Policy and how to add a custom image">${icon}</a>
  565.                 </p>
  566.                 <p>
  567.                   <label>Image type:</label>
  568.                   <select class="ghd-type ghd-right form-select">
  569.                     <option value="tiled">Tiled</option>
  570.                     <option value="fit">Fit window</option>
  571.                   </select>
  572.                 </p>
  573.                 <p>
  574.                   <label>Image attachment:</label>
  575.                   <select class="ghd-attach ghd-right form-select">
  576.                     <option value="scroll">Scroll</option>
  577.                     <option value="fixed">Fixed</option>
  578.                   </select>
  579.                 </p>
  580.                 <h4>Code</h4>
  581.                 <p><label>Theme:</label> <select class="ghd-theme ghd-right form-select">${opts}</select></p>
  582.                 <p>
  583.                   <label>Font Name:</label> <input class="ghd-font ghd-right" type="text">
  584.                   <a href="http://www.cssfontstack.com/" class="tooltipped tooltipped-e" aria-label="Add a system installed (monospaced) font name;&#10;this script will not load external fonts!">${icon}</a>
  585.                 </p>
  586.                 <p>
  587.                   <label>Tab Size:</label> <input class="ghd-tab ghd-right" type="text">
  588.                 </p>
  589.                 <p class="ghd-checkbox">
  590.                   <label>Wrap<input class="ghd-wrap ghd-right" type="checkbox"></label>
  591.                 </p>
  592.                 <h4>Toggles</h4>
  593.                 <p class="ghd-checkbox">
  594.                   <label>Code Wrap<input class="ghd-codewrap-checkbox ghd-right" type="checkbox"></label>
  595.                 </p>
  596.                 <p class="ghd-checkbox">
  597.                   <label>Comment Monospace Font<input class="ghd-monospace-checkbox ghd-right" type="checkbox"></label>
  598.                 </p>
  599.                 <p class="ghd-range">
  600.                   <label>Diff File Collapse</label>
  601.                   <select class="ghd-diff-select ghd-right form-select">
  602.                     <option value="0">Disabled</option>
  603.                     <option value="1">Enabled</option>
  604.                     <option value="2">Accordion</option>
  605.                   </select>
  606.                 </p>
  607.               </div>
  608.               <div class="ghd-footer">
  609.                 <div class="btn-group">
  610.                   <a href="#" class="ghd-update btn btn-sm tooltipped tooltipped-n tooltipped-multiline" aria-label="Update style if the newest release is not loading; the page will reload!">Force Update Style</a>
  611.                   <a href="#" class="ghd-textarea-toggle btn btn-sm tooltipped tooltipped-n" aria-label="Paste CSS update">
  612.                     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16" fill="#eee">
  613.                       <path d="M15 11 1 11 8 3z"/>
  614.                     </svg>
  615.                   </a>
  616.                   <div class="ghd-paste-area-content" aria-hidden="true" style="display:none">
  617.                     <textarea class="ghd-paste-area" placeholder="Paste GitHub-Dark Style here!"></textarea>
  618.                   </div>
  619.                 </div>&nbsp;
  620.                 <a href="#" class="ghd-reset btn btn-sm btn-danger tooltipped tooltipped-n" aria-label="Reset to defaults;&#10;there is no undo!">Reset All Settings</a>
  621.                 <span class="ghd-versions ghd-right tooltipped tooltipped-n" aria-label="${ver}">
  622.                   <svg class="ghd-info" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24">
  623.                     <path fill="#444" d="M12,9c0.82,0,1.5-0.68,1.5-1.5S12.82,6,12,6s-1.5,0.68-1.5,1.5S11.18,9,12,9z M12,1.5 C6.211,1.5,1.5,6.211,1.5,12S6.211,22.5,12,22.5S22.5,17.789,22.5,12S17.789,1.5,12,1.5z M12,19.5c-4.148,0-7.5-3.352-7.5-7.5 S7.852,4.5,12,4.5s7.5,3.352,7.5,7.5S16.148,19.5,12,19.5z M13.5,12c0-0.75-0.75-1.5-1.5-1.5s-0.75,0-1.5,0S9,11.25,9,12h1.5 c0,0,0,3.75,0,4.5S11.25,18,12,18s0.75,0,1.5,0s1.5-0.75,1.5-1.5h-1.5C13.5,16.5,13.5,12.75,13.5,12z"/>
  624.                   </svg>
  625.                 </span>
  626.               </div>
  627.             </form>
  628.           </div>
  629.         </div>
  630.       `
  631.     });
  632.  
  633.     updateToggles();
  634.   }
  635.  
  636.   // Add code wrap toggle
  637.   function buildCodeWrap() {
  638.     // mutation events happen quick, so we still add an update flag
  639.     isUpdating = true;
  640.     let icon = make({
  641.       el    : 'div',
  642.       cl4ss : 'ghd-wrap-toggle tooltipped tooltipped-w',
  643.       attr  : { 'aria-label' : 'Toggle code wrap' },
  644.       html  : wrapIcon
  645.     });
  646.     $$('.blob-wrapper').forEach(el => {
  647.       el.insertBefore(icon.cloneNode(true), el.childNodes[0]);
  648.     });
  649.     $$('.markdown-body pre').forEach(el => {
  650.       el.parentNode.insertBefore(icon.cloneNode(true), el);
  651.     });
  652.     isUpdating = false;
  653.   }
  654.  
  655.   // Add monospace font toggle
  656.   function addMonospaceToggle() {
  657.     isUpdating = true;
  658.     let button = make({
  659.       el    : 'button',
  660.       cl4ss : 'ghd-monospace toolbar-item tooltipped tooltipped-n',
  661.       attr  : {
  662.         'type' : 'button',
  663.         'aria-label' : 'Toggle monospaced font',
  664.         'tabindex' : '-1'
  665.       },
  666.       html  : monospaceIcon
  667.     });
  668.     $$('.toolbar-commenting').forEach(el => {
  669.       if (!$('.ghd-monospace', el)) {
  670.         // prepend
  671.         el.insertBefore(button.cloneNode(true), el.childNodes[0]);
  672.       }
  673.     });
  674.     isUpdating = false;
  675.   }
  676.  
  677.   // Add file diffs toggle
  678.   function addFileToggle() {
  679.     isUpdating = true;
  680.     let firstButton,
  681.       button = make({
  682.         el    : 'button',
  683.         cl4ss : 'ghd-file-toggle btn btn-sm tooltipped tooltipped-n',
  684.         attr  : {
  685.           'type' : 'button',
  686.           'aria-label' : 'Click to Expand or Collapse file',
  687.           'tabindex' : '-1'
  688.         },
  689.         html  : fileIcon
  690.       });
  691.     $$('#files .file-actions').forEach(el => {
  692.       if (!$('.ghd-file-toggle', el)) {
  693.         el.appendChild(button.cloneNode(true));
  694.       }
  695.     });
  696.     firstButton = $('.ghd-file-toggle');
  697.     // accordion mode = start with all but first entry collapsed
  698.     if (firstButton && data.modeDiffToggle === '2') {
  699.       toggleFile({
  700.         target: firstButton
  701.       }, true);
  702.     }
  703.     isUpdating = false;
  704.   }
  705.  
  706.   // Add toggle buttons after page updates
  707.   function updateToggles() {
  708.     if (data.enableCodeWrap) {
  709.       buildCodeWrap();
  710.     } else {
  711.       removeAll('.ghd-wrap-toggle');
  712.       toggleClass($$('.ghd-file-collapsed'), 'ghd-file-collapsed', false);
  713.     }
  714.     if (data.enableMonospace) {
  715.       addMonospaceToggle();
  716.     } else {
  717.       removeAll('.ghd-monospace');
  718.       toggleClass($$('.ghd-monospace-font'), 'ghd-monospace-font', false);
  719.     }
  720.     if (data.modeDiffToggle !== '0') {
  721.       addFileToggle();
  722.     } else {
  723.       removeAll('.ghd-file-toggle');
  724.       toggleClass($$('.ghd-file-collapsed'), 'ghd-file-collapsed', false);
  725.     }
  726.   }
  727.  
  728.   function makeRow(vals, str) {
  729.     return make({
  730.       el : 'tr',
  731.       cl4ss : 'ghd-shortcut',
  732.       html : `<td class="keys"><kbd>${vals[0]}</kbd> <kbd>${vals[1]}</kbd></td><td>${str}</td>`
  733.     });
  734.   }
  735.  
  736.   // add keyboard shortcut to help menu (press "?")
  737.   function buildShortcut() {
  738.     let row,
  739.       el = $('.keyboard-mappings tbody');
  740.     if (el && !$('.ghd-shortcut')) {
  741.       row = makeRow(keyboardOpen.split('+'), 'GitHub-Dark: open settings');
  742.       el.appendChild(row);
  743.       row = makeRow(keyboardToggle.split('+'), 'GitHub-Dark: toggle style');
  744.       el.appendChild(row);
  745.     }
  746.   }
  747.  
  748.   function toggleCodeWrap(el) {
  749.     let css,
  750.       overallWrap = data.wrap,
  751.       code = next(el, '.highlight, .diff-table, code, pre'),
  752.       tmp = code ? next(code, 'code') : '';
  753.     if (tmp) {
  754.       // find code element
  755.       code = tmp;
  756.     }
  757.     if (!code) {
  758.       if (debug) {
  759.         console.log('Code wrap icon associated code not found', el);
  760.       }
  761.       return;
  762.     }
  763.     // code with line numbers
  764.     if (code.nodeName === 'TABLE') {
  765.       if (code.className.indexOf('ghd-') < 0) {
  766.         css = !overallWrap;
  767.       } else {
  768.         css = code.classList.contains('ghd-unwrap-table');
  769.       }
  770.       toggleClass(code, 'ghd-wrap-table', css);
  771.       toggleClass(code, 'ghd-unwrap-table', !css);
  772.       toggleClass(el, 'wrapped', css);
  773.       toggleClass(el, 'unwrap', !css);
  774.     } else {
  775.       css = (code.getAttribute('style') || '').trim();
  776.       if (css === '') {
  777.         css = wrapCss[overallWrap ? 'unwrap' : 'wrapped'];
  778.       } else {
  779.         css = wrapCss[css === wrapCss.wrapped ? 'unwrap' : 'wrapped'];
  780.       }
  781.       code.setAttribute('style', css);
  782.       toggleClass(el, 'wrapped', css === wrapCss.wrapped);
  783.       toggleClass(el, 'unwrap', css === wrapCss.unwrap);
  784.     }
  785.   }
  786.  
  787.   function toggleMonospace(el) {
  788.     let tmp = closest(el, '.previewable-comment-form'),
  789.       // single comment
  790.       textarea = $('.comment-form-textarea', tmp);
  791.     if (textarea) {
  792.       toggleClass(textarea, 'ghd-monospace-font');
  793.       textarea.focus();
  794.       tmp = textarea.classList.contains('ghd-monospace-font');
  795.       toggleClass(el, 'ghd-icon-active', tmp);
  796.     }
  797.   }
  798.  
  799.   function toggleSibs(target, state) {
  800.     let el,
  801.       isCollapsed = state || target.classList.contains('ghd-file-collapsed'),
  802.       toggles = document.querySelectorAll('.file'),
  803.       indx = toggles.length;
  804.     while (indx--) {
  805.       el = toggles[indx];
  806.       if (el !== target) {
  807.         el.classList[isCollapsed ? 'add' : 'remove']('ghd-file-collapsed');
  808.       }
  809.     }
  810.   }
  811.  
  812.   function toggleFile(event, init) {
  813.     isUpdating = true;
  814.     let el = closest(event.target, '.file');
  815.     if (data.modeDiffToggle === '2') {
  816.       if (!init) {
  817.         el.classList.toggle('ghd-file-collapsed');
  818.       }
  819.       toggleSibs(el, true);
  820.     } else {
  821.       el.classList.toggle('ghd-file-collapsed');
  822.       // shift+click toggle all files!
  823.       if (event.shiftKey) {
  824.         toggleSibs(el);
  825.       }
  826.     }
  827.     isUpdating = false;
  828.   }
  829.  
  830.   function bindEvents() {
  831.     let el, menu, lastKey,
  832.       panel = $('#ghd-settings-inner'),
  833.       swatch = $('#ghd-swatch', panel);
  834.  
  835.     // finish initialization
  836.     $('#ghd-settings-inner .ghd-enable').checked = data.enable;
  837.     toggleClass($('body'), 'ghd-disabled', !data.enable);
  838.  
  839.     // Create our menu entry
  840.     menu = make({
  841.       el : 'a',
  842.       cl4ss : 'dropdown-item',
  843.       html : 'GitHub Dark Settings',
  844.       attr : { id : 'ghd-menu' }
  845.     });
  846.  
  847.     el = $$('.header .dropdown-item[href="/settings/profile"], .header .dropdown-item[data-ga-click*="go to profile"]');
  848.     // get last found item - gists only have the "go to profile" item; GitHub has both
  849.     el = el[el.length - 1];
  850.     if (el) {
  851.       // insert after
  852.       el.parentNode.insertBefore(menu, el.nextSibling);
  853.       on($('#ghd-menu'), 'click', () => {
  854.         openPanel();
  855.       });
  856.     }
  857.  
  858.     on(document, 'keypress keydown', event => {
  859.       clearTimeout(timer);
  860.       // use "g+o" to open up ghd options panel
  861.       let openKeys = keyboardOpen.split('+'),
  862.         toggleKeys = keyboardToggle.split('+'),
  863.         key = String.fromCharCode(event.which).toLowerCase(),
  864.         panelVisible = $('#ghd-settings').classList.contains('in');
  865.  
  866.       // press escape to close the panel
  867.       if (event.which === 27 && panelVisible) {
  868.         closePanel();
  869.         return;
  870.       }
  871.       // use event.which from keypress for shortcuts
  872.       // prevent opening panel while typing "go" in comments
  873.       if (event.type === 'keydown' || /(input|textarea)/i.test(document.activeElement.nodeName)) {
  874.         return;
  875.       }
  876.       if (lastKey === openKeys[0] && key === openKeys[1]) {
  877.         if (panelVisible) {
  878.           closePanel();
  879.         } else {
  880.           openPanel();
  881.         }
  882.       }
  883.       if (lastKey === toggleKeys[0] && key === toggleKeys[1]) {
  884.         toggleStyle();
  885.       }
  886.       lastKey = key;
  887.       timer = setTimeout(() => {
  888.         lastKey = null;
  889.       }, keyboardDelay);
  890.  
  891.       // add shortcut to help menu
  892.       if (key === '?') {
  893.         // table doesn't exist until user presses "?"
  894.         setTimeout(() => {
  895.           buildShortcut();
  896.         }, 300);
  897.       }
  898.     });
  899.  
  900.     // add ghd-settings panel bindings
  901.     on($$('#ghd-settings, #ghd-settings-close'), 'click keyup', event => {
  902.       // press escape to close settings
  903.       if (event.type === 'keyup' && event.which !== 27) {
  904.         return;
  905.       }
  906.       closePanel();
  907.     });
  908.  
  909.     on(panel, 'click', event => {
  910.       event.stopPropagation();
  911.     });
  912.  
  913.     on($('.ghd-reset', panel), 'click', event => {
  914.       event.preventDefault();
  915.       isUpdating = true;
  916.       // pass true to reset values
  917.       setStoredValues(true);
  918.       // add reset values back to data
  919.       getStoredValues();
  920.       // add reset values to panel
  921.       updatePanel();
  922.       // update style
  923.       updateStyle();
  924.     });
  925.  
  926.     on($$('input[type="text"]', panel), 'focus', function() {
  927.       // select all text when focused
  928.       this.select();
  929.     });
  930.  
  931.     on($$('select, input', panel), 'change', () => {
  932.       if (!isUpdating) {
  933.         updateStyle();
  934.       }
  935.     });
  936.  
  937.     on($('.ghd-update', panel), 'click', event => {
  938.       event.preventDefault();
  939.       forceUpdate();
  940.     });
  941.  
  942.     on($('.ghd-textarea-toggle', panel), 'click', function(event) {
  943.       event.preventDefault();
  944.       let hidden, el;
  945.       this.classList.remove('selected');
  946.       el = next(this, '.ghd-paste-area-content');
  947.       if (el) {
  948.         hidden = el.style.display === 'none';
  949.         el.style.display = hidden ? '' : 'none';
  950.         if (el.style.display !== 'none') {
  951.           el.classList.add('selected');
  952.           el = $('textarea', el);
  953.           el.focus();
  954.           el.select();
  955.         }
  956.       }
  957.       return false;
  958.     });
  959.  
  960.     on($('.ghd-paste-area-content', panel), 'paste', event => {
  961.       let toggle = $('.ghd-textarea-toggle', panel),
  962.         textarea = event.target;
  963.       setTimeout(() => {
  964.         textarea.parentNode.style.display = 'none';
  965.         toggle.classList.remove('selected');
  966.         testing = true;
  967.         forceUpdate(textarea.value);
  968.       }, 200);
  969.     });
  970.  
  971.     // Toggles
  972.     on($('body'), 'click', event => {
  973.       let target = event.target;
  974.       if (data.enableCodeWrap && target.classList.contains('ghd-wrap-toggle')) {
  975.         // **** CODE WRAP TOGGLE ****
  976.         event.stopPropagation();
  977.         toggleCodeWrap(target);
  978.       } else if (data.enableMonospace && target.classList.contains('ghd-monospace')) {
  979.         // **** MONOSPACE FONT TOGGLE ****
  980.         event.stopPropagation();
  981.         toggleMonospace(target);
  982.         return false;
  983.       } else if (data.modeDiffToggle !== '0' && target.classList.contains('ghd-file-toggle')) {
  984.         // **** CODE DIFF COLLAPSE TOGGLE ****
  985.         event.stopPropagation();
  986.         toggleFile(event);
  987.       }
  988.     });
  989.  
  990.     // style color picker
  991.     picker = new jscolor($('.ghd-color', panel));
  992.     picker.zIndex = 65536;
  993.     picker.hash = true;
  994.     picker.backgroundColor = '#333';
  995.     picker.padding = 0;
  996.     picker.borderWidth = 0;
  997.     picker.borderColor = '#444';
  998.     picker.onFineChange = () => {
  999.       swatch.style.backgroundColor = '#' + picker;
  1000.     };
  1001.   }
  1002.  
  1003.   function openPanel() {
  1004.     $('.modal-backdrop').click();
  1005.     updatePanel();
  1006.     $('#ghd-settings').classList.add('in');
  1007.   }
  1008.  
  1009.   function closePanel(flag) {
  1010.     $('#ghd-settings').classList.remove('in');
  1011.     picker.hide();
  1012.  
  1013.     if (flag === 'forced') {
  1014.       // forced update; partial re-initialization
  1015.       init();
  1016.     } else {
  1017.       // apply changes when the panel is closed
  1018.       updateStyle();
  1019.     }
  1020.   }
  1021.  
  1022.   function toggleStyle() {
  1023.     let isEnabled = !data.enable;
  1024.     data.enable = isEnabled;
  1025.     $('#ghd-settings-inner .ghd-enable').checked = isEnabled;
  1026.     // add processedCss back into style (emptied when disabled)
  1027.     if (isEnabled) {
  1028.       // data.processedCss is empty when ghd is disabled on init
  1029.       if (!data.processedCss) {
  1030.         processStyle();
  1031.       } else {
  1032.         addSavedStyle();
  1033.       }
  1034.     }
  1035.     $style.disabled = !isEnabled;
  1036.   }
  1037.  
  1038.   function init() {
  1039.     getStoredValues(true);
  1040.  
  1041.     $style.disabled = !data.enable;
  1042.     data.lastTheme = data.theme;
  1043.     data.lastCW = data.enableCodeWrap;
  1044.     data.lastMS = data.enableMonospace;
  1045.     data.lastDT = data.modeDiffToggle;
  1046.  
  1047.     // only load package.json once a day, or after a forced update
  1048.     if ((new Date().getTime() > data.date + delay) || data.version === 0) {
  1049.       // get package.json from GitHub-Dark & compare versions
  1050.       // load new script if a newer one is available
  1051.       checkVersion();
  1052.     } else {
  1053.       addSavedStyle();
  1054.     }
  1055.   }
  1056.  
  1057.   // add style at document-start
  1058.   init();
  1059.  
  1060.   on(document, 'DOMContentLoaded', () => {
  1061.     // add panel even if you're not logged in - open panel using keyboard shortcut
  1062.     buildSettings();
  1063.     // add event binding on document ready
  1064.     bindEvents();
  1065.  
  1066.     $$('#js-repo-pjax-container, #js-pjax-container, .js-contribution-activity').forEach(target => {
  1067.       new MutationObserver(mutations => {
  1068.         mutations.forEach(mutation => {
  1069.           // preform checks before adding code wrap to minimize function calls
  1070.           if (!(isUpdating || $$('.ghd-wrap-toggle').length) &&
  1071.             mutation.target === target) {
  1072.             updateToggles();
  1073.           }
  1074.         });
  1075.       }).observe(target, {
  1076.         childList: true,
  1077.         subtree: true
  1078.       });
  1079.     });
  1080.  
  1081.     isInitialized = true;
  1082.   });
  1083.  
  1084.   /* utility functions */
  1085.   function isBool(name) {
  1086.     let val = data[name];
  1087.     return typeof val === 'boolean' ? val : defaults[name];
  1088.   }
  1089.   function $(str, el) {
  1090.     return (el || document).querySelector(str);
  1091.   }
  1092.   function $$(str, el) {
  1093.     return Array.from((el || document).querySelectorAll(str));
  1094.   }
  1095.   function next(el, selector) {
  1096.     while ((el = el.nextElementSibling)) {
  1097.       if (el && el.matches(selector)) {
  1098.         return el;
  1099.       }
  1100.     }
  1101.     return null;
  1102.   }
  1103.   function closest(el, selector) {
  1104.     while (el && el.nodeName !== 'BODY' && !el.matches(selector)) {
  1105.       el = el.parentNode;
  1106.     }
  1107.     return el && el.matches(selector) ? el : [];
  1108.   }
  1109.   function make(obj) {
  1110.     let key,
  1111.       el = document.createElement(obj.el);
  1112.     if (obj.cl4ss) { el.className = obj.cl4ss; }
  1113.     if (obj.html) { el.innerHTML = obj.html; }
  1114.     if (obj.attr) {
  1115.       for (key in obj.attr) {
  1116.         if (obj.attr.hasOwnProperty(key)) {
  1117.           el.setAttribute(key, obj.attr[key]);
  1118.         }
  1119.       }
  1120.     }
  1121.     if (obj.appendTo) {
  1122.       $(obj.appendTo).appendChild(el);
  1123.     }
  1124.     return el;
  1125.   }
  1126.   function removeAll(selector) {
  1127.     $$(selector).forEach(el => {
  1128.       el.parentNode.removeChild(el);
  1129.     });
  1130.   }
  1131.   function on(els, name, callback) {
  1132.     els = Array.isArray(els) ? els : [els];
  1133.     let events = name.split(/\s+/);
  1134.     els.forEach(el => {
  1135.       events.forEach(ev => {
  1136.         el.addEventListener(ev, callback);
  1137.       });
  1138.     });
  1139.   }
  1140.   function toggleClass(els, cl4ss, flag) {
  1141.     els = Array.isArray(els) ? els : [els];
  1142.     els.forEach(el => {
  1143.       if (el) {
  1144.         if (typeof flag === 'undefined') {
  1145.           flag = !el.classList.contains(cl4ss);
  1146.         }
  1147.         if (flag) {
  1148.           el.classList.add(cl4ss);
  1149.         } else {
  1150.           el.classList.remove(cl4ss);
  1151.         }
  1152.       }
  1153.     });
  1154.   }
  1155.  
  1156.   // Add GM options
  1157.   GM_registerMenuCommand("GitHub Dark Script debug logging", () => {
  1158.     let val = prompt('Toggle GitHub Dark Script debug log (true/false):', !debug);
  1159.     if (val) {
  1160.       debug = /^t/.test(val);
  1161.       GM_setValue('debug', debug);
  1162.     }
  1163.   });
  1164.  
  1165. })();