DevTools: Get rid of synchronous XHRs in the frontend code

Source/devtools/front_end/Runtime.js

 /*
  * Copyright (C) 2014 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 17 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 // This gets all concatenated module descriptors in the release mode.
 var allDescriptors = [];
 var applicationDescriptor;
 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)
 {
     return new Promise(load);
 
     /**
      * @param {function(?)} fulfill
      * @param {function(*)} reject
      */
@@ skipping 161 matching lines @@
  * @return {boolean}
  */
 Runtime.isReleaseMode = function()
 {
     return !!allDescriptors.length;
 }
 
 /**
  * @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);
+        return Promise.resolve(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 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}
      */
     var loader = function() {
         self.onmessage = function(event) {
             self.onmessage = null;
             var scripts = event.data;
             for (var i = 0; i < scripts.length; ++i) {
                 var source = scripts[i]["source"];
                 self.eval(source + "\n//# sourceURL=" + scripts[i]["url"]);
             }
         };
     };
 
-    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);
+            }
+        }
     }
 }
 
 /**
  * @param {string} appName
  */
 Runtime.startApplication = function(appName)
 {
     console.timeStamp("Runtime.startApplication");
 
@@ skipping 409 matching lines @@
 
         if (this._pendingLoadPromise)
             return this._pendingLoadPromise;
 
         var dependencies = this._descriptor.dependencies;
         var dependencyPromises = [];
         for (var i = 0; dependencies && i < dependencies.length; ++i)
             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()
         {
             delete this._pendingLoadPromise;
             this._loaded = true;
         }
     },
 
     /**
      * @return {!Promise.<undefined>}
      */
     _loadScripts: function()
     {
         if (!this._descriptor.scripts)
             return Promise.resolve(undefined);
 
         if (Runtime.isReleaseMode())
             return loadScriptsPromise([this._name + "_module.js"]);
 
-        return loadScriptsPromise(this._descriptor.scripts.map(modularizeURL, this)).catch(Runtime._reportError);
-
-        /**
-         * @param {string} scriptName
-         * @this {Runtime.Module}
-         */
-        function modularizeURL(scriptName)
-        {
-            return this._name + "/" + scriptName;
-        }
+        return loadScriptsPromise(this._descriptor.scripts.map(this._modularizeURL, this)).catch(Runtime._reportError);
     },
 
     /**
+     * @param {string} scriptName
+     */
+    _modularizeURL: function(scriptName)
+    {
+        return normalizePath(this._name + "/" + scriptName);
+    },
+
+    /**
      * @param {string} className
      * @return {?Object}
      */
     _instance: function(className)
     {
         if (className in this._instanceMap)
             return this._instanceMap[className];
 
         var constructorFunction = window.eval(className);
         if (!(constructorFunction instanceof Function)) {
@@ skipping 270 matching lines @@
         }
     }
 })();}
 
 
 // This must be constructed after the query parameters have been parsed.
 Runtime.experiments = new Runtime.ExperimentsSupport();
 
 /** @type {!Runtime} */
 var runtime;