chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -18,23 +18,23 @@ import * as Components from './components/components.js';
 
 const UIStrings = {
   /**
-   * @description Text for showing that a metric was observed in the local environment.
+   * @description Tooltip text indicating that a metric was observed in the local environment in the Performance panel.
    * @example {LCP} PH1
    */
   fieldMetricMarkerLocal: '{PH1} - Local',
 
   /**
-   * @description Text for showing that a metric was observed in the field, from real use data (CrUX). Also denotes if from URL or Origin dataset.
+   * @description Tooltip text indicating that a metric was observed in the field (from Chrome UX Report data) for a specific page scope in the Performance panel.
    * @example {LCP} PH1
    * @example {URL} PH2
    */
   fieldMetricMarkerField: '{PH1} - Field ({PH2})',
   /**
-   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   * @description Text for the page scope option that selects the specific URL instead of its entire origin in the Performance panel.
    */
   urlOption: 'URL',
   /**
-   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   * @description Text for the page scope option that selects the entire origin instead of its specific URL in the Performance panel.
    */
   originOption: 'Origin',
 } as const;

package/front_end/panels/timeline/overlays/components/EntriesLinkOverlay.ts

@@ -15,7 +15,7 @@ import entriesLinkOverlayStyles from './entriesLinkOverlay.css.js';
 
 const UIStrings = {
   /**
-   * @description Accessible label used to explain to a user that they are viewing an arrow representing a link between two entries.
+   * @description Accessible label for the connector container in the entries link overlay of the Performance panel.
    */
   diagram: 'Links between entries',
 } as const;

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -28,27 +28,27 @@ const {html, Directives} = Lit;
 
 const UIStrings = {
   /**
-   * @description Accessible label used to explain to a user that they are viewing an entry label.
+   * @description Accessible label for the entry label overlay in the Performance panel.
    */
   entryLabel: 'Entry label',
   /**
-   * @description Accessible label used to prompt the user to input text into the field.
+   * @description Accessible label prompting the user to enter text in an empty entry label field in the Performance panel.
    */
   inputTextPrompt: 'Enter an annotation label',
   /**
-   * @description Text displayed on a button that generates an AI label.
+   * @description Button label for generating an AI-powered entry label in the Performance panel.
    */
   generateLabelButton: 'Generate label',
   /**
-   * @description Label used for screenreaders on the FRE dialog
+   * @description Accessible label for the first-run consent dialog for AI annotation suggestions in the Performance panel.
    */
   freDialog: 'Get AI-powered annotation suggestions dialog',
   /**
-   * @description Screen-reader text for a tooltip link for navigating to "AI innovations" settings where the user can learn more about auto-annotations.
+   * @description Accessible label for the tooltip link that opens AI settings in the Performance panel.
    */
   learnMoreAriaLabel: 'Learn more about auto annotations in settings',
   /**
-   * @description Screen-reader text for a tooltip icon.
+   * @description Tooltip text and accessible label for the information button of the AI entry label feature in the Performance panel.
    */
   moreInfoAriaLabel: 'More information about this feature',
 } as const;

package/front_end/panels/timeline/overlays/components/TimeRangeOverlay.ts

@@ -13,7 +13,7 @@ import timeRangeOverlayStyles from './timeRangeOverlay.css.js';
 
 const UIStrings = {
   /**
-   * @description Accessible label used to explain to a user that they are viewing an entry label.
+   * @description Accessible label for the time range overlay in the Performance panel.
    */
   timeRange: 'Time range',
 } as const;

package/front_end/panels/timeline/thirdPartyTreeView.css

@@ -48,13 +48,13 @@
     }
 
     tr {
-      height: 22px;
+      height: var(--sys-size-10);
     }
 
     devtools-button {
       display: inline-flex;
       visibility: hidden;
-      margin: 0 8px 0 4px;
+      margin: 0 var(--sys-size-5) 0 var(--sys-size-3);
       vertical-align: top;
     }
 
