Squelch CSS race condition error on edits

There are minor race conditions in which the StylePropertyTreeElement
is tracking its own CSSProperty and the property is deleted from the
CSSStyleDeclaration to which it belongs. The conditions are particularly
difficult to reproduce, and the user experience does not seem to raise
an issue, probably because changes to the underlying SDK model cause
immediate refreshes of the entire tree).

This change modifies the behavior to not cause an error in the event
that the race condition is encountered by treating edits as having the
entire string, so that user edits aren't dropped.

Change-Id: I2777196cb88fa2928f8a5471398b0a58c8c67853
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1947523
Reviewed-by: Mike Jackson <mjackson@microsoft.com>
Commit-Queue: Robert Paveza <Rob.Paveza@microsoft.com>
This commit is contained in:
Rob Paveza
2020-01-08 17:09:45 +00:00
committed by Commit Bot
parent 17e384ec75
commit 72079dfe4e
@@ -933,7 +933,9 @@ export class StylePropertyTreeElement extends UI.TreeElement {
this._removePrompt();
this.editingEnded(context);
const isEditingName = context.isEditingName;
const nameValueEntered = isEditingName && this.nameElement.textContent.includes(':');
// If the underlying property has been ripped out, always assume that the value having been entered was
// a name-value pair and attempt to process it via the SDK.
const nameValueEntered = (isEditingName && this.nameElement.textContent.includes(':')) || !this.property;
// Determine where to move to before making changes
let createNewProperty, moveToSelector;
@@ -1097,7 +1099,8 @@ export class StylePropertyTreeElement extends UI.TreeElement {
* @return {!Promise}
*/
async _innerApplyStyleText(styleText, majorChange, property) {
if (!this.treeOutline) {
// this.property might have been nulled at the end of the last _innerApplyStyleText
if (!this.treeOutline || !this.property) {
return;
}
@@ -1131,7 +1134,8 @@ export class StylePropertyTreeElement extends UI.TreeElement {
}
this._parentPane.setUserOperation(false);
if (!success) {
const updatedProperty = property || this._style.propertyAt(this.property.index);
if (!success || !updatedProperty) {
if (majorChange) {
// It did not apply, cancel editing.
if (this._newProperty) {
@@ -1146,7 +1150,7 @@ export class StylePropertyTreeElement extends UI.TreeElement {
this._matchedStyles.resetActiveProperties();
this._hasBeenEditedIncrementally = true;
this.property = property || this._style.propertyAt(this.property.index);
this.property = updatedProperty;
if (currentNode === this.node()) {
this._updatePane();