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

[EvaparotangCote]

^tl;dr:
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.

^{full version:}
@TimidScript: So I see that previously you had the separate Title Amender. One of the examples is 'EmacsWiki'. Quite an interesting example as it not just removes stuff from the title, but rearranges 🔄 it. I have another case, which I described above which may could be solved by something similar.
Now thing is, I don't quite understand that 'EmacsWiki' example. Other than me not being able to get it to work when pasting into Linx Amender, how fx seeing:

Original title: "EmacsWiki: Site Map"
Altered Title: "SiteMap Discussion: EmacsWiki"

Where does the "Discussion" part come from? it wasn't there originally? also "Site Map" turns into "SiteMap". I don't understand how that relates to:

Search text:
^(EmacsWiki)(:\s)(.+)$
Replacement text:
$3$2$1

I see the Linx Amender screenshots. In some of them apparently "Title" rules are used. Yet when I install Linx Amender there doesn't seem to be any of the provided "Online rules" which makes use of a "Title" rule property, according to the GUI. Maybe I'm just not using Linx Amender correctly, and overlooking something.

Regarding Linx Amender I suggest either including the rules from Title Amender by default in the "Online rules", or as maybe a somehow importable (maybe by user editing text file) rules list file you're hosting called fx "old Title Amender rules.txt" maybe inside a Github folder called "various custom rules sets files", so they could be somewhere even if you don't deem them good/important/non-outdated enough to include in the default included "Online rules".

Also I think that it would be a good idea if there was at least one rule included by default in the "Online rules" making use of a "Title" rule property . Fx a rearranging 🔄 rule. Or include two; one non-rearranging and one rearranging 🔄.

Yeah, so regarding the case mentioned in the top. I don't know if Firefox has some exposed <image-filename>, <image-type>, <image-dimensions> properties you can somehow call and make use of in the tab title modifying by maybe CSS3/userstyle or if that doesn't exist/possible and therefore userscript using regex is necessary.
Also maybe regarding the targeting/include aspect maybe Firefox has a way exposed one can use where it knows whether and url/tab is a image and you can using that, limit the amount of sites/tabs userstyle/script would run on (only on image tabs, instead of all tabs). Could be handy. But I don't know about this, maybe you do?

[TimidScript]

I am not sure what exactly you want. You are all over the place, but here goes.

LA3 title rules are not included as it isn't necessary. Everything is straight forward with title rules, as they are simple regular expressions. Click on the guide for information. Currently not working on LA3 or its online rules as LA4 is being in beta and development has halted due to RL.

Below is a sample rule that replaces the prefix of the title with empty string. The second is the EmacsWiki rule you mentioned. You can paste it into LA3.

{"id":"L1407100659003","name":"Amazon UK","URLs":"www.amazon.co.uk","sampleURL":"http://www.amazon.co.uk","nthNode":"0","type":2,"regexes":[{"search":"Amazon.co.uk: "}],"enabled":true,"timestamp":1444053633131}
{"id":"L1444054876061","name":"Emacs Sample","URLs":"@http://emacswiki.org/","sampleURL":"http://emacswiki.org/","nthNode":"0","type":2,"selectors":"a","regexes":[{"search":"^(EmacsWiki)(:\\s)(.+)$","replace":"$3$2$1"}],"enabled":true,"timestamp":1444054891858}

You need to understand regular expressions to use rearranging. Here's an online tool to test regular expressions: https://www.regex101.com/#javascript

You can use userstyles to get the image resolution and then add it to the title. It's easily done. You need to use the image properties naturalHeight and naturalWidth..

So something like:
document.title = "[" + img.naturalHeight + "x" + img.nauralWidht + "]" + document.title;

It cannot be done through Title Rules, you need access to javascript. Userstyles or LA3 Script Rule will do.

[EvaparotangCote]

@TimidScript
Thanks for replying.

^tl:dr:
Do you have any suggestion as to how to get the MutationObserver userscript in my Gist working reliably? Any idea why it isn't working reliably? Are you using Linux/Mac (at least on Linux (which I'm not currently using) regex/MutationObserver userscripts seems to work more reliable)?

^{full version:}

Everything is straight forward with title rules, as they are simple regular expressions.
It's easily done.

Well doesn't seem super easy/straight forward, because it seems in this case regex is easily working unreliably is you're not very careful. What do I mean? Over at Stack Overflow wOxxOm has suggested some very close to working code. For the record: screenshot series of expected behavior. Thing is, there seems to be a discrepancy between behavior on Linux vs Windows (also the MutationObserver example doesn't work reliably on any of the OS'es). Also from Firefox version 43 onward there seems to have been a behavior change. I have documented this in some reproducible * steps and test in this Gist.

• = at least on my end - but can't see why they shouldn't be reproducible to other people - clearly there's consistent reproducible different behavior between the different setups and it happens every single time on those different setups - them acting the same - but different from the other setups.

Regarding your previous comment: Well so in this case the "URLS"/include part seems irrelevant, correct? just let it have an '*' include (same as not specifying anything in userscript (no?))?

So something like:
document.title = "[" + img.naturalHeight + "x" + img.nauralWidht + "]" + document.title;

Looking at fx 01, 02, 03. Wouldn't that mean that:

// ==UserScript==
// @name          Image dimensions before title
// @description   Request by supasd. Code by TimidScript.
// @icon          https://assets-cdn.github.com/images/icons/emoji/unicode/1f504.png
// @grant         none
// ==/UserScript==

document.title = "[" + img.naturalHeight + "x" + img.nauralWidht + "]" + document.title;

Should work? Yet currently it doesn't work for me. Hmm, not sure if Firefox is teasing.

[TimidScript]

Few things:

1. You do not need listener for what you want.
2. I didn't know you can exclude the include when you want to work on everything
3. Not insulting but the code I provide it was just an outline. I did not know how proficient you are in js.
4. Now I understand what you want. I never knew FireFox included the resolution of the image. Duh on my behalf. It was always cropped off.

I will include your suggestion in "Generic Image Viewer", but don't hold your breath.

The code below is for a standalone script. It displays it as the sample image you gave. It should work on all browsers, whether the resolution information is in the title or not.

(function ()
{
    if (document.body.children.length != 1 || document.body.children[0].tagName != "IMG") return;
    document.title = document.body.children[0].naturalHeight + "×" + document.body.children[0].naturalWidth + " " + document.title;
})();

You can also do a "Linx Amender" rule but note this will expect an English FireFox title format. I will include it in the online rules.

{"id":"L1444145422562","name":"FireFox: Prefix Image Resolution to title","URLs":".*","sampleURL":"http://i.imgur.com/stBwRqT.png","nthNode":"0","type":2,"selectors":"a","regexes":[{"search":"(.+)\\s+\\(.+ Image,\\s+(\\d+)\\s+×\\s+(\\d+)\\s+pixels\\)","replace":"$2×$3 $1"}],"enabled":true,"timestamp":1444147375105}

Regular expression used: https://www.regex101.com/r/rA4tS1/2