chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -303,14 +303,6 @@ export class ChatView extends HTMLElement {
     this.#messagesContainerResizeObserver.disconnect();
   }
 
-  clearTextInput(): void {
-    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
-    if (!textArea) {
-      return;
-    }
-    textArea.value = '';
-  }
-
   focusTextInput(): void {
     const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
     if (!textArea) {
@@ -698,7 +690,7 @@ function renderStep({step, isLoading, markdownRenderer, isLast}: {
 }): Lit.LitTemplate {
   const stepClasses = Lit.Directives.classMap({
     step: true,
-    empty: !step.thought && !step.code && !step.contextDetails,
+    empty: !step.thought && !step.code && !step.contextDetails && !step.sideEffect,
     paused: Boolean(step.sideEffect),
     canceled: Boolean(step.canceled),
   });
@@ -884,7 +876,7 @@ function renderChatMessage({
 }
 
 function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitTemplate {
-  if (inlineData.data === AiAssistanceModel.AiHistoryStorage.NOT_FOUND_IMAGE_DATA) {
+  if (inlineData.data === AiAssistanceModel.AiConversation.NOT_FOUND_IMAGE_DATA) {
     // clang-format off
     return html`<div class="unavailable-image" title=${UIStringsNotTranslate.imageUnavailable}>
       <devtools-icon name='file-image'></devtools-icon>
@@ -954,6 +946,9 @@ function renderSelection({
   onInspectElementClick: () => void,
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType,
 }): Lit.LitTemplate {
+  if (!selectedContext) {
+    return Lit.nothing;
+  }
   // TODO: currently the picker behavior is SDKNode specific.
   const hasPickerBehavior = conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
 
@@ -964,10 +959,6 @@ function renderSelection({
     disabled: isTextInputDisabled,
   });
 
-  if (!selectedContext && !hasPickerBehavior) {
-    return Lit.nothing;
-  }
-
   const handleKeyDown = (ev: KeyboardEvent): void => {
     if (ev.key === 'Enter' || ev.key === ' ') {
       void onContextClick();
@@ -1307,8 +1298,10 @@ function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipI
   tooltipId: string,
   disclaimerText: string,
 }): Lit.LitTemplate {
-  const classes =
-      Lit.Directives.classMap({'chat-input-disclaimer': true, 'hide-divider': !isLoading && blockedByCrossOrigin});
+  const classes = Lit.Directives.classMap({
+    'chat-input-disclaimer': true,
+    'hide-divider': !isLoading && blockedByCrossOrigin,
+  });
   // clang-format off
   return html`
     <p class=${classes}>
@@ -1323,7 +1316,7 @@ function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipI
           void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
         }}
       >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
-      ${renderDisclamerTooltip(tooltipId, disclaimerText)}
+      ${renderDisclaimerTooltip(tooltipId, disclaimerText)}
     </p>
   `;
   // clang-format on
@@ -1376,50 +1369,80 @@ function renderChatInput({
   onRemoveImageInput?: () => void,
   onImageUpload?: (ev: Event) => void,
 }): Lit.LitTemplate {
-  const shouldShowMultiLine = selectedContext;
   const chatInputContainerCls = Lit.Directives.classMap({
     'chat-input-container': true,
-    'single-line-layout': !shouldShowMultiLine,
+    'single-line-layout': !selectedContext,
     disabled: isTextInputDisabled,
   });
 
   // clang-format off
-  return html`
-  <form class="input-form" @submit=${onSubmit}>
+  return html` <form class="input-form" @submit=${onSubmit}>
     <div class=${chatInputContainerCls}>
-      ${renderImageInput(
-        {multimodalInputEnabled, imageInput, isTextInputDisabled, onRemoveImageInput}
-      )}
-      <textarea class="chat-input"
+      ${renderImageInput({
+        multimodalInputEnabled,
+        imageInput,
+        isTextInputDisabled,
+        onRemoveImageInput,
+      })}
+      <textarea
+        class="chat-input"
         .disabled=${isTextInputDisabled}
         wrap="hard"
         maxlength="10000"
         @keydown=${onTextAreaKeyDown}
-        @input=${(event: KeyboardEvent) => onTextInputChange((event.target as HTMLInputElement).value)}
+        @input=${(event: KeyboardEvent) =>
+          onTextInputChange((event.target as HTMLInputElement).value)}
         placeholder=${inputPlaceholder}
-        jslog=${VisualLogging.textField('query').track({change: true, keydown: 'Enter'})}
+        jslog=${VisualLogging.textField('query').track({
+          change: true,
+          keydown: 'Enter',
+        })}
         aria-description=${i18nString(UIStrings.inputTextAriaDescription)}
+        ${ref(el => {
+          // If the elements is disabled reset the text to show
+          // the place holder
+          if (el && isTextInputDisabled) {
+            (el as HTMLInputElement).value = '';
+          }
+        })}
       ></textarea>
       <div class="chat-input-actions">
         <div class="chat-input-actions-left">
-          ${shouldShowMultiLine ? renderSelection({
+          ${renderSelection({
             selectedContext,
             inspectElementToggled,
             conversationType,
             isTextInputDisabled,
             onContextClick,
             onInspectElementClick,
-          }) : Lit.nothing}
+          })}
         </div>
         <div class="chat-input-actions-right">
           <div class="chat-input-disclaimer-container">
-            ${renderRelevantDataDisclaimer({ isLoading, blockedByCrossOrigin, tooltipId: RELEVANT_DATA_LINK_CHAT_ID, disclaimerText})}
+            ${renderRelevantDataDisclaimer({
+              isLoading,
+              blockedByCrossOrigin,
+              tooltipId: RELEVANT_DATA_LINK_CHAT_ID,
+              disclaimerText,
+            })}
           </div>
           ${renderMultimodalInputButtons({
-            multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, imageInput, uploadImageInputEnabled, onTakeScreenshot, onImageUpload
+            multimodalInputEnabled,
+            blockedByCrossOrigin,
+            isTextInputDisabled,
+            imageInput,
+            uploadImageInputEnabled,
+            onTakeScreenshot,
+            onImageUpload,
           })}
           ${renderChatInputButtons({
-            isLoading, blockedByCrossOrigin, isTextInputDisabled, isTextInputEmpty, imageInput, onCancel, onNewConversation
+            isLoading,
+            blockedByCrossOrigin,
+            isTextInputDisabled,
+            isTextInputEmpty,
+            imageInput,
+            onCancel,
+            onNewConversation,
           })}
         </div>
       </div>
@@ -1479,7 +1502,7 @@ function renderMainContents({
   return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
 }
 
-function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
+function renderDisclaimerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
   // clang-format off
   return html`
     <devtools-tooltip

package/front_end/panels/animation/AnimationTimeline.ts

@@ -508,14 +508,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 
   private setPlaybackRate(playbackRate: number): void {
-    if (playbackRate !== this.#playbackRate) {
-      Host.userMetrics.animationPlaybackRateChanged(
-          playbackRate === 0.1      ? Host.UserMetrics.AnimationsPlaybackRate.PERCENT_10 :
-              playbackRate === 0.25 ? Host.UserMetrics.AnimationsPlaybackRate.PERCENT_25 :
-              playbackRate === 1    ? Host.UserMetrics.AnimationsPlaybackRate.PERCENT_100 :
-                                      Host.UserMetrics.AnimationsPlaybackRate.OTHER);
-    }
-
     this.#playbackRate = playbackRate;
     for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
              SDK.AnimationModel.AnimationModel, {scoped: true})) {

package/front_end/panels/application/ExtensionStorageModel.ts

@@ -196,7 +196,7 @@ export class ExtensionStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
 
   #extensionIdForContext(context: SDK.RuntimeModel.ExecutionContext): string|undefined {
     const url = Common.ParsedURL.ParsedURL.fromString(context.origin);
-    return url && url.scheme === 'chrome-extension' ? url.host : undefined;
+    return url?.scheme === 'chrome-extension' ? url.host : undefined;
   }
 
   #executionContextDestroyed(context: SDK.RuntimeModel.ExecutionContext): void {

package/front_end/panels/application/FrameDetailsView.ts

@@ -12,6 +12,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
@@ -21,14 +22,13 @@ import type * as ExpandableList from '../../ui/components/expandable_list/expand
 import type * as ReportView from '../../ui/components/report_view/report_view.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ApplicationComponents from './components/components.js';
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
 import {OriginTrialTreeView} from './OriginTrialTreeView.js';
 
-const {until} = Directives;
 const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
@@ -270,12 +270,14 @@ export interface FrameDetailsReportViewData {
 interface FrameDetailsViewInput {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target: SDK.Target.Target|null;
+  creationStackTrace: StackTrace.StackTrace.StackTrace|null;
+  creationTarget: SDK.Target.Target|null;
   adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
-  linkTargetDOMNode?: Promise<SDK.DOMModel.DOMNode|null>;
-  permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null;
+  linkTargetDOMNode: SDK.DOMModel.DOMNode|null;
+  permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null;
   protocolMonitorExperimentEnabled: boolean;
   trials: Protocol.Page.OriginTrial[]|null;
-  securityIsolationInfo?: Promise<Protocol.Network.SecurityIsolationStatus|null>;
+  securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null;
   onRevealInNetwork?: () => void;
   onRevealInSources: () => void;
 }
@@ -295,11 +297,12 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       ${renderIsolationSection(input)}
       ${renderApiAvailabilitySection(input.frame)}
       ${renderOriginTrial(input.trials)}
-      ${until(input.permissionsPolicies?.then?.(policies =>
+      ${input.permissionsPolicies ?
         html`
-          <devtools-resources-permissions-policy-section .data=${{policies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
+          <devtools-resources-permissions-policy-section
+             .data=${{policies: input.permissionsPolicies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
           </devtools-resources-permissions-policy-section>
-        `), nothing)}
+        ` : nothing}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);
@@ -337,6 +340,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
     return nothing;
   }
 
+  // clang-format off
   return html`
       <devtools-report-section-header>${i18nString(UIStrings.document)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
@@ -349,12 +353,12 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
       </devtools-report-value>
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
       ${maybeRenderOrigin(input.frame?.securityOrigin)}
-      ${until(input.linkTargetDOMNode?.then?.(value => renderOwnerElement(value)), nothing)}
-      ${maybeRenderCreationStacktrace(input.frame.getCreationStackTraceData())}
+      ${renderOwnerElement(input.linkTargetDOMNode)}
+      ${maybeRenderCreationStacktrace(input.creationStackTrace, input.creationTarget)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
       ${maybeRenderCreatorAdScriptAncestry(input.frame?.adFrameType(), input.target, input.adScriptAncestry)}
-      <devtools-report-divider></devtools-report-divider>
-    `;
+      <devtools-report-divider></devtools-report-divider>`;
+  // clang-format on
 }
 
 function renderSourcesLinkForURL(onRevealInSources: () => void): LitTemplate {
@@ -444,23 +448,17 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
 }
 
 function maybeRenderCreationStacktrace(
-    creationStackTraceData:
-        {creationStackTrace: Protocol.Runtime.StackTrace|null, creationStackTraceTarget: SDK.Target.Target}|
-    null): LitTemplate {
-  if (creationStackTraceData?.creationStackTrace) {
+    stackTrace: StackTrace.StackTrace.StackTrace|null, target: SDK.Target.Target|null): LitTemplate {
+  if (stackTrace && target) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       return html`
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
-        <devtools-report-value
-        jslog=${VisualLogging.section('frame-creation-stack-trace')}
-        >
-          <devtools-resources-stack-trace .data=${{
-            creationStackTraceData,
-            buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace,
-          } as ApplicationComponents.StackTrace.StackTraceData}>
-          </devtools-resources-stack-trace>
+        <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
+          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
+              Components.JSPresentationUtils.StackTracePreviewContent, {target, stackTrace, options: {expandable: true}})}>
+          </devtools-widget>
         </devtools-report-value>
       `;
     // clang-format on
@@ -569,7 +567,7 @@ function renderIsolationSection(input: FrameDetailsViewInput): LitTemplate {
       <devtools-report-value>
         ${input.frame.isCrossOriginIsolated() ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
       </devtools-report-value>
-      ${until(input.securityIsolationInfo?.then?.(value => maybeRenderCoopCoepCSPStatus(value)), nothing)}
+      ${maybeRenderCoopCoepCSPStatus(input.securityIsolationInfo)}
       <devtools-report-divider></devtools-report-divider>
     `;
 }
@@ -597,7 +595,7 @@ function getSecureContextExplanation(frame: SDK.ResourceTreeModel.ResourceTreeFr
   return null;
 }
 
-async function maybeRenderCoopCoepCSPStatus(info: Protocol.Network.SecurityIsolationStatus|null): Promise<LitTemplate> {
+function maybeRenderCoopCoepCSPStatus(info: Protocol.Network.SecurityIsolationStatus|null): LitTemplate {
   if (info) {
     return html`
           ${
@@ -845,8 +843,13 @@ function renderAdditionalInfoSection(frame: SDK.ResourceTreeModel.ResourceTreeFr
 export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
+  #creationStackTrace: StackTrace.StackTrace.StackTrace|null = null;
+  #creationTarget: SDK.Target.Target|null = null;
+  #securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null = null;
+  #linkTargetDOMNode: SDK.DOMModel.DOMNode|null = null;
+  #trials: Protocol.Page.OriginTrial[]|null = null;
   #protocolMonitorExperimentEnabled = false;
-  #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
+  #permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null = null;
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
   #view: View;
@@ -859,6 +862,34 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
 
   set frame(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     this.#frame = frame;
+    void this.#frame.getPermissionsPolicyState().then(permissionsPolicies => {
+      this.#permissionsPolicies = permissionsPolicies;
+      this.requestUpdate();
+    });
+    const {creationStackTrace: rawCreationStackTrace, creationStackTraceTarget: creationTarget} =
+        frame.getCreationStackTraceData();
+    this.#creationTarget = creationTarget;
+    if (rawCreationStackTrace) {
+      void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+          .createStackTraceFromProtocolRuntime(rawCreationStackTrace, creationTarget)
+          .then(creationStackTrace => {
+            this.#creationStackTrace = creationStackTrace;
+            this.requestUpdate();
+          });
+    }
+    const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
+    void networkManager?.getSecurityIsolationStatus(frame.id).then(securityIsolationInfo => {
+      this.#securityIsolationInfo = securityIsolationInfo;
+      this.requestUpdate();
+    });
+    void frame.getOwnerDOMNodeOrDocument().then(linkTargetDOMNode => {
+      this.#linkTargetDOMNode = linkTargetDOMNode;
+      this.requestUpdate();
+    });
+    void frame.getOriginTrials().then(trials => {
+      this.#trials = trials;
+      this.requestUpdate();
+    });
     this.requestUpdate();
   }
 
@@ -882,27 +913,24 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
       this.#target = debuggerModel?.target() ?? null;
     }
 
-    if (!this.#permissionsPolicies && this.#frame) {
-      this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
-    }
     const frame = this.#frame;
     if (!frame) {
       return;
     }
-    const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
-    const securityIsolationInfo = networkManager?.getSecurityIsolationStatus(frame.id);
-    const linkTargetDOMNode = frame.getOwnerDOMNodeOrDocument();
     const frameRequest = frame.resourceForURL(frame.url)?.request;
+
     const input = {
       frame,
       target: this.#target,
+      creationStackTrace: this.#creationStackTrace,
+      creationTarget: this.#creationTarget,
       protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
       permissionsPolicies: this.#permissionsPolicies,
       adScriptAncestry: this.#adScriptAncestry,
       linkifier: this.#linkifier,
-      linkTargetDOMNode,
-      trials: await frame.getOriginTrials(),
-      securityIsolationInfo,
+      linkTargetDOMNode: this.#linkTargetDOMNode,
+      trials: this.#trials,
+      securityIsolationInfo: this.#securityIsolationInfo,
       onRevealInNetwork: frameRequest ?
           () => {
             const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -410,7 +410,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     }
 
     // It is possible that table selection changes before the preview opens.
-    if (this.dataGrid?.selectedNode && request === this.dataGrid.selectedNode.data) {
+    if (request === this.dataGrid?.selectedNode?.data) {
       this.showPreview(preview);
     }
   }

package/front_end/panels/application/components/components.ts

@@ -12,7 +12,6 @@ import * as ReportsGrid from './ReportsGrid.js';
 import * as ServiceWorkerRouterView from './ServiceWorkerRouterView.js';
 import * as SharedStorageAccessGrid from './SharedStorageAccessGrid.js';
 import * as SharedStorageMetadataView from './SharedStorageMetadataView.js';
-import * as StackTrace from './StackTrace.js';
 import * as StorageMetadataView from './StorageMetadataView.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
@@ -27,7 +26,6 @@ export {
   ServiceWorkerRouterView,
   SharedStorageAccessGrid,
   SharedStorageMetadataView,
-  StackTrace,
   StorageMetadataView,
   TrustTokensView,
 };

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -0,0 +1,80 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+
+const UIStringsNotTranslate = {
+  /**
+   * @description Text for teaser to generate code.
+   */
+  ctrlItoGenerateCode: 'ctrl-i to generate code',
+  /**
+   * @description Text for teaser to generate code in Mac.
+   */
+  cmdItoGenerateCode: 'cmd-i to generate code',
+  /**
+   * Text for teaser when generating suggestion.
+   */
+  generating: 'Generating... (esc to cancel)',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export interface ViewInput {
+  loading: boolean;
+}
+
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
+                                                 lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+  const teaserLabel = input.loading ? lockedString(UIStringsNotTranslate.generating) : toGenerateCode;
+  // clang-format off
+  render(
+        html`
+          <div class="ai-code-generation-teaser">
+            &nbsp;${teaserLabel}
+          </div>
+        `, target
+      );
+  // clang-format on
+};
+
+export class AiCodeGenerationTeaser extends UI.Widget.Widget {
+  readonly #view: View;
+
+  #loading = false;
+
+  constructor(view?: View) {
+    super();
+    this.markAsExternallyManaged();
+    this.#view = view ?? DEFAULT_VIEW;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const output = {};
+    this.#view(
+        {
+          loading: this.#loading,
+        },
+        output, this.contentElement);
+  }
+
+  get loading(): boolean {
+    return this.#loading;
+  }
+
+  set loading(loading: boolean) {
+    if (loading === this.#loading) {
+      return;
+    }
+    this.#loading = loading;
+    this.requestUpdate();
+  }
+}

package/front_end/panels/common/common.ts

@@ -69,7 +69,7 @@ export class TypeToAllowDialog {
           UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), () => resolve(false), {jslogContext: 'cancel'});
 
       const allowButton = UI.UIUtils.createTextButton(i18nString(UIStrings.allow), () => {
-        resolve(input.value === options.typePhrase);
+        resolve(input.value === options.typePhrase || input.value === `'${options.typePhrase}'`);
       }, {jslogContext: 'confirm', variant: Buttons.Button.Variant.PRIMARY});
       allowButton.disabled = true;
 
@@ -95,6 +95,7 @@ export class TypeToAllowDialog {
 }
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
+export {AiCodeGenerationTeaser} from './AiCodeGenerationTeaser.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';