Add fadeout to highlighting of direct citations

This is more consistent with how it's done elsewhere in DevTools, and
it also simplifies the code logic.

Screencast: https://i.imgur.com/1muTlA1.mp4

Bug: 393061324
Change-Id: I88bfb546cd2b356327f4892f6ac85a83ff12299e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6291329
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Wolfgang Beyer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: wolfib

front_end/panels/explain/components/ConsoleInsight.ts

@@ -212,7 +212,6 @@ type StateData = {
   isPageReloadRecommended: boolean,
   completed: boolean,
   directCitationUrls: string[],
-  highlightIndex?: number,
   timedOut?: boolean,
 }&Host.AidaClient.AidaResponse|{
   type: State.ERROR,
@@ -311,13 +310,13 @@ export class ConsoleInsight extends HTMLElement {
     if (this.#state.type !== State.INSIGHT || !this.#referenceDetailsRef.value) {
       return;
     }
-    this.#state.highlightIndex = index;
     const areDetailsAlreadyExpanded = this.#referenceDetailsRef.value.open;
     this.#areReferenceDetailsOpen = true;
     this.#render();
 
-    const highlightedElement = this.#shadow.querySelector('li .highlighted');
+    const highlightedElement = this.#shadow.querySelector(`.sources-list x-link[data-index="${index}"]`);
     if (highlightedElement) {
+      UI.UIUtils.runCSSAnimationOnce(highlightedElement, 'highlighted');
       if (areDetailsAlreadyExpanded) {
         highlightedElement.scrollIntoView({behavior: 'auto'});
       } else {  // Wait for the details element to open before scrolling.
@@ -674,27 +673,21 @@ export class ConsoleInsight extends HTMLElement {
       return Lit.nothing;
     }
 
-    const highlightIndex = this.#state.highlightIndex || -1;
     // clang-format off
     return html`
       <ol class="sources-list">
-        ${this.#state.directCitationUrls.map((url, index) => {
-          const linkClasses = Lit.Directives.classMap({
-            link: true,
-            highlighted: highlightIndex - 1 === index,
-          });
-          return html`
-            <li>
-              <x-link
-                href=${url}
-                class=${linkClasses}
-                jslog=${VisualLogging.link('references.console-insights').track({click: true})}
-              >
-                ${url}
-              </x-link>
-            </li>
-          `;
-        })}
+        ${this.#state.directCitationUrls.map((url, index) => html`
+          <li>
+            <x-link
+              href=${url}
+              class="link"
+              data-index=${index + 1}
+              jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            >
+              ${url}
+            </x-link>
+          </li>
+        `)}
       </ol>
     `;
     // clang-format on
@@ -749,11 +742,6 @@ export class ConsoleInsight extends HTMLElement {
   #onToggleReferenceDetails(): void {
     if (this.#referenceDetailsRef.value) {
       this.#areReferenceDetailsOpen = this.#referenceDetailsRef.value.open;
-      if (!this.#areReferenceDetailsOpen && this.#state.type === State.INSIGHT &&
-          this.#state.highlightIndex !== undefined) {
-        this.#state.highlightIndex = undefined;
-        this.#render();
-      }
     }
   }
 

front_end/panels/explain/components/consoleInsight.css

@@ -365,7 +365,17 @@ h2:focus-visible {
 }
 
 .sources-list x-link.highlighted { /* stylelint-disable-line selector-type-no-unknown */
-  background-color: var(--sys-color-yellow-container);
+  animation: highlight-fadeout 2s;
+}
+
+@keyframes highlight-fadeout {
+  from {
+    background-color: var(--sys-color-yellow-container);
+  }
+
+  to {
+    background-color: transparent;
+  }
 }
 
 .references-list {