Skip to content
Permalink
Browse files
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
  • Loading branch information
NV committed Oct 13, 2017
1 parent 0aee247 commit 96825b41f3ef39a8e65ddf2e9e7efc260a6bca76
Showing 6 changed files with 357 additions and 9 deletions.
@@ -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)
@@ -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;
}

@@ -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;
}
@@ -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();
@@ -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;

0 comments on commit 96825b4

Please sign in to comment.