Web Inspector: Styles Redesign: hook up autocompletion to property na…

…mes and values

https://bugs.webkit.org/show_bug.cgi?id=177313
<rdar://problem/34577057>

Reviewed by Joseph Pecoraro.

- Arrow Right accept the current completion item and places the text caret after it.
- Arrow Left hides the completion popover.
- Arrow Up selects the previous completion item.
- Arrow Down selects the next completion item.
- Enter and Tab accept the current completion item and navigate to the next focusable item.
- Escape hides the completion popover, if there is one.

* UserInterface/Views/CompletionSuggestionsView.js:
(WI.CompletionSuggestionsView):
(WI.CompletionSuggestionsView.prototype._mouseDown):
Add a preventBlur option so clicking on an completion item doesn't change the focus and
doesn't cause "blur" event on the target text field.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .completion-hint):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.detached):
Call detached on every SpreadsheetTextField to hide CompletionSuggestionsView once
SpreadsheetCSSStyleDeclarationEditor is removed from the DOM.

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._addBlankProperty):
Remove index argument since it is no longer used.

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.detached):
(WI.SpreadsheetStyleProperty.prototype._remove):
(WI.SpreadsheetStyleProperty.prototype._update):
(WI.SpreadsheetStyleProperty.prototype._nameCompletionDataProvider):
(WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):
Add an extra parameter to SpreadsheetTextField to pass a completion data provider.

* UserInterface/Views/SpreadsheetTextField.js:
(WI.SpreadsheetTextField):
(WI.SpreadsheetTextField.prototype.get suggestionHint):
(WI.SpreadsheetTextField.prototype.set suggestionHint):
(WI.SpreadsheetTextField.prototype.startEditing):
(WI.SpreadsheetTextField.prototype.stopEditing):
(WI.SpreadsheetTextField.prototype.detached):
(WI.SpreadsheetTextField.prototype.completionSuggestionsSelectedCompletion):
(WI.SpreadsheetTextField.prototype.completionSuggestionsClickedCompletion):
(WI.SpreadsheetTextField.prototype._getPrefix):
(WI.SpreadsheetTextField.prototype._handleBlur):
(WI.SpreadsheetTextField.prototype._handleKeyDown):
(WI.SpreadsheetTextField.prototype._handleKeyDownForSuggestionView):
(WI.SpreadsheetTextField.prototype._handleInput):
(WI.SpreadsheetTextField.prototype._updateCompletions):
(WI.SpreadsheetTextField.prototype._getCaretRect):
(WI.SpreadsheetTextField.prototype._getCompletionPrefix):
(WI.SpreadsheetTextField.prototype._applyCompletionHint):
(WI.SpreadsheetTextField.prototype._hideCompletions):
Provide text completion based on the existing CompletionSuggestionsView when completionProvider is passed to SpreadsheetTextField.


Canonical link: https://commits.webkit.org/194497@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223283 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,66 @@
+2017-10-13  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: hook up autocompletion to property names and values
+        https://bugs.webkit.org/show_bug.cgi?id=177313
+        <rdar://problem/34577057>
+
+        Reviewed by Joseph Pecoraro.
+
+        - Arrow Right accept the current completion item and places the text caret after it.
+        - Arrow Left hides the completion popover.
+        - Arrow Up selects the previous completion item.
+        - Arrow Down selects the next completion item.
+        - Enter and Tab accept the current completion item and navigate to the next focusable item.
+        - Escape hides the completion popover, if there is one.
+
+        * UserInterface/Views/CompletionSuggestionsView.js:
+        (WI.CompletionSuggestionsView):
+        (WI.CompletionSuggestionsView.prototype._mouseDown):
+        Add a preventBlur option so clicking on an completion item doesn't change the focus and
+        doesn't cause "blur" event on the target text field.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .completion-hint):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor):
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.detached):
+        Call detached on every SpreadsheetTextField to hide CompletionSuggestionsView once
+        SpreadsheetCSSStyleDeclarationEditor is removed from the DOM.
+
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._addBlankProperty):
+        Remove index argument since it is no longer used.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty):
+        (WI.SpreadsheetStyleProperty.prototype.detached):
+        (WI.SpreadsheetStyleProperty.prototype._remove):
+        (WI.SpreadsheetStyleProperty.prototype._update):
+        (WI.SpreadsheetStyleProperty.prototype._nameCompletionDataProvider):
+        (WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):
+        Add an extra parameter to SpreadsheetTextField to pass a completion data provider.
+
+        * UserInterface/Views/SpreadsheetTextField.js:
+        (WI.SpreadsheetTextField):
+        (WI.SpreadsheetTextField.prototype.get suggestionHint):
+        (WI.SpreadsheetTextField.prototype.set suggestionHint):
+        (WI.SpreadsheetTextField.prototype.startEditing):
+        (WI.SpreadsheetTextField.prototype.stopEditing):
+        (WI.SpreadsheetTextField.prototype.detached):
+        (WI.SpreadsheetTextField.prototype.completionSuggestionsSelectedCompletion):
+        (WI.SpreadsheetTextField.prototype.completionSuggestionsClickedCompletion):
+        (WI.SpreadsheetTextField.prototype._getPrefix):
+        (WI.SpreadsheetTextField.prototype._handleBlur):
+        (WI.SpreadsheetTextField.prototype._handleKeyDown):
+        (WI.SpreadsheetTextField.prototype._handleKeyDownForSuggestionView):
+        (WI.SpreadsheetTextField.prototype._handleInput):
+        (WI.SpreadsheetTextField.prototype._updateCompletions):
+        (WI.SpreadsheetTextField.prototype._getCaretRect):
+        (WI.SpreadsheetTextField.prototype._getCompletionPrefix):
+        (WI.SpreadsheetTextField.prototype._applyCompletionHint):
+        (WI.SpreadsheetTextField.prototype._hideCompletions):
+        Provide text completion based on the existing CompletionSuggestionsView when completionProvider is passed to SpreadsheetTextField.
+
 2017-10-12  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Switch Clear navigation item back to the Trash icon (Console, Timelines, Network)

Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js

