Changeset 228030 in webkit


Ignore:
Timestamp:
Feb 2, 2018 2:52:56 PM (6 years ago)
Author:
webkit@devinrousso.com
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r228024 r228030  
     12018-02-02  Devin Rousso  <webkit@devinrousso.com>
     2
     3        Web Inspector: Styles Redesign: Pasting multiple properties should create properties instead of a bad property
     4        https://bugs.webkit.org/show_bug.cgi?id=179622
     5        <rdar://problem/35511170>
     6
     7        Reviewed by Matt Baker.
     8
     9        * UserInterface/Views/SpreadsheetStyleProperty.js:
     10        (WI.SpreadsheetStyleProperty.prototype._remove):
     11        (WI.SpreadsheetStyleProperty.prototype._update):
     12        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
     13        (WI.SpreadsheetStyleProperty.prototype._handleNamePaste):
     14        When the user pastes into the name field, parse the text for a list of name-value pairs and
     15        replace the property being edited with the text of those pairs.
     16
     17        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
     18        (WI.SpreadsheetCSSStyleDeclarationEditor):
     19        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
     20        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.addBlankProperty):
     21        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyFocusMoved):
     22        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyAddBlankPropertySoon):
     23        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyRemoved):
     24        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
     25        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetCSSStyleDeclarationEditorFocusMoved): Deleted.
     26        Calling `addBlankProperty` will trigger a layout on the next frame, but that might be before
     27        the CSSAgent has had a chance to finish refreshing, so we need a way to defer the creation
     28        of a new property until after we have finished the next layout (which is after the refresh).
     29        Drive-by: fix naming of some delegate functions.
     30
     31        * UserInterface/Models/CSSProperty.js:
     32        (WI.CSSProperty.prototype.replaceWithText):
     33        Provide a way for replacing the property with new text.
     34
    1352018-02-02  Matt Baker  <mattbaker@apple.com>
    236

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js

    r227370 r228030  
    132132    }
    133133
     134    replaceWithText(text)
     135    {
     136        this._updateOwnerStyleText(this._text, text, true);
     137    }
     138
    134139    commentOut(disabled)
    135140    {

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

    r227585 r228030  
    4040
    4141        this._propertyPendingStartEditing = null;
     42        this._pendingAddBlankPropertyIndexOffset = NaN;
    4243        this._filterText = null;
    4344    }
    … …  
    9192        if (this._filterText)
    9293            this.applyFilter(this._filterText);
     94
     95        if (!isNaN(this._pendingAddBlankPropertyIndexOffset))
     96            this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
    9397    }
    9498
    … …  
    205209    addBlankProperty(index)
    206210    {
     211        this._pendingAddBlankPropertyIndexOffset = NaN;
     212
    207213        if (index === -1) {
    208214            // Append to the end.
    … …  
    214220    }
    215221
    216     spreadsheetCSSStyleDeclarationEditorFocusMoved({direction, movedFromProperty, willRemoveProperty})
    217     {
    218         let movedFromIndex = this._propertyViews.indexOf(movedFromProperty);
     222    spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
     223    {
     224        let movedFromIndex = this._propertyViews.indexOf(propertyView);
    219225        console.assert(movedFromIndex !== -1, "Property doesn't exist, focusing on a selector as a fallback.");
    220226        if (movedFromIndex === -1) {
    … …  
    255261    // SpreadsheetStyleProperty delegate
    256262
     263    spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
     264    {
     265        if (isNaN(index))
     266            index = this._propertyViews.length;
     267        this._pendingAddBlankPropertyIndexOffset = this._propertyViews.length - index;
     268    }
     269
    257270    spreadsheetStylePropertyRemoved(propertyView)
    258271    {
    … …  
    261274        for (let index = 0; index < this._propertyViews.length; index++)
    262275            this._propertyViews[index].index = index;
     276
     277        this._focused = false;
    263278    }
    264279
    … …  
    323338    _propertiesChanged(event)
    324339    {
    325         if (this.editing) {
     340        if (this.editing && isNaN(this._pendingAddBlankPropertyIndexOffset)) {
    326341            for (let propertyView of this._propertyViews)
    327342                propertyView.updateStatus();

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

    r227585 r228030  
    149149    // Private
    150150
    151     _remove()
     151    _remove(replacement = "")
    152152    {
    153153        this.element.remove();
    154         this._property.remove();
     154
     155        if (replacement)
     156            this._property.replaceWithText(replacement);
     157        else
     158            this._property.remove();
     159
    155160        this.detached();
    156161
    … …  
    197202            this._nameElement.tabIndex = 0;
    198203            this._nameElement.addEventListener("beforeinput", this._handleNameBeforeInput.bind(this));
     204            this._nameElement.addEventListener("paste", this._handleNamePaste.bind(this));
    199205
    200206            this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement, this._nameCompletionDataProvider.bind(this));
    … …  
    266272        }
    267273
    268         if (typeof this._delegate.spreadsheetCSSStyleDeclarationEditorFocusMoved === "function") {
     274        if (typeof this._delegate.spreadsheetStylePropertyFocusMoved === "function") {
    269275            // Move focus away from the current property, to the next or previous one, if exists, or to the next or previous rule, if exists.
    270             this._delegate.spreadsheetCSSStyleDeclarationEditorFocusMoved({direction, willRemoveProperty, movedFromProperty: this});
     276            this._delegate.spreadsheetStylePropertyFocusMoved(this, {direction, willRemoveProperty});
    271277        }
    272278
    … …  
    563569    }
    564570
     571    _handleNamePaste(event)
     572    {
     573        let text = event.clipboardData.getData("text/plain");
     574        if (!text || !text.includes(":"))
     575            return;
     576
     577        event.preventDefault();
     578
     579        this._remove(text);
     580
     581        if (this._delegate.spreadsheetStylePropertyAddBlankPropertySoon) {
     582            this._delegate.spreadsheetStylePropertyAddBlankPropertySoon(this, {
     583                index: parseInt(this._element.dataset.propertyIndex) + 1,
     584            });
     585        }
     586    }
     587
    565588    _nameCompletionDataProvider(prefix)
    566589    {
Note: See TracChangeset for help on using the changeset viewer.