DevTools: [CSS] promisify CSS domain

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 326 matching lines @@
 
     /**
      * @return {!Promise.<?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}>}
      */
     fetchMatchedCascade: function()
     {
         var node = this.node();
         if (!node)
             return Promise.resolve(/** @type {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} */(null));
         if (!this._matchedCascadePromise)
-            this._matchedCascadePromise = new Promise(this._getMatchedStylesForNode.bind(this, node)).then(buildMatchedCascades.bind(this, node));
+            this._matchedCascadePromise = this._getMatchedStylesForNode(node).then(buildMatchedCascades.bind(this, node));
         return this._matchedCascadePromise;
 
         /**
          * @param {!WebInspector.DOMNode} node
          * @param {!WebInspector.StylesSidebarPane.MatchedRulesPayload} payload
          * @return {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}}
          * @this {WebInspector.StylesSidebarPane}
          */
         function buildMatchedCascades(node, payload)
         {
             if (node !== this.node() || !payload.fulfilled())
                 return null;
 
             return {
                 matched: this._buildMatchedRulesSectionCascade(node, payload),
                 pseudo: this._buildPseudoCascades(node, payload)
             };
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
-     * @param {function(!WebInspector.StylesSidebarPane.MatchedRulesPayload)} callback
+     * @return {!Promise.<!WebInspector.StylesSidebarPane.MatchedRulesPayload>}
      */
-    _getMatchedStylesForNode: function(node, callback)
+    _getMatchedStylesForNode: function(node)

[pfeldman, 2015/06/25 16:16:11]

_matchedStylesForNode

[lushnikov, 2015/06/25 16:40:30]

Done.

     {
         var payload = new WebInspector.StylesSidebarPane.MatchedRulesPayload();
         var cssModel = this.cssModel();
-        if (!cssModel) {
-            callback(payload);
-            return;
-        }
-        cssModel.getInlineStylesAsync(node.id, inlineCallback);
-        cssModel.getMatchedStylesAsync(node.id, false, false, matchedCallback);
+        if (!cssModel)
+            return Promise.resolve(payload);
+
+        var promises = [
+            cssModel.getInlineStylesPromise(node.id).then(inlineCallback),
+            cssModel.getMatchedStylesPromise(node.id, false, false).then(matchedCallback)
+        ];
+        return Promise.all(promises).then(returnPayload);
 
         /**
          * @param {?WebInspector.CSSStyleModel.InlineStyleResult} inlineStyleResult
          */
         function inlineCallback(inlineStyleResult)
         {
             if (!inlineStyleResult)
                 return;
             payload.inlineStyle = inlineStyleResult.inlineStyle;
             payload.attributesStyle = inlineStyleResult.attributesStyle;
         }
 
         /**
          * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedResult
          */
         function matchedCallback(matchedResult)
         {
             if (matchedResult) {
                 payload.matchedCSSRules = matchedResult.matchedCSSRules;
                 payload.pseudoElements = matchedResult.pseudoElements;
                 payload.inherited = matchedResult.inherited;
             }
-            callback(payload);
+        }
+
+        /**
+         * @return {!WebInspector.StylesSidebarPane.MatchedRulesPayload}
+         */
+        function returnPayload()
+        {
+            return payload;
         }
     },
 
     /**
      * @param {boolean} editing
      */
     setEditingStyle: function(editing)
     {
         if (this._isEditingStyle === editing)
             return;
@@ skipping 1128 matching lines @@
      */
     _editingMediaCommitted: function(media, element, newContent, oldContent, context, moveDirection)
     {
         this._parentPane.setEditingStyle(false);
         this._editingMediaFinished(element);
 
         if (newContent)
             newContent = newContent.trim();
 
         /**
-         * @param {!WebInspector.CSSMedia} newMedia
+         * @param {?WebInspector.CSSMedia} newMedia
          * @this {WebInspector.StylePropertiesSection}
          */
-        function successCallback(newMedia)
+        function userCallback(newMedia)
         {
-            this._parentPane._styleSheetMediaEdited(media, newMedia);
-            this._parentPane._refreshUpdate(this);
-            finishOperation.call(this);
-        }
-
-        /**
-         * @this {WebInspector.StylePropertiesSection}
-         */
-        function finishOperation()
-        {
+            if (newMedia) {
+                this._parentPane._styleSheetMediaEdited(media, newMedia);
+                this._parentPane._refreshUpdate(this);
+            }
             delete this._parentPane._userOperation;
             this._editingMediaTextCommittedForTest();
         }
 
         // This gets deleted in finishOperation(), which is called both on success and failure.
         this._parentPane._userOperation = true;
-        this._parentPane._cssModel.setMediaText(media, newContent, successCallback.bind(this), finishOperation.bind(this));
+        this._parentPane._cssModel.setMediaText(media, newContent, userCallback.bind(this));
     },
 
     _editingMediaTextCommittedForTest: function() { },
 
     /**
      * @param {!Event} event
      */
     _handleSelectorClick: function(event)
     {
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)) && this.navigable && event.target.classList.contains("simple-selector")) {
@@ skipping 109 matching lines @@
         if (newContent)
             newContent = newContent.trim();
         if (newContent === oldContent) {
             // Revert to a trimmed version of the selector if need be.
             this._selectorElement.textContent = newContent;
             this._moveEditorFromSelector(moveDirection);
             return;
         }
 
         /**
-         * @param {!WebInspector.CSSRule} newRule
+         * @param {?WebInspector.CSSRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
-        function successCallback(newRule)
+        function finishCallback(newRule)
         {
-            var doesAffectSelectedNode = newRule.matchingSelectors.length > 0;
-            this.element.classList.toggle("no-affect", !doesAffectSelectedNode);
+            if (newRule) {
+                var doesAffectSelectedNode = newRule.matchingSelectors.length > 0;
+                this.element.classList.toggle("no-affect", !doesAffectSelectedNode);
 
-            var oldSelectorRange = this.rule().selectorRange;
-            this.styleRule.updateRule(newRule);
+                var oldSelectorRange = this.rule().selectorRange;
+                this.styleRule.updateRule(newRule);
 
-            this._parentPane._refreshUpdate(this);
-            this._parentPane._styleSheetRuleEdited(newRule, oldSelectorRange, newRule.selectorRange);
+                this._parentPane._refreshUpdate(this);
+                this._parentPane._styleSheetRuleEdited(newRule, oldSelectorRange, newRule.selectorRange);
+            }
 
-            finishOperationAndMoveEditor.call(this, moveDirection);
-        }
-
-        /**
-         * @param {string} direction
-         * @this {WebInspector.StylePropertiesSection}
-         */
-        function finishOperationAndMoveEditor(direction)
-        {
             delete this._parentPane._userOperation;
-            this._moveEditorFromSelector(direction);
+            this._moveEditorFromSelector(moveDirection);
             this._editingSelectorCommittedForTest();
         }
 
         // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
         this._parentPane._userOperation = true;
         var selectedNode = this._parentPane.node();
-        this._parentPane._cssModel.setRuleSelector(this.rule(), selectedNode ? selectedNode.id : 0, newContent, successCallback.bind(this), finishOperationAndMoveEditor.bind(this, moveDirection));
+        this._parentPane._cssModel.setRuleSelector(this.rule(), selectedNode ? selectedNode.id : 0, newContent, finishCallback.bind(this));
     },
 
     _editingSelectorCommittedForTest: function() { },
 
     _updateRuleOrigin: function()
     {
         this._selectorRefElement.removeChildren();
         this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._parentPane._cssModel, this._parentPane._linkifier, this.rule()));
     },
 
