regexfirefoxgreasemonkeyuserscriptsuserstyles

Can Firefox show resolution of image before name in tab title?

The question:

Can Firefox show resolution of image before its name in title? If an image has a name too big I can't read its resolution, and that bugs me.

(asked by supasd)

I've done some research, not yet successful.

Would any of you guys happen to know how to do it? What's the smartest/most efficient way? Can it be done with a userstyle? or is a userscript or add-on needed? Feel free to provide any type of suggestion or solution whether it is userstyle or whatever.

Solution

  • The most simple code would be to change the title when the document is loaded:

    // ==UserScript==
// @name         Image dimensions before title
// ==/UserScript==

(function() {
    var m = document.title
                    .match(/^(.+?\.\w+) \((?:([^,]+?), )?(\d+)\s*[x×]\s*(\d+)( .+?)?\)/);
    if (m)
        document.title = m[3] + 'x' + m[4] + ' ' + m[1] + (m[2] ? ' (' + m[2] + ')' : '');
})();

    Using MutationObserver it's possible to change the title immediately when it's set by the browser without flicker. The regexp works both for Firefox and Chrome and moves the dimensions before the file name. A DOMContentLoaded event listener is still used to override the detrimental effects of other addons/userscripts like CenterImage which zaps the <HEAD> element.

    // ==UserScript==
// @name         Image dimensions before title
// @run-at       document-start
// ==/UserScript==

if (!changeTitle()) {
    new MutationObserver(function(mutations) {
        var nodes = mutations[0].addedNodes;
        if (nodes[0] && nodes[0].localName == 'title' && changeTitle(nodes[0])
        || document.body && document.body.children.length) {
            this.disconnect();
        }
    }).observe(document, {subtree: true, childList: true});
}
document.addEventListener('DOMContentLoaded', changeTitle);

function changeTitle(node) {
    var m = document.title
                    .match(/^(.+?\.\w+) \((?:([^,]+?), )?(\d+)\s*[x×]\s*(\d+)( \w+)?\)/);
    if (m) {
        document.title = m[3] + 'x' + m[4] + ' ' + m[1] + (m[2] ? ' (' + m[2] + ')' : '');
        return true;
    }
}