DevTools: migrate from CSS.setPropertyText to CSS.setStyleText

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 649 matching lines @@
 {
     this._cssModel = cssModel;
     this.styleSheetId = payload.styleSheetId;
     this.range = payload.range ? WebInspector.TextRange.fromObject(payload.range) : null;
     this._shorthandValues = WebInspector.CSSStyleDeclaration.buildShorthandValueMap(payload.shorthandEntries);
     this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty }
     this._allProperties = []; // ALL properties: [ CSSProperty ]
     this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty }
     var payloadPropertyCount = payload.cssProperties.length;
 
-
     for (var i = 0; i < payloadPropertyCount; ++i) {
         var property = WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]);
         this._allProperties.push(property);
     }
 
     this._computeActiveProperties();
 
     var propertyIndex = 0;
     for (var i = 0; i < this._allProperties.length; ++i) {
         var property = this._allProperties[i];
@@ skipping 209 matching lines @@
      */
     newBlankProperty: function(index)
     {
         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
+     */
+    setText: function(text, majorChange, callback)
+    {
+        if (!this.styleSheetId) {
+            callback(null);
+            return;
+        }
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!CSSAgent.CSSStyle} stylePayload
+         * @this {WebInspector.CSSStyleDeclaration}
+         */
+        function mycallback(error, stylePayload)
+        {
+            this._cssModel._pendingCommandsMajorState.pop();
+            if (!error) {
+                if (majorChange)
+                    this._cssModel._domModel.markUndoableState();
+                callback(WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, stylePayload));
+                return;
+            }
+            callback(null);
+        }
+
+        this._cssModel._pendingCommandsMajorState.push(majorChange);
+        this._cssModel._agent.setStyleText(this.styleSheetId, this.range.serializeToObject(), text, mycallback.bind(this));
+    },
+
+    /**
      * @param {number} index
      * @param {string} name
      * @param {string} value
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     insertPropertyAt: function(index, name, value, userCallback)
     {
-        /**
-         * @param {?string} error
-         * @param {!CSSAgent.CSSStyle} payload
-         * @this {!WebInspector.CSSStyleDeclaration}
-         */
-        function callback(error, payload)
-        {
-            this._cssModel._pendingCommandsMajorState.pop();
-            if (!userCallback)
-                return;
-
-            if (error) {
-                console.error(error);
-                userCallback(null);
-            } else
-                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, payload));
-        }
-
-        if (!this.styleSheetId)
-            throw "No stylesheet id";
-
-        this._cssModel._pendingCommandsMajorState.push(true);
-        this._cssModel._agent.setPropertyText(this.styleSheetId, this._insertionRange(index), name + ": " + value + ";", callback.bind(this));
+        this.newBlankProperty(index).setText(name + ": " + value + ";", false, true, userCallback);
     },
 
     /**
      * @param {string} name
      * @param {string} value
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     appendProperty: function(name, value, userCallback)
     {
         this.insertPropertyAt(this.allProperties.length, name, value, userCallback);
@@ skipping 294 matching lines @@
     },
 
     /**
      * @param {string} propertyText
      * @param {boolean} majorChange
      * @param {boolean} overwrite
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     setText: function(propertyText, majorChange, overwrite, userCallback)
     {
-        /**
-         * @param {?WebInspector.CSSStyleDeclaration} style
-         */
-        function enabledCallback(style)
-        {
-            if (userCallback)
-                userCallback(style);
-        }
-
-        /**
-         * @param {?string} error
-         * @param {!CSSAgent.CSSStyle} stylePayload
-         * @this {WebInspector.CSSProperty}
-         */
-        function callback(error, stylePayload)
-        {
-            this.ownerStyle._cssModel._pendingCommandsMajorState.pop();
-            if (!error) {
-                if (majorChange)
-                    this.ownerStyle._cssModel._domModel.markUndoableState();
-                var style = WebInspector.CSSStyleDeclaration.parsePayload(this.ownerStyle._cssModel, stylePayload);
-                var newProperty = style.allProperties[this.index];
-
-                if (newProperty && this.disabled && !propertyText.match(/^\s*$/)) {
-                    newProperty.setDisabled(false, enabledCallback);
-                    return;
-                }
-                if (userCallback)
-                    userCallback(style);
-            } else {
-                if (userCallback)
-                    userCallback(null);
-            }
-        }
-
         if (!this.ownerStyle)
             throw "No ownerStyle for property";
 
         if (!this.ownerStyle.styleSheetId)
             throw "No owner style id";
 
         if (majorChange)
             WebInspector.userMetrics.StyleRuleEdited.record();
 
         if (overwrite && propertyText === this.propertyText) {
             if (majorChange)
                 this.ownerStyle._cssModel._domModel.markUndoableState();
             if (userCallback)
                 userCallback(this.ownerStyle);
             return;
         }
 

[lushnikov, 2015/06/19 15:34:21]

remove typecast

[pfeldman, 2015/06/19 15:59:28]

Done.

