Greasy Fork is available in English.

GitHub FileSize Viewer

Show the file size next to it on the website

// ==UserScript==
// @name         GitHub FileSize Viewer
// @namespace    http://tampermonkey.net/
// @version      0.9.12
// @description  Show the file size next to it on the website
// @author       nmaxcom
// @match        https://*.github.com/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// TODO: try document.addEventListener("pjax:start", function(){...}) and pjax:end as triggers
(function(){
    /****************
     * Options:
     ****************/
    const DEBUG_MODE = true; // in production mode should be false
    const SHOW_BYTES = false; // false: always KB, i.e. '>1 KB', true: i.e. '180 B' when less than 1 KB
    /****************/

    var textColor = '#6a737d'; // Default github style
    // var textColor = '#888'; // my dark github style
    createStyles();

    var origXHROpen               = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(){
        this.addEventListener('loadend', function(){
            if(DEBUG_MODE) console.log('%cStart: ' + document.title, 'color:white;background-color:#20A6E8;padding:3px');
            tableCheckandGo();
        });
        origXHROpen.apply(this, arguments);
    };

    var vars = {}, response;
    tableCheckandGo();


    /**
     * Order of business:
     * - Detect table, if present, launch async API call and insert new blank cells
     * - Detect necessary info to make the async API call
     * - When promised is successful, change the blanks for the numbers
     * done: detect page change since github does that youtube thing
     */

    function tableCheckandGo(){
        if(document.querySelector('table.files')){
            if(setVars()){
                var callPromise = callGitHub();
                callPromise
                    .then(function(resp){
                        response = resp;
                        if(DEBUG_MODE) console.info('GitHub call went through');
                        if(DEBUG_MODE) console.info(resp.responseText);
                        insertBlankCells();
                        fillTheBlanks(JSON.parse(resp.responseText));
                        recheckAndFix();
                    })
                    .catch(function(fail){
                        if(DEBUG_MODE) console.error(fail);
                    });
            } else {
                if(DEBUG_MODE) console.info('setVars() failed. Vars: ', vars);
            }
        } else {
            if(DEBUG_MODE) console.info('No data table detected, nothing to do');
        }
    }

    /**
     * API call
     */
    function callGitHub(){
        return new Promise(function(resolve, reject){
            // I'm forced to use GM_xmlhttpRequest to avoid Same Origin Policy issues
            GM_xmlhttpRequest({
                method : "GET",
                url    : getAPIurl(),
                onload : function(res){
                    resolve(res);
                },
                onerror: function(res){
                    reject(res);
                }
            });
        });
    }

    function getAPIurl(){
        // .../repos/:owner/:repo/contents/:path?ref=branch
        vars.dir = vars.dir || '';
        return "https://api.github.com/repos/" +
            vars.owner + "/" +
            vars.repo +
            "/contents/" +
            vars.dir + "?ref=" + vars.branch;
    }

    /**
     * - Directories get new cellmate too
     *
     */
    function insertBlankCells(){
        var filenameCells = document.querySelectorAll('tr[class~="js-navigation-item"] > td.content');
        for(var i = 0, len = filenameCells.length; i < len; i++){
            var newtd       = document.createElement('td');
            newtd.className = 'filesize';
            filenameCells[i].parentNode.insertBefore(newtd, filenameCells[i].nextSibling);
        }
        if(DEBUG_MODE) console.info(`Inserted ${i} cells`);
    }

    /**
     * If we get the data, we insert it carefully so each filename gets matched
     * with the correct filesize.
     */
    function fillTheBlanks(JSONelements){
        if(!document.querySelectorAll('td.filesize').length){
            debugger;
        }
        var nametds = document.querySelectorAll('tr[class~="js-navigation-item"] > td.content a');
        var i, len;
        toploop:
            for(i = 0, len = JSONelements.length; i < len; i++){
                for(var cellnum in nametds){
                    if(nametds.hasOwnProperty(cellnum) && JSONelements[i].name === nametds[cellnum].innerHTML){
                        if(JSONelements[i].type === 'file'){
                            var sizeNumber = (JSONelements[i].size / 1024).toFixed(0);
                            if(SHOW_BYTES){
                                sizeNumber = sizeNumber < 1 ? JSONelements[i].size + ' B' : sizeNumber + ' KB';
                            } else {
                                sizeNumber = sizeNumber < 1 ? '> 1 KB' : sizeNumber + ' KB';
                            }
                            nametds[cellnum].parentNode.parentNode.nextSibling.innerHTML = sizeNumber;
                        }
                        continue toploop;
                    }
                }
            }
        if(DEBUG_MODE) console.info(`Processed ${i} of ${len} elements`);
        // if(DEBUG_MODE) console.info('Dumping json y nodes:');
        // if(DEBUG_MODE) console.log(JSONelements.forEach(function(e,i){if(DEBUG_MODE) console.log(JSONelements[i].name)}));
        // if(DEBUG_MODE) console.log(nametds.forEach(function(e,i){if(DEBUG_MODE) console.log(nametds[i].innerHTML)}));


    }

    function createStyles(){
        var css   = 'td.filesize { color: ' + textColor + ';' +
                'text-align: right;' +
                'padding-right: 50px !important; }' +
                'table.files td.message { max-width: 250px !important;',
            head  = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

        style.type = 'text/css';
        if(style.styleSheet){
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }

        head.appendChild(style);
    }


    /**
     * Hay que satisfacer en la api el GET /repos/:owner/:repo/contents/:path?ref=branch
     * Con este regex capturamos del título  \w+(.*?)\sat\s(.*?)\s.*?(\w+)\/(\w+)
     * 1) dir path, 2) branch, 3) owner, 4) repo
     * Ese regex no funciona en el root
     */
    function setVars(){
        var title  = document.title;
        // Root folder:
        var match3 = title.match(/.*?([a-zA-Z0-9._-]+)\/([a-zA-Z0-9._-]+):/);
        // Non root folder, any branch:
        //var match1 = title.match(/([a-zA-Z0-9._-]+)\/([a-zA-Z0-9._-]+)\sat\s([a-zA-Z0-9._-]+)\s·\s([a-zA-Z0-9._-]+)\/([a-zA-Z0-9._-]+)/);
        // Root folder, we'll extract branch from scrape
        var match2 = title.match(/.+?\/([a-zA-Z0-9._\/-]+).*?·\s([a-zA-Z0-9._-]+)\/([a-zA-Z0-9._\/-]+)/);
        if(match3){
            vars        = {owner: match3[1], repo: match3[2]};
            vars.branch = document.querySelector('.branch-select-menu button span').innerHTML;
        }/*else if(match1) {
         vars = {repo: match1[1], dir: match1[2], branch: match1[3], owner: match1[4]};
         } */ else if(match2){
            vars        = {dir: match2[1], owner: match2[2], repo: match2[3]};
            vars.branch = document.querySelector('.branch-select-menu button span').innerHTML;
        } else if(DEBUG_MODE) console.log(getAPIurl());
        return 1;
    }

    /**
     * Sometimes, even though data has been correctly recieved, the DOM doesn't play well
     * for whatever reason. This function will quickly check if the data is indeed
     * there and if it's not will repaint the data again with the original functions.
     * TODO: finish this part
     */
    function recheckAndFix(){
        // Count td.filesize and compare to total rows
        let filesizes = document.querySelectorAll('td.filesize').length;
        let ages      = document.querySelectorAll('td.age').length;
        if(filesizes === ages){
            if(DEBUG_MODE) console.info(`Good empty check: ${filesizes} of ${ages}`);
        } else {
            if(DEBUG_MODE) console.info(`Bad empty check: ${filesizes} of ${ages}. Repainting`);

        }
        // Count non-empty td.filesize and compare to number of files from response

        if(DEBUG_MODE) console.info(`Say something...`);
    }
})();