@@ -101,7 +101,7 @@
      By not using it, we can benefit from text-overflow:ellipsis applying correctly to names and entity-badges */
  .timeline-tree-view .data-grid .name-container {
     display: block;
-    padding-left: 2px;
+    padding-left: var(--sys-size-2);
 
     .activity-name {
       display: inline;
@@ -117,8 +117,8 @@
       padding: 0 var(--sys-size-2);
       background-color: var(--sys-color-tonal-container);
       border-radius: var(--sys-shape-corner-extra-small);
-      height: 16px;
-      line-height: 16px;
+      height: var(--sys-size-8);
+      line-height: var(--sys-typescale-body4-line-height);
       font-size: var(--sys-typescale-body5-size);
       display: inline-block;
     }

package/front_end/panels/timeline/timeline-meta.ts

@@ -394,8 +394,6 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
-// IMPORTANT: if you are updating this, you should also update the setting in
-// js_timeline-meta.
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
@@ -410,8 +408,6 @@ SettingsUI.SettingUIRegistration.register(LiveMetrics.timelineEnableSoftNavigati
   title: i18nLazyString(UIStrings.enableSoftNavigations),
 });
 
-// IMPORTANT: if you are updating this, you should also update the setting in
-// js_timeline-meta.
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
@@ -421,8 +417,6 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
-// IMPORTANT: if you are updating this, you should also update the setting in
-// js_timeline-meta.
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/panels/timeline/timelineDetailsView.css

@@ -27,13 +27,13 @@
     background-color: var(--sys-color-cdt-base-container);
     flex-direction: column;
     padding-bottom: 5px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .timeline-details-view-row {
     padding-left: 10px;
-    min-height: 20px;
-    line-height: 16px; /* Vertically center text within row, important for background-color rows like .timeline-details-warning */
+    min-height: var(--sys-size-9);
+    line-height: var(--sys-typescale-body4-line-height); /* Vertically center text within row, important for background-color rows like .timeline-details-warning */
   }
 
   .timeline-details-view-block .timeline-details-stack-values {
@@ -41,8 +41,8 @@
   }
 
   .timeline-details-chip-title {
-    font-size: 12px;
-    padding: 8px;
+    font-size: var(--sys-typescale-body4-size);
+    padding: var(--sys-size-5);
     display: flex;
     align-items: center;
   }
@@ -53,16 +53,16 @@
   }
 
   .timeline-details-view-block:first-child > .timeline-details-chip-title {
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
   }
 
   /* This is the coloured box that shows next to the event name */
   .timeline-details-chip-title > div {
-    width: 14px;
-    height: 14px;
-    border: 1px solid var(--sys-color-divider);
+    width: var(--sys-size-7);
+    height: var(--sys-size-7);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     display: inline-block;
-    margin-right: 4px;
+    margin-right: var(--sys-size-3);
     content: " ";
   }
 
@@ -103,7 +103,7 @@
   }
 
   .timeline-details-view-pie-chart-wrapper {
-    margin: 4px 0;
+    margin: var(--sys-size-3) 0;
   }
 
   .timeline-details-view-pie-chart {

package/front_end/panels/timeline/timelinePanel.css

@@ -32,7 +32,7 @@
   align-items: flex-start;
   flex: none;
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
   & > :first-child {
     flex: 1 1 auto;
@@ -46,7 +46,7 @@
   row-gap: var(--sys-size-3);
   flex: none;
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
   & > div {
     margin-left: 5px;
@@ -59,7 +59,7 @@
 #timeline-overview-panel {
   flex: none;
   position: relative;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 #timeline-overview-grid {
@@ -67,16 +67,16 @@
 }
 
 #timeline-overview-grid .timeline-grid-header {
-  height: 12px;
+  height: var(--sys-size-6);
 }
 
 #timeline-overview-grid .resources-dividers-label-bar {
   pointer-events: auto;
-  height: 12px;
+  height: var(--sys-size-6);
 }
 
 #timeline-overview-grid .resources-divider-label {
