DevTools: Get rid of synchronous XHRs in the frontend code

Source/devtools/front_end/sdk/CSSParser.js

 /**
  * Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  */
 WebInspector.CSSParser = function()
 {
-    this._worker = Runtime.startWorker("script_formatter_worker");
-    this._worker.onmessage = this._onRuleChunk.bind(this);
     this._rules = [];
-}
-
-WebInspector.CSSParser.Events = {
-    RulesParsed: "RulesParsed"
+    this._pendingWorkerPromise = WorkerRuntime.startWorker("script_formatter_worker").then(this._init.bind(this));
 }
 
 WebInspector.CSSParser.prototype = {
     /**
+     * @param {!Worker} worker
+     */
+    _init: function(worker)
+    {
+        this._worker = worker;
+        if (this._disposed) {
+            this.dispose();
+            return;
+        }
+        this._worker.onmessage = this._onRuleChunk.bind(this);
+        return this._worker;
+    },
+
+    /**
+     * @param {!Promise.<string>} contentPromise
+     */
+    _innerParseContentPromise: function(contentPromise)
+    {
+        return Promise.all([this._pendingWorkerPromise, contentPromise]).then(process.bind(this));
+
+        /**
+         * @param {!Array.<?>} results
+         * @return {!Promise.<!Array.<!WebInspector.CSSParser.Rule>>}
+         * @this {WebInspector.CSSParser}
+         */
+        function process(results)
+        {
+            return this._innerParse(/** @type {string} */ (results[1]));
+        }
+    },
+
+    /**
      * @param {!WebInspector.CSSStyleSheetHeader} styleSheetHeader
-     * @param {function(!Array.<!WebInspector.CSSParser.Rule>)=} callback
+     * @return {!Promise.<!Array.<!WebInspector.CSSParser.Rule>>}
      */
-    fetchAndParse: function(styleSheetHeader, callback)
+    fetchAndParse: function(styleSheetHeader)
     {
         this._lock();
-        this._finishedCallback = callback;
-        styleSheetHeader.requestContent(this._innerParse.bind(this));
+        return this._innerParseContentPromise(styleSheetHeader.requestContentPromise());

[pfeldman, 2014/11/10 10:23:25]

return styleSheetHeader.requestContent().then(this._innerParse.bind(this));

     },
 
     /**
      * @param {string} text
-     * @param {function(!Array.<!WebInspector.CSSParser.Rule>)=} callback
+     * @return {!Promise.<!Array.<!WebInspector.CSSParser.Rule>>}
      */
-    parse: function(text, callback)
+    parse: function(text)
     {
         this._lock();
-        this._finishedCallback = callback;
-        this._innerParse(text);
+        return this._innerParseContentPromise(Promise.resolve(text));

[pfeldman, 2014/11/10 10:23:25]

return this._innerParse(text);

     },
 
     dispose: function()
     {
         if (this._worker) {
             this._worker.terminate();
             delete this._worker;
+        } else {
+            this._disposed = true;
         }
     },
 
     /**
      * @return {!Array.<!WebInspector.CSSParser.Rule>}
      */
     rules: function()
     {
         return this._rules;
     },
 
     _lock: function()
     {
         console.assert(!this._parsingStyleSheet, "Received request to parse stylesheet before previous was completed.");
         this._parsingStyleSheet = true;
     },
 
     _unlock: function()
     {
         delete this._parsingStyleSheet;
     },
 
     /**
      * @param {?string} text
+     * @return {!Promise.<!Array.<!WebInspector.CSSParser.Rule>>}
      */
     _innerParse: function(text)
     {
+        if (!this._worker) {
+            this._unlock();

[pfeldman, 2014/11/10 10:23:25]

return new Promise(promiseBody);

function promiseBody(fullfill, reject)
{
    this._fullfill = fullfill;
    this._pendingWorkerPromise.then(postMessage.bind(this));
    function postMessage()
    {
        this._worker.postMessage();
    }
}

+            return Promise.resolve([]);
+        }
         this._rules = [];
         this._worker.postMessage({ method: "parseCSS", params: { content: text } });
+        return new Promise(rememberFulfillCallback.bind(this));
+
+        /**
+         * @this {!WebInspector.CSSParser}
+         */
+        function rememberFulfillCallback(fulfill)
+        {
+            console.assert(!this._fulfillCallback, "_innerParse() invoked during parsing");
+            this._fulfillCallback = fulfill;

[pfeldman, 2014/11/10 10:23:25]

I am lost here.

+        }
     },
 
     /**
      * @param {!MessageEvent} event
      */
     _onRuleChunk: function(event)
     {
         var data = /** @type {!WebInspector.CSSParser.DataChunk} */ (event.data);
         var chunk = data.chunk;
         for (var i = 0; i < chunk.length; ++i)
             this._rules.push(chunk[i]);
 
         if (data.isLastChunk)
             this._onFinishedParsing();
-        this.dispatchEventToListeners(WebInspector.CSSParser.Events.RulesParsed);
     },
 
     _onFinishedParsing: function()
     {
         this._unlock();
-        if (this._finishedCallback)
-            this._finishedCallback(this._rules);
+        if (this._fulfillCallback)
+            this._fulfillCallback(this._rules);
+        delete this._fulfillCallback;
     },
 
     __proto__: WebInspector.Object.prototype,
 }
 
 /**
  * @typedef {{isLastChunk: boolean, chunk: !Array.<!WebInspector.CSSParser.Rule>}}
  */
 WebInspector.CSSParser.DataChunk;
 
 /**
  * @typedef {{selectorText: string, lineNumber: number, columnNumber: number, properties: !Array.<!WebInspector.CSSParser.Property>}}
  */
 WebInspector.CSSParser.StyleRule;
 
 /**
  * @typedef {{atRule: string, lineNumber: number, columnNumber: number}}
  */
 WebInspector.CSSParser.AtRule;
 
 /**
  * @typedef {(WebInspector.CSSParser.StyleRule|WebInspector.CSSParser.AtRule)}
  */
 WebInspector.CSSParser.Rule;
 
 /**
  * @typedef {{name: string, value: string}}
  */
 WebInspector.CSSParser.Property;