@@ -25,11 +25,12 @@
 
 WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
 {
-    constructor(delegate)
+    constructor(delegate, {preventBlur} = {})
     {
         super();
 
         this._delegate = delegate || null;
+        this._preventBlur = preventBlur || false;
 
         this._selectedIndex = NaN;
 
@@ -197,6 +198,10 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
     {
         if (event.button !== 0)
             return;
+
+        if (this._preventBlur)
+            event.preventDefault();
+
         this._mouseIsDown = true;
     }
 

Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

@@ -44,6 +44,11 @@
     padding-bottom: 0 !important;
 }
 
+.spreadsheet-style-declaration-editor .value.editing {
+    display: inline-block;
+    margin-right: 3px;
+}
+
 .spreadsheet-style-declaration-editor.no-properties {
     display: none;
 }
@@ -79,3 +84,7 @@
 .spreadsheet-style-declaration-editor .property.not-inherited {
     opacity: 0.5;
 }
+
+.spreadsheet-style-declaration-editor .completion-hint {
+    color: hsl(0, 0%, 50%) !important;
+}

Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

@@ -33,6 +33,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
 
         this._delegate = delegate;
         this.style = style;
+        this._propertyViews = [];
     }
 
     // Public
@@ -49,12 +50,18 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         this._propertyViews = [];
         for (let index = 0; index < properties.length; index++) {
             let property = properties[index];
-            let propertyView = new WI.SpreadsheetStyleProperty(this, property, index);
+            let propertyView = new WI.SpreadsheetStyleProperty(this, property);
             this.element.append(propertyView.element);
             this._propertyViews.push(propertyView);
         }
     }
 
+    detached()
+    {
+        for (let propertyView of this._propertyViews)
+            propertyView.detached();
+    }
+
     get style()
     {
         return this._style;
@@ -155,7 +162,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
     {
         let blankProperty = this._style.newBlankProperty(afterIndex);
         const newlyAdded = true;
-        let propertyView = new WI.SpreadsheetStyleProperty(this, blankProperty, blankProperty.index, newlyAdded);
+        let propertyView = new WI.SpreadsheetStyleProperty(this, blankProperty, newlyAdded);
         this.element.append(propertyView.element);
         this._propertyViews.push(propertyView);
         propertyView.nameTextField.startEditing();

Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@ -25,13 +25,15 @@
 
 WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 {
-    constructor(delegate, property, index, newlyAdded)
+    constructor(delegate, property, newlyAdded = false)
     {
         super();
 
+        console.assert(property instanceof WI.CSSProperty);
+
         this._delegate = delegate || null;
         this._property = property;
-        this._newlyAdded = newlyAdded || false;
+        this._newlyAdded = newlyAdded;
         this._element = document.createElement("div");
 
         this._nameElement = null;
@@ -50,12 +52,22 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     get nameTextField() { return this._nameTextField; }
     get valueTextField() { return this._valueTextField; }
 
+    detached()
+    {
+        if (this._nameTextField)
+            this._nameTextField.detached();
+
+        if (this._valueTextField)
+            this._valueTextField.detached();
+    }
+
     // Private
 
     _remove()
     {
         this.element.remove();
         this._property.remove();
+        this.detached();
 
         if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")
             this._delegate.spreadsheetStylePropertyRemoved(this);
@@ -134,10 +146,10 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 
         if (this._property.editable && this._property.enabled) {
             this._nameElement.tabIndex = 0;
-            this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement);
+            this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement, this._nameCompletionDataProvider.bind(this));
 
             this._valueElement.tabIndex = 0;
-            this._valueTextField = new WI.SpreadsheetTextField(this, this._valueElement);
+            this._valueTextField = new WI.SpreadsheetTextField(this, this._valueElement, this._valueCompletionDataProvider.bind(this));
         }
 
         this.element.append(";");
@@ -209,6 +221,16 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     {
         this._property.rawValue = this._valueElement.textContent.trim();
     }
+
+    _nameCompletionDataProvider(prefix)
+    {
+        return WI.CSSCompletions.cssNameCompletions.startsWith(prefix);
+    }
+
+    _valueCompletionDataProvider(prefix)
+    {
+        return WI.CSSKeywordCompletions.forProperty(this._property.name).startsWith(prefix);
+    }
 };
 
 WI.SpreadsheetStyleProperty.CommitCoalesceDelay = 250;