refactor install.js

* run_at: document_start
* MutationObserver to rebrand without flickering the original text
* reuse styleSectionsEqual
* don't proceed when orphaned

install.js

@@ -1,188 +1,245 @@
-/* eslint-disable no-tabs, indent, quotes, no-var */
 'use strict';
 
-chrome.runtime.sendMessage({method: "getStyles", url: getMeta("stylish-id-url") || location.href}, function(response) {
+document.addEventListener('stylishUpdateChrome', onUpdateClicked);
-	if (response.length == 0) {
+document.addEventListener('stylishInstallChrome', onInstallClicked);
-		sendEvent("styleCanBeInstalledChrome");
+
-	} else {
+new MutationObserver(waitForBody)
-		var installedStyle = response[0];
+  .observe(document.documentElement, {childList: true});
-		// maybe an update is needed
+
-		// use the md5 if available
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-		var md5Url = getMeta("stylish-md5-url");
+  // orphaned content script check
-		if (md5Url && installedStyle.md5Url && installedStyle.originalMd5) {
+  if (msg.method == 'ping') {
-			getResource(md5Url, function(md5) {
+    sendResponse(true);
-				if (md5 == installedStyle.originalMd5) {
-					sendEvent("styleAlreadyInstalledChrome", {updateUrl: installedStyle.updateUrl});
-				} else {
-					sendEvent("styleCanBeUpdatedChrome", {updateUrl: installedStyle.updateUrl});
   }
 });
-		} else {
+
-			getResource(getMeta("stylish-code-chrome"), function(code) {
+
-				// this would indicate a failure (a style with settings?).
+function waitForBody() {
-				if (code === null) {
+  if (!document.body) {
-					sendEvent("styleCanBeUpdatedChrome", {updateUrl: installedStyle.updateUrl});
-				}
-				var json = JSON.parse(code);
-				if (json.sections.length == installedStyle.sections.length) {
-					if (json.sections.every(function(section) {
-						return installedStyle.sections.some(function(installedSection) {
-							return sectionsAreEqual(section, installedSection);
-						});
-					})) {
-						// everything's the same
-						sendEvent("styleAlreadyInstalledChrome", {updateUrl: installedStyle.updateUrl});
     return;
   }
-				}
-				sendEvent("styleCanBeUpdatedChrome", {updateUrl: installedStyle.updateUrl});
-			});
-		}
-	}
-});
 
-function sectionsAreEqual(a, b) {
+  this.disconnect();
-	if (a.code != b.code) {
+  rebrand([{addedNodes: [document.body]}]);
-		return false;
+  const rebrandObserver = new MutationObserver(rebrand);
-	}
+  rebrandObserver.observe(document.body, {childList: true, subtree: true});
-	return ["urls", "urlPrefixes", "domains", "regexps"].every(function(attribute) {
+
-		return arraysAreEqual(a[attribute], b[attribute]);
+  document.addEventListener('DOMContentLoaded', function _() {
+    document.removeEventListener('DOMContentLoaded', _);
+    rebrandObserver.disconnect();
+    chrome.runtime.sendMessage({
+      method: 'getStyles',
+      url: getMeta('stylish-id-url') || location.href
+    }, checkUpdatability);
   });
 }
 
-function arraysAreEqual(a, b) {
+
-	// treat empty array and undefined as equivalent
+function checkUpdatability([installedStyle]) {
-	if (typeof a == "undefined") {
+  if (!installedStyle) {
-		return (typeof b == "undefined") || (b.length == 0);
+    sendEvent('styleCanBeInstalledChrome');
+    return;
   }
-	if (typeof b == "undefined") {
+  const md5Url = getMeta('stylish-md5-url');
-		return (typeof a == "undefined") || (a.length == 0);
+  if (md5Url && installedStyle.md5Url && installedStyle.originalMd5) {
+    getResource(md5Url).then(md5 => {
+      reportUpdatable(md5 != installedStyle.originalMd5);
+    });
+  } else {
+    getResource(getMeta('stylish-code-chrome')).then(code => {
+      reportUpdatable(code === null ||
+        !styleSectionsEqual(JSON.parse(code), installedStyle));
+    });
+  }
+
+  function reportUpdatable(isUpdatable) {
+    sendEvent(
+      isUpdatable
+        ? 'styleCanBeUpdatedChrome'
+        : 'styleAlreadyInstalledChrome',
+      {
+        updateUrl: installedStyle.updateUrl
+      }
+    );
+  }
+}
+
+
+function sendEvent(type, detail = null) {
+  detail = {detail};
+  if (typeof cloneInto != 'undefined') {
+    // Firefox requires explicit cloning, however USO can't process our messages anyway
+    // because USO tries to use a global "event" variable deprecated in Firefox
+    detail = cloneInto(detail, document); // eslint-disable-line no-undef
+  }
+  document.dispatchEvent(new CustomEvent(type, detail));
+}
+
+
+function onInstallClicked() {
+  if (!orphanCheck()) {
+    return;
+  }
+  getResource(getMeta('stylish-description'))
+    .then(name => saveStyleCode('styleInstall', name))
+    .then(() => getResource(getMeta('stylish-install-ping-url-chrome')));
+}
+
+
+function onUpdateClicked() {
+  if (!orphanCheck()) {
+    return;
+  }
+  chrome.runtime.sendMessage({
+    method: 'getStyles',
+    url: getMeta('stylish-id-url') || location.href,
+  }, ([style]) => {
+    saveStyleCode('styleUpdate', style.name, {id: style.id});
+  });
+}
+
+
+function saveStyleCode(message, name, addProps) {
+  return new Promise(resolve => {
+    if (!confirm(chrome.i18n.getMessage(message, [name]))) {
+      return;
+    }
+    getResource(getMeta('stylish-code-chrome')).then(code => {
+      chrome.runtime.sendMessage(
+        Object.assign(JSON.parse(code), addProps, {method: 'saveStyle'}),
+        () => sendEvent('styleInstalledChrome')
+      );
+      resolve();
+    });
+  });
+}
+
+
+function getMeta(name) {
+  const e = document.querySelector(`link[rel="${name}"]`);
+  return e ? e.getAttribute('href') : null;
+}
+
+
+function getResource(url) {
+  if (url.startsWith('#')) {
+    return Promise.resolve(document.getElementById(url.slice(1)).textContent);
+  }
+  return new Promise(resolve => {
+    const xhr = new XMLHttpRequest();
+    xhr.onloadend = () => resolve(xhr.status < 400 ? xhr.responseText : null);
+    if (url.length > 2000) {
+      const [mainUrl, query] = url.split('?');
+      xhr.open('POST', mainUrl, true);
+      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr.send(query);
+    } else {
+      xhr.open('GET', url);
+      xhr.send();
+    }
+  });
+}
+
+
+function rebrand(mutations) {
+  /* stylish to stylus; https://github.com/schomery/stylish-chrome/issues/12 */
+  for (const mutation of mutations) {
+    for (const addedNode of mutation.addedNodes) {
+      if (addedNode.nodeType != Node.ELEMENT_NODE) {
+        continue;
+      }
+      const elementsToCheck = addedNode.matches('.install-status') ? [addedNode]
+        : Array.prototype.slice.call(addedNode.getElementsByClassName('install-status'));
+      for (const el of elementsToCheck) {
+        if (!el.textContent.includes('Stylish')) {
+          continue;
+        }
+        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        while (walker.nextNode()) {
+          const node = walker.currentNode;
+          const text = node.nodeValue;
+          if (text.includes('Stylish') && node.parentNode.localName != 'a') {
+            node.nodeValue = text.replace(/Stylish/g, 'Stylus');
+          }
+        }
+      }
+    }
+  }
+}
+
+
+function styleSectionsEqual({sections: a}, {sections: b}) {
+  if (!a || !b) {
+    return undefined;
   }
   if (a.length != b.length) {
     return false;
   }
-	return a.every(function(entry) {
+  const checkedInB = [];
-		return b.indexOf(entry) != -1;
+  return a.every(sectionA => b.some(sectionB => {
-	});
+    if (!checkedInB.includes(sectionB) && propertiesEqual(sectionA, sectionB)) {
+      checkedInB.push(sectionB);
+      return true;
+    }
+  }));
+
+  function propertiesEqual(secA, secB) {
+    for (const name of ['urlPrefixes', 'urls', 'domains', 'regexps']) {
+      if (!equalOrEmpty(secA[name], secB[name], 'every', arrayMirrors)) {
+        return false;
+      }
+    }
+    return equalOrEmpty(secA.code, secB.code, 'substr', (a, b) => a == b);
   }
 
-function sendEvent(type, data) {
+  function equalOrEmpty(a, b, telltale, comparator) {
-	if (typeof data == "undefined") {
+    const typeA = a && typeof a[telltale] == 'function';
-		data = null;
+    const typeB = b && typeof b[telltale] == 'function';
-	}
+    return (
-	var stylishEvent = new CustomEvent(type, {detail: data});
+      (a === null || a === undefined || (typeA && !a.length)) &&
-	document.dispatchEvent(stylishEvent);
+      (b === null || b === undefined || (typeB && !b.length))
+    ) || typeA && typeB && a.length == b.length && comparator(a, b);
   }
 
-document.addEventListener("stylishUpdateChrome", stylishUpdateChrome);
+  function arrayMirrors(array1, array2) {
-function stylishInstallChrome() {
+    for (const el of array1) {
-	orphanCheck();
+      if (array2.indexOf(el) < 0) {
-	getResource(getMeta("stylish-description"), function(name) {
+        return false;
-		if (confirm(chrome.i18n.getMessage('styleInstall', [name]))) {
-			getResource(getMeta("stylish-code-chrome"), function(code) {
-				// check for old style json
-				var json = JSON.parse(code);
-				json.method = "saveStyle";
-				chrome.runtime.sendMessage(json, function() {
-					sendEvent("styleInstalledChrome");
-				});
-			});
-			getResource(getMeta("stylish-install-ping-url-chrome"));
-		}
-	});
-}
-
-document.addEventListener("stylishInstallChrome", stylishInstallChrome);
-function stylishUpdateChrome() {
-	orphanCheck();
-	chrome.runtime.sendMessage({
-		method: "getStyles",
-		url: getMeta("stylish-id-url") || location.href,
-	}, function(response) {
-		var style = response[0];
-		if (confirm(chrome.i18n.getMessage('styleUpdate', [style.name]))) {
-			getResource(getMeta("stylish-code-chrome"), function(code) {
-				var json = JSON.parse(code);
-				json.method = "saveStyle";
-				json.id = style.id;
-				chrome.runtime.sendMessage(json, function() {
-					sendEvent("styleInstalledChrome");
-				});
-			});
-		}
-	});
-}
-
-function getMeta(name) {
-	var e = document.querySelector("link[rel='" + name + "']");
-	return e ? e.getAttribute("href") : null;
-}
-
-function getResource(url, callback) {
-	if (url.indexOf("#") == 0) {
-		if (callback) {
-			callback(document.getElementById(url.substring(1)).innerText);
-		}
-		return;
-	}
-	var xhr = new XMLHttpRequest();
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == 4 && callback) {
-			if (xhr.status >= 400) {
-				callback(null);
-			} else {
-				callback(xhr.responseText);
       }
     }
-	};
+    for (const el of array2) {
-	if (url.length > 2000) {
+      if (array1.indexOf(el) < 0) {
-		var parts = url.split("?");
+        return false;
-		xhr.open("POST", parts[0], true);
+      }
-		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    }
-		xhr.send(parts[1]);
+    return true;
-	} else {
-		xhr.open("GET", url, true);
-		xhr.send();
   }
 }
 
-/* stylish to stylus; https://github.com/schomery/stylish-chrome/issues/12 */
-(function(es) {
-	es.forEach(e => {
-		[...e.childNodes].filter(n => n.nodeType == 3).forEach(n => {
-			n.nodeValue = n.nodeValue.replace('Stylish', 'Stylus');
-		});
-	});
-})([
-	...document.querySelectorAll('div[id^="stylish-installed-style-not-installed-"]'),
-	...document.querySelectorAll('div[id^="stylish-installed-style-needs-update-"]')
-]);
-
-// orphaned content script check
-
-chrome.runtime.onMessage.addListener((msg, sender, sendResponse) =>
-	msg.method == 'ping' && sendResponse(true));
 
 function orphanCheck() {
-	var port = chrome.runtime.connect();
+  const port = chrome.runtime.connect();
   if (port) {
     port.disconnect();
-		return;
+    return true;
   }
   // we're orphaned due to an extension update
   // we can detach event listeners
-	document.removeEventListener('stylishUpdateChrome', stylishUpdateChrome);
+  document.removeEventListener('stylishUpdateChrome', onUpdateClicked);
-	document.removeEventListener('stylishInstallChrome', stylishInstallChrome);
+  document.removeEventListener('stylishInstallChrome', onInstallClicked);
   // we can't detach chrome.runtime.onMessage because it's no longer connected internally
   // we can destroy global functions in this context to free up memory
   [
-		'arraysAreEqual',
+    'checkUpdatability',
     'getMeta',
     'getResource',
+    'onInstallClicked',
+    'onUpdateClicked',
     'orphanCheck',
-		'sectionsAreEqual',
+    'rebrand',
+    'saveStyleCode',
     'sendEvent',
-		'stylishUpdateChrome',
+    'styleSectionsEqual',
-		'stylishInstallChrome'
+    'waitForBody',
   ].forEach(fn => (window[fn] = null));
 }

manifest.json

@@ -39,7 +39,7 @@
     },
     {
       "matches": ["http://userstyles.org/*", "https://userstyles.org/*"],
-      "run_at": "document_end",
+      "run_at": "document_start",
       "all_frames": false,
       "js": ["install.js"]
     }