chrome-devtools-frontend 1.0.1538310 → 1.0.1539728

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

@@ -1,7 +1,7 @@
 // Copyright 2024 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-imperative-dom-api */
+
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/spinners/spinners.js';
@@ -9,7 +9,6 @@ import '../../../ui/components/spinners/spinners.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
@@ -19,7 +18,6 @@ import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
-import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -31,47 +29,10 @@ import {UserActionRow} from './UserActionRow.js';
 const {html, Directives: {ifDefined, ref}} = Lit;
 
 const UIStrings = {
-  /**
-   * @description The error message when the user is not logged in into Chrome.
-   */
-  notLoggedIn: 'This feature is only available when you are signed into Chrome with your Google account',
-  /**
-   * @description Message shown when the user is offline.
-   */
-  offline: 'Check your internet connection and try again',
-  /**
-   * @description Text for a link to Chrome DevTools Settings.
-   */
-  settingsLink: 'AI assistance in Settings',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStyles: 'Turn on {PH1} to get help with understanding CSS styles',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStylesRequestsAndFiles: 'Turn on {PH1} to get help with styles, network requests, and files',
-  /**
-   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   * @example {AI assistance in Settings} PH1
-   */
-  turnOnForStylesRequestsPerformanceAndFiles:
-      'Turn on {PH1} to get help with styles, network requests, performance, and files',
   /**
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
-  /**
-   * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
-   */
-  notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode',
 
   /**
    * @description Label added to the text input to describe the context for screen readers. Not shown visibly on screen.
@@ -259,12 +220,6 @@ export interface ModelChatMessage {
 
 export type ChatMessage = UserChatMessage|ModelChatMessage;
 
-export const enum State {
-  DISABLED_VIEW = 'disabled-view',
-  CHAT_VIEW = 'chat-view',
-  EXPLORE_VIEW = 'explore-view'
-}
-
 export interface Props {
   onTextSubmit:
       (text: string, imageInput?: Host.AidaClient.Part,
@@ -281,7 +236,6 @@ export interface Props {
   onLoadImage?: (file: File) => Promise<void>;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
-  state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
   messages: ChatMessage[];
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
@@ -513,10 +467,6 @@ export class ChatView extends HTMLElement {
 
   #render(): void {
     const renderFooter = (): Lit.LitTemplate => {
-      if (this.#props.state !== State.CHAT_VIEW) {
-        return Lit.nothing;
-      }
-
       const classes = Lit.Directives.classMap({
         'chat-view-footer': true,
         'has-conversation': !!this.#props.conversationType,
@@ -538,10 +488,6 @@ export class ChatView extends HTMLElement {
     };
 
     const renderInputOrReadOnlySection = (): Lit.LitTemplate => {
-      if (this.#props.state !== State.CHAT_VIEW) {
-        return Lit.nothing;
-      }
-
       if (this.#props.conversationType && this.#props.isReadOnly) {
         return renderReadOnlySection({
           conversationType: this.#props.conversationType,
@@ -582,8 +528,6 @@ export class ChatView extends HTMLElement {
       <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
           ${renderMainContents({
-            state: this.#props.state,
-            aidaAvailability: this.#props.aidaAvailability,
             messages: this.#props.messages,
             isLoading: this.#props.isLoading,
             isReadOnly: this.#props.isReadOnly,
@@ -1504,75 +1448,7 @@ function renderChatInput({
   // clang-format on
 }
 
-function renderAidaUnavailableContents(
-    aidaAvailability:
-        Exclude<Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>):
-    Lit.TemplateResult {
-  switch (aidaAvailability) {
-    case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
-    case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED: {
-      return html`${i18nString(UIStrings.notLoggedIn)}`;
-    }
-    case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET: {
-      return html`${i18nString(UIStrings.offline)}`;
-    }
-  }
-}
-
-function renderConsentViewContents(): Lit.TemplateResult {
-  const settingsLink = document.createElement('span');
-  settingsLink.textContent = i18nString(UIStrings.settingsLink);
-  settingsLink.classList.add('link');
-  UI.ARIAUtils.markAsLink(settingsLink);
-  settingsLink.addEventListener('click', () => {
-    void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-  });
-  settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
-
-  let consentViewContents: HTMLSpanElement;
-  // TODO(ergunsh): Should this `view` access `hostConfig` at all?
-  const config = Root.Runtime.hostConfig;
-  if (config.isOffTheRecord) {
-    return html`${i18nString(UIStrings.notAvailableInIncognitoMode)}`;
-  }
-  if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
-    consentViewContents = uiI18n.getFormatLocalizedString(
-        str_, UIStrings.turnOnForStylesRequestsPerformanceAndFiles, {PH1: settingsLink});
-  } else if (config.devToolsAiAssistanceFileAgent?.enabled) {
-    consentViewContents =
-        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
-  } else if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
-    consentViewContents =
-        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
-  } else {
-    consentViewContents = uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
-  }
-
-  return html`${consentViewContents}`;
-}
-
-function renderDisabledState(contents: Lit.TemplateResult): Lit.TemplateResult {
-  // clang-format off
-  return html`
-    <div class="empty-state-container">
-      <div class="disabled-view">
-        <div class="disabled-view-icon-container">
-          <devtools-icon
-            name="smart-assistant"
-          ></devtools-icon>
-        </div>
-        <div>
-          ${contents}
-        </div>
-      </div>
-    </div>
-  `;
-  // clang-format on
-}
-
 function renderMainContents({
-  state,
-  aidaAvailability,
   messages,
   isLoading,
   isReadOnly,
@@ -1589,8 +1465,6 @@ function renderMainContents({
   onCopyResponseClick,
   onMessageContainerRef,
 }: {
-  state: State,
-  aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
   messages: ChatMessage[],
   isLoading: boolean,
   isReadOnly: boolean,
@@ -1607,13 +1481,6 @@ function renderMainContents({
   conversationType?: AiAssistanceModel.AiHistoryStorage.ConversationType,
   changeSummary?: string,
 }): Lit.LitTemplate {
-  if (state === State.DISABLED_VIEW) {
-    if (aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-      return renderDisabledState(renderConsentViewContents());
-    }
-    return renderDisabledState(renderAidaUnavailableContents(aidaAvailability));
-  }
-
   if (!conversationType) {
     return Lit.nothing;
   }

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

@@ -0,0 +1,170 @@
+
+// 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 Root from '../../../core/root/root.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, type LitTemplate, render} from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+
+import disabledWidgetStyles from './disabledWidget.css.js';
+
+const UIStrings = {
+  /**
+   * @description The error message when the user is not logged in into Chrome.
+   */
+  notLoggedIn: 'This feature is only available when you are signed into Chrome with your Google account',
+  /**
+   * @description Message shown when the user is offline.
+   */
+  offline: 'Check your internet connection and try again',
+  /**
+   * @description Text for a link to Chrome DevTools Settings.
+   */
+  settingsLink: 'AI assistance in Settings',
+  /**
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
+   */
+  turnOnForStyles: 'Turn on {PH1} to get help with understanding CSS styles',
+  /**
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
+  /**
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesRequestsAndFiles: 'Turn on {PH1} to get help with styles, network requests, and files',
+  /**
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesRequestsPerformanceAndFiles:
+      'Turn on {PH1} to get help with styles, network requests, performance, and files',
+  /**
+   * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
+   */
+  notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode',
+
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/DisabledWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface ViewProps {
+  aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
+  hostConfig: Root.Runtime.HostConfig;
+}
+
+function renderAidaUnavailableContents(
+    aidaAvailability:
+        Exclude<Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>):
+    LitTemplate {
+  switch (aidaAvailability) {
+    case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
+    case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED: {
+      return html`${i18nString(UIStrings.notLoggedIn)}`;
+    }
+    case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET: {
+      return html`${i18nString(UIStrings.offline)}`;
+    }
+  }
+}
+
+function renderConsentViewContents(
+    hostConfig: Root.Runtime.HostConfig,
+    ): LitTemplate {
+  if (hostConfig.isOffTheRecord) {
+    return html`${i18nString(UIStrings.notAvailableInIncognitoMode)}`;
+  }
+
+  // eslint-disable-next-line @devtools/no-imperative-dom-api
+  const settingsLink = document.createElement('span');
+  settingsLink.textContent = i18nString(UIStrings.settingsLink);
+  settingsLink.classList.add('link');
+  UI.ARIAUtils.markAsLink(settingsLink);
+  settingsLink.addEventListener('click', () => {
+    void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+  });
+  settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
+
+  let consentViewContents: HTMLSpanElement;
+  if (hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
+    consentViewContents = uiI18n.getFormatLocalizedString(
+        str_, UIStrings.turnOnForStylesRequestsPerformanceAndFiles, {PH1: settingsLink});
+  } else if (hostConfig.devToolsAiAssistanceFileAgent?.enabled) {
+    consentViewContents =
+        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
+  } else if (hostConfig.devToolsAiAssistanceNetworkAgent?.enabled) {
+    consentViewContents =
+        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
+  } else {
+    consentViewContents = uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
+  }
+
+  return html`${consentViewContents}`;
+}
+
+export const DEFAULT_VIEW = (
+    input: ViewProps,
+    _output: Record<string, unknown>,
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <style>
+        ${disabledWidgetStyles}
+      </style>
+      <div class="disabled-view">
+        <div class="disabled-view-icon-container">
+          <devtools-icon name="smart-assistant"></devtools-icon>
+        </div>
+        <div>
+          ${input.aidaAvailability ===
+          Host.AidaClient.AidaAccessPreconditions.AVAILABLE
+            ? renderConsentViewContents(input.hostConfig)
+            : renderAidaUnavailableContents(input.aidaAvailability)}
+        </div>
+      </div>
+    `,
+    target
+  );
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+export class DisabledWidget extends UI.Widget.Widget {
+  aidaAvailability: Host.AidaClient.AidaAccessPreconditions = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
+
+  #view: View;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    void this.requestUpdate();
+  }
+
+  override performUpdate(): Promise<void>|void {
+    const hostConfig = Root.Runtime.hostConfig;
+
+    this.#view(
+        {
+          aidaAvailability: this.aidaAvailability,
+          hostConfig,
+        },
+        {},
+        this.contentElement,
+    );
+  }
+}

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

@@ -111,10 +111,10 @@ export const DEFAULT_VIEW = (
 export type View = typeof DEFAULT_VIEW;
 
 export class ExploreWidget extends UI.Widget.Widget {
-  view: View;
-  constructor(element?: HTMLElement, view?: View) {
+  #view: View;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element);
-    this.view = view ?? DEFAULT_VIEW;
+    this.#view = view;
   }
 
   override wasShown(): void {
@@ -183,7 +183,7 @@ export class ExploreWidget extends UI.Widget.Widget {
       });
     }
 
-    this.view(
+    this.#view(
         {
           featureCards,
         },

package/front_end/panels/ai_assistance/components/chatView.css

@@ -729,37 +729,6 @@ main {
   }
 }
 
-.disabled-view {
-  display: flex;
-  max-width: var(--sys-size-34);
-  border-radius: var(--sys-shape-corner-small);
-  box-shadow: var(--sys-elevation-level3);
-  background-color: var(--app-color-card-background);
-  font: var(--sys-typescale-body4-regular);
-  text-wrap: pretty;
-  padding: var(--sys-size-6) var(--sys-size-8);
-  margin: var(--sys-size-4) 0;
-  line-height: var(--sys-size-9);
-
-  .disabled-view-icon-container {
-    border-radius: var(--sys-shape-corner-extra-small);
-    width: var(--sys-size-9);
-    height: var(--sys-size-9);
-    background: linear-gradient(
-      135deg,
-      var(--sys-color-gradient-primary),
-      var(--sys-color-gradient-tertiary)
-    );
-    margin-right: var(--sys-size-5);
-
-    devtools-icon {
-      margin: var(--sys-size-2);
-      width: var(--sys-size-8);
-      height: var(--sys-size-8);
-    }
-  }
-}
-
 .error-step {
   color: var(--sys-color-error);
 }

package/front_end/panels/ai_assistance/components/disabledWidget.css

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+  .disabled-view {
+    display: flex;
+    max-width: var(--sys-size-34);
+    border-radius: var(--sys-shape-corner-small);
+    box-shadow: var(--sys-elevation-level3);
+    background-color: var(--app-color-card-background);
+    font: var(--sys-typescale-body4-regular);
+    text-wrap: pretty;
+    padding: var(--sys-size-6) var(--sys-size-8);
+    margin: var(--sys-size-4);
+    line-height: var(--sys-size-9);
+
+    .disabled-view-icon-container {
+      flex-shrink: 0;
+      border-radius: var(--sys-shape-corner-extra-small);
+      width: var(--sys-size-9);
+      height: var(--sys-size-9);
+      background: linear-gradient(
+        135deg,
+        var(--sys-color-gradient-primary),
+        var(--sys-color-gradient-tertiary)
+      );
+      margin-right: var(--sys-size-5);
+
+      devtools-icon {
+        margin: var(--sys-size-2);
+        width: var(--sys-size-8);
+        height: var(--sys-size-8);
+      }
+    }
+  }
+
+  .link {
+    color: var(--text-link);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}

package/front_end/panels/animation/AnimationTimeline.ts

@@ -165,7 +165,7 @@ const DEFAULT_TOOLBAR_VIEW: ToolbarView = (input: ToolbarViewInput, output: unde
           const isSelected = input.selectedPlaybackRate === playbackRate;
           const textContent = playbackRate ? i18nString(UIStrings.playbackRatePlaceholder, {PH1: playbackRate * 100}) : i18nString(UIStrings.pause);
           return html`
-            <button class="animation-playback-rate-button" jslog=${VisualLogging.action().context(`animations.playback-rate-${playbackRate * 100}`).track({
+            <button jslog=${VisualLogging.action().context(`animations.playback-rate-${playbackRate * 100}`).track({
               click: true,
               keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight',
             })}

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

@@ -540,7 +540,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
         >
           <devtools-resources-stack-trace .data=${{
             frame: this.#frame,
-            buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRows,
+            buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace,
           } as StackTraceData}>
           </devtools-resources-stack-trace>
         </devtools-report-value>

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -718,7 +718,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     clickableElement.appendChild(messageElement);
     const stackTraceElement = contentElement.createChild('div');
     const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target ?? undefined, this.linkifier, {stackTrace, widthConstrained: true});
+        undefined, target ?? undefined, this.linkifier, {runtimeStackTrace: stackTrace, widthConstrained: true});
     stackTracePreview.markAsRoot();
     stackTracePreview.show(stackTraceElement);
     for (const linkElement of stackTracePreview.linkElements) {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -502,7 +502,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
     </button>
     <div class="block-title">
       ${showAPCA ? html`
-        <div class="contrast-warning hidden" $="apca">
+        <div class="contrast-warning hidden">
           <span class="threshold-label">${i18nString(UIStrings.apca)}</span>
           ${minContrastIssue.thresholdsViolated.apca ? createClearIcon() : createCheckIcon()}
         </div>` : html`
@@ -510,7 +510,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
           <span class="threshold-label">${i18nString(UIStrings.aa)}</span>
           ${minContrastIssue.thresholdsViolated.aa ? createClearIcon() : createCheckIcon()}
         </div>
-        <div class="contrast-warning hidden" $="aaa">
+        <div class="contrast-warning hidden">
           <span class="threshold-label">${i18nString(UIStrings.aaa)}</span>
           ${minContrastIssue.thresholdsViolated.aaa ? createClearIcon() : createCheckIcon()}
         </div>`}
@@ -1073,5 +1073,5 @@ function createClearIcon(): TemplateResult {
 function createCheckIcon(): TemplateResult {
   return html`
     <devtools-icon name="checkmark" class="small"
-        style="color:var(--icon-checkmark-green);></devtools-icon>`;
+        style="color:var(--icon-checkmark-green);"></devtools-icon>`;
 }