Web Inspector: Modifying CSS selector by pressing Enter or Tab causes 2 CSS.setRuleSelector backend calls
https://bugs.webkit.org/show_bug.cgi?id=202769
<rdar://problem/56132166>
Reviewed by Matt Baker.
Previously, spreadsheetSelectorFieldDidChange would get called twice:
1. On Enter or Tab key press.
2. On blur event.
With this patch, it only gets called on blur event.
* UserInterface/Models/CSSRule.js:
(WI.CSSRule.prototype.set selectorText):
Remove dead code. Calling `_selectorResolved(true)` would cause an uncaught exception.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldDidChange): Removed.
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldDidCommit): Added.
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldWillNavigate): Added.
Split spreadsheetSelectorFieldDidChange into spreadsheetSelectorFieldDidCommit and spreadsheetSelectorFieldWillNavigate.
* UserInterface/Views/SpreadsheetSelectorField.js:
(WI.SpreadsheetSelectorField):
(WI.SpreadsheetSelectorField.prototype.startEditing):
(WI.SpreadsheetSelectorField.prototype.stopEditing):
(WI.SpreadsheetSelectorField.prototype._handleBlur):
(WI.SpreadsheetSelectorField.prototype._handleKeyDown):
Add `_valueBeforeEditing` to check if the value was modified before the blur event.
Similar logic exists in SpreadsheetTextField.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@250948 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 486bdc8..130c859 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,36 @@
+2019-10-09 Nikita Vasilyev <nvasilyev@apple.com>
+
+ Web Inspector: Modifying CSS selector by pressing Enter or Tab causes 2 CSS.setRuleSelector backend calls
+ https://bugs.webkit.org/show_bug.cgi?id=202769
+ <rdar://problem/56132166>
+
+ Reviewed by Matt Baker.
+
+ Previously, spreadsheetSelectorFieldDidChange would get called twice:
+ 1. On Enter or Tab key press.
+ 2. On blur event.
+
+ With this patch, it only gets called on blur event.
+
+ * UserInterface/Models/CSSRule.js:
+ (WI.CSSRule.prototype.set selectorText):
+ Remove dead code. Calling `_selectorResolved(true)` would cause an uncaught exception.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldDidChange): Removed.
+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldDidCommit): Added.
+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetSelectorFieldWillNavigate): Added.
+ Split spreadsheetSelectorFieldDidChange into spreadsheetSelectorFieldDidCommit and spreadsheetSelectorFieldWillNavigate.
+
+ * UserInterface/Views/SpreadsheetSelectorField.js:
+ (WI.SpreadsheetSelectorField):
+ (WI.SpreadsheetSelectorField.prototype.startEditing):
+ (WI.SpreadsheetSelectorField.prototype.stopEditing):
+ (WI.SpreadsheetSelectorField.prototype._handleBlur):
+ (WI.SpreadsheetSelectorField.prototype._handleKeyDown):
+ Add `_valueBeforeEditing` to check if the value was modified before the blur event.
+ Similar logic exists in SpreadsheetTextField.
+
2019-10-08 Devin Rousso <drousso@apple.com>
Web Inspector: Canvas: modifications to shader modules can be shared between vertex/fragment shaders
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
index 5c21079..ea39072 100644
--- a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
@@ -68,11 +68,6 @@
if (!this.editable)
return;
- if (this._selectorText === selectorText) {
- this._selectorResolved(true);
- return;
- }
-
this._nodeStyles.changeRuleSelector(this, selectorText).then(this._selectorResolved.bind(this), this._selectorRejected.bind(this));
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
index b417c38..dd272a6 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
@@ -226,23 +226,20 @@
// SpreadsheetSelectorField delegate
- spreadsheetSelectorFieldDidChange(direction)
+ spreadsheetSelectorFieldDidCommit()
{
let selectorText = this._selectorElement.textContent.trim();
-
- if (!selectorText || selectorText === this._style.ownerRule.selectorText)
- this._discardSelectorChange();
- else {
+ if (selectorText) {
this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationSection.Event.SelectorWillChange);
this._style.ownerRule.singleFireEventListener(WI.CSSRule.Event.SelectorChanged, this._renderSelector, this);
this._style.ownerRule.selectorText = selectorText;
- }
+ } else
+ this._discardSelectorChange();
+ }
- if (!direction) {
- // Don't do anything when it's a blur event.
- return;
- }
-
+ spreadsheetSelectorFieldWillNavigate(direction)
+ {
+ console.assert(direction);
if (direction === "forward")
this._propertiesEditor.startEditingFirstProperty();
else if (direction === "backward") {
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js
index f8ddb61..64f16fc 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js
@@ -39,6 +39,7 @@
this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
this._editing = false;
+ this._valueBeforeEditing = "";
this._handledMouseDown = false;
}
@@ -52,6 +53,7 @@
return;
this._editing = true;
+ this._valueBeforeEditing = this._element.textContent;
let element = this._element;
element.classList.add("editing");
@@ -73,6 +75,7 @@
return;
this._editing = false;
+ this._valueBeforeEditing = "";
this._element.classList.remove("editing");
this._element.contentEditable = false;
@@ -107,10 +110,12 @@
if (document.activeElement === this._element)
return;
- this.stopEditing();
+ if (this._delegate && typeof this._delegate.spreadsheetSelectorFieldDidCommit === "function") {
+ if (this._element.textContent !== this._valueBeforeEditing)
+ this._delegate.spreadsheetSelectorFieldDidCommit();
+ }
- if (this._delegate && typeof this._delegate.spreadsheetSelectorFieldDidChange === "function")
- this._delegate.spreadsheetSelectorFieldDidChange(null);
+ this.stopEditing();
}
_handleKeyDown(event)
@@ -128,13 +133,11 @@
if (event.key === "Enter" || event.key === "Tab") {
event.stop();
- this.stopEditing();
-
- if (this._delegate && typeof this._delegate.spreadsheetSelectorFieldDidChange === "function") {
+ if (this._delegate && typeof this._delegate.spreadsheetSelectorFieldWillNavigate === "function") {
let direction = (event.shiftKey && event.key === "Tab") ? "backward" : "forward";
- this._delegate.spreadsheetSelectorFieldDidChange(direction);
+ this._delegate.spreadsheetSelectorFieldWillNavigate(direction);
}
-
+ this.stopEditing();
return;
}
