Support Chrome 49 (#561)

* Add: polyfill to support chrome 49

* Fix: fetch text in Chrome 49

* Add: polyfill element method

* Update usercss-meta

* Fix: buggy destructuring

* Fix: dialog position?

* Fix: unneeded warning

* Fix: getChromeVersion

* Fix: don't cache tab icon in old chrome

* Fix: static -> relative

* Fix: use XHR as fallback

background/background-worker.js

@@ -12,6 +12,7 @@ createAPI({
   compileUsercss,
   parseUsercssMeta(text, indexOffset = 0) {
     loadScript(
+      '/js/polyfill.js',
       '/vendor/usercss-meta/usercss-meta.min.js',
       '/vendor-overwrites/colorpicker/colorconverter.js',
       '/js/meta-parser.js'
@@ -20,6 +21,7 @@ createAPI({
   },
   nullifyInvalidVars(vars) {
     loadScript(
+      '/js/polyfill.js',
       '/vendor/usercss-meta/usercss-meta.min.js',
       '/vendor-overwrites/colorpicker/colorconverter.js',
       '/js/meta-parser.js'

background/background.js

@@ -38,6 +38,12 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
   openEditor,
 
   updateIconBadge(count) {
+    // TODO: remove once our manifest's minimum_chrome_version is 50+
+    // Chrome 49 doesn't report own extension pages in webNavigation apparently
+    // so we do a force update which doesn't use the cache.
+    if (CHROME && CHROME < 2661 && this.sender.tab.url.startsWith(URLS.ownOrigin)) {
+      return updateIconBadgeForce(this.sender.tab.id, count);
+    }
     return updateIconBadge(this.sender.tab.id, count);
   },
 
@@ -347,6 +353,11 @@ function updateIconBadge(tabId, count) {
   }
 }
 
+function updateIconBadgeForce(tabId, count) {
+  refreshIconBadgeText(tabId, {count});
+  refreshIcon(tabId, {count});
+}
+
 function refreshIconBadgeText(tabId, icon) {
   iconUtil.setBadgeText({
     text: prefs.get('show-badge') && icon.count ? String(icon.count) : '',

content/install-hook-usercss.js

@@ -54,6 +54,18 @@
   }
 
   function fetchText(url) {
+    // XHR throws in Chrome 49
+    // FIXME: choose a correct version
+    // https://github.com/openstyles/stylus/issues/560
+    if (getChromeVersion() <= 49) {
+      return fetch(url)
+        .then(r => r.text())
+        .catch(() => fetchTextXHR(url));
+    }
+    return fetchTextXHR(url);
+  }
+
+  function fetchTextXHR(url) {
     return new Promise((resolve, reject) => {
       // you can't use fetch in Chrome under 'file:' protocol
       const xhr = new XMLHttpRequest();
@@ -64,6 +76,11 @@
     });
   }
 
+  function getChromeVersion() {
+    const match = navigator.userAgent.match(/chrome\/(\d+)/i);
+    return match ? Number(match[1]) : undefined;
+  }
+
   function start() {
     timer = timer || setTimeout(check, DELAY);
   }

edit.html

@@ -63,6 +63,7 @@
 
     <script src="vendor-overwrites/codemirror-addon/match-highlighter.js"></script>
 
+    <script src="js/polyfill.js"></script>
     <script src="js/promisify.js"></script>
     <script src="js/dom.js"></script>
     <script src="js/messaging.js"></script>

edit/editor-worker.js

@@ -16,6 +16,7 @@ createAPI({
   },
   metalint: code => {
     loadScript(
+      '/js/polyfill.js',
       '/vendor/usercss-meta/usercss-meta.min.js',
       '/vendor-overwrites/colorpicker/colorconverter.js',
       '/js/meta-parser.js'

install-usercss.html

@@ -9,6 +9,7 @@
   <link href="global.css" rel="stylesheet">
   <link href="install-usercss/install-usercss.css" rel="stylesheet">
 
+  <script src="js/polyfill.js"></script>
   <script src="js/promisify.js"></script>
   <script src="js/msg.js"></script>
   <script src="js/messaging.js"></script>

install-usercss/install-usercss.js

@@ -231,6 +231,7 @@
       .then(init)
       .catch(err => {
         $('#header').classList.add('meta-init-error');
+        console.error(err);
         showError(err);
       });
   }

js/msg.js

@@ -19,7 +19,8 @@ const msg = (() => {
   const EXTENSION_URL = chrome.runtime.getURL('');
   let handler;
   const RX_NO_RECEIVER = /Receiving end does not exist/;
-  const RX_PORT_CLOSED = /The message port closed before a response was received/;
+  // typo in Chrome 49
+  const RX_PORT_CLOSED = /The message port closed before a res?ponse was received/;
   return {
     send,
     sendTab,

js/polyfill.js

@@ -0,0 +1,53 @@
+'use strict';
+
+(() => {
+  if (!Object.entries) {
+    Object.entries = obj => Object.keys(obj).map(k => [k, obj[k]]);
+  }
+  if (!Object.values) {
+    Object.values = obj => Object.keys(obj).map(k => obj[k]);
+  }
+  if (typeof document === 'object') {
+    const ELEMENT_METH = {
+      append: {
+        base: [Element, Document, DocumentFragment],
+        fn: (node, frag) => {
+          node.appendChild(frag);
+        }
+      },
+      prepend: {
+        base: [Element, Document, DocumentFragment],
+        fn: (node, frag) => {
+          node.insertBefore(frag, node.firstChild);
+        }
+      },
+      before: {
+        base: [Element, CharacterData, DocumentType],
+        fn: (node, frag) => {
+          node.parentNode.insertBefore(frag, node);
+        }
+      },
+      after: {
+        base: [Element, CharacterData, DocumentType],
+        fn: (node, frag) => {
+          node.parentNode.insertBefore(frag, node.nextSibling);
+        }
+      }
+    };
+
+    for (const [key, {base, fn}] of Object.entries(ELEMENT_METH)) {
+      for (const cls of base) {
+        if (cls.prototype[key]) {
+          continue;
+        }
+        cls.prototype[key] = function (...nodes) {
+          const frag = document.createDocumentFragment();
+          for (const node of nodes) {
+            frag.appendChild(typeof node === 'string' ? document.createTextNode(node) : node);
+          }
+          fn(this, frag);
+        };
+      }
+    }
+  }
+})();

js/usercss.js

@@ -41,8 +41,9 @@ const usercss = (() => {
       })
       .then(({metadata}) => {
         style.usercssData = metadata;
-        for (const [key, value = key] of Object.entries(GLOBAL_METAS)) {
-          style[value] = metadata[key];
+        // https://github.com/openstyles/stylus/issues/560#issuecomment-440561196
+        for (const [key, value] of Object.entries(GLOBAL_METAS)) {
+          style[value || key] = metadata[key];
         }
         return style;
       });

manage.html

@@ -146,6 +146,7 @@
     </details>
   </template>
 
+  <script src="js/polyfill.js"></script>
   <script src="js/promisify.js"></script>
   <script src="js/dom.js"></script>
   <script src="js/messaging.js"></script>

manage/config-dialog.css

@@ -6,6 +6,10 @@
   padding: 8px 16px;
 }
 
+#stylus-popup .config-dialog > div {
+  position: relative;
+}
+
 #stylus-popup .config-body label {
   padding: .5em 0;
 }

manifest.json

@@ -24,6 +24,7 @@
   ],
   "background": {
     "scripts": [
+      "js/polyfill.js",
       "js/promisify.js",
       "js/messaging.js",
       "js/msg.js",
@@ -62,7 +63,7 @@
       "run_at": "document_start",
       "all_frames": true,
       "match_about_blank": true,
-      "js": ["js/promisify.js", "js/msg.js", "js/prefs.js", "content/apply.js"]
+      "js": ["js/polyfill.js", "js/promisify.js", "js/msg.js", "js/prefs.js", "content/apply.js"]
     },
     {
       "matches": ["http://userstyles.org/*", "https://userstyles.org/*"],

options.html

@@ -19,6 +19,7 @@
     }
   </style>
 
+  <script src="js/polyfill.js"></script>
   <script src="js/dom.js"></script>
   <script src="js/messaging.js"></script>
   <script src="js/promisify.js"></script>

package.json

@@ -20,7 +20,7 @@
     "stylelint-bundle": "^8.0.0",
     "stylus-lang-bundle": "^0.54.5",
     "updates": "^5.1.2",
-    "usercss-meta": "^0.8.3",
+    "usercss-meta": "^0.8.4",
     "web-ext": "^2.9.2",
     "webext-tx-fix": "^0.3.1",
     "zipjs-browserify": "^1.0.1"

popup.html

@@ -150,6 +150,7 @@
   <link rel="stylesheet" href="manage/config-dialog.css">
   <script src="manage/config-dialog.js"></script>
 
+  <script src="js/polyfill.js"></script>
   <script src="js/promisify.js"></script>
   <script src="js/dom.js"></script>
   <script src="js/messaging.js"></script>

vendor/usercss-meta/README.md

@@ -1,5 +1,5 @@
-## usercss-meta v0.8.3
+## usercss-meta v0.8.4
 
 usercss-meta installed via npm - source repo:
 
-https://unpkg.com/usercss-meta@0.8.3/dist/usercss-meta.min.js
+https://unpkg.com/usercss-meta@0.8.4/dist/usercss-meta.min.js