DevTools: [CSS] promisify CSS domain

Source/devtools/front_end/sdk/CSSStyleModel.js

 /*
  * Copyright (C) 2010 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 27 matching lines @@
     WebInspector.SDKModel.call(this, WebInspector.CSSStyleModel, target);
     this._domModel = WebInspector.DOMModel.fromTarget(target);
     this._agent = target.cssAgent();
     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.SuspendStateChanged, this._suspendStateChanged, this);
     this._pendingCommandsMajorState = [];
     this._styleLoader = new WebInspector.CSSStyleModel.ComputedStyleLoader(this);
     this._domModel.addEventListener(WebInspector.DOMModel.Events.UndoRedoRequested, this._undoRedoRequested, this);
     this._domModel.addEventListener(WebInspector.DOMModel.Events.UndoRedoCompleted, this._undoRedoCompleted, this);
     target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
     target.registerCSSDispatcher(new WebInspector.CSSDispatcher(this));
-    this._agent.enable(this._wasEnabled.bind(this));
+    this._agent.enable().spread(this._wasEnabled.bind(this));

[pfeldman, 2015/06/24 16:38:12]

Why spread?

[lushnikov, 2015/06/24 16:45:25]

Oops. Accidental. 

     /** @type {!Map.<string, !WebInspector.CSSStyleSheetHeader>} */
     this._styleSheetIdToHeader = new Map();
     /** @type {!Map.<string, !Object.<!PageAgent.FrameId, !Array.<!CSSAgent.StyleSheetId>>>} */
     this._styleSheetIdsForURL = new Map();
 }
 
 WebInspector.CSSStyleModel.PseudoStatePropertyName = "pseudoState";
 
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
@@ skipping 24 matching lines @@
 
 WebInspector.CSSStyleModel.prototype = {
     /**
      * @param {function(!Array.<!WebInspector.CSSMedia>)} userCallback
      */
     getMediaQueries: function(userCallback)
     {
         /**
          * @param {?Protocol.Error} error
          * @param {?Array.<!CSSAgent.CSSMedia>} payload
+         * @return {!Array.<!WebInspector.CSSMedia>}
          * @this {!WebInspector.CSSStyleModel}
          */
-        function callback(error, payload)
+        function parsePayload(error, payload)
         {
-            var models = [];
-            if (!error && payload)
-                models = WebInspector.CSSMedia.parseMediaArrayPayload(this, payload);
-            userCallback(models);
+            return !error && payload ? WebInspector.CSSMedia.parseMediaArrayPayload(this, payload) : [];
         }
-        this._agent.getMediaQueries(callback.bind(this));
+
+        this._agent.getMediaQueries(parsePayload.bind(this))
+            .catchException([])

[pfeldman, 2015/06/24 16:38:12]

1. It is not checking whether [] matcher the signature above.
2. When does the agent method fail?

[lushnikov, 2015/06/24 16:45:25]

Thats minor, but ill fix it
Whenever exception is thrown inside parse payload callback

+            .then(userCallback);

[pfeldman, 2015/06/24 16:38:12]

So any error in the user callback is ignored? What if the exception is there?

[lushnikov, 2015/06/24 16:45:25]

It gets reported in the devtools console. 

     },
 
     /**
      * @return {boolean}
      */
     isEnabled: function()
     {
         return this._isEnabled;
     },
 
-    _wasEnabled: function()
+    /**
+     * @param {?Protocol.Error} error
+     */
+    _wasEnabled: function(error)
     {
+        if (error) {
+            console.error("Failed to enabled CSS agent: " + error);
+            return;
+        }
         this._isEnabled = true;
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.ModelWasEnabled);
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {boolean} excludePseudo
      * @param {boolean} excludeInherited
      * @param {function(?*)} userCallback
      */
     getMatchedStylesAsync: function(nodeId, excludePseudo, excludeInherited, userCallback)
     {
         /**
-         * @param {function(?*)} userCallback
          * @param {?Protocol.Error} error
          * @param {!Array.<!CSSAgent.RuleMatch>=} matchedPayload
          * @param {!Array.<!CSSAgent.PseudoIdMatches>=} pseudoPayload
          * @param {!Array.<!CSSAgent.InheritedStyleEntry>=} inheritedPayload
+         * @return {?*}
          * @this {WebInspector.CSSStyleModel}
          */
-        function callback(userCallback, error, matchedPayload, pseudoPayload, inheritedPayload)
+        function parsePayload(error, matchedPayload, pseudoPayload, inheritedPayload)
         {
-            if (error) {
-                if (userCallback)
-                    userCallback(null);
-                return;
+            if (error)
+                return null;
+            var result = {};
+            result.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, matchedPayload);
+
+            result.pseudoElements = [];
+            if (pseudoPayload) {
+                for (var i = 0; i < pseudoPayload.length; ++i) {
+                    var entryPayload = pseudoPayload[i];
+                    result.pseudoElements.push({ pseudoId: entryPayload.pseudoId, rules: WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, entryPayload.matches) });
+                }
             }
 
-            var result = {};
-            // Due to CSSOM inconsistencies, backend might send us illegal data. @see crbug.com/178410
-            try {
-                result.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, matchedPayload);
-
-                result.pseudoElements = [];
-                if (pseudoPayload) {
-                    for (var i = 0; i < pseudoPayload.length; ++i) {
-                        var entryPayload = pseudoPayload[i];
-                        result.pseudoElements.push({ pseudoId: entryPayload.pseudoId, rules: WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, entryPayload.matches) });
-                    }
+            result.inherited = [];
+            if (inheritedPayload) {
+                for (var i = 0; i < inheritedPayload.length; ++i) {
+                    var entryPayload = inheritedPayload[i];
+                    var entry = {};
+                    if (entryPayload.inlineStyle)
+                        entry.inlineStyle = WebInspector.CSSStyleDeclaration.parsePayload(this, entryPayload.inlineStyle);
+                    if (entryPayload.matchedCSSRules)
+                        entry.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, entryPayload.matchedCSSRules);
+                    result.inherited.push(entry);
                 }
-
-                result.inherited = [];
-                if (inheritedPayload) {
-                    for (var i = 0; i < inheritedPayload.length; ++i) {
-                        var entryPayload = inheritedPayload[i];
-                        var entry = {};
-                        if (entryPayload.inlineStyle)
-                            entry.inlineStyle = WebInspector.CSSStyleDeclaration.parsePayload(this, entryPayload.inlineStyle);
-                        if (entryPayload.matchedCSSRules)
-                            entry.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleMatchArrayPayload(this, entryPayload.matchedCSSRules);
-                        result.inherited.push(entry);
-                    }
-                }
-            } catch (e) {
-                console.error(e);
-                result = null;
             }
-
-            if (userCallback)
-                userCallback(result);
+            return result;
         }
 
