chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -7,13 +7,15 @@ 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 AiCodeGeneration from '../../../models/ai_code_generation/ai_code_generation.js';
-import * as PanelCommon from '../../../panels/common/common.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AccessiblePlaceholder} from './AccessiblePlaceholder.js';
+import type {DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 import {AiCodeGenerationParser} from './AiCodeGenerationParser.js';
+import {AiCodeGenerationTeaser, AiCodeGenerationTeaserDisplayState, PROMOTION_ID} from './AiCodeGenerationTeaser.js';
+import {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
 import {
   acceptAiAutoCompleteSuggestion,
   aiAutoCompleteSuggestion,
@@ -47,7 +49,7 @@ export interface AiCodeGenerationConfig {
   onRequestTriggered: () => void;
   onResponseReceived: () => void;
   disclaimerTooltipId: string;
-  disclaimerTextVariant: PanelCommon.DisclaimerTextVariant;
+  disclaimerTextVariant: DisclaimerTextVariant;
 }
 
 export class AiCodeGenerationProvider {
@@ -60,7 +62,7 @@ export class AiCodeGenerationProvider {
       Common.Settings.Settings.instance().createSetting('ai-code-generation-onboarding-completed', false);
   #aiCodeGenerationUsedSetting = Common.Settings.Settings.instance().createSetting('ai-code-generation-used', false);
   #generationTeaserCompartment = new CodeMirror.Compartment();
-  #generationTeaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser;
+  #generationTeaser: AiCodeGenerationTeaser;
   #editor?: TextEditor;
   #aiCodeGenerationConfig: AiCodeGenerationConfig;
   #aiCodeGeneration?: AiCodeGeneration.AiCodeGeneration.AiCodeGeneration;
@@ -83,7 +85,7 @@ export class AiCodeGenerationProvider {
     if (!AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationAvailable()) {
       throw new Error('AI code generation feature is not available.');
     }
-    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser();
+    this.#generationTeaser = new AiCodeGenerationTeaser();
     this.#generationTeaser.disclaimerTooltipId = aiCodeGenerationConfig.disclaimerTooltipId;
     this.#generationTeaser.disclaimerTextVariant = aiCodeGenerationConfig.disclaimerTextVariant;
     this.#aiCodeGenerationConfig = aiCodeGenerationConfig;
@@ -186,8 +188,8 @@ export class AiCodeGenerationProvider {
             this.#dismissTeaserAndSuggestion();
             return true;
           }
-          const generationTeaserIsLoading = this.#generationTeaser.displayState ===
-              PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+          const generationTeaserIsLoading =
+              this.#generationTeaser.displayState === AiCodeGenerationTeaserDisplayState.LOADING;
           if (this.#generationTeaser.isShowing() && generationTeaserIsLoading) {
             this.#controller.abort();
             this.#controller = new AbortController();
@@ -248,13 +250,13 @@ export class AiCodeGenerationProvider {
 
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
-    const resolved = await PanelCommon.AiCodeGenerationUpgradeDialog.show({noLogging});
+    const resolved = await AiCodeGenerationUpgradeDialog.show({noLogging});
     this.#aiCodeGenerationOnboardingCompletedSetting.set(resolved);
     return resolved;
   }
 
   #dismissTeaserAndSuggestion(): void {
-    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
+    this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
     this.#editor?.dispatch({
       effects: [
         setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED),
@@ -305,18 +307,15 @@ export class AiCodeGenerationProvider {
     if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
       return;
     }
-    if (this.#generationTeaser.displayState ===
-        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+    if (this.#generationTeaser.displayState === AiCodeGenerationTeaserDisplayState.LOADING) {
       this.#controller.abort();
       this.#controller = new AbortController();
       this.#dismissTeaserAndSuggestion();
       return;
     }
-    if (this.#generationTeaser.displayState ===
-        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
+    if (this.#generationTeaser.displayState === AiCodeGenerationTeaserDisplayState.GENERATED) {
       update.view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
-      this.#generationTeaser.displayState =
-          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.DISCOVERY;
+      this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
       return;
     }
   }
@@ -342,7 +341,7 @@ export class AiCodeGenerationProvider {
       return;
     }
 
-    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+    this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.LOADING;
     try {
       const startTime = performance.now();
       this.#aiCodeGenerationConfig.onRequestTriggered();
@@ -386,8 +385,7 @@ export class AiCodeGenerationProvider {
           setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE),
         ],
       });
-      this.#generationTeaser.displayState =
-          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED;
+      this.#generationTeaser.displayState = AiCodeGenerationTeaserDisplayState.GENERATED;
 
       AiCodeGeneration.debugLog('Suggestion dispatched to the editor', suggestionText);
       const citations = topSample.attributionMetadata?.citations ?? [];
@@ -409,8 +407,7 @@ export class AiCodeGenerationProvider {
   }
 }
 
-function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser):
-    CodeMirror.Extension {
+function aiCodeGenerationTeaserExtension(teaser: AiCodeGenerationTeaser): CodeMirror.Extension {
   return CodeMirror.ViewPlugin.fromClass(class {
     #view: CodeMirror.EditorView;
 
@@ -436,8 +433,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       const line = this.#view.state.doc.lineAt(cursorPosition);
 
       const isEmptyLine = line.length === 0;
-      const canShowDiscoveryState =
-          UI.UIUtils.PromotionManager.instance().canShowPromotion(PanelCommon.AiCodeGenerationTeaser.PROMOTION_ID);
+      const canShowDiscoveryState = UI.UIUtils.PromotionManager.instance().canShowPromotion(PROMOTION_ID);
 
       if ((isEmptyLine && canShowDiscoveryState)) {
         return CodeMirror.Decoration.set([
@@ -461,17 +457,17 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
     #updateTeaserState(state: CodeMirror.EditorState): void {
       // Only handle non loading and non generated states, as updates during and after generation are handled by
       // #abortOrDismissGenerationDuringUpdate in AiCodeGenerationProvider
-      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING ||
-          teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
+      if (teaser.displayState === AiCodeGenerationTeaserDisplayState.LOADING ||
+          teaser.displayState === AiCodeGenerationTeaserDisplayState.GENERATED) {
         return;
       }
       const cursorPosition = state.selection.main.head;
       const line = state.doc.lineAt(cursorPosition);
       const isEmptyLine = line.length === 0;
       if (isEmptyLine) {
-        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.DISCOVERY;
+        teaser.displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
       } else {
-        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
+        teaser.displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
       }
     }
   }, {
@@ -497,7 +493,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       },
       keydown(event: KeyboardEvent): boolean {
         if (!UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) ||
-            teaser.displayState !== PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER) {
+            teaser.displayState !== AiCodeGenerationTeaserDisplayState.TRIGGER) {
           return false;
         }
         if (event.key === '.') {

package/front_end/{panels/common → ui/components/text_editor}/AiCodeGenerationTeaser.ts

@@ -1,16 +1,16 @@
 // 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 '../../ui/components/tooltips/tooltips.js';
-
-import * as Common from '../../core/common/common.js';
-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 Buttons from '../../ui/components/buttons/buttons.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import '../tooltips/tooltips.js';
+
+import * as Common from '../../../core/common/common.js';
+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 UI from '../../legacy/legacy.js';
+import {Directives, html, nothing, render} from '../../lit/lit.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import type {DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 import styles from './aiCodeGenerationTeaser.css.js';

package/front_end/{panels/common → ui/components/text_editor}/AiCodeGenerationUpgradeDialog.ts

@@ -3,11 +3,11 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as UI from '../../legacy/legacy.js';
+import * as Lit from '../../lit/lit.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import styles from './aiCodeGenerationUpgradeDialog.css.js';
 

package/front_end/ui/components/text_editor/text_editor.ts

@@ -3,9 +3,13 @@
 // found in the LICENSE file.
 
 export * as AccessiblePlaceholder from './AccessiblePlaceholder.js';
+export * as AiCodeCompletionDisclaimer from './AiCodeCompletionDisclaimer.js';
 export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
+export * as AiCodeCompletionTeaser from './AiCodeCompletionTeaser.js';
 export * as AiCodeGenerationParser from './AiCodeGenerationParser.js';
 export * as AiCodeGenerationProvider from './AiCodeGenerationProvider.js';
+export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
+export * as AiCodeGenerationUpgradeDialog from './AiCodeGenerationUpgradeDialog.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';
 export * as ExecutionPositionHighlighter from './ExecutionPositionHighlighter.js';

package/front_end/ui/legacy/Toolbar.ts

@@ -1431,7 +1431,7 @@ export class ToolbarSettingCheckbox extends ToolbarCheckbox {
       setting: Common.Settings.Setting<boolean>, tooltip?: Common.UIString.LocalizedString,
       alternateTitle?: Common.UIString.LocalizedString) {
     const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
-    const title = alternateTitle || uiDescriptor?.title?.() || setting.title();
+    const title = alternateTitle ?? uiDescriptor?.title ?? ('' as Common.UIString.LocalizedString);
     super(title, tooltip, undefined, setting.name);
     bindCheckbox(this.element as CheckboxLabel, setting);
   }

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -8,13 +8,14 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import {createIcon, type Icon} from '../../../kit/kit.js';
+import {render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {sanitizeStyle} from './CSSStyleSanitizer.js';
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
 import {
+  defaultObjectPresentation as defaultObjectPresentationTemplate,
   ObjectPropertiesMode,
-  ObjectPropertiesSection,
   ObjectPropertiesSectionsTreeOutline,
   ObjectPropertyTreeElement,
   ObjectTree,
@@ -129,7 +130,7 @@ export class CustomPreviewSection {
       return (new CustomPreviewSection(remoteObject)).element();
     }
 
-    const sectionElement = ObjectPropertiesSection.defaultObjectPresentation(remoteObject);
+    const sectionElement = defaultObjectPresentation(remoteObject);
     sectionElement.classList.toggle('custom-expandable-section-standard-section', remoteObject.hasChildren);
     return sectionElement;
   }
@@ -239,7 +240,14 @@ export class CustomPreviewComponent {
     if (this.element.shadowRoot) {
       this.element.shadowRoot.textContent = '';
       this.customPreviewSection = null;
-      this.element.shadowRoot.appendChild(ObjectPropertiesSection.defaultObjectPresentation(this.object));
+      this.element.shadowRoot.appendChild(defaultObjectPresentation(this.object));
     }
   }
 }
+
+function defaultObjectPresentation(object: SDK.RemoteObject.RemoteObject): Element {
+  const element = document.createElement('span');
+  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+  render(defaultObjectPresentationTemplate(object), element);
+  return element;
+}