-  top: 1px;
+  top: var(--sys-size-1);
 }
 
 .timeline-details-split {
@@ -141,13 +141,13 @@
   width: 5px;
   height: 5px;
   margin-left: -3px;
-  margin-top: -2px;
+  margin-top: calc(-1 * var(--sys-size-2));
 }
 
 #memory-graphs-container .timeline-memory-header {
   flex: 0 0 26px;
   background-color: var(--sys-color-surface2);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   justify-content: space-between;
 }
 
@@ -156,12 +156,12 @@
 }
 
 .memory-counter-value {
-  margin: 8px;
+  margin: var(--sys-size-5);
 }
 
 #counter-values-bar {
-  flex: 0 0 20px;
-  border-top: solid 1px var(--sys-color-divider);
+  flex: 0 0 var(--sys-size-9);
+  border-top: solid var(--sys-size-1) var(--sys-color-divider);
   width: 100%;
   overflow: hidden;
   line-height: 18px;
@@ -190,7 +190,7 @@
   position: absolute;
   right: 15px;
   top: 15px;
-  border-radius: 50%;
+  border-radius: var(--sys-shape-corner-full);
   cursor: pointer;
 }
 
@@ -251,15 +251,15 @@
 }
 
 .timeline-layers-view-properties td {
-  border: 1px solid var(--sys-color-divider);
-  line-height: 22px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  line-height: var(--sys-size-10);
 }
 
 .timeline-filmstrip-preview > img {
   max-width: 500px;
   max-height: 300px;
   cursor: pointer;
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .timeline-details .filter-input-field {
@@ -269,10 +269,10 @@
 .timeline-stack-view-header {
   height: 27px;
   background-color: var(--sys-color-cdt-base-container);
-  padding: 6px 10px;
+  padding: var(--sys-size-4) 10px;
   color: var(--sys-color-on-surface);
   white-space: nowrap;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .timeline-landing-page {
@@ -284,7 +284,7 @@
   justify-content: center;
   align-items: center;
   overflow: auto;
-  font-size: 13px;
+  font-size: var(--sys-typescale-body3-size);
   color: var(--sys-color-on-surface-subtle);
 }
 
@@ -360,8 +360,8 @@ devtools-toolbar {
         float: right;
         user-select: none;
         mask-image: var(--image-file-triangle-down);
-        width: 14px;
-        height: 14px;
+        width: var(--sys-size-7);
+        height: var(--sys-size-7);
         content: "";
         position: absolute;
         background-color: var(--icon-default);

package/front_end/panels/timeline/timelineTreeView.css

@@ -10,7 +10,7 @@
 
 .timeline-tree-view devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .timeline-tree-view .data-grid {
@@ -81,9 +81,9 @@
 }
 
 .timeline-tree-view .data-grid .name-container .activity-icon {
-  width: 12px;
-  height: 12px;
-  border: 1px solid var(--divider-line);
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  border: var(--sys-size-1) solid var(--divider-line);
   margin: 3px 0;
 }
 
@@ -100,7 +100,7 @@
 
 .timeline-tree-view .data-grid .name-container .activity-warning::after {
   content: "[deopt]";
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
   line-height: 12px;
   font-size: 10px;
   color: var(--sys-color-state-disabled);
@@ -120,20 +120,20 @@
 .timeline-tree-view .data-grid .background-bar-container {
   position: absolute;
   /* Small gap on the left side so the first row (which has a 100% width bar, has a distinguishable bar */
-  inset: 0 0 0 2px;
+  inset: 0 0 0 var(--sys-size-2);
 }
 
 .timeline-tree-view .data-grid .background-bar {
   height: 18px;
   background-color: var(--sys-color-surface-yellow);
-  border-bottom: 1px solid var(--sys-color-yellow-outline);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
   position: absolute;
   right: 0;
 }
 
 .timeline-tree-view .data-grid .selected .background-bar {
   background-color: var(--app-color-selected-progress-bar);
-  border-bottom: 1px solid var(--app-border-selected-progress-bar);
+  border-bottom: var(--sys-size-1) solid var(--app-border-selected-progress-bar);
 }
 
 .timeline-tree-view .data-grid thead {

package/front_end/panels/webauthn/webauthnPane.css

@@ -12,7 +12,7 @@
   .webauthn-toolbar-container {
     display: flex;
     background-color: var(--sys-color-cdt-base-container);
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex: 0 0 auto;
   }
 
@@ -98,7 +98,7 @@
   }
 
   .authenticator-section-title {
-    line-height: 24px;
+    line-height: var(--sys-typescale-body1-line-height);
     display: inline-flex;
   }
 
@@ -111,7 +111,7 @@
   }
 
   .authenticator-section-title.editing-name .authenticator-name-field {
-    border-bottom: 1px solid var(--sys-color-neutral-outline);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     font-weight: normal;
     animation: none;
   }
@@ -141,13 +141,13 @@
   }
 
   ::part(action-button) {
-    min-width: 20px;
-    margin: 4px;
+    min-width: var(--sys-size-9);
+    margin: var(--sys-size-3);
   }
 
   .active-button-container {
     display: inline-block;
-    min-width: 28px;
+    min-width: var(--sys-size-12);
   }
 
   .edit-name-toolbar {

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,8 +40,8 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 152,
-  header: 'What’s new in DevTools 152',
+  version: 153,
+  header: 'New in DevTools (September 2026)',
   markdownLinks: [
     {
       key: 'devtools-for-agents',

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: c7fa750520673537bb8f56d44c3c07bb2d580372
+Revision: e10b20e60f162e7ad88e4930833695a54f4e15fb
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/i18n/i18n-impl.ts

@@ -14,7 +14,7 @@ export class I18n {
   readonly supportedLocales: ReadonlySet<Intl.UnicodeBCP47LocaleIdentifier>;
 
   private localeData = new Map<Intl.UnicodeBCP47LocaleIdentifier, LocalizedMessages>();
-  readonly defaultLocale;
+  readonly defaultLocale: Intl.UnicodeBCP47LocaleIdentifier;
 
   constructor(
     supportedLocales: readonly Intl.UnicodeBCP47LocaleIdentifier[], defaultLocale: Intl.UnicodeBCP47LocaleIdentifier) {

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 25.8.0
+Version: 25.9.0
 License: Apache-2.0
 License File: LICENSE
-Revision: 8a95741d498c183c1a0d80a61bad7ecda12755f2
+Revision: 21efe834b7094d53a1c0d633dc69deced17702d8
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/es5-iife/puppeteer-core-browser.d.ts

@@ -8519,6 +8519,7 @@ declare namespace Puppeteer_2 {
     NetworkConditions,
     InternalNetworkConditions,
     TracingOptions,
+    WebMCPToolExecuteOptions,
     WebMCPToolsAddedEvent,
     WebMCPToolsRemovedEvent,
     WebMCPToolCallResult,
@@ -9936,7 +9937,10 @@ export declare class WebMCPTool extends EventEmitter<{
   /**
    * Executes tool with input parameters, matching tool's `inputSchema`.
    */
-  execute(input?: object): Promise<WebMCPToolCallResult>;
+  execute(
+    input?: object,
+    options?: WebMCPToolExecuteOptions,
+  ): Promise<WebMCPToolCallResult>;
 }
 
 /**
@@ -9989,6 +9993,16 @@ export declare interface WebMCPToolCallResult {
   exception?: Protocol.Runtime.RemoteObject;
 }
 
+/**
+ * @public
+ */
+export declare interface WebMCPToolExecuteOptions {
+  /**
+   * A signal object that allows you to cancel the tool execution.
+   */
+  signal?: AbortSignal;
+}
+
 /**
  * @public
  */