-        this._agent.getMatchedStylesForNode(nodeId, excludePseudo, excludeInherited, callback.bind(this, userCallback));
+        this._agent.getMatchedStylesForNode(nodeId, excludePseudo, excludeInherited, parsePayload.bind(this))
+            .catchException(null)
+            .then(userCallback);
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {function(?WebInspector.CSSStyleDeclaration)} userCallback
      */
     getComputedStyleAsync: function(nodeId, userCallback)
     {
         this._styleLoader.getComputedStyle(nodeId, userCallback);
     },
 
     /**
      * @param {number} nodeId
      * @param {function(?string, ?Array.<!CSSAgent.PlatformFontUsage>)} callback
      */
     getPlatformFontsForNode: function(nodeId, callback)
     {
+        /**
+         * @param {?Protocol.Error} error
+         * @param {?string} cssFamilyName
+         * @param {?Array.<!CSSAgent.PlatformFontUsage>} fonts
+         * @return {!Array.<?>}
+         */
         function platformFontsCallback(error, cssFamilyName, fonts)
         {
-            if (error)
-                callback(null, null);
-            else
-                callback(cssFamilyName, fonts);
+            return error ? [null, null] : [cssFamilyName, fonts];
         }
-        this._agent.getPlatformFontsForNode(nodeId, platformFontsCallback);
+        this._agent.getPlatformFontsForNode(nodeId, platformFontsCallback)
+            .catchException([null, null])
+            .spread(callback)
     },
 
     /**
      * @return {!Array.<!WebInspector.CSSStyleSheetHeader>}
      */
     allStyleSheets: function()
     {
         var values = this._styleSheetIdToHeader.valuesArray();
         /**
          * @param {!WebInspector.CSSStyleSheetHeader} a
@@ skipping 13 matching lines @@
         return values;
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {function(?WebInspector.CSSStyleDeclaration, ?WebInspector.CSSStyleDeclaration)} userCallback
      */
     getInlineStylesAsync: function(nodeId, userCallback)
     {
         /**
-         * @param {function(?WebInspector.CSSStyleDeclaration, ?WebInspector.CSSStyleDeclaration)} userCallback
          * @param {?Protocol.Error} error
          * @param {?CSSAgent.CSSStyle=} inlinePayload
          * @param {?CSSAgent.CSSStyle=} attributesStylePayload
+         * @return {!Array.<?CSSStyleDeclaration>}
          * @this {WebInspector.CSSStyleModel}
          */
-        function callback(userCallback, error, inlinePayload, attributesStylePayload)
+        function parsePayload(error, inlinePayload, attributesStylePayload)
         {
-            if (error || !inlinePayload)
-                userCallback(null, null);
-            else
-                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(this, inlinePayload), attributesStylePayload ? WebInspector.CSSStyleDeclaration.parsePayload(this, attributesStylePayload) : null);
+            var result = [null, null];
+            if (error)
+               return result;
+            if (inlinePayload)
+                result[0] = WebInspector.CSSStyleDeclaration.parsePayload(this, inlinePayload);
+            if (attributesStylePayload)
+                result[1] = WebInspector.CSSStyleDeclaration.parsePayload(this, attributesStylePayload);
+            return result;
         }
 
-        this._agent.getInlineStylesForNode(nodeId, callback.bind(this, userCallback));
+        this._agent.getInlineStylesForNode(nodeId, parsePayload.bind(this))
+            .catchException([null, null])
+            .spread(userCallback);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {string} pseudoClass
      * @param {boolean} enable
      * @return {boolean}
      */
     forcePseudoState: function(node, pseudoClass, enable)
     {
@@ skipping 13 matching lines @@
 
         this._agent.forcePseudoState(node.id, pseudoClasses);
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.PseudoStateForced, { node: node, pseudoClass: pseudoClass, enable: enable });
         return true;
     },
 
     /**
      * @param {!CSSAgent.CSSRule} rule
      * @param {!DOMAgent.NodeId} nodeId
      * @param {string} newSelector
-     * @param {function(!WebInspector.CSSRule)} successCallback
-     * @param {function()} failureCallback
+     * @param {function(?WebInspector.CSSRule)} userCallback
      */
