chrome-devtools-frontend 1.0.1583146 → 1.0.1585538

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

@@ -182,20 +182,11 @@ export class AiCodeGenerationProvider {
       },
       {
         key: 'Tab',
-        run: (): boolean => {
-          if (!this.#aiCodeGeneration || !this.#editor || !hasActiveAiSuggestion(this.#editor.state)) {
-            return false;
-          }
-          const {accepted, suggestion} = acceptAiAutoCompleteSuggestion(this.#editor.editor);
-          if (!accepted) {
-            return false;
-          }
-          if (suggestion?.rpcGlobalId) {
-            this.#aiCodeGeneration.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
-          }
-          this.#aiCodeGenerationConfig?.onSuggestionAccepted(this.#aiCodeGenerationCitations);
-          return true;
-        },
+        run: this.#acceptAiSuggestion.bind(this),
+      },
+      {
+        key: 'Enter',
+        run: this.#acceptAiSuggestion.bind(this),
       },
       {
         any: (_view: unknown, event: KeyboardEvent) => {
@@ -248,6 +239,21 @@ export class AiCodeGenerationProvider {
     });
   }
 
+  #acceptAiSuggestion(): boolean {
+    if (!this.#aiCodeGeneration || !this.#editor || !hasActiveAiSuggestion(this.#editor.state)) {
+      return false;
+    }
+    const {accepted, suggestion} = acceptAiAutoCompleteSuggestion(this.#editor.editor);
+    if (!accepted) {
+      return false;
+    }
+    if (suggestion?.rpcGlobalId) {
+      this.#aiCodeGeneration.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
+    }
+    this.#aiCodeGenerationConfig?.onSuggestionAccepted(this.#aiCodeGenerationCitations);
+    return true;
+  }
+
   #activateTeaser(update: CodeMirror.ViewUpdate): void {
     const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
     if (currentTeaserMode === AiCodeGenerationTeaserMode.ACTIVE) {
@@ -342,7 +348,7 @@ export class AiCodeGenerationProvider {
       this.#editor.dispatch({
         effects: [
           setAiAutoCompleteSuggestion.of({
-            text: '\n' + suggestionText,
+            text: '\n' + suggestionText + '\n',
             from: commentNodeInfo.to,
             rpcGlobalId: generationResponse.metadata.rpcGlobalId,
             sampleId: topSample.sampleId,
@@ -449,9 +455,19 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
         // Required for mouse hover to propagate to the info button in teaser.
         return (event.target instanceof Node && teaser.contentElement.contains(event.target));
       },
-      mousedown(event: MouseEvent): boolean {
-        // Required for mouse click to propagate to the info tooltip in teaser.
-        return (event.target instanceof Node && teaser.contentElement.contains(event.target));
+      mousedown(event: MouseEvent, view: CodeMirror.EditorView): boolean {
+        if (!(event.target instanceof Node) || !teaser.contentElement.contains(event.target)) {
+          return false;
+        }
+        // On mouse click, move the cursor position to the end of the line.
+        const cursorPosition = view.state.selection.main.head;
+        const line = view.state.doc.lineAt(cursorPosition);
+        if (cursorPosition !== line.to) {
+          view.dispatch({selection: {anchor: line.to, head: line.to}});
+        }
+        // Explicitly focus the editor.
+        view.focus();
+        return true;
       },
       keydown(event: KeyboardEvent): boolean {
         if (!UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) ||

package/front_end/ui/legacy/InspectorView.ts

@@ -8,7 +8,6 @@ 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 SDK from '../../core/sdk/sdk.js';
-import * as GreenDev from '../../models/greendev/greendev.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon, type Icon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
@@ -20,7 +19,6 @@ import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
 import {Dialog} from './Dialog.js';
 import {DockController, DockState, Events as DockControllerEvents} from './DockController.js';
-import {Floaty} from './Floaty.js';
 import {GlassPane} from './GlassPane.js';
 import {Infobar, Type as InfobarType} from './Infobar.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
@@ -54,6 +52,14 @@ const UIStrings = {
    * @description Title of an action that reloads the DevTools
    */
   reloadDevtools: 'Reload DevTools',
+  /**
+   * @description Title of an action that restarts Chrome
+   */
+  restartChrome: 'Restart Chrome',
+  /**
+   * @description Confirmation dialog text for restarting Chrome
+   */
+  areYouSureYouWantToRestartChrome: 'Are you sure you want to restart Chrome?',
   /**
    * @description Text for context menu action to move a tab to the main tab bar
    */
@@ -155,6 +161,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   private focusRestorer?: WidgetFocusRestorer|null;
   private ownerSplitWidget?: SplitWidget;
   private reloadRequiredInfobar?: Infobar;
+  #chromeRestartRequiredInfobar?: Infobar;
   #debuggedTabReloadRequiredInfobar?: Infobar;
   #selectOverrideFolderInfobar?: Infobar;
   #resizeObserver: ResizeObserver;
@@ -362,10 +369,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.element.style.setProperty('--devtools-window-top', `${rect.top}px`);
     this.element.style.setProperty('--devtools-window-bottom', `${window.innerHeight - rect.bottom}px`);
     this.element.style.setProperty('--devtools-window-height', `${rect.height}px`);
-
-    if (Floaty.exists()) {
-      Floaty.instance().setDevToolsRect(rect);
-    }
   }
 
   override wasShown(): void {
@@ -376,13 +379,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     DockController.instance().addEventListener(
         DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
     this.#applyDrawerOrientationForDockSide();
-
-    if (GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty')) {
-      Floaty.instance({
-        forceNew: true,
-        document: this.element.ownerDocument,
-      });
-    }
   }
 
   override willHide(): void {
@@ -676,7 +672,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   displayReloadRequiredWarning(message: string): void {
-    if (!this.reloadRequiredInfobar) {
+    if (!this.reloadRequiredInfobar && !this.#chromeRestartRequiredInfobar) {
       const infobar = new Infobar(
           InfobarType.INFO, message,
           [
@@ -693,7 +689,37 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.attachInfobar(infobar);
       this.reloadRequiredInfobar = infobar;
       infobar.setCloseCallback(() => {
-        delete this.reloadRequiredInfobar;
+        this.reloadRequiredInfobar = undefined;
+      });
+    }
+  }
+
+  displayChromeRestartRequiredWarning(message: string): void {
+    if (this.reloadRequiredInfobar) {
+      this.reloadRequiredInfobar.dispose();
+    }
+    if (!this.#chromeRestartRequiredInfobar) {
+      const infobar = new Infobar(
+          InfobarType.INFO, message,
+          [
+            {
+              text: i18nString(UIStrings.restartChrome),
+              delegate: () => {
+                if (confirm(i18nString(UIStrings.areYouSureYouWantToRestartChrome))) {
+                  Host.InspectorFrontendHost.InspectorFrontendHostInstance.requestRestart();
+                }
+              },
+              dismiss: false,
+              buttonVariant: Buttons.Button.Variant.PRIMARY,
+              jslogContext: 'main.chrome-restart-chrome',
+            },
+          ],
+          undefined, 'reload-required');
+      infobar.setParentView(this);
+      this.attachInfobar(infobar);
+      this.#chromeRestartRequiredInfobar = infobar;
+      infobar.setCloseCallback(() => {
+        this.#chromeRestartRequiredInfobar = undefined;
       });
     }
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -697,19 +697,42 @@ export class ElementFocusRestorer {
 export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
-    element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
+    element.removeEventListener('animationend', animationEndCallback, false);
     element.removeEventListener('animationcancel', animationEndCallback, false);
   }
 
-  if (element.classList.contains(className)) {
-    element.classList.remove(className);
-  }
-
-  element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
+  // Remove class if it exists.
+  element.classList.toggle(className, /* force=*/ false);
+  element.addEventListener('animationend', animationEndCallback, false);
   element.addEventListener('animationcancel', animationEndCallback, false);
   element.classList.add(className);
 }
 
+class AnimateOnDirective extends Lit.Directive.Directive {
+  #previousValue = false;
+
+  render(_condition: boolean, _className: string): void {
+    return undefined;  // Directives don't have to render HTML
+  }
+
+  override update(part: Lit.Directive.ElementPart, [condition, className]: [boolean, string]): void {
+    const el = part.element as HTMLElement;
+
+    // Only trigger if the condition transitioned from false -> true
+    if (condition && !this.#previousValue) {
+      this.#animate(el, className);
+    }
+
+    this.#previousValue = condition;
+  }
+
+  #animate(el: HTMLElement, className: string): void {
+    runCSSAnimationOnce(el, className);
+  }
+}
+
+export const animateOn = Lit.Directive.directive(AnimateOnDirective);
+
 export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
   const oldNextSibling = element.nextSibling;
@@ -1530,6 +1553,7 @@ export function createFileSelectorElement(callback: (arg0: File) => void, accept
 }
 
 export const MaxLengthForDisplayedURLs = 150;
+export const MaxLengthForDisplayedURLsInConsole = 40;
 
 export class MessageDialog {
   static async show(header: string, message: string, where?: Element|Document, jslogContext?: string): Promise<void> {

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -275,8 +275,8 @@ export const enum PanelOrDrawer {
 export class CommandMenuProvider extends Provider {
   private commands: Command[];
 
-  constructor(commandsForTest: Command[] = []) {
-    super('command');
+  constructor(jslogContext: string, commandsForTest: Command[] = []) {
+    super(jslogContext);
     this.commands = commandsForTest;
   }
 
@@ -455,8 +455,9 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
 registerProvider({
   prefix: '>',
   iconName: 'chevron-right',
-  provider: () => Promise.resolve(new CommandMenuProvider()),
+  provider: (jslogContext: string) => Promise.resolve(new CommandMenuProvider(jslogContext)),
   helpTitle: () => i18nString(UIStrings.runCommand),
   titlePrefix: () => i18nString(UIStrings.run),
   titleSuggestion: () => i18nString(UIStrings.command),
+  jslogContext: 'command',
 });

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -657,8 +657,9 @@ export function getRegisteredProviders(): ProviderRegistration[] {
 export interface ProviderRegistration {
   prefix: string;
   iconName: string;
-  provider: () => Promise<Provider>;
+  provider: (jslogContext: string) => Promise<Provider>;
   helpTitle: (() => string);
   titlePrefix: (() => string);
   titleSuggestion?: (() => string);
+  jslogContext: string;
 }

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -24,11 +24,16 @@ export class HelpQuickOpen extends Provider {
   }
 
   private async addProvider(extension: ProviderRegistration): Promise<void> {
+    // We want to exclude Help menu as we are already in it.
+    if (extension.prefix === '?') {
+      return;
+    }
+
     this.providers.push({
       prefix: extension.prefix || '',
       iconName: extension.iconName,
       title: extension.helpTitle(),
-      jslogContext: (await extension.provider()).jslogContext,
+      jslogContext: extension.jslogContext,
     });
   }
 
@@ -69,8 +74,9 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'help',
-  provider: () => Promise.resolve(new HelpQuickOpen('help')),
+  provider: jslogContext => Promise.resolve(new HelpQuickOpen(jslogContext)),
   helpTitle: () => 'Help',
   titlePrefix: () => 'Help',
   titleSuggestion: undefined,
+  jslogContext: 'help'
 });

package/front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -5,7 +5,12 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as UI from '../../legacy.js';
 
-import {FilteredListWidget, getRegisteredProviders, type Provider} from './FilteredListWidget.js';
+import {
+  FilteredListWidget,
+  getRegisteredProviders,
+  type Provider,
+  type ProviderRegistration
+} from './FilteredListWidget.js';
 
 const UIStrings = {
   /**
@@ -42,19 +47,14 @@ export class QuickOpenImpl {
     filteredListWidget.setQuery(query);
   }
 
-  private addProvider(extension: {
-    prefix: string,
-    provider: () => Promise<Provider>,
-    titlePrefix: () => string,
-    titleSuggestion?: (() => string),
-  }): void {
+  private addProvider(extension: ProviderRegistration): void {
     const prefix = extension.prefix;
     if (prefix === null) {
       return;
     }
     this.prefixes.push(prefix);
     this.providers.set(prefix, {
-      provider: extension.provider,
+      provider: () => extension.provider(extension.jslogContext),
       titlePrefix: extension.titlePrefix,
       titleSuggestion: extension.titleSuggestion,
     });

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -183,11 +183,12 @@ function buildStackTraceRows(
     let previousStackFrameWasBreakpointCondition = false;
     for (const frame of fragment.frames) {
       const functionName = UI.UIUtils.beautifyFunctionName(frame.name ?? '');
-      const link = linkifier.maybeLinkifyStackTraceFrame(target, frame, {
+      const link = Linkifier.linkifyStackTraceFrame(frame, {
         showColumnNumber,
         tabStop: Boolean(tabStops),
         inlineFrameIndex: 0,
         revealBreakpoint: previousStackFrameWasBreakpointCondition,
+        maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
       });
       link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
       link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
@@ -370,14 +371,16 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
       return;
     }
 
-    // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-    const updateCallback =
-        renderStackTraceTable.bind(null, this.#table, this.element, this.#options.expandable ?? false);
-    const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
-        runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
-        this.#options.showColumnNumber);
-    this.#hasRows = stackTraceRows.length > 0;
-    this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
+    if (runtimeStackTrace) {
+      // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
+      const updateCallback =
+          renderStackTraceTable.bind(null, this.#table, this.element, this.#options.expandable ?? false);
+      const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
+          runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
+          this.#options.showColumnNumber);
+      this.#hasRows = stackTraceRows.length > 0;
+      this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
+    }
   }
 
   get linkElements(): readonly HTMLElement[] {