chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/spinners/spinners.js';
 
@@ -162,8 +161,8 @@ export class CloseEvent extends Event {
   }
 }
 
-type PublicPromptBuilder = Pick<Console.PromptBuilder.PromptBuilder, 'buildPrompt'|'getSearchQuery'>;
-type PublicAidaClient = Pick<Host.AidaClient.AidaClient, 'doConversation'|'registerClientEvent'>;
+export type PublicPromptBuilder = Pick<Console.PromptBuilder.PromptBuilder, 'buildPrompt'|'getSearchQuery'>;
+export type PublicAidaClient = Pick<Host.AidaClient.AidaClient, 'doConversation'|'registerClientEvent'>;
 
 function localizeType(sourceType: Console.PromptBuilder.SourceType): string {
   switch (sourceType) {
@@ -186,35 +185,39 @@ const REPORT_URL = 'https://support.google.com/legal/troubleshooter/1114905?hl=e
     Platform.DevToolsPath.UrlString;
 const SIGN_IN_URL = 'https://accounts.google.com' as Platform.DevToolsPath.UrlString;
 
-interface ViewInput {
-  state: StateData;
+export interface ViewInput {
+  state: Extract<StateData, {type: State.INSIGHT}>|{type: Exclude<State, State.INSIGHT>};
   closing: boolean;
   disableAnimations: boolean;
   renderer: MarkdownView.MarkdownView.MarkdownInsightRenderer;
+  citationClickHandler: (index: number) => void;
   selectedRating?: boolean;
   noLogging: boolean;
+  areReferenceDetailsOpen: boolean;
+  highlightedCitationIndex: number;
   callbacks: {
     onClose: () => void,
     onAnimationEnd: () => void,
+    onCitationAnimationEnd: () => void,
     onSearch: () => void,
     onRating: (isPositive: boolean) => void,
     onReport: () => void,
     onGoToSignIn: () => void,
     onConsentReminderConfirmed: () => Promise<void>,
-    onToggleReferenceDetails: () => void,
+    onToggleReferenceDetails: (event: Event) => void,
     onDisclaimerSettingsLink: () => void,
     onReminderSettingsLink: () => void,
     onEnableInsightsInSettingsLink: () => void,
+    onReferencesOpen: () => void,
   };
 }
 
-interface ViewOutput {
-  referenceDetailsRef: Lit.Directives.Ref<HTMLDetailsElement>;
+export interface ViewOutput {
   headerRef: Lit.Directives.Ref<HTMLHeadingElement>;
   citationLinks: HTMLElement[];
 }
 
-const enum State {
+export const enum State {
   INSIGHT = 'insight',
   LOADING = 'loading',
   ERROR = 'error',
@@ -279,6 +282,8 @@ function isSearchRagResponse(metadata: Host.AidaClient.ResponseMetadata): boolea
   return Boolean(metadata.factualityMetadata?.facts.length);
 }
 
+const blockPropagation = (e: Event): void => e.stopPropagation();
+
 function renderSearchButton(onSearch: ViewInput['callbacks']['onSearch']): Lit.TemplateResult {
   // clang-format off
   return html`<devtools-button
@@ -300,7 +305,9 @@ function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format on
 }
 
-function maybeRenderSources(directCitationUrls: string[], output: ViewOutput): Lit.LitTemplate {
+function maybeRenderSources(
+    directCitationUrls: string[], highlightedCitationIndex: number, onCitationAnimationEnd: () => void,
+    output: ViewOutput): Lit.LitTemplate {
   if (!directCitationUrls.length) {
     return Lit.nothing;
   }
@@ -312,9 +319,10 @@ function maybeRenderSources(directCitationUrls: string[], output: ViewOutput): L
         <li>
           <x-link
             href=${url}
-            class="link"
+            class=${Directives.classMap({link: true, highlighted: index === highlightedCitationIndex})}
             jslog=${VisualLogging.link('references.console-insights').track({click: true})}
             ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
+            @animationend=${onCitationAnimationEnd}
           >
             ${url}
           </x-link>
@@ -385,8 +393,8 @@ function renderInsightSourcesList(
 }
 
 function renderInsight(
-    insight: Extract<StateData, {type: State.INSIGHT}>, renderer: ViewInput['renderer'],
-    disableAnimations: ViewInput['disableAnimations'], callbacks: ViewInput['callbacks'],
+    insight: Extract<StateData, {type: State.INSIGHT}>,
+    {renderer, disableAnimations, areReferenceDetailsOpen, highlightedCitationIndex, callbacks}: ViewInput,
     output: ViewOutput): Lit.TemplateResult {
   // clang-format off
       return html`
@@ -397,9 +405,15 @@ function renderInsight(
         }
         ${insight.timedOut ? html`<p class="error-message">${i18nString(UIStrings.timedOut)}</p>` : Lit.nothing}
         ${isSearchRagResponse(insight.metadata) ? html`
-          <details class="references" ${Directives.ref(output.referenceDetailsRef)} @toggle=${callbacks.onToggleReferenceDetails} jslog=${VisualLogging.expand('references').track({click: true})}>
+          <details
+            class="references"
+            ?open=${areReferenceDetailsOpen}
+            jslog=${VisualLogging.expand('references').track({click: true})}
+            @toggle=${callbacks.onToggleReferenceDetails}
+            @transitionend=${callbacks.onReferencesOpen}
+          >
             <summary>${i18nString(UIStrings.references)}</summary>
-            ${maybeRenderSources(insight.directCitationUrls, output)}
+            ${maybeRenderSources(insight.directCitationUrls, highlightedCitationIndex, callbacks.onCitationAnimationEnd, output)}
             ${maybeRenderRelatedContent(insight.relatedUrls, insight.directCitationUrls)}
           </details>
         ` : Lit.nothing}
@@ -654,25 +668,109 @@ function renderHeader(
   // clang-format on
 }
 
-export class ConsoleInsight extends HTMLElement {
-  static async create(promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient): Promise<ConsoleInsight> {
-    const aidaPreconditions = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    return new ConsoleInsight(promptBuilder, aidaClient, aidaPreconditions);
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement|ShadowRoot): void => {
+  const {state, noLogging, callbacks} = input;
+  const {onClose, onDisclaimerSettingsLink} = callbacks;
+
+  const jslog = `${VisualLogging.section(state.type).track({resize: true})}`;
+  let header: Lit.LitTemplate = Lit.nothing;
+  let main: Lit.LitTemplate = Lit.nothing;
+  const mainClasses: Record<string, true> = {};
+  let footer: Lit.LitTemplate|undefined;
+
+  switch (state.type) {
+    case State.LOADING:
+      header = renderHeader({headerText: i18nString(UIStrings.generating), onClose}, output.headerRef);
+      main = renderLoading();
+      break;
+    case State.INSIGHT:
+      header = renderHeader(
+          {headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed}, output.headerRef);
+      main = renderInsight(state, input, output);
+      footer = renderInsightFooter(noLogging, input.selectedRating, callbacks);
+      break;
+    case State.ERROR:
+      header = renderHeader({headerText: i18nString(UIStrings.error), onClose}, output.headerRef);
+      main = renderError(i18nString(UIStrings.errorBody));
+      footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
+      break;
+    case State.CONSENT_REMINDER:
+      header =
+          renderHeader({headerText: 'Understand console messages with AI', onClose, showIcon: true}, output.headerRef);
+      mainClasses['reminder-container'] = true;
+      main = renderConsentReminder(noLogging);
+      footer = renderConsentReminderFooter(callbacks.onReminderSettingsLink, callbacks.onConsentReminderConfirmed);
+      break;
+    case State.SETTING_IS_NOT_TRUE:
+      mainClasses['opt-in-teaser'] = true;
+      main = renderSettingIsNotTrue(callbacks.onEnableInsightsInSettingsLink);
+      break;
+    case State.NOT_LOGGED_IN:
+    case State.SYNC_IS_PAUSED:
+      header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose}, output.headerRef);
+      main = renderNotLoggedIn();
+      footer = renderSignInFooter(callbacks.onGoToSignIn);
+      break;
+    case State.OFFLINE:
+      header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose}, output.headerRef);
+      main = renderError(i18nString(UIStrings.offline));
+      footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
+      break;
   }
 
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // clang-format off
+  render(html`
+    <style>${styles}</style>
+    <style>${Input.checkboxStyles}</style>
+    <div
+      class=${Directives.classMap({wrapper: true, closing: input.closing})}
+      jslog=${VisualLogging.pane('console-insights').track({resize: true})}
+      @animationend=${callbacks.onAnimationEnd}
+      @keydown=${blockPropagation}
+      @keyup=${blockPropagation}
+      @keypress=${blockPropagation}
+      @click=${blockPropagation}
+    >
+      <div class="animation-wrapper">
+        ${header}
+        <main jslog=${jslog} class=${Directives.classMap(mainClasses)}>
+          ${main}
+        </main>
+        ${footer?html`<footer jslog=${VisualLogging.section('footer')}>
+          ${footer}
+        </footer>`:Lit.nothing}
+      </div>
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export type ViewFunction = typeof DEFAULT_VIEW;
+
+export class ConsoleInsight extends UI.Widget.Widget {
+  static async create(promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient):
+      Promise<UI.Widget.WidgetElement<ConsoleInsight>> {
+    const aidaPreconditions = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const widget = document.createElement('devtools-widget') as UI.Widget.WidgetElement<ConsoleInsight>;
+    widget.classList.add('devtools-console-insight');
+    widget.widgetConfig = UI.Widget.widgetConfig(
+        element => new ConsoleInsight(promptBuilder, aidaClient, aidaPreconditions, element),
+    );
+    return widget;
+  }
 
   disableAnimations = false;
 
+  #view: ViewFunction;
   #promptBuilder: PublicPromptBuilder;
   #aidaClient: PublicAidaClient;
   #renderer: MarkdownView.MarkdownView.MarkdownInsightRenderer;
 
   // Main state.
   #state: StateData;
-  #referenceDetailsRef = Directives.createRef<HTMLDetailsElement>();
   #headerRef = Directives.createRef<HTMLHeadingElement>();
   #citationLinks: HTMLElement[] = [];
+  #highlightedCitationIndex = -1;  // -1 for no highlight, 0-based index otherwise
   #areReferenceDetailsOpen = false;
   #stateChanging = false;
   #closing = false;
@@ -686,9 +784,14 @@ export class ConsoleInsight extends HTMLElement {
   #marked: Marked.Marked.Marked;
 
   constructor(
-      promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient,
-      aidaPreconditions: Host.AidaClient.AidaAccessPreconditions) {
-    super();
+      promptBuilder: PublicPromptBuilder,
+      aidaClient: PublicAidaClient,
+      aidaPreconditions: Host.AidaClient.AidaAccessPreconditions,
+      element?: HTMLElement,
+      view: ViewFunction = DEFAULT_VIEW,
+  ) {
+    super(element);
+    this.#view = view;
     this.#promptBuilder = promptBuilder;
     this.#aidaClient = aidaClient;
     this.#aidaPreconditions = aidaPreconditions;
@@ -698,44 +801,30 @@ export class ConsoleInsight extends HTMLElement {
 
     this.#state = this.#getStateFromAidaAvailability();
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
-    this.#render();
-    // Stop keyboard event propagation to avoid Console acting on the events
-    // inside the insight component.
-    this.addEventListener('keydown', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('keyup', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('keypress', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('click', e => {
-      e.stopPropagation();
-    });
-    this.focus();
+    this.requestUpdate();
   }
 
   #citationClickHandler(index: number): void {
-    if (this.#state.type !== State.INSIGHT || !this.#referenceDetailsRef.value) {
+    if (this.#state.type !== State.INSIGHT) {
       return;
     }
-    const areDetailsAlreadyExpanded = this.#referenceDetailsRef.value.open;
+    const areDetailsAlreadyExpanded = this.#areReferenceDetailsOpen;
     this.#areReferenceDetailsOpen = true;
-    this.#render();
+    // index is 1-based, #currentHighlightedCitationIndex is 0-based
+    this.#highlightedCitationIndex = index - 1;
+    this.requestUpdate();
+
+    // If details are open, focus and scroll to citation immediately. Otherwise wait for opening transition.
+    if (areDetailsAlreadyExpanded) {
+      this.#scrollToHighlightedCitation();
+    }
+  }
 
-    const highlightedElement = this.#citationLinks[index - 1];
+  #scrollToHighlightedCitation(): void {
+    const highlightedElement = this.#citationLinks[this.#highlightedCitationIndex];
     if (highlightedElement) {
-      UI.UIUtils.runCSSAnimationOnce(highlightedElement, 'highlighted');
-      if (areDetailsAlreadyExpanded) {
-        highlightedElement.scrollIntoView({behavior: 'auto'});
-        highlightedElement.focus();
-      } else {  // Wait for the details element to open before scrolling.
-        this.#referenceDetailsRef.value.addEventListener('transitionend', () => {
-          highlightedElement.scrollIntoView({behavior: 'auto'});
-          highlightedElement.focus();
-        }, {once: true});
-      }
+      highlightedElement.scrollIntoView({behavior: 'auto'});
+      highlightedElement.focus();
     }
   }
 
@@ -783,7 +872,9 @@ export class ConsoleInsight extends HTMLElement {
     return Common.Settings.Settings.instance().createLocalSetting('console-insights-onboarding-finished', false);
   }
 
-  connectedCallback(): void {
+  override wasShown(): void {
+    super.wasShown();
+    this.focus();
     this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
     if (this.#state.type === State.LOADING && this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true &&
@@ -802,7 +893,8 @@ export class ConsoleInsight extends HTMLElement {
     void this.#generateInsightIfNeeded();
   }
 
-  disconnectedCallback(): void {
+  override willHide(): void {
+    super.willHide();
     this.#consoleInsightsEnabledSetting?.removeChangeListener(this.#onConsoleInsightsSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
@@ -844,7 +936,7 @@ export class ConsoleInsight extends HTMLElement {
   #transitionTo(newState: StateData): void {
     this.#stateChanging = this.#state.type !== newState.type;
     this.#state = newState;
-    this.#render();
+    this.requestUpdate();
   }
 
   async #generateInsightIfNeeded(): Promise<void> {
@@ -877,12 +969,12 @@ export class ConsoleInsight extends HTMLElement {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightsReminderTeaserCanceled);
     }
     this.#closing = true;
-    this.#render();
+    this.requestUpdate();
   }
 
   #onAnimationEnd(): void {
     if (this.#closing) {
-      this.dispatchEvent(new CloseEvent());
+      this.contentElement.dispatchEvent(new CloseEvent());
       return;
     }
     if (this.#stateChanging) {
@@ -890,6 +982,13 @@ export class ConsoleInsight extends HTMLElement {
     }
   }
 
+  #onCitationAnimationEnd(): void {
+    if (this.#highlightedCitationIndex !== -1) {
+      this.#highlightedCitationIndex = -1;
+      this.requestUpdate();
+    }
+  }
+
   #onRating(isPositive: boolean): void {
     if (this.#state.type !== State.INSIGHT) {
       throw new Error('Unexpected state');
@@ -903,7 +1002,7 @@ export class ConsoleInsight extends HTMLElement {
     }
 
     this.#selectedRating = isPositive;
-    this.#render();
+    this.requestUpdate();
     if (this.#selectedRating) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRatedPositive);
     } else {
@@ -1103,9 +1202,15 @@ export class ConsoleInsight extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(SIGN_IN_URL);
   }
 
-  #onToggleReferenceDetails(): void {
-    if (this.#referenceDetailsRef.value) {
-      this.#areReferenceDetailsOpen = this.#referenceDetailsRef.value.open;
+  #onToggleReferenceDetails(event: Event): void {
+    const detailsElement = event.target as HTMLDetailsElement;
+
+    if (detailsElement) {
+      this.#areReferenceDetailsOpen = detailsElement.open;
+      if (!detailsElement.open) {
+        this.#highlightedCitationIndex = -1;
+      }
+      this.requestUpdate();
     }
   }
 
@@ -1123,18 +1228,22 @@ export class ConsoleInsight extends HTMLElement {
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   }
 
-  #render(): void {
+  override performUpdate(): void {
     const input: ViewInput = {
       state: this.#state,
       closing: this.#closing,
       disableAnimations: this.disableAnimations,
       renderer: this.#renderer,
+      citationClickHandler: this.#citationClickHandler.bind(this),
       selectedRating: this.#selectedRating,
       noLogging: Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
           Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING,
+      areReferenceDetailsOpen: this.#areReferenceDetailsOpen,
+      highlightedCitationIndex: this.#highlightedCitationIndex,
       callbacks: {
         onClose: this.#onClose.bind(this),
         onAnimationEnd: this.#onAnimationEnd.bind(this),
+        onCitationAnimationEnd: this.#onCitationAnimationEnd.bind(this),
         onSearch: this.#onSearch.bind(this),
         onRating: this.#onRating.bind(this),
         onReport: this.#onReport.bind(this),
@@ -1144,100 +1253,16 @@ export class ConsoleInsight extends HTMLElement {
         onDisclaimerSettingsLink: this.#onDisclaimerSettingsLink.bind(this),
         onReminderSettingsLink: this.#onReminderSettingsLink.bind(this),
         onEnableInsightsInSettingsLink: this.#onEnableInsightsInSettingsLink.bind(this),
+        onReferencesOpen: this.#scrollToHighlightedCitation.bind(this),
       },
     };
     const output: ViewOutput = {
-      referenceDetailsRef: this.#referenceDetailsRef,
       headerRef: this.#headerRef,
       citationLinks: [],
     };
 
-    // Future Widget view function starts here.
-    const {state, noLogging, callbacks} = input;
-    const {onClose, onDisclaimerSettingsLink} = callbacks;
-
-    const jslog = `${VisualLogging.section(state.type).track({resize: true})}`;
-    let header: Lit.LitTemplate = Lit.nothing;
-    let main: Lit.LitTemplate = Lit.nothing;
-    const mainClasses: Record<string, true> = {};
-    let footer: Lit.LitTemplate|undefined;
-
-    switch (state.type) {
-      case State.LOADING:
-        header = renderHeader({headerText: i18nString(UIStrings.generating), onClose}, output.headerRef);
-        main = renderLoading();
-        break;
-      case State.INSIGHT:
-        header = renderHeader(
-            {headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed}, output.headerRef);
-        main = renderInsight(state, input.renderer, input.disableAnimations, callbacks, output);
-        footer = renderInsightFooter(noLogging, input.selectedRating, callbacks);
-        break;
-      case State.ERROR:
-        header = renderHeader({headerText: i18nString(UIStrings.error), onClose}, output.headerRef);
-        main = renderError(i18nString(UIStrings.errorBody));
-        footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
-        break;
-      case State.CONSENT_REMINDER:
-        header = renderHeader(
-            {headerText: 'Understand console messages with AI', onClose, showIcon: true}, output.headerRef);
-        mainClasses['reminder-container'] = true;
-        main = renderConsentReminder(noLogging);
-        footer = renderConsentReminderFooter(callbacks.onReminderSettingsLink, callbacks.onConsentReminderConfirmed);
-        break;
-      case State.SETTING_IS_NOT_TRUE:
-        mainClasses['opt-in-teaser'] = true;
-        main = renderSettingIsNotTrue(callbacks.onEnableInsightsInSettingsLink);
-        break;
-      case State.NOT_LOGGED_IN:
-      case State.SYNC_IS_PAUSED:
-        header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose}, output.headerRef);
-        main = renderNotLoggedIn();
-        footer = renderSignInFooter(callbacks.onGoToSignIn);
-        break;
-      case State.OFFLINE:
-        header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose}, output.headerRef);
-        main = renderError(i18nString(UIStrings.offline));
-        footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
-        break;
-    }
-
-    // clang-format off
-    render(html`
-      <style>${styles}</style>
-      <style>${Input.checkboxStyles}</style>
-      <div
-        class=${Directives.classMap({wrapper: true, closing: input.closing})}
-        jslog=${VisualLogging.pane('console-insights').track({resize: true})}
-        @animationend=${callbacks.onAnimationEnd}
-      >
-        <div class="animation-wrapper">
-          ${header}
-          <main jslog=${jslog} class=${Directives.classMap(mainClasses)}>
-            ${main}
-          </main>
-          ${footer?html`<footer jslog=${VisualLogging.section('footer')}>
-            ${footer}
-          </footer>`:Lit.nothing}
-        </div>
-      </div>
-    `, this.#shadow, {
-      host: this,
-    });
-    // clang-format on
+    this.#view(input, output, this.contentElement);
 
     this.#citationLinks = output.citationLinks;
-
-    if (this.#referenceDetailsRef.value) {
-      this.#referenceDetailsRef.value.open = this.#areReferenceDetailsOpen;
-    }
-  }
-}
-
-customElements.define('devtools-console-insight', ConsoleInsight);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-console-insight': ConsoleInsight;
   }
 }