---
>You haven't supplied the patch here, so I'll reply based on the
>patch that you previously sent to my personal email.
I see, I think it's because I had used the --compose option in git
send-email. Still I include the original patch for reference.
>I'd like to know which browsers specifically you tried this in, because
>I'm not exactly sure which ones are supposed to be supported now that
>weren't before.
I have tested it with Pale Moon 27, Chromium 70 and Firefox 63 and 57
(the latter is from the mobile version).
>- You are still using arrow functions, which are an ES6 feature.
I didn't know that, I always thought it was "syntactic sugar" added
some time before ES6.
>Which browsers support arrow functions but not const?
>- Let is also an ES6 feature. Which browsers support let but not const?
Pale Moon (I don't know if they fixed that in the last version but I
haven't updated it yet because I have some extensions that apparently
stopped working in the most recent version) and the const are supported
but not inside the for loops. So in my previous message also I mentioned
browsers that don't have full support for ECMAScript 6.
You may think that it is a very niche browser to support it, but I
consider that these changes can also benefit smartphone users who may
not have a very modern browser (either because they have not been updated
in a long time or the latest Chrome/Firefox versions do not work well
for them) or those in a similar situation to mine (whether they are
using Pale Moon or are stuck on Firefox 52 ESR or something like that).
Anyway I think that I did not express myself correctly in my last message,
with regard to compatibility I was referring rather to the browsers
of the last 5-7 years (although I have not done tests on older browsers
than the ones I mentioned).
>- You should use XMLHttpRequest in all browsers, instead of maintaining
>two code paths.
I kept fetch because it is supposed to be better than XMLHttpRequest
and I added it as a failback function in case fetch is not available.
>- The for..of loop you created has worse support than the forEach that
>was previously there. for..of syntax is ES6, whereas, I believe,
>NodeList#forEach is ES5.
I could have changed that to a classic for but I did not see it necessary
at that time for what I already explained above.
>- You should abstract XMLHttpRequest into its own function named
>`request` to make the code easier to read.
Neither did I find it necessary to convert it into a new function since
it only runs once.
>indent with tabs and ensure that there is a newline at the end of the file.
I didn't realize, sorry about that.
>why not simply use Babel?
Because it had not occurred to me, I only used Node.js a couple of times
and superficially so I am not familiar with all the possibilities offered
by the language. Anyway I did a quick test at https://babeljs.io/repl
and it is still necessary to change the fetch for something more "backward
compatible". I was going to propose you to add XMLHttpRequest and Babel
in a new patch but I see that you already did it on your own.
---
 src/main.js | 46 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/main.js b/src/main.js
index 3a6cf72..eb1b2f2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,13 +3,14 @@
 ;(() => {
 	const q = s => document.querySelector(s)
 	const qa = s => document.querySelectorAll(s)
+	const instancesUrlData = "https://instances.invidio.us/instances.json?sort_by=type,health"

 	function createElement(tag, properties = {}, children = []) {
 		const e = document.createElement(tag)
-		for (const key of Object.keys(properties)) {
+		for (let key of Object.keys(properties)) {
 			e[key] = properties[key]
 		}
-		for (const child of children) {
+		for (let child of children) {
 			e.appendChild(child)
 		}
 		return e
@@ -23,14 +24,9 @@
 		return array
 	}

-	const destinationPath = window.location.href.slice(window.location.origin.length)
-
-	q("#watch-on-youtube").href = "https://www.youtube.com" + destinationPath
-
-	fetch("https://instances.invidio.us/instances.json?sort_by=type,health").then(res => res.json()).then(
-	/** @param {[string, {monitor: any, flag: string, region: string, stats: any, type: string, uri: string}][]} root */ root => {
-		shuffle(root)
-		root.map(entry => {
+	function instanceDataProcessor(data) {
+		data = shuffle(data)
+		data.map(entry => {
 			const healthKnown = !!entry[1].monitor
 			return {
 				name: entry[0],
@@ -56,6 +52,32 @@
 				])
 			)
 		})
-		qa(".loading").forEach(e => e.remove())
-	})
+		for (let e of qa(".loading")) {
+			e.remove()
+		}
+	}
+
+	const destinationPath = window.location.href.slice(window.location.origin.length)
+
+	q("#watch-on-youtube").href = "https://www.youtube.com" + destinationPath
+
+	try {
+		fetch(instancesUrlData).then(res => res.json()).then(jsonData => instanceDataProcessor(jsonData))
+	}
+	catch(ReferenceError) {
+	        // Use XMLHttpRequest when fetch is not available
+		const req = new XMLHttpRequest();
+		req.open("GET", instancesUrlData, true);
+		req.onreadystatechange = function () {
+     			if (req.readyState != 4) return;
+     			if (req.status != 200 && req.status != 304) {
+				//console.log('HTTP error ' + req.status);
+				return;
+        		}
+        		const jsonData = JSON.parse(req.responseText);
+			instanceDataProcessor(jsonData);
+		}
+		req.send()
+	}
 })()
+
\ No newline at end of file
--
2.16.4

Alrighty, thanks for the detailed reply.

The version with Babel is live on
https://invidious-redirect.cadence.moe . Please try it now with those
browsers you mentioned and see if any further changes are
necessary. I'm just using Babel's preset configuration for IE11, I
have no idea if it's good or not. If it's not good, please let me know
which parts those browsers are having trouble with so that I can find
a configuration that transpiles those specific parts to something
older.

Thanks for your interest in this project!