chrome-devtools-frontend 1.0.1556696 → 1.0.1558690

package/front_end/third_party/puppeteer/package/src/cdp/Page.ts

@@ -8,7 +8,7 @@ import type {Protocol} from 'devtools-protocol';
 
 import {firstValueFrom, from, raceWith} from '../../third_party/rxjs/rxjs.js';
 import type {BluetoothEmulation} from '../api/BluetoothEmulation.js';
-import type {Browser} from '../api/Browser.js';
+import type {Browser, WindowId} from '../api/Browser.js';
 import type {BrowserContext} from '../api/BrowserContext.js';
 import {CDPSessionEvent, type CDPSession} from '../api/CDPSession.js';
 import type {DeviceRequestPrompt} from '../api/DeviceRequestPrompt.js';
@@ -375,17 +375,22 @@ export class CdpPage extends Page {
     contentWidth: number;
     contentHeight: number;
   }): Promise<void> {
-    const {windowId} = await this.#primaryTargetClient.send(
-      'Browser.getWindowForTarget',
-    );
-
+    const windowId = await this.windowId();
     await this.#primaryTargetClient.send('Browser.setContentsSize', {
-      windowId,
+      windowId: Number(windowId),
       width: params.contentWidth,
       height: params.contentHeight,
     });
   }
 
+  override async windowId(): Promise<WindowId> {
+    const {windowId} = await this.#primaryTargetClient.send(
+      'Browser.getWindowForTarget',
+    );
+
+    return windowId.toString();
+  }
+
   async #onFileChooser(
     event: Protocol.Page.FileChooserOpenedEvent,
   ): Promise<void> {
@@ -580,6 +585,10 @@ export class CdpPage extends Page {
     );
   }
 
+  override async emulateFocusedPage(enabled: boolean): Promise<void> {
+    return await this.#emulationManager.emulateFocus(enabled);
+  }
+
   override setDefaultNavigationTimeout(timeout: number): void {
     this._timeoutSettings.setDefaultNavigationTimeout(timeout);
   }

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '143.0.7499.40',
-  'chrome-headless-shell': '143.0.7499.40',
-  firefox: 'stable_145.0.2',
+  chrome: '143.0.7499.42',
+  'chrome-headless-shell': '143.0.7499.42',
+  firefox: 'stable_146.0',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.32.1';
+export const packageVersion = '24.33.0';
 // x-release-please-end

package/front_end/ui/components/icon_button/iconButton.css

