[M149] Fix inline editing

Original change's description:
> Fix inline editing
>
> Fixed: 515639787
> Change-Id: I5a2ba54c1ebffb5d7171fa1033bbc3db00ecc110
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7867644
> Auto-Submit: Alex Rudenko <alexrudenko@chromium.org>
> Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
> Reviewed-by: Nikolay Vitkov <nvitkov@chromium.org>

(cherry picked from commit e9ce152)

Bug: 515679965,515639787
Change-Id: I5a2ba54c1ebffb5d7171fa1033bbc3db00ecc110
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7879746
Auto-Submit: chrome-cherry-picker@chops-service-accounts.iam.gserviceaccount.com <chrome-cherry-picker@chops-service-accounts.iam.gserviceaccount.com>
Commit-Queue: rubber-stamper@appspot.gserviceaccount.com <rubber-stamper@appspot.gserviceaccount.com>
Bot-Commit: rubber-stamper@appspot.gserviceaccount.com <rubber-stamper@appspot.gserviceaccount.com>

Author: OrKoN

front_end/panels/elements/ElementsTreeElement.test.ts

@@ -481,6 +481,66 @@ describeWithMockConnection('ElementsTreeElement', () => {
     (adorner as HTMLElement).click();
     sinon.assert.calledWith(forceSpy, node, false);
   });
+
+  it('ensures in-place editing does not add or keep zero-width spaces when re-rendering is attempted (crbug.com/515639787)',
+     async () => {
+       const target = createTarget();
+       const domModel = target.model(SDK.DOMModel.DOMModel);
+       assert.exists(domModel);
+
+       const nodePayload = {
+         nodeId: 1 as Protocol.DOM.NodeId,
+         backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+         nodeType: Node.ELEMENT_NODE,
+         nodeName: 'DIV',
+         localName: 'div',
+         nodeValue: '',
+         attributes: ['autofill-information', 'foo'],
+         childNodeCount: 0,
+       };
+       const node = SDK.DOMModel.DOMNode.create(domModel, null, false, nodePayload);
+
+       const treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline();
+       const treeElement = new Elements.ElementsTreeElement.ElementsTreeElement(node);
+       treeElement.treeOutline = treeOutline;
+       treeElement.onbind();
+
+       // Render the element initially
+       treeElement.performUpdate();
+
+       // The attribute container DOM initially contains zero-width spaces (inserted for wrapping by rendering)
+       const attributeElement = treeElement.listItemElement.querySelector('.webkit-html-attribute');
+       assert.exists(attributeElement);
+
+       // Count initial zero-width spaces
+       const initialSpacesCount = (attributeElement.textContent).split('\u200B').length - 1;
+       assert.isAbove(initialSpacesCount, 0);
+
+       // Start in-place editing of the attribute
+       const editStarted = treeElement.triggerEditAttribute('autofill-information');
+       assert.isTrue(editStarted);
+
+       // Verify that starting edit stripped the zero-width spaces from the attribute element
+       assert.notInclude(attributeElement.textContent, '\u200B');
+
+       // While editing is active, call performUpdate (or hover, etc.) which would re-render
+       treeElement.performUpdate();
+
+       // Verify that the attribute element STILL does not contain zero-width spaces.
+       assert.notInclude(attributeElement.textContent, '\u200B');
+
+       // Cancel the editing session and clean up
+       treeElement.editingCancelled(attributeElement, 'autofill-information');
+
+       // Re-query the newly rendered attribute element from the DOM
+       const finalAttributeElement = treeElement.listItemElement.querySelector('.webkit-html-attribute');
+       assert.exists(finalAttributeElement);
+
+       // After cancelling, the element is restored, and the zero-width spaces should be restored back to initial count
+       // (verifying no duplicate or redundant spaces are added/kept in the DOM)
+       const finalSpacesCount = finalAttributeElement.textContent.split('\u200B').length - 1;
+       assert.strictEqual(finalSpacesCount, initialSpacesCount);
+     });
 });
 
 describeWithMockConnection('ElementsTreeElement highlighting', () => {

front_end/panels/elements/ElementsTreeElement.ts

@@ -1304,6 +1304,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   // ClearNode param is used to clean DOM after in-place editing..
   performUpdate(clearNode = false): void {
+    // Skip updating when in-place editing (not HTML editing indicated by the
+    // editorState) is happening. Doing an update would break editing
+    // (crbug.com/515639787).
+    if (this.editing && !this.#editorState) {
+      return;
+    }
     const output: ViewOutput = {};
     DEFAULT_VIEW(
         {
@@ -2389,7 +2395,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return this.startEditingAttribute(attr, attr);
   }
 
-  private triggerEditAttribute(attributeName: string): boolean|undefined {
+  triggerEditAttribute(attributeName: string): boolean|undefined {
     const attributeElements = this.listItemElement.getElementsByClassName('webkit-html-attribute-name');
     for (let i = 0, len = attributeElements.length; i < len; ++i) {
       if (attributeElements[i].textContent === attributeName) {
@@ -2828,7 +2834,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     textNode.setNodeValue(newText, callback.bind(this));
   }
 
-  private editingCancelled(_element: Element, _tagName: string|null): void {
+  editingCancelled(_element: Element, _tagName: string|null): void {
     this.editing = null;
 
     // Need to restore attributes structure.