RPP: improve visual look of annotation input with consent flow

When the consent flow popped up, the input lost focus and it renders as
a black rectangle (as it has no content). This CL updates it to maintain
the same visual state.

It also fixes a bug where focus was not properly restored; the early
exit condition in the setLabelEditabilityAndRemoveEmptyLabel function
meant that we wouldn't call focus, so I removed that. It's a pretty
cheap function that is not triggered that much so any theoretical boost
by early exiting is not worth it given it caused a bug.

Bug: 393063467
Change-Id: Id377a6ebee5b4ce0d4649e09f8fe7cbd5ed8d128
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6403241
Reviewed-by: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: jackfranklin

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

@@ -454,11 +454,6 @@ export class EntryLabelOverlay extends HTMLElement {
   }
 
   setLabelEditabilityAndRemoveEmptyLabel(editable: boolean): void {
-    // Exit out if the current editable state matches the new one.
-    if (editable === this.#isLabelEditable) {
-      return;
-    }
-
     // We skip this if we have taken the user to the AI FRE flow, because we want the label still there when they come back.
     if (this.#inAIConsentDialogFlow && editable === false) {
       return;
@@ -538,6 +533,7 @@ export class EntryLabelOverlay extends HTMLElement {
     } else {
       this.#isAILabelLoading = false;
       this.#inAIConsentDialogFlow = true;
+      this.#render();
       const hasConsented = await this.#showUserAiFirstRunDialog();
       this.#inAIConsentDialogFlow = false;
       // This makes sure we put the user back in the editable state.
@@ -793,16 +789,22 @@ export class EntryLabelOverlay extends HTMLElement {
   }
 
   #render(): void {
+    const inputFieldClasses = Lit.Directives.classMap({
+      'input-field': true,
+      // When the consent modal pops up, we want the input to look like it has focus so it visually doesn't change.
+      // Once the consent flow is closed, we restore focus and maintain the appearance.
+      'fake-focus-state': this.#inAIConsentDialogFlow,
+    });
     // clang-format off
     Lit.render(
         html`
         <span class="label-parts-wrapper" role="region" aria-label=${i18nString(UIStrings.entryLabel)}
-        @focusout=${this.#handleFocusOutEvent}
+          @focusout=${this.#handleFocusOutEvent}
         >
           <span
             class="label-button-input-wrapper">
             <span
-              class="input-field"
+              class=${inputFieldClasses}
               role="textbox"
               @focus=${() => {
                 this.setLabelEditabilityAndRemoveEmptyLabel(true);

front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -115,7 +115,8 @@
 * empty annotation, and then tab to the GenerateAI button, the text field
 * styling doesn't change. */
 .input-field:focus,
-.label-parts-wrapper:focus-within .input-field {
+.label-parts-wrapper:focus-within .input-field,
+.input-field.fake-focus-state {
   background-color: var(--color-background);
   color: var(--color-background-inverted);
   outline: 2px solid var(--color-background-inverted);