RPP: ensure labels being edited get drawn above others

Which makes it easier to edit them in the event that other labels are
overlapping.

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

Author: jackfranklin

front_end/panels/timeline/overlays/OverlaysImpl.test.ts

@@ -787,20 +787,22 @@ describeWithEnvironment('Overlays', () => {
       assert.isNotOk(aiLabelButtonWrapper);
     });
 
-    it('Inputting `Enter`into label overlay makes it non-editable', async function() {
-      const {inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'label');
+    it('Inputting `Enter` into label overlay makes it non-editable', async function() {
+      const {inputField, component} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'label');
 
       // Double click on the label box to make it editable and focus on it
       inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
 
       // Ensure the label content is editable
       assert.isTrue(inputField.isContentEditable);
+      assert.isTrue(component.hasAttribute('data-user-editing-label'));
 
       // Press `Enter` to make the label not editable
       inputField.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', cancelable: true, bubbles: true}));
 
       // Ensure the label content is not editable
       assert.isFalse(inputField.isContentEditable);
+      assert.isFalse(component.hasAttribute('data-user-editing-label'));
     });
 
     it('Inputting `Enter` into time range label field when the label is empty removes the overlay', async function() {

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

@@ -461,6 +461,15 @@ export class EntryLabelOverlay extends HTMLElement {
     if (this.#inAIConsentDialogFlow && editable === false) {
       return;
     }
+
+    // Set an attribute on the host; this is used in the overlays CSS to bring
+    // the focused, editable label to the top above any others.
+    if (editable) {
+      this.setAttribute('data-user-editing-label', 'true');
+    } else {
+      this.removeAttribute('data-user-editing-label');
+    }
+
     this.#isLabelEditable = editable;
     this.#render();
     // If the label is editable, focus cursor on it & put the cursor at the end

front_end/panels/timeline/timelineFlameChartView.css

@@ -22,8 +22,14 @@
 .overlay-type-ENTRY_LABEL {
   /* keep these above the selected entry overline, else they can become hard to read */
   z-index: 2;
+
+  /* if an overlay is being edited, keep it above the rest so the user is not obstructed */
+  &:has([data-user-editing-label]) {
+    z-index: 3;
+  }
 }
 
+
 .overlay-type-ENTRY_SELECTED,
 .overlay-type-ENTRY_OUTLINE {
   pointer-events: none;