ChangeLog

112017-12-18 Devin Rousso <webkit@devinrousso.com>

22

        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 NOBODY (OOPS!).

        * 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.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.remove):

        Provide a way for replacing the property with new text when removing it.

2017-12-18  Devin Rousso  <webkit@devinrousso.com>

        Web Inspector: Styles Redesign: add inline swatch for CSS variables

        https://bugs.webkit.org/show_bug.cgi?id=180798

Source/WebInspectorUI/UserInterface/Models/CSSProperty.js

@@WI.CSSProperty = class CSSProperty extends WI.Object

            this.dispatchEventToListeners(WI.CSSProperty.Event.Changed);

    }

121 remove()

121 remove(replacement = "")

122122 {

123 // Setting name or value to an empty string removes the entire CSSProperty.

124 this._name = "";

125123 const forceRemove = true;

126 this._updateStyleText(forceRemove);

        if (replacement)

            this._updateOwnerStyleText(this._text, replacement, forceRemove);

        else {

            // Setting name or value to an empty string removes the entire CSSProperty.

            this._name = "";

            this._updateStyleText(forceRemove);

        }

    }

    commentOut(disabled)

Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

@@WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd

        this.style = style;

        this._propertyViews = [];

        this._propertyPendingStartEditing = null;

38 this._pendingAddBlankPropertyIndex = NaN;

        this._filterText = null;

    }

@@WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd

        if (this._filterText)

            this.applyFilter(this._filterText);

        if (!isNaN(this._pendingAddBlankPropertyIndex))

            this.addBlankProperty(this._pendingAddBlankPropertyIndex);

    }

    detached()

@@WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd

    addBlankProperty(index)

    {

180 this._pendingAddBlankPropertyIndex = NaN;

181

        if (index === -1) {

            // Append to the end.

            index = this._propertyViews.length;

@@WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd

        this.needsLayout();

    }

185 spreadsheet~~CSS~~StyleD~~ecla~~ra~~tionEditor~~FocusMoved({direction~~, movedFromProperty~~, willRemoveProperty})

191 spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})

186192 {

187 let movedFromIndex = this._propertyViews.indexOf(~~movedFromP~~roperty);

193 let movedFromIndex = this._propertyViews.indexOf(propertyView);

        console.assert(movedFromIndex !== -1, "Property doesn't exist, focusing on a selector as a fallback.");

        if (movedFromIndex === -1) {

            if (this._style.selectorEditable)

@@WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd

        }

    }

    spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})

    {

        this._pendingAddBlankPropertyIndex = !isNaN(index) ? index : this._propertyViews.length;

    }

    spreadsheetStylePropertyRemoved(propertyView)

    {

        this._propertyViews.remove(propertyView);

Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

    // Private

146 _remove()

146 _remove(replacement = "")

147147 {

148148 this.element.remove();

149 this._property.remove();

149 this._property.remove(replacement);

        this.detached();

        if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")

@@WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

        if (this._property.editable && this._property.enabled) {

            this._nameElement.tabIndex = 0;

            this._nameElement.addEventListener("beforeinput", this._handleNameBeforeInput.bind(this));

192 this._nameElement.addEventListener("paste", this._handleNamePaste.bind(this));

            this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement, this._nameCompletionDataProvider.bind(this));

@@WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

            }

        }

258 if (typeof this._delegate.spreadsheet~~CSS~~StyleD~~ecla~~ra~~tionEditor~~FocusMoved === "function") {

259 if (typeof this._delegate.spreadsheetStylePropertyFocusMoved === "function") {

259260 // Move focus away from the current property, to the next or previous one, if exists, or to the next or previous rule, if exists.

260 this._delegate.spreadsheet~~CSS~~StyleD~~ecla~~ra~~tionEditor~~FocusMoved({direction, willRemoveProperty~~, movedFromProperty: this~~});

261 this._delegate.spreadsheetStylePropertyFocusMoved(this, {direction, willRemoveProperty});

        }

        if (willRemoveProperty)

@@WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

        this._valueTextField.startEditing();

    }

    _handleNamePaste(event)

    {

        let text = event.clipboardData.getData("text/plain");

        if (!text || !text.includes(":"))

            return;

        let properties = [];

        let inSingleQuotes = false;

        let inDoubleQuotes = false;

        let savedIndex = 0;

        for (let i = 0; i < text.length; ++i) {

            if (text[i] === "\"")

                inDoubleQuotes = !inDoubleQuotes;

            else if (text[i] === "\'")

                inSingleQuotes = !inSingleQuotes;

            else if (!inSingleQuotes && !inDoubleQuotes) {

                if (text[i] === ":") {

                    properties.push({

                        name: text.substring(savedIndex, i).trim(),

                        value: "",

                    });

                    savedIndex = i + 1;

                } else if (text[i] === ";") {

                    properties.lastValue.value = text.substring(savedIndex, i).trim();

                    savedIndex = i + 1;

                }

            }

        }

        if (!properties || (properties.length === 1 && !properties[0].value))

            return;

        event.preventDefault();

        let replacement = properties.map(({name, value}) => `${name}: ${value};`).join("\n");

        this._remove(replacement);

        if (this._delegate.spreadsheetStylePropertyAddBlankPropertySoon) {

            this._delegate.spreadsheetStylePropertyAddBlankPropertySoon(this, {

                index: parseInt(this._element.dataset.propertyIndex) + properties.length,

            });

        }

    }

    _nameCompletionDataProvider(prefix)

    {

        return WI.CSSCompletions.cssNameCompletions.startsWith(prefix);