List file sizes in GitHub

Question

The GitHub file browser lists a file's name and info about the last commit:

Is there a way to add each file's size to these listings?

Answer 1

If there is no official way to do this, here is a bookmarklet which uses GitHub's API to add size info (won't work in IE):

javascript:(function(){function f(a){var g=document.querySelector('div[role="rowheader"] a[title="'+a.name+'"]').closest('div[role="row"]').lastElementChild,c=document.createElement("div");c.style.width="5em";"file"===a.type&&(c.textContent=(a.size/1024).toLocaleString("en-US",{minimumFractionDigits:1,maximumFractionDigits:1})+" KB",c.style.textAlign="right",c.style.whiteSpace="nowrap");g.insertAdjacentElement("beforebegin",c)}var b=window.location.pathname.split("/"),d=b[1],h=b[2],e=b[4];b=b.slice(5);d=["https://api.github.com/repos",d,h,"contents"].concat(b||[]).join("/")+(e?"?ref="+e:"");console.log(d);fetch(d).then(function(a){return a.json()}).then(function(a){return Array.isArray(a)?a.forEach(f):console.warn(a)})})();

Unminified source:

(function () {
    "use strict";

    //Parse the current GitHub repo url. Examples:
    //  Repo root:           /Sphinxxxx/vanilla-picker
    //  Subfolder:           /Sphinxxxx/vanilla-picker/tree/master/src/css
    //  Subfolder at commit: /Sphinxxxx/vanilla-picker/tree/382231756aac75a49f046ccee1b04263196f9a22/src/css
    //  Subfolder at tag:    /Sphinxxxx/vanilla-picker/tree/v2.2.0/src/css
    //
    //If applicable, the name of the commit/branch/tag is always the 4th element in the url path.
    //Here, we put that in the "ref" variable:
    const [/* Leading slash */, owner, repo, /* "tree" */, ref, ...path] = window.location.pathname.split('/');

    //Create the URL to query GitHub's API: https://developer.github.com/v3/repos/contents/#get-contents
    //Example:
    //  https://api.github.com/repos/Sphinxxxx/vanilla-picker/contents/src/css?ref=382231756aac75a49f046ccee1b04263196f9a22
    const query = ['https://api.github.com/repos', owner, repo, 'contents'].concat(path || []),
          url = query.join('/') + (ref ? '?ref=' + ref : '');
    console.log(url);

    //https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
    fetch(url).then(r => r.json())
              .then(j => Array.isArray(j) ? j.forEach(handleFileInfo) : console.warn(j));

    function handleFileInfo(info) {
        //console.log(info);
        const link = document.querySelector(`div[role="rowheader"] a[title="${info.name}"]`);
        const timeCol = link.closest('div[role="row"]').lastElementChild;

        const sizeCol = document.createElement('div');
        sizeCol.style.width = '5em';
        if(info.type === 'file') {
            //http://stackoverflow.com/a/17663871/1869660
            //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Parameters
            sizeCol.textContent = (info.size/1024).toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' KB';
            sizeCol.style.textAlign = 'right';
            sizeCol.style.whiteSpace = 'nowrap';
        }

        timeCol.insertAdjacentElement('beforebegin', sizeCol);
    }
})();

Create a bookmarklet from the first piece of code, or just copy and paste it to your browser's console.

Answer 2

For Chrome browsers there exists an extension:

https://chrome.google.com/webstore/detail/github-repository-size/apnjnioapinblneaedefcnopcjepgkci

Answer 3

No, the GitHub file browser is not configurable that way.

Getting back that extra information would mean transferring an enormous extra amount of data (for each pages of each repos) for GitHub, so I am not sure this is a feature you would see anytime soon.

---

Note that 'size' is an acceptable criteria for GitHub search though (meaning that size information is there and can be used, not just for browsing files).

element language:xml size:100

Matches code with the word "element" that's marked as being XML and has exactly 100 bytes.