@@ -7,6 +7,8 @@
 :host {
   white-space: normal;
   display: inline-block;
+  margin-right: var(--sys-size-1);
+  margin-left: var(--sys-size-1);
 }
 
 .icon-button {
@@ -33,7 +35,7 @@
 }
 
 .icon-button:focus-visible {
-  background-color: var(--sys-color-state-hover-on-subtle);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 }
 
 .compact .icon-button-title {

package/front_end/ui/components/report_view/ReportView.ts

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
+import * as Platform from '../../../core/platform/platform.js';
+import * as Components from '../../legacy/components/utils/utils.js';
 import {html, nothing, render} from '../../lit/lit.js';
 
 import reportStyles from './report.css.js';
@@ -33,13 +35,16 @@ import reportValueStyles from './reportValue.css.js';
  */
 export interface ReportData {
   reportTitle: string;
+  reportUrl?: Platform.DevToolsPath.UrlString;
 }
 export class Report extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #reportTitle = '';
+  #reportUrl = Platform.DevToolsPath.EmptyUrlString;
 
-  set data({reportTitle}: ReportData) {
+  set data({reportTitle, reportUrl}: ReportData) {
     this.#reportTitle = reportTitle;
+    this.#reportUrl = reportUrl ?? Platform.DevToolsPath.EmptyUrlString;
     this.#render();
   }
 
@@ -52,7 +57,11 @@ export class Report extends HTMLElement {
     // clang-format off
     render(html`
       <style>${reportStyles}</style>
-      ${this.#reportTitle ? html`<div class="report-title">${this.#reportTitle}</div>` : nothing}
+      ${this.#reportTitle ? html`<div class="report-title">
+        ${this.#reportTitle}
+        ${this.#reportUrl ? Components.Linkifier.Linkifier.linkifyURL(this.#reportUrl, {
+          tabStop: true, jslogContext: 'source-location', className: 'report-url'}) : nothing}
+      </div>` : nothing}
       <div class="content">
         <slot></slot>
       </div>

package/front_end/ui/components/report_view/report.css

@@ -26,3 +26,19 @@
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
 }
+
+.report-url {
+  background: none;
+  border-radius: 2px;
+  border: none;
+  color: var(--text-link);
+  cursor: pointer;
+  display: block;
+  font: var(--sys-typescale-body4-regular);
+  height: unset;
+  margin: 0;
+  outline-offset: 2px;
+  outline: none;
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+  text-decoration: underline;
+}

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

@@ -12,6 +12,13 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {
+  acceptAiAutoCompleteSuggestion,
+  aiAutoCompleteSuggestion,
+  aiAutoCompleteSuggestionState,
+  hasActiveAiSuggestion,
+  setAiAutoCompleteSuggestion,
+} from './config.js';
 import type {TextEditor} from './TextEditor.js';
 
 export enum AiCodeGenerationTeaserMode {
@@ -28,30 +35,47 @@ const aiCodeGenerationTeaserModeState = CodeMirror.StateField.define<AiCodeGener
   },
 });
 
+export interface AiCodeGenerationConfig {
+  generationContext: {
+    inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
+  };
+  onSuggestionAccepted: () => void;
+  onRequestTriggered: () => void;
+  // TODO(b/445394511): Move exposing citations to onSuggestionAccepted
+  onResponseReceived: (citations: Host.AidaClient.Citation[]) => void;
+}
+
 export class AiCodeGenerationProvider {
   #devtoolsLocale: string;
   #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
   #generationTeaserCompartment = new CodeMirror.Compartment();
   #generationTeaser: PanelCommon.AiCodeGenerationTeaser;
   #editor?: TextEditor;
+  #aiCodeGenerationConfig: AiCodeGenerationConfig;
+  #aiCodeGeneration?: AiCodeGeneration.AiCodeGeneration.AiCodeGeneration;
 
+  #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
   #boundOnUpdateAiCodeGenerationState = this.#updateAiCodeGenerationState.bind(this);
+  #controller = new AbortController();
 
-  private constructor() {
+  private constructor(aiCodeGenerationConfig: AiCodeGenerationConfig) {
     this.#devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
     if (!AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(this.#devtoolsLocale)) {
       throw new Error('AI code generation feature is not enabled.');
     }
     this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser();
+    this.#aiCodeGenerationConfig = aiCodeGenerationConfig;
   }
 
-  static createInstance(): AiCodeGenerationProvider {
-    return new AiCodeGenerationProvider();
+  static createInstance(aiCodeGenerationConfig: AiCodeGenerationConfig): AiCodeGenerationProvider {
+    return new AiCodeGenerationProvider(aiCodeGenerationConfig);
   }
 
   extension(): CodeMirror.Extension[] {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.activateTeaser(update)),
+      aiAutoCompleteSuggestion,
+      aiAutoCompleteSuggestionState,
       aiCodeGenerationTeaserModeState,
       this.#generationTeaserCompartment.of([]),
       CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap())),
@@ -59,6 +83,7 @@ export class AiCodeGenerationProvider {
   }
 
   dispose(): void {
+    this.#controller.abort();
     this.#cleanupAiCodeGeneration();
   }
 
@@ -71,6 +96,10 @@ export class AiCodeGenerationProvider {
   }
 
   #setupAiCodeGeneration(): void {
+    if (this.#aiCodeGeneration) {
+      return;
+    }
+    this.#aiCodeGeneration = new AiCodeGeneration.AiCodeGeneration.AiCodeGeneration({aidaClient: this.#aidaClient});
     this.#editor?.dispatch({
       effects:
           [this.#generationTeaserCompartment.reconfigure([aiCodeGenerationTeaserExtension(this.#generationTeaser)])],
@@ -78,6 +107,10 @@ export class AiCodeGenerationProvider {
   }
 
   #cleanupAiCodeGeneration(): void {
+    if (!this.#aiCodeGeneration) {
+      return;
+    }
+    this.#aiCodeGeneration = undefined;
     this.#editor?.dispatch({
       effects: [this.#generationTeaserCompartment.reconfigure([])],
     });
@@ -99,23 +132,51 @@ export class AiCodeGenerationProvider {
       {
         key: 'Escape',
         run: (): boolean => {
-          if (!this.#editor || !this.#generationTeaser.isShowing() || !this.#generationTeaser.loading) {
+          if (!this.#editor || !this.#aiCodeGeneration) {
             return false;
           }
-          this.#editor.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+          if (hasActiveAiSuggestion(this.#editor.state)) {
+            this.#editor.dispatch({
+              effects: setAiAutoCompleteSuggestion.of(null),
+            });
+            return true;
+          }
+          if (this.#generationTeaser.isShowing() && this.#generationTeaser.loading) {
+            this.#controller.abort();
+            this.#controller = new AbortController();
+            this.#dismissTeaser();
+            return true;
+          }
+          return false;
+        },
+      },
+      {
+        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();
           return true;
         },
       },
       {
         any: (_view: unknown, event: KeyboardEvent) => {
-          if (!this.#editor || !this.#generationTeaser.isShowing()) {
+          if (!this.#editor || !this.#aiCodeGeneration || !this.#generationTeaser.isShowing()) {
             return false;
           }
           if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event)) {
             if (event.key === 'i') {
               event.consume(true);
               void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-generation.triggered');
-              this.#generationTeaser.loading = true;
+              void this.#triggerAiCodeGeneration({signal: this.#controller.signal});
               return true;
             }
           }
@@ -125,6 +186,11 @@ export class AiCodeGenerationProvider {
     ];
   }
 
+  #dismissTeaser(): void {
+    this.#generationTeaser.loading = false;
+    this.#editor?.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+  }
+
   async activateTeaser(update: CodeMirror.ViewUpdate): Promise<void> {
     const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
     if (currentTeaserMode === AiCodeGenerationTeaserMode.ACTIVE) {
@@ -135,6 +201,68 @@ export class AiCodeGenerationProvider {
     }
     update.view.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)});
   }
+
+  async #triggerAiCodeGeneration(options?: {signal?: AbortSignal}): Promise<void> {
+    if (!this.#editor || !this.#aiCodeGeneration) {
+      return;
+    }
+
+    this.#generationTeaser.loading = true;
+    const cursor = this.#editor.state.selection.main.head;
+    // TODO(b/445899453): Detect all types of comments
+    const query = this.#editor.state.doc.lineAt(cursor).text;
+    if (query.trim().length === 0) {
+      return;
+    }
+
+    try {
+      const startTime = performance.now();
+      this.#aiCodeGenerationConfig?.onRequestTriggered();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationRequestTriggered);
+
+      const generationResponse = await this.#aiCodeGeneration.generateCode(
+          query, AiCodeGeneration.AiCodeGeneration.basePreamble,
+          this.#aiCodeGenerationConfig?.generationContext.inferenceLanguage, options);
+
+      if (this.#generationTeaser) {
+        this.#dismissTeaser();
+      }
+
+      if (!generationResponse || generationResponse.samples.length === 0) {
+        this.#aiCodeGenerationConfig?.onResponseReceived([]);
+        return;
+      }
+      const topSample = generationResponse.samples[0];
+
+      const shouldBlock = topSample.attributionMetadata?.attributionAction === Host.AidaClient.RecitationAction.BLOCK;
+      if (shouldBlock) {
+        return;
+      }
+
+      this.#editor.dispatch({
+        effects: setAiAutoCompleteSuggestion.of({
+          text: '\n' + topSample.generationString,
+          from: cursor,
+          rpcGlobalId: generationResponse.metadata.rpcGlobalId,
+          sampleId: topSample.sampleId,
+          startTime,
+          onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
+        })
+      });
+
+      AiCodeGeneration.debugLog('Suggestion dispatched to the editor', topSample.generationString);
+      const citations = topSample.attributionMetadata?.citations ?? [];
+      this.#aiCodeGenerationConfig?.onResponseReceived(citations);
+    } catch (e) {
+      AiCodeGeneration.debugLog('Error while fetching code generation suggestions from AIDA', e);
+      this.#aiCodeGenerationConfig?.onResponseReceived([]);
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationError);
+    }
+
+    if (this.#generationTeaser) {
+      this.#dismissTeaser();
+    }
+  }
 }
 
 // TODO(b/445899453): Handle teaser's discovery mode

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

@@ -490,7 +490,7 @@ export interface ActiveSuggestion {
   rpcGlobalId?: Host.AidaClient.RpcGlobalId;
   startTime: number;
   onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void;
-  clearCachedRequest: () => void;
+  clearCachedRequest?: () => void;
 }
 
 export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggestion|null>({
@@ -501,7 +501,7 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
         if (effect.value) {
           return effect.value;
         }
-        value?.clearCachedRequest();
+        value?.clearCachedRequest?.();
         return null;
       }
     }
@@ -514,14 +514,14 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
     // between when the request was sent and the response was received.
     // We check if the position is still valid before trying to map it.
     if (value.from > tr.state.doc.length) {
-      value.clearCachedRequest();
+      value.clearCachedRequest?.();
       return null;
     }
 
     // If deletion occurs, set to null. Otherwise, the mapping might fail if
     // the position is inside the deleted range.
     if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
-      value.clearCachedRequest();
+      value.clearCachedRequest?.();
       return null;
     }
 
@@ -530,7 +530,7 @@ export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggesti
 
     // If a change happened before the position from which suggestion was generated, set to null.
     if (tr.docChanged && head < from) {
-      value.clearCachedRequest();
+      value.clearCachedRequest?.();
       return null;
     }
 
@@ -571,7 +571,7 @@ export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
     userEvent: 'input.complete',
   });
 
-  suggestion.clearCachedRequest();
+  suggestion.clearCachedRequest?.();
   return {accepted: true, suggestion};
 }
 

package/front_end/ui/legacy/ContextMenu.ts

@@ -787,8 +787,17 @@ export class ContextMenu extends SubMenu {
 
     const menuObject = this.buildMenuDescriptors();
     const ownerDocument = (this.eventTarget as HTMLElement).ownerDocument;
-    if (this.useSoftMenu || ContextMenu.useSoftMenu ||
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
+
+    let useSoftMenu = this.useSoftMenu || ContextMenu.useSoftMenu ||
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode();
+
+    // Allow force opening a Native menu when DevTools is under test.
+    // This allows opening DevTools on DevTools
+    if (!this.useSoftMenu && ContextMenu.useSoftMenu && this.event.altKey) {
+      useSoftMenu = false;
+    }
+
+    if (useSoftMenu) {
       this.softMenu = new SoftContextMenu(
           (menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this), this.keepOpen, undefined,
           this.onSoftMenuClosed, this.loggableParent);

package/front_end/ui/legacy/TextPrompt.ts

@@ -327,7 +327,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
    * or the |blurListener| parameter to register a "blur" event listener on the |element|
    * (since the "blur" event does not bubble.)
    */
-  attachAndStartEditing(element: Element, blurListener: (arg0: Event) => void): Element {
+  attachAndStartEditing(element: Element, blurListener?: (arg0: Event) => void): Element {
     const proxyElement = this.#attach(element);
     this.startEditing(blurListener);
     return proxyElement;

package/front_end/ui/legacy/Toolbar.ts

@@ -1166,6 +1166,10 @@ export class ToolbarComboBox extends ToolbarItem<void, HTMLSelectElement> {
     }
   }
 
+  turnShrinkable(): void {
+    this.element.classList.add('toolbar-has-dropdown-shrinkable');
+  }
+
   size(): number {
     return this.element.childElementCount;
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -1295,8 +1295,6 @@ export class DevToolsIconLabel extends HTMLElement {
 
   set data(data: IconData) {
     this.#icon.data = data;
-    // TODO(crbug.com/1427397): Clean this up. This was necessary so `DevToolsIconLabel` can use Lit icon
-    //    while being backwards-compatible with the legacy Icon while working for both small and large icons.
     if (data.height === '14px') {
       this.#icon.style.setProperty('margin-bottom', '-2px');
     } else if (data.height === '20px') {

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -176,6 +176,12 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 const expiresSessionValue = i18nLazyString(UIStrings.session);
 
+export interface CookiesTableData {
+  cookies: SDK.Cookie.Cookie[];
+  cookieToBlockedReasons?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>;
+  cookieToExemptionReason?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.ExemptionReason>;
+}
+
 export class CookiesTable extends UI.Widget.VBox {
   private saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>);
   private readonly refreshCallback?: (() => void);
@@ -190,15 +196,15 @@ export class CookiesTable extends UI.Widget.VBox {
   private readonly view: ViewFunction;
   private selectedKey?: string;
   private readonly editable: boolean;
-  private readonly renderInline: boolean;
+  private renderInline: boolean;
   private readonly schemeBindingEnabled: boolean;
   private readonly portBindingEnabled: boolean;
   constructor(
-      renderInline?: boolean,
+      element?: HTMLElement, renderInline?: boolean,
       saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>),
       refreshCallback?: (() => void), selectedCallback?: (() => void),
       deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void), view?: ViewFunction) {
-    super();
+    super(element);
     if (!view) {
       view = (input, _, target) => {
         // clang-format off
@@ -325,6 +331,15 @@ export class CookiesTable extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  set cookiesData(data: CookiesTableData) {
+    this.setCookies(data.cookies, data.cookieToBlockedReasons, data.cookieToExemptionReason);
+  }
+
+  set inline(value: boolean) {
+    this.renderInline = value;
+    this.requestUpdate();
+  }
+
   setCookies(
       cookies: SDK.Cookie.Cookie[],
       cookieToBlockedReasons?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>,

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -68,15 +68,15 @@ const UIStrings = {
   /**
    * @description A context menu item in the Data Grid of a data grid
    */
-  sortByString: 'Sort By',
+  sortByString: 'Sort by',
   /**
    * @description A context menu item in data grids to reset the columns to their default weight
    */
-  resetColumns: 'Reset Columns',
+  resetColumns: 'Reset columns',
   /**
    * @description A context menu item in data grids to list header options.
    */
-  headerOptions: 'Header Options',
+  headerOptions: 'Header options',
   /**
    * @description Text to refresh the page
    */

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

@@ -1697,6 +1697,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       section.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      section.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    section.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    section.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    section.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: section.element,
       forceSelect: section.forceSelect.bind(section),

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1556696"
+  "version": "1.0.1558690"
 }