DevTools: Get rid of synchronous XHRs in the frontend code

Source/devtools/front_end/Runtime.js

Index: Source/devtools/front_end/Runtime.js
diff --git a/Source/devtools/front_end/Runtime.js b/Source/devtools/front_end/Runtime.js
index 708667b5d3287b835fbb4178d076147c1cc931d2..3d8497ae71fee0a957c5e69aa113257dcb3a7555 100644
--- a/Source/devtools/front_end/Runtime.js
+++ b/Source/devtools/front_end/Runtime.js
@@ -35,24 +35,6 @@ var _loadedScripts = {};
 
 /**
  * @param {string} url
- * @return {string}
- */
-function loadResource(url)
-{
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", url, false);
-    try {
-        xhr.send(null);
-    } catch (e) {
-        console.error(url + " -> " + new Error().stack);
-        throw e;
-    }
-    // xhr.status === 0 if loading from bundle.
-    return xhr.status < 400 ? xhr.responseText : "";
-}
-
-/**
- * @param {string} url
  * @return {!Promise.<string>}
  */
 function loadResourcePromise(url)
@@ -234,45 +216,37 @@ Runtime.isReleaseMode = function()
 /**
  * @param {string} moduleName
  * @param {string} workerName
- * @return {!SharedWorker}
+ * @return {!Promise.<!SharedWorker>}
  */
 Runtime.startSharedWorker = function(moduleName, workerName)
 {
     if (Runtime.isReleaseMode())
-        return new SharedWorker(moduleName + "_module.js", workerName);
-
-    var content = loadResource(moduleName + "/module.json");
-    if (!content)
-        throw new Error("Worker is not defined: " + moduleName + " " + new Error().stack);
-    var scripts = JSON.parse(content)["scripts"];
-    if (scripts.length !== 1)
-        throw Error("Runtime.startSharedWorker supports modules with only one script!");
-    return new SharedWorker(moduleName + "/" + scripts[0], workerName);
+        return Promise.resolve(new SharedWorker(moduleName + "_module.js", workerName));
+
+    return loadResourcePromise(moduleName + "/module.json").then(start, start.bind(null, undefined));
+
+    /**
+     * @param {string=} content
+     */
+    function start(content)
+    {
+        if (!content)
+            throw new Error("Worker is not defined: " + moduleName + " " + new Error().stack);
+        var scripts = JSON.parse(content)["scripts"];
+        if (scripts.length !== 1)
+            throw new Error("Runtime.startSharedWorker supports modules with only one script!");
+        return new SharedWorker(moduleName + "/" + scripts[0], workerName);
+    }
 }
 
 /**
  * @param {string} moduleName
- * @return {!Worker}
+ * @return {!Promise.<!Worker>}
  */
 Runtime.startWorker = function(moduleName)

[pfeldman, 2014/11/07 14:51:17]

Lets extract WorkerRuntime.

[apavlov, 2014/11/10 07:44:11]

