Title: [224906] trunk/Source/WebInspectorUI
- Revision
- 224906
- Author
- nvasil...@apple.com
- Date
- 2017-11-15 16:31:00 -0800 (Wed, 15 Nov 2017)
Log Message
Web Inspector: Styles Redesign: typing colon in property name should advance to value field
https://bugs.webkit.org/show_bug.cgi?id=178795
<rdar://problem/35174674>
Reviewed by Devin Rousso.
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._update):
(WI.SpreadsheetStyleProperty.prototype._handleNameBeforeInput):
Unlike pressing Tab or Enter, typing ":" in the property name should discard suggestion hint.
(WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):
We use 250ms debounce before updating this._property.name.
When typing "font-f:", we want to discard suggestion hint (i.e. "font-family"),
and immediately show autocomplete for "font-f" (in this case, invalid property).
* UserInterface/Views/SpreadsheetTextField.js:
(WI.SpreadsheetTextField):
(WI.SpreadsheetTextField.prototype.stopEditing):
(WI.SpreadsheetTextField.prototype.discardCompletion):
Call spreadsheetTextFieldDidChange when discarding non-empty suggestion hint.
(WI.SpreadsheetTextField.prototype.detached):
(WI.SpreadsheetTextField.prototype.completionSuggestionsClickedCompletion):
(WI.SpreadsheetTextField.prototype._handleBlur):
(WI.SpreadsheetTextField.prototype._handleKeyDownForSuggestionView):
(WI.SpreadsheetTextField.prototype._updateCompletions):
(WI.SpreadsheetTextField.prototype._applyCompletionHint):
(WI.SpreadsheetTextField.prototype._hideCompletions): Deleted.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (224905 => 224906)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-11-15 23:39:54 UTC (rev 224905)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-11-16 00:31:00 UTC (rev 224906)
@@ -1,3 +1,35 @@
+2017-11-15 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles Redesign: typing colon in property name should advance to value field
+ https://bugs.webkit.org/show_bug.cgi?id=178795
+ <rdar://problem/35174674>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._update):
+ (WI.SpreadsheetStyleProperty.prototype._handleNameBeforeInput):
+ Unlike pressing Tab or Enter, typing ":" in the property name should discard suggestion hint.
+
+ (WI.SpreadsheetStyleProperty.prototype._valueCompletionDataProvider):
+ We use 250ms debounce before updating this._property.name.
+ When typing "font-f:", we want to discard suggestion hint (i.e. "font-family"),
+ and immediately show autocomplete for "font-f" (in this case, invalid property).
+
+ * UserInterface/Views/SpreadsheetTextField.js:
+ (WI.SpreadsheetTextField):
+ (WI.SpreadsheetTextField.prototype.stopEditing):
+ (WI.SpreadsheetTextField.prototype.discardCompletion):
+ Call spreadsheetTextFieldDidChange when discarding non-empty suggestion hint.
+
+ (WI.SpreadsheetTextField.prototype.detached):
+ (WI.SpreadsheetTextField.prototype.completionSuggestionsClickedCompletion):
+ (WI.SpreadsheetTextField.prototype._handleBlur):
+ (WI.SpreadsheetTextField.prototype._handleKeyDownForSuggestionView):
+ (WI.SpreadsheetTextField.prototype._updateCompletions):
+ (WI.SpreadsheetTextField.prototype._applyCompletionHint):
+ (WI.SpreadsheetTextField.prototype._hideCompletions): Deleted.
+
2017-11-15 Matt Baker <mattba...@apple.com>
Web Inspector: REGRESSION (r217750): Navigation sidebar broken after closing and re-opening tab
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (224905 => 224906)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-11-15 23:39:54 UTC (rev 224905)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-11-16 00:31:00 UTC (rev 224906)
@@ -173,6 +173,8 @@
if (this._property.editable && this._property.enabled) {
this._nameElement.tabIndex = 0;
+ this._nameElement.addEventListener("beforeinput", this._handleNameBeforeInput.bind(this));
+
this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement, this._nameCompletionDataProvider.bind(this));
this._valueElement.tabIndex = 0;
@@ -463,6 +465,16 @@
this._property.rawValue = this._valueElement.textContent.trim();
}
+ _handleNameBeforeInput(event)
+ {
+ if (event.data !== ":" || event.inputType !== "insertText")
+ return;
+
+ event.preventDefault();
+ this._nameTextField.discardCompletion();
+ this._valueTextField.startEditing();
+ }
+
_nameCompletionDataProvider(prefix)
{
return WI.CSSCompletions.cssNameCompletions.startsWith(prefix);
@@ -470,7 +482,8 @@
_valueCompletionDataProvider(prefix)
{
- return WI.CSSKeywordCompletions.forProperty(this._property.name).startsWith(prefix);
+ let propertyName = this._nameElement.textContent.trim();
+ return WI.CSSKeywordCompletions.forProperty(propertyName).startsWith(prefix);
}
_setupJumpToSymbol(element)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js (224905 => 224906)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js 2017-11-15 23:39:54 UTC (rev 224905)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js 2017-11-16 00:31:00 UTC (rev 224906)
@@ -108,12 +108,25 @@
this._element.classList.remove("editing");
this._element.contentEditable = false;
- this._hideCompletions();
+ this.discardCompletion();
}
+ discardCompletion()
+ {
+ if (!this._completionProvider)
+ return;
+
+ this._suggestionsView.hide();
+
+ let hadSuggestionHint = !!this.suggestionHint;
+ this.suggestionHint = "";
+ if (hadSuggestionHint && this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
+ this._delegate.spreadsheetTextFieldDidChange(this);
+ }
+
detached()
{
- this._hideCompletions();
+ this.discardCompletion();
this._element.remove();
}
@@ -156,7 +169,7 @@
// Place text caret at the end.
window.getSelection().setBaseAndExtent(this._element, selectedText.length, this._element, selectedText.length);
- this._hideCompletions();
+ this.discardCompletion();
if (this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
this._delegate.spreadsheetTextFieldDidChange(this);
@@ -197,7 +210,7 @@
return;
this._applyCompletionHint();
- this._hideCompletions();
+ this.discardCompletion();
this._delegate.spreadsheetTextFieldDidBlur(this);
this.stopEditing();
@@ -293,7 +306,7 @@
event.stop();
let willChange = !!this.suggestionHint;
- this._hideCompletions();
+ this.discardCompletion();
if (willChange && this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
this._delegate.spreadsheetTextFieldDidChange(this);
@@ -302,7 +315,7 @@
}
if (event.key === "ArrowLeft" && (this.suggestionHint || this._suggestionsView.visible)) {
- this._hideCompletions();
+ this.discardCompletion();
if (this._delegate && typeof this._delegate.spreadsheetTextFieldDidChange === "function")
this._delegate.spreadsheetTextFieldDidChange(this);
@@ -332,13 +345,13 @@
let completions = this._completionProvider(completionPrefix);
if (!completions.length) {
- this._hideCompletions();
+ this.discardCompletion();
return;
}
// No need to show the completion popover with only one item that matches the entered value.
if (completions.length === 1 && completions[0] === prefix) {
- this._hideCompletions();
+ this.discardCompletion();
return;
}
@@ -400,13 +413,4 @@
this._element.textContent = this._element.textContent;
}
-
- _hideCompletions()
- {
- if (!this._completionProvider)
- return;
-
- this._suggestionsView.hide();
- this.suggestionHint = "";
- }
};
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