-    setRuleSelector: function(rule, nodeId, newSelector, successCallback, failureCallback)
+    setRuleSelector: function(rule, nodeId, newSelector, userCallback)
     {
         /**
-         * @param {!DOMAgent.NodeId} nodeId
-         * @param {function(!WebInspector.CSSRule)} successCallback
-         * @param {function()} failureCallback
          * @param {?Protocol.Error} error
-         * @param {string} newSelector
-         * @param {!CSSAgent.CSSRule} rulePayload
+         * @param {?CSSAgent.CSSRule} rulePayload
+         * @return {?CSSAgent.CSSRule}
          * @this {WebInspector.CSSStyleModel}
          */
-        function callback(nodeId, successCallback, failureCallback, newSelector, error, rulePayload)
+        function callback(error, rulePayload)
         {
             this._pendingCommandsMajorState.pop();
-            if (error) {
-                failureCallback();
-                return;
-            }
+            if (error || !rulePayload)
+                return null;
             this._domModel.markUndoableState();
-            this._computeMatchingSelectors(rulePayload, nodeId, successCallback, failureCallback);
+            return rulePayload;
         }
 
         if (!rule.styleSheetId)
             throw "No rule stylesheet id";
         WebInspector.userMetrics.StyleRuleEdited.record();
         this._pendingCommandsMajorState.push(true);
-        this._agent.setRuleSelector(rule.styleSheetId, rule.selectorRange, newSelector, callback.bind(this, nodeId, successCallback, failureCallback, newSelector));
+        this._agent.setRuleSelector(rule.styleSheetId, rule.selectorRange, newSelector, callback.bind(this))
+            .then(this._computeMatchingSelectors.bind(this, nodeId))
+            .catchException(null)
+            .then(userCallback);
     },
 
     /**
      * @param {!WebInspector.CSSMedia} media
      * @param {string} newMediaText
-     * @param {function(!WebInspector.CSSMedia)} successCallback
-     * @param {function()} failureCallback
+     * @param {function(?WebInspector.CSSMedia)} userCallback
      */