Done.

 {
     if (Runtime.isReleaseMode())
-        return new Worker(moduleName + "_module.js");
-
-    var content = loadResource(moduleName + "/module.json");
-    if (!content)
-        throw new Error("Worker is not defined: " + moduleName + " " + new Error().stack);
-    var message = [];
-    var scripts = JSON.parse(content)["scripts"];
-    for (var i = 0; i < scripts.length; ++i) {
-        var url = self._importScriptPathPrefix + moduleName + "/" + scripts[i];
-        var parts = url.split("://");
-        url = parts.length === 1 ? url : parts[0] + "://" + normalizePath(parts[1]);
-        message.push({
-            source: loadResource(moduleName + "/" + scripts[i]),
-            url: url
-        });
-    }
+        return Promise.resolve(new Worker(moduleName + "_module.js"));
 
     /**
      * @suppress {checkTypes}
@@ -288,14 +262,62 @@ Runtime.startWorker = function(moduleName)
         };
     };
 
-    var blob = new Blob(["(" + loader.toString() + ")()\n//# sourceURL=" + moduleName], { type: "text/javascript" });
-    var workerURL = window.URL.createObjectURL(blob);
-    try {
-        var worker = new Worker(workerURL);
-        worker.postMessage(message);
-        return worker;
-    } finally {
-        window.URL.revokeObjectURL(workerURL);
+    return loadResourcePromise(moduleName + "/module.json").then(start, start.bind(null, undefined));
+
+    /**
+     * @param {string=} content
+     */
+    function start(content)
+    {
+        if (!content)
+            throw new Error("Worker is not defined: " + moduleName + " " + new Error().stack);
+        var message = [];
+        var scripts = JSON.parse(content)["scripts"];
+        var promise = Promise.resolve();
+        for (var i = 0; i < scripts.length; ++i) {
+            var url = self._importScriptPathPrefix + moduleName + "/" + scripts[i];
+            var parts = url.split("://");
+            url = parts.length === 1 ? url : parts[0] + "://" + normalizePath(parts[1]);
+            promise = promise.then(promiseGetter(loadResourcePromise(moduleName + "/" + scripts[i]))).then(pushSource.bind(null, url), pushSource.bind(null, null, null));
+        }
+
+        return promise.then(createWorker);
+
+        function promiseGetter(promise)
+        {
+            return function() {
+                return promise;
+            };
+        }
+
+        /**
+         * @param {?string} url
+         * @param {?string} source
+         */
+        function pushSource(url, source)
+        {
+            if (!url) {
+                console.error("Failed to load " + url);
+                return;
+            }
+            message.push({ source: source, url: url });
+        }
+
+        /**
+         * @return {!Worker}
+         */
+        function createWorker()
+        {
+            var blob = new Blob(["(" + loader.toString() + ")()\n//# sourceURL=" + moduleName], { type: "text/javascript" });
+            var workerURL = window.URL.createObjectURL(blob);
+            try {
+                var worker = new Worker(workerURL);
+                worker.postMessage(message);
+                return worker;
+            } finally {
+                window.URL.revokeObjectURL(workerURL);
+            }
+        }
     }
 }
 
@@ -725,12 +747,43 @@ Runtime.Module.prototype = {
             dependencyPromises.push(this._manager._modulesMap[dependencies[i]]._loadPromise());
 
         this._pendingLoadPromise = Promise.all(dependencyPromises)
+            .then(loadStylesheetsPromise.bind(this))

[pfeldman, 2014/11/07 14:51:17]

make a prototype method? _loadStyleSheets (similarly to loadScripts.

[apavlov, 2014/11/10 07:44:11]

Done.

             .then(this._loadScripts.bind(this))
             .then(markAsLoaded.bind(this));
 
         return this._pendingLoadPromise;
 
         /**
+         * @return {!Promise.<undefined>}
+         * @this {Runtime.Module}
+         */
+        function loadStylesheetsPromise()
+        {
+            var stylesheets = this._descriptor["stylesheets"];
+            if (!stylesheets)
+                return Promise.resolve();
+            var promises = [];
+            for (var i = 0; i < stylesheets.length; ++i) {
+                var url = this._modularizeURL(stylesheets[i]);
+                promises.push(loadResourcePromise(url).then(cacheStylesheet.bind(this, url), cacheStylesheet.bind(this, url, undefined)));
+            }
+            return Promise.all(promises).then(undefined);
+        }
+
+        /**
+         * @param {string} path
+         * @param {string=} content
+         */
+        function cacheStylesheet(path, content)
+        {
+            if (!content) {
+                console.error("Failed to load stylesheet: " + path);
+                return;
+            }
+            Runtime.cachedResources[path] = content;
+        }
+
+        /**
          * @this {Runtime.Module}
          */
         function markAsLoaded()
@@ -751,16 +804,15 @@ Runtime.Module.prototype = {
         if (Runtime.isReleaseMode())
             return loadScriptsPromise([this._name + "_module.js"]);
 
-        return loadScriptsPromise(this._descriptor.scripts.map(modularizeURL, this)).catch(Runtime._reportError);
+        return loadScriptsPromise(this._descriptor.scripts.map(this._modularizeURL, this)).catch(Runtime._reportError);
+    },
 
-        /**
-         * @param {string} scriptName
-         * @this {Runtime.Module}
-         */
-        function modularizeURL(scriptName)
-        {
-            return this._name + "/" + scriptName;
-        }
+    /**
+     * @param {string} scriptName
+     */
+    _modularizeURL: function(scriptName)
+    {
+        return normalizePath(this._name + "/" + scriptName);
     },
 
     /**