Changeset 188427 in webkit

Timestamp:

Aug 13, 2015 6:51:06 PM (9 years ago)

Author:

Devin Rousso

Message:

REGRESSION (r184000): Web Inspector: Stripped whitespace after editing CSS in Styles sidebar
​https://bugs.webkit.org/show_bug.cgi?id=145679

Reviewed by Timothy Hatcher.

The formatter will now calculate the number of beginning spaces before the first line in a rule
and duplicate them in front of every other line. If there is no new line at the beginning or are
no spaces, assume 4 spaces and a new line for each property.
Also cleaned up the code for _resetContent a bit.

• UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update.set get this):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update.get this):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CSSStyleDeclarationTextEditor.js (modified) (12 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-08-13  Devin Rousso  <drousso@apple.com>
+
+        REGRESSION (r184000): Web Inspector: Stripped whitespace after editing CSS in Styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=145679
+
+        Reviewed by Timothy Hatcher.
+
+        The formatter will now calculate the number of beginning spaces before the first line in a rule
+        and duplicate them in front of every other line.  If there is no new line at the beginning or are
+        no spaces, assume 4 spaces and a new line for each property.
+        Also cleaned up the code for _resetContent a bit.
+
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update.set get this):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update.get this):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent):
+
 2015-08-13  Matt Baker  <mattbaker@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js

@@ -44 +44 @@
         this._sortProperties = false;
 
-        this._prefixWhitespace = "";
-        this._suffixWhitespace = "";
+        this._prefixWhitespace = "\n";
+        this._suffixWhitespace = "\n";
         this._linePrefixWhitespace = "";
 
@@ -55 +55 @@
             mode: "css-rule",
             electricChars: false,
-            indentWithTabs: true,
+            indentWithTabs: false,
             indentUnit: 4,
             smartIndent: false,
@@ -1607 +1607 @@
         if (this._commitChangesTimeout) {
             clearTimeout(this._commitChangesTimeout);
-            delete this._commitChangesTimeout;
+            this._commitChangesTimeout = null;
         }
 
@@ -1613 +1613 @@
 
         // Only allow editing if we have a style, it is editable and we have text range in the stylesheet.
-        var readOnly = !this._style || !this._style.editable || !this._style.styleSheetTextRange;
+        const readOnly = !this._style || !this._style.editable || !this._style.styleSheetTextRange;
         this._codeMirror.setOption("readOnly", readOnly);
 
@@ -1628 +1628 @@
 
             this._clearTextMarkers(false, true);
-
             this._codeMirror.setValue("");
             this._codeMirror.clearHistory();
             this._codeMirror.markClean();
 
-            delete this._ignoreCodeMirrorContentDidChangeEvent;
-
+            this._ignoreCodeMirrorContentDidChangeEvent = false;
             return;
         }
@@ -1641 +1639 @@
         {
             // Remember the cursor position/selection.
-            var selectionAnchor = this._codeMirror.getCursor("anchor");
-            var selectionHead = this._codeMirror.getCursor("head");
-            var isEditorReadOnly = this._codeMirror.getOption("readOnly");
-            var styleText = this._style.text.trim();
-            var findWhitespace = /\s+/g;
+            let isEditorReadOnly = this._codeMirror.getOption("readOnly");
+            let styleText = this._style.text;
+            let trimmedStyleText = styleText.trim();
 
             // We only need to format non-empty styles, but prepare checkbox placeholders
             // in any case because that will indent the cursor when the User starts typing.
-            if (!styleText && !isEditorReadOnly) {
+            if (!trimmedStyleText && !isEditorReadOnly) {
                 this._markLinesWithCheckboxPlaceholder();
                 return;
@@ -1657 +1653 @@
             if (isEditorReadOnly) {
                 this._codeMirror.setValue("");
-                var lineNumber = 0;
+                let lineNumber = 0;
                 this._iterateOverProperties(false, function(property) {
-                    var from = {line: lineNumber, ch: 0};
-                    var to = {line: lineNumber};
+                    let from = {line: lineNumber, ch: 0};
+                    let to = {line: lineNumber};
                     // Readonly properties are pretty printed by `synthesizedText` and not the Formatter.
                     this._codeMirror.replaceRange((lineNumber ? "\n" : "") + property.synthesizedText, from);
@@ -1669 +1665 @@
             }
 
+            let selectionAnchor = this._codeMirror.getCursor("anchor");
+            let selectionHead = this._codeMirror.getCursor("head");
+            let whitespaceRegex = /\s+/g;
+
+            // FIXME: <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+            this._linePrefixWhitespace = "    ";
+            let styleTextPrefixWhitespace = styleText.match(/^\s*/);
+
+            // If there is a match and the style text contains a newline, attempt to pull out the prefix whitespace
+            // in front of the first line of CSS to use for every line.  If  there is no newline, we want to avoid
+            // adding multiple spaces to a single line CSS rule and instead format it on multiple lines.
+            if (styleTextPrefixWhitespace && trimmedStyleText.includes("\n")) {
+                let linePrefixWhitespaceMatch = styleTextPrefixWhitespace[0].match(/[^\S\n]+$/);
+                if (linePrefixWhitespaceMatch)
+                    this._linePrefixWhitespace = linePrefixWhitespaceMatch[0];
+            }
+
             // Set non-optimized, valid and invalid styles in preparation for the Formatter.
-            this._codeMirror.setValue(styleText);
+            this._codeMirror.setValue(trimmedStyleText);
 
             // Now the Formatter pretty prints the styles.
@@ -1679 +1692 @@
             // comments and invalid properties like `color;`.
             // 2) `_createTextMarkerForPropertyIfNeeded` relies on CSSProperty instances.
-            var cssPropertiesMap = new Map();
+            let cssPropertiesMap = new Map();
             this._iterateOverProperties(false, function(cssProperty) {
                 cssProperty.__refreshedAfterBlur = false;
 
-                var propertyTextSansWhitespace = cssProperty.text.replace(findWhitespace, "");
-                var existingProperties = cssPropertiesMap.get(propertyTextSansWhitespace) || [];
+                let propertyTextSansWhitespace = cssProperty.text.replace(whitespaceRegex, "");
+                let existingProperties = cssPropertiesMap.get(propertyTextSansWhitespace) || [];
                 existingProperties.push(cssProperty);
 
@@ -1693 +1706 @@
             // CSSProperty instance for that property exists. If not, then don't create a TextMarker.
             this._codeMirror.eachLine(function(lineHandler) {
-                var lineNumber = lineHandler.lineNo();
-                var lineContentSansWhitespace = lineHandler.text.replace(findWhitespace, "");
-                var properties = cssPropertiesMap.get(lineContentSansWhitespace);
-
+                let lineNumber = lineHandler.lineNo();
+                let lineContentSansWhitespace = lineHandler.text.replace(whitespaceRegex, "");
+                let properties = cssPropertiesMap.get(lineContentSansWhitespace);
                 if (!properties) {
                     this._createCommentedCheckboxMarker(lineHandler);
@@ -1702 +1714 @@
                 }
 
-                for (var property of properties) {
+                for (let property of properties) {
                     if (property.__refreshedAfterBlur)
                         continue;
 
-                    var from = {line: lineNumber, ch: 0};
-                    var to = {line: lineNumber};
-
+                    let from = {line: lineNumber, ch: 0};
+                    let to = {line: lineNumber};
                     this._createTextMarkerForPropertyIfNeeded(from, to, property);
                     property.__refreshedAfterBlur = true;
-
                     break;
                 }
@@ -1738 +1748 @@
         this._ignoreCodeMirrorContentDidChangeEvent = true;
         this._codeMirror.operation(update.bind(this));
-        delete this._ignoreCodeMirrorContentDidChangeEvent;
+        this._ignoreCodeMirrorContentDidChangeEvent = false;
     }