-    setMediaText: function(media, newMediaText, successCallback, failureCallback)
+    setMediaText: function(media, newMediaText, userCallback)
     {
         /**
-         * @param {function(!WebInspector.CSSMedia)} successCallback
-         * @param {function()} failureCallback
          * @param {?Protocol.Error} error
          * @param {!CSSAgent.CSSMedia} mediaPayload
+         * @return {?WebInspector.CSSMedia}
          * @this {WebInspector.CSSStyleModel}
          */
-        function callback(successCallback, failureCallback, error, mediaPayload)
+        function parsePayload(error, mediaPayload)
         {
             this._pendingCommandsMajorState.pop();
-            if (error) {
-                failureCallback();
-                return;
-            }
+            if (!mediaPayload)
+                return null;
             this._domModel.markUndoableState();
-            successCallback(WebInspector.CSSMedia.parsePayload(this, mediaPayload));
+            return WebInspector.CSSMedia.parsePayload(this, mediaPayload);
         }
 
         console.assert(!!media.parentStyleSheetId);
         WebInspector.userMetrics.StyleRuleEdited.record();
         this._pendingCommandsMajorState.push(true);
-        this._agent.setMediaText(media.parentStyleSheetId, media.range, newMediaText, callback.bind(this, successCallback, failureCallback));
+        this._agent.setMediaText(media.parentStyleSheetId, media.range, newMediaText, parsePayload.bind(this))
+            .catchException(null)
+            .then(userCallback);
     },
 
     /**
-     * @param {!CSSAgent.CSSRule} rulePayload
      * @param {!DOMAgent.NodeId} nodeId
-     * @param {function(!WebInspector.CSSRule)} successCallback
-     * @param {function()} failureCallback
+     * @param {?CSSAgent.CSSRule} rulePayload
+     * @return {!Promise.<?WebInspector.CSSRule>}
      */