@@ skipping 126 matching lines @@
      * @param {string} moveDirection
      */
     editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
     {
         if (!this.isBlank) {
             WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this, element, newContent, oldContent, context, moveDirection);
             return;
         }
 
         /**
-         * @param {!WebInspector.CSSRule} newRule
+         * @param {?WebInspector.CSSRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
-        function successCallback(newRule)
+        function userCallback(newRule)
         {
+            if (!newRule) {
+                this.editingSelectorCancelled();
+                this._editingSelectorCommittedForTest();
+                return;
+            }
             var doesSelectorAffectSelectedNode = newRule.matchingSelectors.length > 0;
             this._makeNormal(newRule);
 
             if (!doesSelectorAffectSelectedNode)
                 this.element.classList.add("no-affect");
 
             var ruleTextLines = ruleText.split("\n");
             var startLine = this._ruleLocation.startLine;
             var startColumn = this._ruleLocation.startColumn;
             var newRange = new WebInspector.TextRange(startLine, startColumn, startLine + ruleTextLines.length - 1, startColumn + ruleTextLines[ruleTextLines.length - 1].length);
             this._parentPane._styleSheetRuleEdited(newRule, this._ruleLocation, newRange);
 
             this._updateRuleOrigin();
             if (this.element.parentElement) // Might have been detached already.
                 this._moveEditorFromSelector(moveDirection);
 
             delete this._parentPane._userOperation;
             this._editingSelectorEnded();
             this._markSelectorMatches();
 
             this._editingSelectorCommittedForTest();
         }
 
-        /**
-         * @this {WebInspector.StylePropertiesSection}
-         */
-        function failureCallback()
-        {
-            this.editingSelectorCancelled();
-            this._editingSelectorCommittedForTest();
-        }
-
         if (newContent)
             newContent = newContent.trim();
         this._parentPane._userOperation = true;
 
         var cssModel = this._parentPane._cssModel;
         var ruleText = this._rulePrefix() + newContent + " {}";
-        cssModel.addRule(this._styleSheetId, this._parentPane.node(), ruleText, this._ruleLocation, successCallback.bind(this), failureCallback.bind(this));
+        cssModel.addRule(this._styleSheetId, this._parentPane.node(), ruleText, this._ruleLocation, userCallback.bind(this));
     },
 
     editingSelectorCancelled: function()
     {
         delete this._parentPane._userOperation;
         if (!this.isBlank) {
             WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
             return;
         }
 
@@ skipping 1304 matching lines @@
 
     /**
      * @override
      * @return {?WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }