Changeset 228072 in webkit

Timestamp:

Feb 4, 2018 9:30:42 PM (6 years ago)

Author:

jmarcell@apple.com

Message:

Cherry-pick r228030. rdar://problem/37220121

Location:

branches/safari-605-branch/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Models/CSSProperty.js (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (modified) (7 diffs)
• UserInterface/Views/SpreadsheetStyleProperty.js (modified) (4 diffs)

branches/safari-605-branch/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-02-04  Jason Marcell  <jmarcell@apple.com>
+
+        Cherry-pick r228030. rdar://problem/37220121
+
+    2018-02-02  Devin Rousso  <webkit@devinrousso.com>
+
+            Web Inspector: Styles Redesign: Pasting multiple properties should create properties instead of a bad property
+            https://bugs.webkit.org/show_bug.cgi?id=179622
+            <rdar://problem/35511170>
+
+            Reviewed by Matt Baker.
+
+            * UserInterface/Views/SpreadsheetStyleProperty.js:
+            (WI.SpreadsheetStyleProperty.prototype._remove):
+            (WI.SpreadsheetStyleProperty.prototype._update):
+            (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
+            (WI.SpreadsheetStyleProperty.prototype._handleNamePaste):
+            When the user pastes into the name field, parse the text for a list of name-value pairs and
+            replace the property being edited with the text of those pairs.
+
+            * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+            (WI.SpreadsheetCSSStyleDeclarationEditor):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.addBlankProperty):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyFocusMoved):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyAddBlankPropertySoon):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyRemoved):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
+            (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetCSSStyleDeclarationEditorFocusMoved): Deleted.
+            Calling `addBlankProperty` will trigger a layout on the next frame, but that might be before
+            the CSSAgent has had a chance to finish refreshing, so we need a way to defer the creation
+            of a new property until after we have finished the next layout (which is after the refresh).
+            Drive-by: fix naming of some delegate functions.
+
+            * UserInterface/Models/CSSProperty.js:
+            (WI.CSSProperty.prototype.replaceWithText):
+            Provide a way for replacing the property with new text.
+
 2018-01-30  Jason Marcell  <jmarcell@apple.com>
 

branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js

@@ -132 +132 @@
     }
 
+    replaceWithText(text)
+    {
+        this._updateOwnerStyleText(this._text, text, true);
+    }
+
     commentOut(disabled)
     {

branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

@@ -40 +40 @@
 
         this._propertyPendingStartEditing = null;
+        this._pendingAddBlankPropertyIndexOffset = NaN;
         this._filterText = null;
     }
@@ -91 +92 @@
         if (this._filterText)
             this.applyFilter(this._filterText);
+
+        if (!isNaN(this._pendingAddBlankPropertyIndexOffset))
+            this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
     }
 
@@ -205 +209 @@
     addBlankProperty(index)
     {
+        this._pendingAddBlankPropertyIndexOffset = NaN;
+
         if (index === -1) {
             // Append to the end.
@@ -214 +220 @@
     }
 
-    spreadsheetCSSStyleDeclarationEditorFocusMoved({direction, movedFromProperty, willRemoveProperty})
-    {
-        let movedFromIndex = this._propertyViews.indexOf(movedFromProperty);
+    spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
+    {
+        let movedFromIndex = this._propertyViews.indexOf(propertyView);
         console.assert(movedFromIndex !== -1, "Property doesn't exist, focusing on a selector as a fallback.");
         if (movedFromIndex === -1) {
@@ -255 +261 @@
     // SpreadsheetStyleProperty delegate
 
+    spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
+    {
+        if (isNaN(index))
+            index = this._propertyViews.length;
+        this._pendingAddBlankPropertyIndexOffset = this._propertyViews.length - index;
+    }
+
     spreadsheetStylePropertyRemoved(propertyView)
     {
@@ -261 +274 @@
         for (let index = 0; index < this._propertyViews.length; index++)
             this._propertyViews[index].index = index;
+
+        this._focused = false;
     }
 
@@ -323 +338 @@
     _propertiesChanged(event)
     {
-        if (this.editing) {
+        if (this.editing && isNaN(this._pendingAddBlankPropertyIndexOffset)) {
             for (let propertyView of this._propertyViews)
                 propertyView.updateStatus();

branches/safari-605-branch/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@ -149 +149 @@
     // Private
 
-    _remove()
+    _remove(replacement = "")
     {
         this.element.remove();
-        this._property.remove();
+
+        if (replacement)
+            this._property.replaceWithText(replacement);
+        else
+            this._property.remove();
+
         this.detached();
 
@@ -195 +200 @@
             this._nameElement.tabIndex = 0;
             this._nameElement.addEventListener("beforeinput", this._handleNameBeforeInput.bind(this));
+            this._nameElement.addEventListener("paste", this._handleNamePaste.bind(this));
 
             this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement, this._nameCompletionDataProvider.bind(this));
@@ -263 +269 @@
         }
 
-        if (typeof this._delegate.spreadsheetCSSStyleDeclarationEditorFocusMoved === "function") {
+        if (typeof this._delegate.spreadsheetStylePropertyFocusMoved === "function") {
             // Move focus away from the current property, to the next or previous one, if exists, or to the next or previous rule, if exists.
-            this._delegate.spreadsheetCSSStyleDeclarationEditorFocusMoved({direction, willRemoveProperty, movedFromProperty: this});
+            this._delegate.spreadsheetStylePropertyFocusMoved(this, {direction, willRemoveProperty});
         }
 
@@ -560 +566 @@
     }
 
+    _handleNamePaste(event)
+    {
+        let text = event.clipboardData.getData("text/plain");
+        if (!text || !text.includes(":"))
+            return;
+
+        event.preventDefault();
+
+        this._remove(text);
+
+        if (this._delegate.spreadsheetStylePropertyAddBlankPropertySoon) {
+            this._delegate.spreadsheetStylePropertyAddBlankPropertySoon(this, {
+                index: parseInt(this._element.dataset.propertyIndex) + 1,
+            });
+        }
+    }
+
     _nameCompletionDataProvider(prefix)
     {