RPP: track annotation label change events

Bug: 406497770
Change-Id: I4fe1798468a1591d5bce6a841b29fc277f124190
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6404753
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: jackfranklin

front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -267,6 +267,9 @@ export class EntryLabelOverlay extends HTMLElement {
     if (labelBoxTextContent !== this.#label) {
       this.#label = labelBoxTextContent;
       this.dispatchEvent(new EntryLabelChangeEvent(this.#label));
+      // Dispatch a fake change event; because we use contenteditable rather than an input, this event does not fire.
+      // But we want to listen to the change event in the VE logs, so we dispatch it here.
+      this.#inputField?.dispatchEvent(new Event('change', {bubbles: true, composed: true}));
     }
     this.#inputField?.setAttribute('aria-label', labelBoxTextContent);
   }
@@ -821,7 +824,7 @@ export class EntryLabelOverlay extends HTMLElement {
                 this.#render();
                 }}
               contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}
-              jslog=${VisualLogging.textField('timeline.annotations.entry-label-input').track({keydown: true, click: true})}
+              jslog=${VisualLogging.textField('timeline.annotations.entry-label-input').track({keydown: true, click: true, change: true})}
               tabindex="0"
             ></span>
             ${(() => {