[RPP][AI] Remove button flickering and fix button visibility bug

Only animating the width gets rid of the flickering.
Also fix the button not disappearing the the label is not empty.

Before: https://screencast.googleplex.com/cast/NDcxMjU2ODAzNDY4OTAyNHw0MmRjMjdhMi03MA
After: http://screencast/cast/NjI2NTUzNTgwMDAxNjg5Nnw3Nzg3M2Y3Yy02Mg

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

Author: AlinaVarkki

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

@@ -649,7 +649,7 @@ describeWithEnvironment('Overlays', () => {
       );
     });
 
-    it('Shows disabled `generate ai label` button if the user is not logged into their google account or is under 18',
+    it('Does not show `generate ai label` button if the label is not empty',
        async function() {
          updateHostConfig({
            aidaAvailability: {
@@ -666,6 +666,48 @@ describeWithEnvironment('Overlays', () => {
              await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'entry label');
          assert.strictEqual(inputField?.innerText, 'entry label');
 
+         const aiLabelButtonWrapper =
+             elementsWrapper.querySelector<HTMLElement>('.ai-label-disabled-button-wrapper') as HTMLSpanElement;
+         // Button should not exist
+         assert.isNotOk(aiLabelButtonWrapper);
+       });
+
+    it('Shows the `generate ai label` button if the label is empty', async function() {
+      updateHostConfig({
+        aidaAvailability: {
+          enabled: false,
+          blockedByAge: true,
+          blockedByEnterprisePolicy: false,
+          blockedByGeo: false,
+          disallowLogging: true,
+          enterprisePolicyValue: 1,
+        },
+      });
+
+      const {elementsWrapper, inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, '');
+      assert.strictEqual(inputField?.innerText, '');
+
+      const aiLabelButtonWrapper =
+          elementsWrapper.querySelector<HTMLElement>('.ai-label-disabled-button-wrapper') as HTMLSpanElement;
+      assert.isOk(aiLabelButtonWrapper);
+    });
+
+    it('Shows disabled `generate ai label` button if the user is not logged into their google account or is under 18',
+       async function() {
+         updateHostConfig({
+           aidaAvailability: {
+             enabled: false,
+             blockedByAge: true,
+             blockedByEnterprisePolicy: false,
+             blockedByGeo: false,
+             disallowLogging: true,
+             enterprisePolicyValue: 1,
+           },
+         });
+
+         const {elementsWrapper, inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, '');
+         assert.strictEqual(inputField?.innerText, '');
+
          const aiLabelButtonWrapper =
              elementsWrapper.querySelector<HTMLElement>('.ai-label-disabled-button-wrapper') as HTMLSpanElement;
          assert.isOk(aiLabelButtonWrapper);
@@ -690,9 +732,8 @@ describeWithEnvironment('Overlays', () => {
         },
       });
 
-      const {elementsWrapper, inputField} =
-          await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'entry label');
-      assert.strictEqual(inputField?.innerText, 'entry label');
+      const {elementsWrapper, inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, '');
+      assert.strictEqual(inputField?.innerText, '');
 
       const aiLabelButtonWrapper =
           elementsWrapper.querySelector<HTMLElement>('.ai-label-disabled-button-wrapper') as HTMLSpanElement;

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

@@ -569,15 +569,6 @@ export class EntryLabelOverlay extends HTMLElement {
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
-    /**
-     * Right now if the user "retries" the AI label generation the result will
-     * be almost identical because we don't change the input data or prompt. So
-     * we only show the generate button if the label is empty.
-     */
-    if (this.#label.length > 0) {
-      return Lit.nothing;
-    }
-
     // clang-format off
     return html`
       <!-- 'preventDefault' on the AI label button to prevent the label removal on blur  -->
@@ -652,8 +643,14 @@ export class EntryLabelOverlay extends HTMLElement {
     const hasAiExperiment = Boolean(Root.Runtime.hostConfig.devToolsAiGeneratedTimelineLabels?.enabled);
     const aiDisabledByEnterprisePolicy = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.DISABLE;
+    /**
+     * Right now if the user "retries" the AI label generation the result will
+     * be almost identical because we don't change the input data or prompt. So
+     * we only show the generate button if the label is empty.
+     */
+    const labelIsEmpty = this.#label?.length <= 0;
 
-    const doNotShowAIButton = !hasAiExperiment || aiDisabledByEnterprisePolicy;
+    const doNotShowAIButton = !hasAiExperiment || aiDisabledByEnterprisePolicy || !labelIsEmpty;
     // clang-format off
     Lit.render(
         html`
@@ -667,7 +664,12 @@ export class EntryLabelOverlay extends HTMLElement {
               @blur=${() => this.setLabelEditabilityAndRemoveEmptyLabel(false)}
               @keydown=${this.#handleLabelInputKeyDown}
               @paste=${this.#handleLabelInputPaste}
-              @keyup=${this.#handleLabelInputKeyUp}
+              @keyup=${() => {
+                this.#handleLabelInputKeyUp();
+                // Rerender the label component when the label text changes because we need to
+                // make sure the 'auto annotation' button is only shown when the label is empty.
+                this.#render();
+                }}
               contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}
               jslog=${VisualLogging.textField('timeline.annotations.entry-label-input').track({keydown: true, click: true})}
             ></span>

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

@@ -36,6 +36,8 @@
   align-items: center;
   gap: var(--sys-size-4);
   pointer-events: auto;
+  transition:
+    width var(--sys-motion-duration-long2) var(--sys-motion-easing-emphasized);
 
   * {
     /* Make up for the padding in a hovered button to only see the pen icon when it is not hovered */
@@ -48,8 +50,6 @@
   width: fit-content;
   height: var(--sys-size-13);
   padding: var(--sys-size-3) var(--sys-size-5);
-  transition:
-    all var(--sys-motion-duration-long2) var(--sys-motion-easing-emphasized);
   overflow: hidden;
   top: -4px;