-    _computeMatchingSelectors: function(rulePayload, nodeId, successCallback, failureCallback)
+    _computeMatchingSelectors: function(nodeId, rulePayload)
     {
         var ownerDocumentId = this._ownerDocumentId(nodeId);
-        if (!ownerDocumentId) {
-            failureCallback();
-            return;
-        }
+        if (!ownerDocumentId || !rulePayload)
+            return Promise.resolve(/** @type {?WebInspector.CSSRule} */(null));
         var rule = WebInspector.CSSRule.parsePayload(this, rulePayload);
         var matchingSelectors = [];
         var allSelectorsBarrier = new CallbackBarrier();
         for (var i = 0; i < rule.selectors.length; ++i) {
             var selector = rule.selectors[i];
             var boundCallback = allSelectorsBarrier.createCallback(selectorQueried.bind(null, i, nodeId, matchingSelectors));
             this._domModel.querySelectorAll(ownerDocumentId, selector.value, boundCallback);
         }
-        allSelectorsBarrier.callWhenDone(function() {
-            rule.matchingSelectors = matchingSelectors;
-            successCallback(rule);
+        return new Promise(function(resolve) {
+            allSelectorsBarrier.callWhenDone(function() {
+                rule.matchingSelectors = matchingSelectors;
+                resolve(rule);
+            });
         });
 
         /**
          * @param {number} index
          * @param {!DOMAgent.NodeId} nodeId
          * @param {!Array.<number>} matchingSelectors
          * @param {!Array.<!DOMAgent.NodeId>=} matchingNodeIds
          */
         function selectorQueried(index, nodeId, matchingSelectors, matchingNodeIds)
         {
             if (!matchingNodeIds)
                 return;
             if (matchingNodeIds.indexOf(nodeId) !== -1)
                 matchingSelectors.push(index);
         }
     },
 
     /**
      * @param {!CSSAgent.StyleSheetId} styleSheetId
      * @param {!WebInspector.DOMNode} node
      * @param {string} ruleText
      * @param {!WebInspector.TextRange} ruleLocation
-     * @param {function(!WebInspector.CSSRule)} successCallback
-     * @param {function()} failureCallback
+     * @param {function(?WebInspector.CSSRule)} userCallback
      */
-    addRule: function(styleSheetId, node, ruleText, ruleLocation, successCallback, failureCallback)
+    addRule: function(styleSheetId, node, ruleText, ruleLocation, userCallback)
     {
         this._pendingCommandsMajorState.push(true);
-        this._agent.addRule(styleSheetId, ruleText, ruleLocation, callback.bind(this));
+        this._agent.addRule(styleSheetId, ruleText, ruleLocation, parsePayload.bind(this))
+            .then(this._computeMatchingSelectors.bind(this, node.id))
+            .catchException(null)
+            .then(userCallback);
 
         /**
          * @param {?Protocol.Error} error
-         * @param {!CSSAgent.CSSRule} rulePayload
+         * @param {?CSSAgent.CSSRule} rulePayload
+         * @return {?CSSAgent.CSSRule}
          * @this {WebInspector.CSSStyleModel}
          */
-        function callback(error, rulePayload)
+        function parsePayload(error, rulePayload)
         {
             this._pendingCommandsMajorState.pop();
-            if (error) {
-                // Invalid syntax for a selector
-                failureCallback();
-            } else {
-                this._domModel.markUndoableState();
-                this._computeMatchingSelectors(rulePayload, node.id, successCallback, failureCallback);
-            }
+            if (error || !rulePayload)
+                return null;
+            this._domModel.markUndoableState();
+            return rulePayload;
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
-     * @param {function(?WebInspector.CSSStyleSheetHeader)} callback
+     * @param {function(?WebInspector.CSSStyleSheetHeader)} userCallback
      */
-    requestViaInspectorStylesheet: function(node, callback)
+    requestViaInspectorStylesheet: function(node, userCallback)
     {
         var frameId = node.frameId() || this.target().resourceTreeModel.mainFrame.id;
         var headers = this._styleSheetIdToHeader.valuesArray();
         for (var i = 0; i < headers.length; ++i) {
             var styleSheetHeader = headers[i];
             if (styleSheetHeader.frameId === frameId && styleSheetHeader.isViaInspector()) {
-                callback(styleSheetHeader);
+                userCallback(styleSheetHeader);
                 return;
             }
         }
 
         /**
+         * @param {?Protocol.Error} error
+         * @param {?CSSAgent.StyleSheetId} styleSheetId
+         * @return {?WebInspector.CSSStyleSheetHeader}
          * @this {WebInspector.CSSStyleModel}
-         * @param {?Protocol.Error} error
-         * @param {!CSSAgent.StyleSheetId} styleSheetId
          */
         function innerCallback(error, styleSheetId)
         {
-            if (error) {
-                console.error(error);
-                callback(null);
-            }
-
-            callback(this._styleSheetIdToHeader.get(styleSheetId) || null);
+            return !error && styleSheetId ? this._styleSheetIdToHeader.get(styleSheetId) || null : null;
         }
 
-        this._agent.createStyleSheet(frameId, innerCallback.bind(this));
+        this._agent.createStyleSheet(frameId, innerCallback.bind(this))
+            .catchException(null)
+            .then(userCallback)
     },
 
     mediaQueryResultChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged);
     },
 
     /**
      * @param {!CSSAgent.StyleSheetId} id
      * @return {?WebInspector.CSSStyleSheetHeader}
@@ skipping 150 matching lines @@
             this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, headers[i]);
     },
 
     _suspendStateChanged: function()
     {
         if (WebInspector.targetManager.allTargetsSuspended()) {
             this._agent.disable();
             this._isEnabled = false;
         } else {
             this._resetStyleSheets();
-            this._agent.enable(this._wasEnabled.bind(this));
+            this._agent.enable().spread(this._wasEnabled.bind(this));
         }
     },
 
     __proto__: WebInspector.SDKModel.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SDKObject}
  * @param {!WebInspector.CSSStyleModel} cssModel
@@ skipping 264 matching lines @@
     {
         index = (typeof index === "undefined") ? this.pastLastSourcePropertyIndex() : index;
         var property = new WebInspector.CSSProperty(this, index, "", "", false, false, true, false, "", this._insertionRange(index));
         property._setActive(true);
         return property;
     },
 
     /**
      * @param {string} text
      * @param {boolean} majorChange
-     * @param {function(?WebInspector.CSSStyleDeclaration)} callback
+     * @param {function(?WebInspector.CSSStyleDeclaration)} userCallback
      */
-    setText: function(text, majorChange, callback)
+    setText: function(text, majorChange, userCallback)
     {
         if (!this.styleSheetId) {
-            callback(null);
+            userCallback(null);
             return;
         }
 
         /**
          * @param {?Protocol.Error} error
-         * @param {!CSSAgent.CSSStyle} stylePayload
+         * @param {?CSSAgent.CSSStyle} stylePayload
+         * @return {?WebInspector.CSSStyleDeclaration}
          * @this {WebInspector.CSSStyleDeclaration}
          */
-        function mycallback(error, stylePayload)
+        function parsePayload(error, stylePayload)
         {
             this._cssModel._pendingCommandsMajorState.pop();
-            if (!error) {
-                if (majorChange)
-                    this._cssModel._domModel.markUndoableState();
-                callback(WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, stylePayload));
-                return;
-            }
-            callback(null);
+            if (error || !stylePayload)
+                return null;
+
+            if (majorChange)
+                this._cssModel._domModel.markUndoableState();
+            return WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, stylePayload);
         }
 
         this._cssModel._pendingCommandsMajorState.push(majorChange);
-        this._cssModel._agent.setStyleText(this.styleSheetId, this.range.serializeToObject(), text, mycallback.bind(this));
+        this._cssModel._agent.setStyleText(this.styleSheetId, this.range.serializeToObject(), text, parsePayload.bind(this))
+            .catchException(null)
+            .then(userCallback)
     },
 
     /**
      * @param {number} index
      * @param {string} name
      * @param {string} value
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     insertPropertyAt: function(index, name, value, userCallback)
     {
@@ skipping 819 matching lines @@
      * @return {string}
      */
     _trimSourceURL: function(text)
     {
         var sourceURLRegex = /\n[\040\t]*\/\*[#@][\040\t]sourceURL=[\040\t]*([^\s]*)[\040\t]*\*\/[\040\t]*$/mg;
         return text.replace(sourceURLRegex, "");
     },
 
     /**
      * @override
-     * @param {function(string)} callback
+     * @param {function(string)} userCallback
      */
-    requestContent: function(callback)
+    requestContent: function(userCallback)
     {
-        this._cssModel._agent.getStyleSheetText(this.id, textCallback.bind(this));
+        this._cssModel._agent.getStyleSheetText(this.id, textCallback.bind(this))
+            .catchException("")
+            .then(userCallback)
 
         /**
+         * @param {?Protocol.Error} error
+         * @param {?string} text
+         * @return {string}
          * @this {WebInspector.CSSStyleSheetHeader}
          */
         function textCallback(error, text)
         {
-            if (error) {
-                WebInspector.console.error("Failed to get text for stylesheet " + this.id + ": " + error);
+            if (error || !text) {
+                WebInspector.console.error("Failed to get text for stylesheet " + this.id + ": " + error)
                 text = "";
                 // Fall through.
             }
-            text = this._trimSourceURL(text);
-            callback(text);
+            return this._trimSourceURL(text);
         }
     },
 
     /**
      * @override
      */
     searchInContent: function(query, caseSensitive, isRegex, callback)
     {
         function performSearch(content)
         {
             callback(WebInspector.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex));
         }
 
         // searchInContent should call back later.
         this.requestContent(performSearch);
     },
 
     /**
      * @param {string} newText
      * @param {function(?Protocol.Error)} callback
      */
     setContent: function(newText, callback)
     {
         newText = this._trimSourceURL(newText);
         if (this.hasSourceURL)
             newText += "\n/*# sourceURL=" + this.sourceURL + " */";
-        this._cssModel._agent.setStyleSheetText(this.id, newText, callback);
+        this._cssModel._agent.setStyleSheetText(this.id, newText)
+            .spread(callback);
     },
 
     /**
      * @return {boolean}
      */
     isViaInspector: function()
     {
         return this.origin === "inspector";
     }
 }
