Customize Favicon on IDE page


#1

Hi,

We’re developing many applications at the same time so we have multiple tabs opened with different C9 IDE and sometimes we loose time mistaking which tab is our environment.

Would it be possible to customize the favicon on our IDE just to have different colors and select it the right browser tab quickly with different colors/logo ?

Cheers,

Regards,

Guireg


#2

Hi
you can use user scripts (from cloud9 menu) to achieve this.

function setIcon(o1, o2) {
    var canvas = document.createElement('canvas');
    canvas.height = canvas.width = 16;
    var ctx = canvas.getContext('2d');
    var img = document.createElement('img');
    var links = document.querySelectorAll('link[rel="icon"]');
    for (var i = links.length; i--;) links[i].remove();
    var link = document.createElement("link");
    link.rel = "icon";
    link.type = "image/png";
    img.onload = function() {
        // once the image has loaded
        ctx.drawImage(img, 0, 0);
        var data = ctx.getImageData(0, 0, 16, 16);
        var px = data.data;
        // simple filter to change color, you can write your own, or load another image
        for (var i = 0; i < 16; i++) {
            for (var j = 0; j < 16; j++) {
                var o = 16 * 4 * i + 4 * j
                var v = px[o + 2];
                px[o + 2] = px[o + o1];
                px[o + o2] = v;
            }
        }
        ctx.putImageData(data, 0, 0);
        link.href = canvas.toDataURL('image/png');
        document.head.appendChild(link);
    };
    img.src = "/favicon.ico";
}
if (/ssh/.test(services.c9.workspaceId))
    setIcon(1, 0);
else if (!services.c9.workspaceId.startsWith(services.info.getUser().name))
    setIcon(0, 0);

#3

It would be really neat if I could swap my icons to file-icons


#4

@ninbryan you can use any image file in the code above, just change the img.src = "/favicon.ico"; or do you mean something else?


#5

@harutyun I have meant for something else.
I was thinking of the file directory having swappable icons to represent the type of files.
I suppose my comments are not completely related to this topic :sweat_smile: