chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -94,6 +94,14 @@ const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance
 const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
 const SLOW_GENERATION_CUTOFF_MILLISECONDS = 3500;
 
+const enum State {
+  READY = 'ready',
+  GENERATING = 'generating',          // Before receiving first chunk
+  PARTIAL_TEASER = 'partial-teaser',  // After receiving first chunk
+  TEASER = 'teaser',
+  ERROR = 'error',
+}
+
 interface ViewInput {
   onTellMeMoreClick: (event: Event) => void;
   // If multiple ConsoleInsightTeasers exist, each one needs a unique id. Otherwise showing and
@@ -105,7 +113,121 @@ interface ViewInput {
   dontShowChanged: (e: Event) => void;
   hasTellMeMoreButton: boolean;
   isSlowGeneration: boolean;
-  isError: boolean;
+  state: State;
+}
+
+function renderGenerating(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <div class="response-container">
+        <h2>${input.isSlowGeneration ?
+          lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) :
+          lockedString(UIStringsNotTranslate.summarizing)
+        }</h2>
+        <div
+          role="presentation"
+          aria-label=${lockedString(UIStringsNotTranslate.loading)}
+          class="loader"
+          style="clip-path: url(${'#clipPath-' + input.uuid});"
+        >
+          <svg width="100%" height="58">
+            <defs>
+            <clipPath id=${'clipPath-' + input.uuid}>
+              <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
+              <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
+              <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
+            </clipPath>
+          </defs>
+          </svg>
+        </div>
+      </div>
+      ${renderFooter(input)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderError(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
+      ${renderFooter(input)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderDontShowCheckbox(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <devtools-checkbox
+      aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
+      @change=${input.dontShowChanged}
+      jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
+      ${lockedString(UIStringsNotTranslate.dontShow)}
+    </devtools-checkbox>
+  `;
+  // clang-format on
+}
+
+function renderFooter(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="tooltip-footer">
+      ${input.hasTellMeMoreButton ? html`
+        <devtools-button
+          title=${lockedString(UIStringsNotTranslate.tellMeMore)}
+          .jslogContext=${'insights-teaser-tell-me-more'}
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          @click=${input.onTellMeMoreClick}
+        >
+          <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
+          ${lockedString(UIStringsNotTranslate.tellMeMore)}
+        </devtools-button>
+      ` : Lit.nothing}
+      <devtools-button
+        .iconName=${'info'}
+        .variant=${Buttons.Button.Variant.ICON}
+        aria-details=${'teaser-info-tooltip-' + input.uuid}
+        .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
+      ></devtools-button>
+      <devtools-tooltip
+        id=${'teaser-info-tooltip-' + input.uuid}
+        variant="rich"
+        jslogContext="teaser-info-tooltip"
+        trigger="both"
+        hover-delay=500
+      >
+        <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
+        <div class="learn-more">
+          <x-link
+            class="devtools-link"
+            title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
+            href=${DATA_USAGE_URL}
+            jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
+          >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
+        </div>
+      </devtools-tooltip>
+      ${renderDontShowCheckbox(input)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderTeaser(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <div class="response-container">
+        <h2>${input.headerText}</h2>
+        <div class="main-text">${input.mainText}</div>
+      </div>
+      ${renderFooter(input)}
+    </div>
+  `;
+  // clang-format on
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -114,7 +236,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     return;
   }
 
-  const showPlaceholder = !Boolean(input.mainText);
   // clang-format off
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
@@ -126,83 +247,18 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       prefer-span-left
       jslogContext="console-insight-teaser"
     >
-      <div class="teaser-tooltip-container">
-        ${input.isError ? html`
-          <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
-        ` :
-          showPlaceholder ? html`
-            <div class="response-container">
-              <h2>${input.isSlowGeneration ?
-                lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) :
-                lockedString(UIStringsNotTranslate.summarizing)
-              }</h2>
-              <div
-                role="presentation"
-                aria-label=${lockedString(UIStringsNotTranslate.loading)}
-                class="loader"
-                style="clip-path: url(${'#clipPath-' + input.uuid});"
-              >
-                <svg width="100%" height="58">
-                  <defs>
-                  <clipPath id=${'clipPath-' + input.uuid}>
-                    <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
-                    <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
-                    <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
-                  </clipPath>
-                </defs>
-                </svg>
-              </div>
-            </div>
-          ` : html`
-            <div class="response-container">
-              <h2>${input.headerText}</h2>
-              <div class="main-text">${input.mainText}</div>
-            </div>
-          `
+      ${(() => {
+        switch (input.state) {
+          case State.READY:
+          case State.GENERATING:
+            return renderGenerating(input);
+          case State.ERROR:
+            return renderError(input);
+          case State.PARTIAL_TEASER:
+          case State.TEASER:
+            return renderTeaser(input);
         }
-        <div class="tooltip-footer">
-          ${input.hasTellMeMoreButton ? html`
-            <devtools-button
-              title=${lockedString(UIStringsNotTranslate.tellMeMore)}
-              .jslogContext=${'insights-teaser-tell-me-more'}
-              .variant=${Buttons.Button.Variant.PRIMARY}
-              @click=${input.onTellMeMoreClick}
-            >
-              <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
-              ${lockedString(UIStringsNotTranslate.tellMeMore)}
-            </devtools-button>
-          ` : Lit.nothing}
-          <devtools-button
-            .iconName=${'info'}
-            .variant=${Buttons.Button.Variant.ICON}
-            aria-details=${'teaser-info-tooltip-' + input.uuid}
-            .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
-          ></devtools-button>
-          <devtools-tooltip
-            id=${'teaser-info-tooltip-' + input.uuid}
-            variant="rich"
-            jslogContext="teaser-info-tooltip"
-            trigger="both"
-            hover-delay=500
-          >
-            <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
-            <div class="learn-more">
-              <x-link
-                class="devtools-link"
-                title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
-                href=${DATA_USAGE_URL}
-                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-              >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
-            </div>
-          </devtools-tooltip>
-          <devtools-checkbox
-            aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
-            @change=${input.dontShowChanged}
-            jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
-            ${lockedString(UIStringsNotTranslate.dontShow)}
-          </devtools-checkbox>
-        </div>
-      </div>
+      })()}
     </devtools-tooltip>
   `, target);
   // clang-format on
@@ -213,8 +269,7 @@ export type View = typeof DEFAULT_VIEW;
 export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #view: View;
   #uuid: string;
-  #isGenerating = false;
-  #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi|undefined;
+  #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi;
   #promptBuilder: PromptBuilder;
   #headerText = '';
   #mainText = '';
@@ -223,9 +278,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #abortController: null|AbortController = null;
   #isSlow = false;
   #timeoutId: ReturnType<typeof setTimeout>|null = null;
-  #isError = false;
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #state: State;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -234,6 +289,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#promptBuilder = new PromptBuilder(consoleViewMessage);
     this.#consoleViewMessage = consoleViewMessage;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+    this.#state = State.READY;
     this.requestUpdate();
   }
 
@@ -316,10 +373,24 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   }
 
   maybeGenerateTeaser(): void {
-    this.requestUpdate();
-    if (!this.#isInactive && !this.#isGenerating && !Boolean(this.#mainText) &&
-        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
-      void this.#generateTeaserText();
+    switch (this.#state) {
+      case State.READY:
+        if (!this.#isInactive &&
+            Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
+          void this.#generateTeaserText();
+        }
+        this.requestUpdate();
+        return;
+      case State.GENERATING:
+        console.error('Trying trigger teaser generation when state is "GENERATING"');
+        return;
+      case State.PARTIAL_TEASER:
+        console.error('Trying trigger teaser generation when state is "PARTIAL_TEASER"');
+        return;
+      // These are terminal states. No need to update anything.
+      case State.TEASER:
+      case State.ERROR:
+        return;
     }
   }
 
@@ -327,11 +398,11 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     if (this.#abortController) {
       this.#abortController.abort();
     }
-    if (this.#isGenerating) {
+    if (this.#state === State.GENERATING || this.#state === State.PARTIAL_TEASER) {
       this.#mainText = '';
+      this.#state = State.READY;
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted);
     }
-    this.#isGenerating = false;
     if (this.#timeoutId) {
       clearTimeout(this.#timeoutId);
     }
@@ -352,7 +423,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   async #generateTeaserText(): Promise<void> {
     this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
-    this.#isGenerating = true;
+    this.#state = State.GENERATING;
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted);
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     const startTime = performance.now();
@@ -362,6 +433,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       for await (const chunk of this.#getOnDeviceInsight()) {
         teaserText += chunk;
         this.#mainText = teaserText;
+        this.#state = State.PARTIAL_TEASER;
         this.requestUpdate();
         if (!firstChunkReceived) {
           firstChunkReceived = true;
@@ -370,12 +442,13 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       }
     } catch (err) {
       // Ignore `AbortError` errors, which are thrown on mouse leave.
-      if (err.name !== 'AbortError') {
+      if (err.name === 'AbortError') {
+        this.#state = State.READY;
+      } else {
         console.error(err.name, err.message);
-        this.#isError = true;
+        this.#state = State.ERROR;
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationErrored);
       }
-      this.#isGenerating = false;
       clearTimeout(this.#timeoutId);
       this.requestUpdate();
       return;
@@ -383,7 +456,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
     clearTimeout(this.#timeoutId);
     Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
-    this.#isGenerating = false;
+    this.#state = State.TEASER;
     this.#mainText = teaserText;
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted);
     this.requestUpdate();
@@ -391,13 +464,6 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   async * #getOnDeviceInsight(): AsyncGenerator<string> {
     const {prompt} = await this.#promptBuilder.buildPrompt();
-    if (!this.#builtInAi) {
-      this.#builtInAi = await AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
-      if (!this.#builtInAi) {
-        this.#isInactive = true;
-        throw new Error('Cannot instantiate BuiltInAi');
-      }
-    }
     this.#abortController = new AbortController();
     const stream = this.#builtInAi.getConsoleInsight(prompt, this.#abortController);
     for await (const chunk of stream) {
@@ -436,7 +502,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
           dontShowChanged: this.#dontShowChanged.bind(this),
           hasTellMeMoreButton: this.#hasTellMeMoreButton(),
           isSlowGeneration: this.#isSlow,
-          isError: this.#isError,
+          state: this.#state,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/console/ConsolePrompt.ts

@@ -285,7 +285,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (preview.deepTextContent() !== TextEditor.Config.contentIncludingHint(this.editor.editor).trim()) {
       this.innerPreviewElement.appendChild(preview);
     }
-    if (result && 'object' in result && result.object && result.object.subtype === 'node') {
+    if (result && 'object' in result && result.object?.subtype === 'node') {
       this.highlightingNode = true;
       SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(result.object);
     } else if (this.highlightingNode) {
@@ -448,7 +448,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private async handleEnter(forceEvaluate?: boolean): Promise<void> {
-    if (this.#selfXssWarningShown && this.text() === i18nString(UIStrings.allowPasting)) {
+    if (this.#selfXssWarningShown &&
+        (this.text() === i18nString(UIStrings.allowPasting) ||
+         this.text() === `'${i18nString(UIStrings.allowPasting)}'`)) {
       Common.Console.Console.instance().log(this.text());
       this.editor.dispatch({
         changes: {from: 0, to: this.editor.state.doc.length},

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -223,6 +223,14 @@ const UIStrings = {
    * @description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
    */
   SeeIssueInCookieReport: 'Click to open privacy and security panel and show third-party cookie report',
+  /**
+   * @description Element text content in Object Properties Section
+   */
+  dots: '(...)',
+  /**
+   * @description Element title in Object Properties Section
+   */
+  invokePropertyGetter: 'Invoke property getter',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleViewMessage.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -282,6 +290,14 @@ const hoverButtonObserver = new IntersectionObserver(results => {
   }
 });
 
+function appendOrShow(parent: Element, child: DocumentFragment|UI.Widget.Widget): void {
+  if (child instanceof UI.Widget.Widget) {
+    child.show(parent, null, /* suppressOprhanWidgetError=*/ true);
+  } else {
+    parent.appendChild(child);
+  }
+}
+
 export class ConsoleViewMessage implements ConsoleViewportElement {
   protected message: SDK.ConsoleModel.ConsoleMessage;
   private readonly linkifier: Components.Linkifier.Linkifier;
@@ -452,7 +468,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           if (this.message.type === Protocol.Runtime.ConsoleAPICalledEventType.Assert) {
             this.messagePrefix = i18nString(UIStrings.assertionFailed);
           }
-          if (this.message.parameters && this.message.parameters.length === 1) {
+          if (this.message.parameters?.length === 1) {
             const parameter = this.message.parameters[0];
             if (typeof parameter !== 'string' && parameter.type === 'string') {
               messageElement = this.tryFormatAsError((parameter.value as string));
@@ -528,7 +544,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
         return linkElement;
       });
-      messageElement.appendChild(fragment);
+      appendOrShow(messageElement, fragment);
     }
     return messageElement;
   }
@@ -767,7 +783,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (let i = 0; i < parameters.length; ++i) {
       // Inline strings when formatting.
       if (shouldFormatMessage && parameters[i].type === 'string') {
-        formattedResult.appendChild(this.linkifyStringAsFragment(parameters[i].description || ''));
+        appendOrShow(formattedResult, this.linkifyStringAsFragment(parameters[i].description || ''));
       } else {
         formattedResult.appendChild(this.formatParameter(parameters[i], false, true));
       }
@@ -843,9 +859,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const result = document.createElement('span');
     const description = obj.description || '';
     if (description.length > getMaxTokenizableStringLength()) {
-      const propertyValue =
-          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(description, getLongStringVisibleLength());
-      result.appendChild(propertyValue.element);
+      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue();
+      propertyValue.text = description;
+      propertyValue.maxLength = getLongStringVisibleLength();
+      propertyValue.show(result, null, /* suppressOprhanWidgetError=*/ true);
     } else {
       UI.UIUtils.createTextChild(result, description);
     }
@@ -982,7 +999,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const text = Platform.StringUtilities.formatAsJSLiteral(description);
     const result = document.createElement('span');
     result.addEventListener('contextmenu', this.contextMenuEventFired.bind(this, output), false);
-    result.appendChild(this.linkifyStringAsFragment(text));
+    appendOrShow(result, this.linkifyStringAsFragment(text));
     return result;
   }
 
@@ -999,7 +1016,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       let errorElement = this.tryFormatAsError(error.errorStack, details);
       if (!errorElement) {
         errorElement = document.createElement('span');
-        errorElement.append(this.linkifyStringAsFragment(error.errorStack));
+        appendOrShow(errorElement, this.linkifyStringAsFragment(error.errorStack));
       }
 
       if (includeCausedByPrefix) {
@@ -1010,9 +1027,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         result.appendChild(errorElement);
       }
 
-      if (cause && cause.subtype === 'error') {
+      if (cause?.subtype === 'error') {
         await formatErrorStack(cause, /* includeCausedByPrefix */ true);
-      } else if (cause && cause.type === 'string') {
+      } else if (cause?.type === 'string') {
         const stringCauseElement = document.createElement('div');
         stringCauseElement.append(`Caused by: ${cause.value}`);
         result.append(stringCauseElement);
@@ -1037,11 +1054,43 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return fragment;
   }
 
+  createRemoteObjectAccessorPropertySpan(
+      object: SDK.RemoteObject.RemoteObject|null, propertyPath: string[],
+      callback: (arg0: SDK.RemoteObject.CallFunctionResult) => void): HTMLElement {
+    const rootElement = document.createElement('span');
+    const element = rootElement.createChild('span');
+    element.textContent = i18nString(UIStrings.dots);
+    if (!object) {
+      return rootElement;
+    }
+    element.classList.add('object-value-calculate-value-button');
+    UI.Tooltip.Tooltip.install(element, i18nString(UIStrings.invokePropertyGetter));
+    element.addEventListener('click', onInvokeGetterClick, false);
+
+    function onInvokeGetterClick(event: Event): void {
+      event.consume();
+      if (object) {
+        void object.callFunction(invokeGetter, [{value: JSON.stringify(propertyPath)}]).then(callback);
+      }
+    }
+
+    function invokeGetter(this: Object, arrayStr: string): Object {
+      let result: Object = this;
+      const properties = JSON.parse(arrayStr);
+      for (let i = 0, n = properties.length; i < n; ++i) {
+        // @ts-expect-error callFunction expects this to be a generic Object, so while this works we can't be more specific on types.
+        result = result[properties[i]];
+      }
+      return result;
+    }
+
+    return rootElement;
+  }
+
   private formatAsAccessorProperty(
       object: SDK.RemoteObject.RemoteObject|null, propertyPath: string[], isArrayEntry: boolean): HTMLElement {
     const rootElement =
-        ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
-            object, propertyPath, onInvokeGetterClick.bind(this));
+        this.createRemoteObjectAccessorPropertySpan(object, propertyPath, onInvokeGetterClick.bind(this));
 
     function onInvokeGetterClick(this: ConsoleViewMessage, result: SDK.RemoteObject.CallFunctionResult): void {
       const wasThrown = result.wasThrown;
@@ -1093,7 +1142,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         }
         case 'string': {
           if (currentStyle.size === 0) {
-            formattedResult.append(this.linkifyStringAsFragment(token.value));
+            appendOrShow(formattedResult, this.linkifyStringAsFragment(token.value));
           } else {
             const lines = token.value.split('\n');
             for (let i = 0; i < lines.length; i++) {
@@ -1104,7 +1153,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
               wrapper.style.setProperty('contain', 'paint');
               wrapper.style.setProperty('display', 'inline-block');
               wrapper.style.setProperty('max-width', '100%');
-              wrapper.appendChild(this.linkifyStringAsFragment(lines[i]));
+              appendOrShow(wrapper, this.linkifyStringAsFragment(lines[i]));
               for (const [property, {value, priority}] of currentStyle) {
                 wrapper.style.setProperty(property, value, priority);
               }
@@ -1477,7 +1526,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return false;
     }
     if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
-        !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
+        !AiAssistanceModel.BuiltInAi.BuiltInAi.instance().hasSession()) {
       return false;
     }
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
@@ -1757,13 +1806,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (let f = 0; f < frames.length; ++f) {
       const {name} = frames[f];
       const formattedLine = document.createElement('span');
-      formattedLine.appendChild(this.linkifyStringAsFragment(`${prefix} ${name} (`));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(`${prefix} ${name} (`));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), null, url, lineNumber, {columnNumber, inlineFrameIndex: f});
       scriptLocationLink.tabIndex = -1;
       this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
       formattedLine.appendChild(scriptLocationLink);
-      formattedLine.appendChild(this.linkifyStringAsFragment(suffix));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
       formattedLine.classList.add('formatted-stack-frame');
       stackTrace.insertBefore(formattedLine, insertBefore);
     }
@@ -1824,7 +1873,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       // where the error occurred. We use the source location from the
       // exceptionDetails and append it to the end of the message instead.
       if (!link && exceptionDetails && line.startsWith('SyntaxError')) {
-        formattedResult.appendChild(this.linkifyStringAsFragment(line));
+        appendOrShow(formattedResult, this.linkifyStringAsFragment(line));
         const maybeScriptLocation = this.createScriptLocationLinkForSyntaxError(debuggerModel, exceptionDetails);
         if (maybeScriptLocation) {
           formattedResult.append(' (at ');
@@ -1835,18 +1884,18 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         continue;
       }
       if (!isCallFrame) {
-        formattedResult.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
+        appendOrShow(formattedResult, this.linkifyStringAsFragment(`${line}${newline}`));
         continue;
       }
       const formattedLine = document.createElement('span');
       if (!link) {
-        formattedLine.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
+        appendOrShow(formattedLine, this.linkifyStringAsFragment(`${line}${newline}`));
         formattedLine.classList.add('formatted-builtin-stack-frame');
         formattedResult.appendChild(formattedLine);
         continue;
       }
       const suffix = `${link.suffix}${newline}`;
-      formattedLine.appendChild(this.linkifyStringAsFragment(link.prefix));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(link.prefix));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
             columnNumber: link.columnNumber,
@@ -1856,7 +1905,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       scriptLocationLink.tabIndex = -1;
       this.selectableChildren.push({element: scriptLocationLink, forceSelect: () => scriptLocationLink.focus()});
       formattedLine.appendChild(scriptLocationLink);
-      formattedLine.appendChild(this.linkifyStringAsFragment(suffix));
+      appendOrShow(formattedLine, this.linkifyStringAsFragment(suffix));
       formattedLine.classList.add('formatted-stack-frame');
       formattedResult.appendChild(formattedLine);
 
@@ -1887,13 +1936,12 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private linkifyWithCustomLinkifier(
       string: string,
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
-      DocumentFragment {
+      DocumentFragment|UI.Widget.Widget {
     if (string.length > getMaxTokenizableStringLength()) {
-      const propertyValue =
-          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(string, getLongStringVisibleLength());
-      const fragment = document.createDocumentFragment();
-      fragment.appendChild(propertyValue.element);
-      return fragment;
+      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue();
+      propertyValue.text = string;
+      propertyValue.maxLength = getLongStringVisibleLength();
+      return propertyValue;
     }
     const container = document.createDocumentFragment();
     const tokens = ConsoleViewMessage.tokenizeMessageText(string);
@@ -1932,7 +1980,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return container;
   }
 
-  private linkifyStringAsFragment(string: string): DocumentFragment {
+  private linkifyStringAsFragment(string: string): DocumentFragment|UI.Widget.Widget {
     return this.linkifyWithCustomLinkifier(string, (text, url, lineNumber, columnNumber) => {
       const options = {text, lineNumber, columnNumber};
       const linkElement =

package/front_end/panels/console/ConsoleViewport.ts

@@ -215,8 +215,7 @@ export class ConsoleViewport {
   private updateFocusedItem(focusLastChild?: boolean): void {
     const selectedElement = this.renderedElementAt(this.virtualSelectedIndex);
     const changed = this.lastSelectedElement !== selectedElement;
-    const containerHasFocus =
-        this.#contentElement === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
+    const containerHasFocus = this.#contentElement === UI.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     if (this.lastSelectedElement && changed) {
       this.lastSelectedElement.classList.remove('console-selected');
     }
@@ -425,7 +424,7 @@ export class ConsoleViewport {
 
     for (let i = start; i <= end; i++) {
       const element = (this.providerElement(i) as ConsoleViewMessage);
-      if (element && element.consoleMessage().type === 'table') {
+      if (element?.consoleMessage().type === 'table') {
         return true;
       }
     }