@@ skipping 63 matching lines @@
      */
     getComputedStyle: function(nodeId, userCallback)
     {
         if (this._nodeIdToCallbackData[nodeId]) {
             this._nodeIdToCallbackData[nodeId].push(userCallback);
             return;
         }
 
         this._nodeIdToCallbackData[nodeId] = [userCallback];
 
-        this._cssModel._agent.getComputedStyleForNode(nodeId, resultCallback.bind(this, nodeId));
+        this._cssModel._agent.getComputedStyleForNode(nodeId, parsePayload.bind(this))
+            .catchException(null)
+            .then(broadcast.bind(this, nodeId))
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!Array.<!CSSAgent.CSSComputedStyleProperty>} computedPayload
+         * @return {?WebInspector.CSSStyleDeclaration}
+         * @this {WebInspector.CSSStyleModel.ComputedStyleLoader}
+         */
+        function parsePayload(error, computedPayload)
+        {
+            return !error && computedPayload ? WebInspector.CSSStyleDeclaration.parseComputedStylePayload(this._cssModel, computedPayload) : null;
+        }
 
         /**
          * @param {!DOMAgent.NodeId} nodeId
-         * @param {?Protocol.Error} error
-         * @param {!Array.<!CSSAgent.CSSComputedStyleProperty>} computedPayload
+         * @param {?WebInspector.CSSStyleDeclaration} computedStyle
          * @this {WebInspector.CSSStyleModel.ComputedStyleLoader}
          */
-        function resultCallback(nodeId, error, computedPayload)
+        function broadcast(nodeId, computedStyle)
         {
-            var computedStyle = (error || !computedPayload) ? null : WebInspector.CSSStyleDeclaration.parseComputedStylePayload(this._cssModel, computedPayload);
             var callbacks = this._nodeIdToCallbackData[nodeId];
 
             // The loader has been reset.
             if (!callbacks)
                 return;
 
             delete this._nodeIdToCallbackData[nodeId];
             for (var i = 0; i < callbacks.length; ++i)
                 callbacks[i](computedStyle);
         }
@@ skipping 12 matching lines @@
 }
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @return {!WebInspector.CSSStyleModel}
  */
 WebInspector.CSSStyleModel.fromNode = function(node)
 {
     return /** @type {!WebInspector.CSSStyleModel} */ (WebInspector.CSSStyleModel.fromTarget(node.target()));
 }