chrome-devtools-frontend 1.0.1538523 → 1.0.1539972

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/common/AiCodeCompletionDisclaimer.ts

@@ -88,8 +88,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
           aria-describedby=${input.spinnerTooltipId}></devtools-spinner>
           <devtools-tooltip
               id=${input.spinnerTooltipId}
-              variant=${'rich'}
-              jslogContext=${'ai-code-completion-spinner-tooltip'}>
+              variant="rich"
+              jslogContext="ai-code-completion-spinner-tooltip">
           <div class="disclaimer-tooltip-container"><div class="tooltip-text">
             ${lockedString(UIStringsNotTranslate.tooltipTextForSpinner)}
           </div></div></devtools-tooltip>
@@ -108,8 +108,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
           >${lockedString(UIStringsNotTranslate.relevantData)}</span>${lockedString(UIStringsNotTranslate.isSentToGoogle)}
           <devtools-tooltip
               id=${input.disclaimerTooltipId}
-              variant=${'rich'}
-              jslogContext=${'ai-code-completion-disclaimer'}
+              variant="rich"
+              jslogContext="ai-code-completion-disclaimer"
               ${Directives.ref(el => {
                 if (el instanceof HTMLElement) {
                   output.hideTooltip = () => {

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -79,8 +79,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
                 </span>
                 <devtools-tooltip
                     id=${input.citationsTooltipId}
-                    variant=${'rich'}
-                    jslogContext=${'ai-code-completion-citations'}
+                    variant="rich"
+                    jslogContext="ai-code-completion-citations"
                 ><div class="citations-tooltip-container">
                     ${Directives.repeat(input.citations, citation => html`<x-link
                         tabIndex="0"

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>`;
 }