Merge pull request #3098 from hypothesis/simplify-embed-js

Refactor and speed up client load in embed.js

h/templates/embed.js.jinja2

@@ -23,74 +23,53 @@ function resolve(url) {
   return new URL(url, resourceRoot).href;
 }
 
-// Injects the hypothesis dependencies. These can be either js or css, the
-// file extension is used to determine the loading method. This file is
-// pre-processed in order to insert the wgxpath, url and inject scripts.
-//
-// Custom injectors can be provided to load the scripts into a different
-// environment. Both script and stylesheet methods are provided with a url
-// and a callback fn that expects either an error object or null as the only
-// argument.
-//
-// For example a Chrome extension may look something like:
-//
-//   window.hypothesisInstall({
-//     script: function (src, fn) {
-//       chrome.tabs.executeScript(tab.id, {file: src}, fn);
-//     },
-//     stylesheet: function (href, fn) {
-//       chrome.tabs.insertCSS(tab.id, {file: href}, fn);
-//     }
-//   });
-window.hypothesisInstall = function (inject) {
-  inject = inject || {};
+function injectStylesheet(href) {
+  var link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.type = 'text/css';
+  link.href = resolve(href);
+  document.head.appendChild(link);
+};
 
-  var resources = [];
-  var injectStylesheet = inject.stylesheet || function injectStylesheet(href, fn) {
-    var link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.type = 'text/css';
-    link.href = resolve(href);
-
-    document.head.appendChild(link);
-    fn(null);
-  };
+function injectScript(src) {
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = resolve(src);
 
-  var injectScript = inject.script || function injectScript(src, fn) {
-    var script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.onload = function () { fn(null) };
-    script.onerror = function () { fn(new Error('Failed to load script: ' + src)) };
-    script.src = resolve(src);
-
-    document.head.appendChild(script);
-  };
+  // Set 'async' to false to maintain execution order of scripts.
+  // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
+  script.async = false;
+  document.head.appendChild(script);
+};
 
+/** Fetch the resources for the Hypothesis client. */
+function install() {
+  var resources = [];
   if (typeof window.Annotator === 'undefined') {
     {%- for url in inject_resource_urls %}
     resources.push('{{ url | safe }}');
     {%- endfor %}
   }
 
-  (function next(err) {
-    if (err) { throw err; }
-
-    if (resources.length) {
-      var url = resources.shift();
-      var ext = url.split('?')[0].split('.').pop();
-      var fn = (ext === 'css' ? injectStylesheet : injectScript);
-      fn(url, next);
+  resources.forEach(function (url) {
+    if (url.match(/\.css/)) {
+      injectStylesheet(url);
+    } else {
+      injectScript(url);
     }
-  })();
+  });
 }
 
+// Register the URL of the sidebar app which the Hypothesis client should load.
+// The <link> tag is also used by browser extensions etc. to detect the
+// presence of the Hypothesis client on the page.
 var baseUrl = document.createElement('link');
 baseUrl.rel = 'sidebar';
 baseUrl.href = resolve('{{ app_html_url }}');
 baseUrl.type = 'application/annotator+html';
 document.head.appendChild(baseUrl);
 
-window.hypothesisInstall();
+install();
 
 return {installedURL: baseUrl.href};
 })();