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

Question

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.

wOxxOm · Accepted Answer · 2015-10-05T18:57:38.347

0

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;
    }
}

edited Oct 05 '15 at 18:57

answered Oct 05 '15 at 13:02

wOxxOm

65,848
11
132
136

Wow, nice! This is so close to working. At first when I tried the code it changed the title of the tab as you want it to. But that might have been a already loaded image I just pressed F5 on. On closer inspection in Firefox 41 it works at first. Then reload and it doesn't work anymore. In Firefox Developer Edition it doesn't work either at the first load or reload. Also Greasemonkey in both Firefox version complains about missing @grant statement. I tried putting in none. Here the code: (Stackoverflow Enter=post teasing me, hold on - gotta use shift+enter) – EvaparotangCote Oct 05 '15 at 17:44
I messed up trying to give you a comment (has 5 min limit). Here goes again: I'm going to update my OP post. Also here's the current code: [Gist](https://gist.github.com/EvaparotangCote/458892ec18f2482c90e5) It's close to working, but it doesn't currently fully work. More about that in updated OP post – EvaparotangCote Oct 05 '15 at 18:06
@EvaparotangCote, it works without any of those problems here on FF42 and 43, also 41 and 38. Reloading the page doesn't break it. I think the only reason for the behavior you see is another userscript or addon, for example Center Image or something. – wOxxOm Oct 05 '15 at 18:12
@EvaparotangCote, and please don't change the question by adding what should be comments. – wOxxOm Oct 05 '15 at 18:17
You have my [Gist](https://gist.github.com/EvaparotangCote/458892ec18f2482c90e5) link. Also finally now my full reply. Fair enough, I'm going to respect that from now on. Tested in clean profiles, no other userstyles/scripts/add-ons. – EvaparotangCote Oct 05 '15 at 18:34
@EvaparotangCote, well, whatever the cause, I've added a bulletproof version, see the updated code. – wOxxOm Oct 05 '15 at 18:58
Hmm, just tested in a Linux VirtualBox, Firefox 41, Greasemonkey 3.4.1. Everything worked as it should. Weird. Okay so something is up, probably on my end (Windows 8.1). Going to try to figure it out. But you're most probably right that the script "works without any of those problems" and "Reloading the page doesn't break it". – EvaparotangCote Oct 05 '15 at 19:01
Also you're right about the bulletproof 'simple' version. Just tested that in Firefox Developer Edition (43), Greasemonkey 3.5beta3. It worked. Still weird about the other one though. I'm going to keep seeing if I can find the cause. Also I'm going to accept your answer since you've answered yes to the topic and provided a no doubt working code solution ;). – EvaparotangCote Oct 05 '15 at 19:08
@EvaparotangCote, if you don't see the title flicker then the simple version is okay. BTW I've also updated the initial code. – wOxxOm Oct 05 '15 at 19:10
I now understand that why you suggest MutationObserver - because it can change the title immediately. I've now checked out your updated initial code (MutationObserver one). Firstly I've made [screenshot series](http://imgur.com/a/xES71) illustrating what's supposed to happen. Secondly turns out not both userscripts are flawless on Linux. Are you using Linux/Mac? Simple one = flawless on all OS. MutationObserver would be cool but = unreliable all OS. I've majorly updated my [Gist](https://gist.github.com/EvaparotangCote/458892ec18f2482c90e5) with reproducible tests, please check it out. – EvaparotangCote Oct 06 '15 at 01:50
Apparently I'm over complicating, because in case of single image the DOM it's so simple that MutationObserver shouldn't be needed. BTW Windows here. – wOxxOm Oct 06 '15 at 05:43
You're also on Windows, interesting. What do you mean "MutationObserver shouldn't be needed"? Are you saying that using simple version; title is changed both **while** (I don't see that) and of course after loading (that I do see)? Have you tested on big images (so you have a chance to see what happens before it's finished loaded)? Here's [big fox](http://i.imgur.com/WH8Lw0Z.jpg), [huge NASA](http://www.nasa.gov/sites/default/files/images/618486main_earth_full.jpg), [even bigger NASA](http://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73580/world.topo.bathy.200401.3x21600x21600.C2.jpg). – EvaparotangCote Oct 06 '15 at 14:39
The browser doesn't tell the size of the picture while it's loading and even with MutationObserver the tab title displays only the full url while loading. – wOxxOm Oct 06 '15 at 15:03

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

1 Answers1