-
-
Save EvaparotangCote/458892ec18f2482c90e5 to your computer and use it in GitHub Desktop.
| // ==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; | |
| } | |
| } |
| // ==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 | |
| // ==/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] + ')' : ''); | |
| })(); |
Update2
Recap: The idea between the two scripts seems to be that the 'simple' one changes the order of the tab title after the tab has finished loading (while the tab is loading the original unaltered state is shown). This seems to work reliably under both Windows and Linux.
The idea behind the MutationObserver one would be that not only after the tabs finished loaded the order is changed, but also while it's loading as well. This doesn't seem to work reliably under either Windows or Linux. It's closest/close to working reliably under Linux, but a Ctrl+F5 trick I'll get into later down breaks it (this trick/problem doesn't exist on Windows). On Windows it's not reliable at all. While loading the tab the order is changed, but when finished the order is reset back to the original state. Actually I just said Windows doesn't have the Ctrl+F5 trick problem. Well Ctrl+F5 and F5 has the same result on Windows, so one might say Windows has a Ctrl+F5/F5 problem as well.
Update:
wOxxOm's suggestion is very close to working code.
At first when I tried the code, it changed the title of the tab as you want it to.
But that might have been an already previously loaded image I just pressed F5 on.
There seems to be a discrepancy between behavior on Linux vs Windows.
On closer inspection:
In Firefox 41 (Greasemonkey 3.4.1 used) it works at first. Then when you reload the image, it doesn't work anymore (title back to original).In Firefox Developer Edition (43) (Greasemonkey 3.5beta3 used) it doesn't work either at the first load or reload. While it loads, it temporarily shows the altered title, but when it finishes loading it's the unmodified title that stays.
I'm going to do a closer inspection :squirrel: 🔎 comparing various clean profile/new Firefox installs. The difference in setup being Firefox version and Greasemonkey version, which will be noted. Check the next post for results.
System/methodology used for testing:
My main/host OS is currently Windows 8.1. To test in Linux I'm using VirtualBox having a Linux .ISO/.vdi mounted. As I've explained here I'm using different fresh/clean/new Firefox Portable instances to test different versions of Firefox at the same time.
Image used for testing:
http://i.imgur.com/iEYEhJv.png
Linux status:
Actually the userscripts are not 100% flawless/does not work 100% reliable under Linux.
image-dimensions-before-title-MutationObserver.user.js is NOT reliable.
image-dimensions-before-title-simple.user.js is flawless.
Reproducible every single time (on Linux VirtualBox):
Firefox Release (41):
Greasemonkey 3.4.1:
1. New clean profile/Firefox Release (41) install.
2. Install Greasemonkey 3.4.1.
3. Install image-dimensions-before-title-MutationObserver.user.js (just copy the code - 'New User Script...' - 'Use Script From Clipboard' - 'Save' - close Scratchpad window).
4. Do Ctrl+L + paste http://i.imgur.com/iEYEhJv.png + Alt+Enter.
5. Watch as it loads stuff is altered correctly. Finished loading it stays altered in the order it's supposed to/the userscript says it wants.
6. Ctrl+F5 that tab. Now the tab changes back to the original order (ignores userscript).
7. Now try F5 instead of Ctrl+F5.
8. F5 and Ctrl+F5 doesn't produces the same result. Having just pressed F5 the tab is back in the order it's supposed to/the userscript says it wants.
9. Do another Ctrl+L, already having the same url (no Ctrl+V/pasting), press Alt+Enter.
10. Now the order ends up correctly (still/it was so already previously in step 8.).
10a. Do a Ctrl+F5 on that correctly one. It now repeats 6. and ends up being the original order (ignores userscript)
10b. Try doing Ctrl+L, already having the same url (no Ctrl+V/pasting), press Alt+Enter on that original order one.
10c. Now the order ends up correctly again (it repeats 10.).
11. Switch out the userscript ('Remove' the current one first) to image-dimensions-before-title-simple.user.js
(+ make sure it's enabled).
12. Now opening http://i.imgur.com/iEYEhJv.png (= doing the same as in 4.) alters the order as supposed to do. Though an interesting note is that while the image is loading, the original order is shown. As soon as loading's finished order gets switched to the one the userscript says it wants. Also image-dimensions-before-title-simple.user.js isn't vulnerable to the Ctrl+F5 trick, the order stays the same in the end no matter what. The Ctrl+F5 trick (being present using image-dimensions-before-title-MutationObserver.user.js) seems to be Linux specific. Was it not for Linux's vulnerability to this trick, both userscripts could be said to work flawlessly under Linux - this trick breaks the image-dimensions-before-title-MutationObserver.user.js in terms of flawless/reliability record.
Firefox Release (41):
Greasemonkey 3.5beta3:
Using Greasemonkey 3.5beta3 or 3.4.1 produces the same results on Firefox Release (41) in Linux VirtualBox.
Overall Windows 8.1 status:
image-dimensions-before-title-MutationObserver.user.js is NOT reliable.
image-dimensions-before-title-simple.user.js is flawless.
Reproducible every single time (on Windows 8.1):
Firefox Release (41):
Greasemonkey 3.4.1:
1. New clean profile/Firefox Release (41) install.
2. Install Greasemonkey 3.4.1.
3. Install image-dimensions-before-title-MutationObserver.user.js (just copy the code - 'New User Script...' - 'Use Script From Clipboard' - 'Save' - close Scratchpad window).
4. Do Ctrl+L + paste http://i.imgur.com/iEYEhJv.png + Alt+Enter.
5. Watch as it loads stuff is altered correctly. Finished loading it changes back to original order (ignores userscript).
6. Ctrl+F5 that tab. Same happens as in 5.
7. Now try F5 instead of Ctrl+F5.
8. F5 and Ctrl+F5 both produces the same result. Original order (ignores userscript).
9. Do another Ctrl+L, already having the same url (no Ctrl+V/pasting), press Alt+Enter.
10. Now the order ends up correctly.
10a. Do a Ctrl+F5 on that correctly one. It now repeats 5. and ends up being the original order (ignores userscript)
10b. Try doing Ctrl+L, already having the same url (no Ctrl+V/pasting), press Alt+Enter on that original order one.
10c. Now the order ends up correctly again (it repeats 10.).
11. Switch out the userscript ('Remove' the current one first) to image-dimensions-before-title-simple.user.js
(+ make sure it's enabled).
12. Now opening http://i.imgur.com/iEYEhJv.png (= doing the same as in 4.) alters the order as supposed to do. Though an interesting note is that while the image is loading, the original order is shown. As soon as loading's finished order gets switched to the one the userscript says it wants.
Firefox Release (41):
Greasemonkey 3.5beta3:
Using Greasemonkey 3.5beta3 or 3.4.1 produces the same results on Firefox Release (41).
Reproducible every single time (on Windows 8.1):
Firefox Beta (42):
Greasemonkey 3.4.1:
Using Firefox Beta (42) or Firefox Release (41) produces the same results.
Firefox Beta (42):
Greasemonkey 3.5beta3:
Using Greasemonkey 3.5beta3 or 3.4.1 produces the same results on Firefox Beta (42).
Status: Read step 10. Introduced from Fx 43 onwards (meaning same applies for Fx 44) behavior in this step seems to have changed.
Reproducible every single time (on Windows 8.1):
Firefox Developer Edition (43):
Greasemonkey 3.4.1:
1. New clean profile/Firefox Developer Edition (43) install.
2. Install Greasemonkey 3.4.1.
3. Install image-dimensions-before-title-MutationObserver.user.js (just copy the code - 'New User Script...' - 'Use Script From Clipboard' - 'Save' - close Scratchpad window).
4. Do Ctrl+L + paste http://i.imgur.com/iEYEhJv.png + Alt+Enter.
5. Watch as it loads stuff is altered correctly. Finished loading it changes back to original order (ignores userscript).
6. Ctrl+F5 that tab. Same happens as in 5.
7. Now try F5 instead of Ctrl+F5.
8. F5 and Ctrl+F5 both produces the same result. Original order (ignores userscript).
9. Do another Ctrl+L, already having the same url (no Ctrl+V/pasting), press Alt+Enter.
10. Now the order ends up the same=original (ignores userscript). (This is different from previous versions of Firefox which for some reason in this step showed the order as the userscript says it want (though the correct order went away again doing a F5/Ctrl+F5)).)
11. Switch out the userscript ('Remove' the current one first) to image-dimensions-before-title-simple.user.js
(+ make sure it's enabled).
12. Now opening http://i.imgur.com/iEYEhJv.png (= doing the same as in 4.) alters the order as supposed to do. Though an interesting note is that while the image is loading, the original order is shown. As soon as loading's finished order gets switched to the one the userscript says it wants.
Firefox Developer Edition (43):
Greasemonkey 3.5beta3:
Using Greasemonkey 3.5beta3 or 3.4.1 produces the same results on Firefox Developer Edition (43).
Reproducible every single time (on Windows 8.1):
Firefox Nightly (44):
Greasemonkey 3.4.1:
Using Firefox Nightly (44) or Firefox Developer Edition (43) produces the same results.
Though in Firefox Nightly (44) using Greasemonkey 3.4.1, in step 3., clicking 'Use Script From Clipboard' adds the userscript right away. No Scratchpad window pops up, so no need to click 'Save' and close Scratchpad window. Trying to edit the userscript by clicking 'Options' - 'Edit This User Script' does nothing - the userscript can't be edited.
Firefox Nightly (44):
Greasemonkey 3.5beta3:
Using Greasemonkey 3.5beta3 or 3.4.1 produces the same results on Firefox Nightly (44).
Though in Firefox Nightly (44) using Greasemonkey 3.5beta3 - yeah well it works the same as in Firefox Developer Edition (43). It's just that using Firefox Nightly (44) with Greasemonkey 3.4.1 doesn'tt as noted above.
(Also @TimidScript has replied here. Just thought I'd let you know his/hers comment/info.)
I've added some Metadata Block @key values, to the script.
Greasemonkey (all Fx and GM versions) complains about missing
@grantstatement (info url). I tried putting innone. Doing that, it stops complaining.I changed the(while testing's going on I'm going to mod as little as possible to make sure it's not me screwing it up.)xto×.I've made a screenshot series describing the expected behavior (using
image-dimensions-before-title-simple.user.jsand Firefox Developer Edition (43)):Use wOxxOm's userscript to show image dimensions before title when browsing images.