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.

Re: @EvaparotangCote:

Something like this maybe?

var t = document.title;
if (t) if (t.length > 20 && document.body.firstChild.nodeName == "IMG"){
  var start = document.title.indexOf("Image, ");
  var end = document.title.indexOf(" pixels)");
  if (start > -1 && end > -1){
    document.title = document.title.substr(start+7, end - (start + 7)) + " - " + document.title.substr(0, start-1) + ")";
  }
}

@jscher2000:
Thanks for replying.

Or I'm wasting my time with a question answered 6 hours ago?

You can say that - and you cannot say that...

You can say that because:

  • I clicked accept on wOxxOm's simple userscript version.
  • wOxxOm's simple userscript version (including yours) is a "a no doubt working code solution".

You cannot say that because:

  • Potentially cooler/better MutationObserver versions isn't working reliably.
    Initially wOxxOm hadn't posted that simple version as well, but only the MutationObserver version.
    Reasons for doing that is that MutationObserver is supposed to be pretty smart and not just rename title after tab has finished loading (as simple version does - having the original title while loading). MutationObserver is supposed to also rename while tab is loading - could be cool - but currently doesn't work reliably.

To test out the MutationObserver version. Copy wOxxOm second userscript code or slightly modded here (well guess I'm gonna post it at the end of this post as well for easiness of reach).
Then test on big images (because not instant loading) the simple userscript version vs MutationObserver version.

Big images:
Big fox image.
Huge NASA image.
Even bigger NASA image.

What you might see (I see different result on Windows vs Linux) is; MutationObserver; title changed while loading, but when finished loading title gets reset to original (on Windows). Title is changed both while loading and after, but doing Ctrl+F5 resets title to the original one (on Linux).

Not working reliably MutationObserver code (tested in various reproducible steps here):

// ==UserScript==
// @name            Image dimensions before title
// @description     Request by supasd. Code by wOxxOm. https://stackoverflow.com/a/32949363/5382305
// @icon            https://assets-cdn.github.com/images/icons/emoji/unicode/1f504.png
// @grant           none
// @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;
    }
}