-        // An index past all the properties adds a new property to the style.
-        var cssModel = this.ownerStyle._cssModel;
-        cssModel._pendingCommandsMajorState.push(majorChange);
-        var range = /** @type {!WebInspector.TextRange} */ (this.range);
-        cssModel._agent.setPropertyText(this.ownerStyle.styleSheetId, overwrite ? range : range.collapseToStart(), propertyText, callback.bind(this));
+        var range = /** @type {!WebInspector.TextRange} */ (this.range).relativeTo(this.ownerStyle.range.startLine, this.ownerStyle.range.startColumn);
+        var indentation = this.ownerStyle.cssText ? this._detectIndentation(this.ownerStyle.cssText) : WebInspector.moduleSetting("textEditorIndent").get();
+        var endIntentation = this.ownerStyle.cssText ? indentation.substring(0, this.ownerStyle.range.endColumn) : "";
+        var newStyleText = range.replaceInText(this.ownerStyle.cssText || "", ";" + propertyText);
+
+        this._formatStyle(newStyleText, indentation, endIntentation, setStyleText.bind(this));
+
+        /**
+         * @param {string} styleText
+         * @this {WebInspector.CSSProperty}
+         */
+        function setStyleText(styleText)
+        {
+            this.ownerStyle.setText(styleText, majorChange, callback.bind(this));
+        }
+
+        /**
+         * @param {?WebInspector.CSSStyleDeclaration} style
+         * @this {WebInspector.CSSProperty}
+         */
+        function callback(style)
+        {
+            if (style) {
+                var newProperty = style.allProperties[this.index];
+                if (newProperty && this.disabled && !propertyText.match(/^\s*$/)) {
+                    newProperty.setDisabled(false, enabledCallback);

[lushnikov, 2015/06/19 15:34:21]

you swear you can remove this

[pfeldman, 2015/06/19 15:59:28]

Done.

+                    return;
+                }
+            }
+            if (userCallback)
+                userCallback(style);
+        }
+
+        /**
+         * @param {?WebInspector.CSSStyleDeclaration} style
+         */
+        function enabledCallback(style)
+        {
+            if (userCallback)
+                userCallback(style);
+        }
     },
 
     /**
+     * @param {string} styleText
+     * @param {string} indentation
+     * @param {string} endIndentation
+     * @param {function(string)} callback
+     */
+    _formatStyle: function(styleText, indentation, endIndentation, callback)
+    {
+        self.runtime.instancePromise(WebInspector.TokenizerFactory).then(processTokens);
+        var result = "";
+
+        /**
+         * @param {!WebInspector.TokenizerFactory} tokenizerFactory
+         */
+        function processTokens(tokenizerFactory)
+        {
+            var tokenize = tokenizerFactory.createTokenizer("text/css");
+            tokenize(styleText, processToken);
+            callback(result + (indentation ? "\n" + endIndentation : ""));
+        }
+
+        var lastWasSemicolon = true;
+        var trimWhitespace = true;

[lushnikov, 2015/06/19 15:34:21]

insideProperty

[pfeldman, 2015/06/19 15:59:28]

Done.

+        /**
+         * @param {string} token
+         * @param {?string} tokenType
+         * @param {number} column
+         * @param {number} newColumn
+         */
+        function processToken(token, tokenType, column, newColumn)
+        {
+            var isSemicolon = token === ";";
+            if (isSemicolon && lastWasSemicolon)
+                return;
+            lastWasSemicolon = isSemicolon || (lastWasSemicolon && tokenType === "css-comment") || (lastWasSemicolon && !token.trim());
+
+            // No formatting, only remove dupe ;
+            if (!indentation) {
+                result += token;
+                return;
+            }
+
+            // Format line breaks.
+            if (trimWhitespace && !token.trim())
+                return;
+            if (tokenType === "css-comment" && token.includes(":") && token.includes(";")) {
+                result += "\n" + indentation + token;
+                trimWhitespace = true;
+                return;
+            }
+
+            if (isSemicolon)
+                trimWhitespace = true;
+            if (tokenType === "css-tag") {
+                result += "\n" + indentation;
+                trimWhitespace = false;
+            }
+            result += token;
+        }
+    },
+
+    /**
+     * @param {string} text
+     * @return {string}
+     */
+    _detectIndentation: function(text)
+    {
+        var lines = text.split("\n");
+        if (lines.length < 2)
+            return "";
+        return WebInspector.TextUtils.lineIndent(lines[1]);
+    },
+
+    /**
      * @param {string} newValue
      * @param {boolean} majorChange
      * @param {boolean} overwrite
      * @param {function(?WebInspector.CSSStyleDeclaration)=} userCallback
      */
     setValue: function(newValue, majorChange, overwrite, userCallback)
     {
         var text = this.name + ": " + newValue + (this.important ? " !important" : "") + ";";
         this.setText(text, majorChange, overwrite, userCallback);
     },
@@ skipping 535 matching lines @@
 }
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @return {!WebInspector.CSSStyleModel}
  */
 WebInspector.CSSStyleModel.fromNode = function(node)
 {
     return /** @type {!WebInspector.CSSStyleModel} */ (WebInspector.CSSStyleModel.fromTarget(node.target()));
 }