chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/timeline/UIDevtoolsUtils.ts

@@ -8,63 +8,63 @@ import * as Trace from '../../models/trace/trace.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a frame start event in the Performance panel.
    */
   frameStart: 'Frame start',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a draw frame event in the Performance panel.
    */
   drawFrame: 'Draw frame',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a layout event in the Performance panel.
    */
   layout: 'Layout',
   /**
-   * @description Text in UIDevtools Utils of the Performance panel
+   * @description Label for a rasterizing event in the Performance panel.
    */
   rasterizing: 'Rasterizing',
   /**
-   * @description Text in UIDevtools Utils of the Performance panel
+   * @description Label for a drawing event in the Performance panel.
    */
   drawing: 'Drawing',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a painting event in the Performance panel.
    */
   painting: 'Painting',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for system activity in the Performance panel.
    */
   system: 'System',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for idle time in the Performance panel.
    */
   idle: 'Idle',
   /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent to load resources
+   * @description Event category for network and resource loading in the Performance panel.
    */
   loading: 'Loading',
   /**
-   * @description Text in Timeline for the Experience title
+   * @description Header for the user experience events track in the Performance panel.
    */
   experience: 'Experience',
   /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in script execution
+   * @description Event category for script execution in the Performance panel.
    */
   scripting: 'Scripting',
   /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in rendering the web page
+   * @description Event category for layout and rendering in the Performance panel.
    */
   rendering: 'Rendering',
   /**
-   * @description Event category in the Performance panel for time spent in the GPU
+   * @description Event category for GPU activity in the Performance panel.
    */
   gpu: 'GPU',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for asynchronous activity in the Performance panel.
    */
   async: 'Async',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for messaging activity in the Performance panel.
    */
   messaging: 'Messaging',
 } as const;

package/front_end/panels/timeline/components/insights/Table.ts

@@ -20,7 +20,7 @@ const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Table.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {html} = Lit;
 

package/front_end/panels/timeline/enable-easter-egg.js

@@ -14,7 +14,7 @@ if (process.argv.includes('--should-enable')) {
   value = 'true';
 }
 
-writeIfChanged(
+await writeIfChanged(
     path.join(targetGenDir, 'EasterEgg.js'),
     `export const SHOULD_SHOW_EASTER_EGG = ${value};`,
 );

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

@@ -13,123 +13,123 @@ import type * as Timeline from './timeline.js';
 
 const UIStrings = {
   /**
-   * @description Text for the performance of something
+   * @description Name of the Performance panel.
    */
   performance: 'Performance',
   /**
-   * @description Command for showing the 'Performance' tool
+   * @description Command to show the Performance panel.
    */
   showPerformance: 'Show Performance',
   /**
-   * @description Text to record a series of actions for analysis
+   * @description Title of an action to start recording a performance trace.
    */
   record: 'Record',
   /**
-   * @description Text of an item that stops the running task
+   * @description Title of an action to stop recording a performance trace.
    */
   stop: 'Stop',
   /**
-   * @description Title of an action in the timeline tool to record reload
+   * @description Title of an action to record a performance trace while reloading the page.
    */
   recordAndReload: 'Record and reload',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon download button
+   * @description Title of an action to save the current performance profile.
    */
   saveProfile: 'Save profile…',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon load button
+   * @description Title of an action to load a performance profile.
    */
   loadProfile: 'Load profile…',
   /**
-   * @description Prev button title in Film Strip View of the Performance panel
+   * @description Title of an action to navigate to the previous frame in the film strip view of the Performance panel.
    */
   previousFrame: 'Previous frame',
   /**
-   * @description Next button title in Film Strip View of the Performance panel
+   * @description Title of an action to navigate to the next frame in the film strip view of the Performance panel.
    */
   nextFrame: 'Next frame',
   /**
-   * @description Title of an action in the timeline tool to show history
+   * @description Title of an action to show recent timeline sessions in the Performance panel.
    */
   showRecentTimelineSessions: 'Show recent timeline sessions',
   /**
-   * @description Title of an action that opens the previous recording in the performance panel
+   * @description Title of an action to switch to the previous recording in the Performance panel.
    */
   previousRecording: 'Previous recording',
   /**
-   * @description Title of an action that opens the next recording in the performance panel
+   * @description Title of an action to switch to the next recording in the Performance panel.
    */
   nextRecording: 'Next recording',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to show Chrome frame in the Layers view.
    */
   chromeFrameInLayersView: 'Chrome frame in Layers view',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to show all events.
    */
   timelineShowAllEvents: 'Show all events',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to enable soft navigation monitoring.
    */
   enableSoftNavigations: 'Enable soft navigation performance monitoring',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to enable timeline debug mode.
    */
   timelineDebugMode: 'Timeline debug mode (trace event details, etc.)',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings for invalidation tracking.
    */
   timelineInvalidationTracking: 'Invalidation tracking',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to disable JavaScript samples.
    */
   disableJavascriptSamples: 'Disable JavaScript samples',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to enable advanced paint instrumentation.
    */
   enableAdvancedPaint: 'Enable advanced paint instrumentation (slow)',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to enable CSS selector stats.
    */
   enableSelectorStats: 'Enable CSS selector stats (slow)',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to configure screenshot capture.
    */
   screenshotCapture: 'Screenshot capture',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to capture screenshots.
    */
   screenshots: 'Screenshots',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to show memory counters.
    */
   memory: 'Memory',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to dim third parties.
    */
   dimThirdParties: 'Dim 3rd parties',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to show custom tracks.
    */
   showCustomtracks: 'Show custom tracks',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for the JS heap.
    */
   jsHeap: 'JS heap',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for documents.
    */
   documents: 'Documents',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for DOM nodes.
    */
   nodes: 'Nodes',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for event listeners.
    */
   listeners: 'Listeners',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for GPU memory.
    */
   gpuMemory: 'GPU memory',
 } as const;

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -41,7 +41,7 @@
 .overlay-type-ENTRY_SELECTED,
 .overlay-type-ENTRY_OUTLINE {
   pointer-events: none;
-  border: 2px solid var(--sys-color-primary);
+  border: var(--sys-size-2) solid var(--sys-color-primary);
   background-color: var(--sys-color-state-ripple-primary);
 
   &.cut-off-top {
@@ -68,7 +68,7 @@
 
 .overlay-type-ENTRY_OUTLINE {
   background-color: transparent;
-  border-width: 1px;
+  border-width: var(--sys-size-1);
   /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
   z-index: 0;
 
@@ -82,7 +82,7 @@
 }
 
 .overlay-type-CANDY_STRIPED_TIME_RANGE {
-  --red-stripe-width: 2px;
+  --red-stripe-width: var(--sys-size-2);
   --white-stripe-width: 7px;
 
   background-image:
@@ -93,7 +93,7 @@
       transparent var(--red-stripe-width),
       transparent var(--white-stripe-width)
     );
-  border: 1px solid var(--sys-color-error-bright);
+  border: var(--sys-size-1) solid var(--sys-color-error-bright);
 
   &.cut-off-bottom {
     border-bottom: none;
@@ -133,7 +133,7 @@
 .overlay-type-TIMESTAMP_MARKER {
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--sys-color-primary);
   pointer-events: none;
 }
@@ -176,7 +176,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 40px;
+  height: var(--sys-size-14);
   /* Unlike other overlays, the user can click + interact with this one */
   pointer-events: auto;
   /* Ensure this one is always on top of any others */
@@ -211,9 +211,9 @@
 }
 
 .timeline-flamechart-resizer {
-  flex: 8px 0 0;
+  flex: var(--sys-size-5) 0 0;
   background-color: var(--sys-color-surface2);
-  border: 1px var(--sys-color-divider);
+  border: var(--sys-size-1) var(--sys-color-divider);
   border-style: solid none;
   display: flex;
   flex-direction: row;
@@ -227,6 +227,6 @@
 
 .timeline-flamechart-resizer::after {
   content: "...";
-  font-size: 14px;
-  margin-bottom: -1px;
+  font-size: var(--sys-typescale-body2-size);
+  margin-bottom: calc(-1 * var(--sys-size-1));
 }

package/front_end/panels/timeline/timelineFlamechartPopover.css

@@ -7,8 +7,8 @@
 .timeline-flamechart-popover {
   overflow: hidden;
   /* extend padding into the parent element to avoid clipping the focus-visible outline. */
-  padding: 4px;
-  margin: -4px;
+  padding: var(--sys-size-3);
+  margin: calc(-1 * var(--sys-size-3));
 }
 
 .timeline-flamechart-popover devtools-interaction-breakdown {
@@ -34,7 +34,7 @@
 .timeline-flamechart-popover span.popoverinfo-url-path,
 .timeline-flamechart-popover span.popoverinfo-url-origin {
   color: var(--sys-color-token-subtle);
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   white-space: normal;
   word-break: break-all;
 }
@@ -50,11 +50,11 @@
 .layout-shift-viz {
   position: relative;
   margin: var(--sys-size-8) var(--sys-size-5);
-  outline: 1px solid var(--sys-color-divider);
+  outline: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .layout-shift-viz-rect {
-  outline: 1px solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
+  outline: var(--sys-size-1) solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
   background-color: color-mix(in srgb, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
   position: absolute;
   z-index: 100;

package/front_end/panels/timeline/timelineHistoryManager.css

@@ -10,13 +10,13 @@
 }
 
 .preview-item {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
   &:first-child {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
-  padding: 6px 10px;
+  padding: var(--sys-size-4) 10px;
   position: relative;
 
   .metadata {
@@ -32,7 +32,7 @@
     top: 0;
     bottom: 0;
     left: 0;
-    width: 2px;
+    width: var(--sys-size-2);
     background-color: var(--sys-color-primary);
   }
 }
@@ -57,7 +57,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 240px;
+  max-width: var(--sys-size-28);
 }
 
 .text-details .metadata {
@@ -68,8 +68,8 @@
 
 .screenshot-thumb {
   display: flex;
-  border: 1px solid var(--sys-color-surface3);
-  margin: 2px 4px;
+  border: var(--sys-size-1) solid var(--sys-color-surface3);
+  margin: var(--sys-size-2) var(--sys-size-3);
 }
 
 .screenshot-thumb img {

package/front_end/panels/timeline/timelinePaintProfiler.css

@@ -13,7 +13,7 @@
 }
 
 .paint-profiler-image-view .paint-profiler-image-container div {
-  border-color: 1px solid var(--sys-color-divider);
+  border-color: var(--sys-size-1) solid var(--sys-color-divider);
   border-style: solid;
   z-index: 100;
   position: absolute;
@@ -22,5 +22,5 @@
 }
 
 .paint-profiler-image-view img {
-  border: solid 1px var(--sys-color-inverse-surface);
+  border: solid var(--sys-size-1) var(--sys-color-inverse-surface);
 }

package/front_end/panels/timeline/utils/IgnoreList.ts

@@ -10,19 +10,19 @@ import * as Workspace from '../../../models/workspace/workspace.js';
 
 const UIStrings = {
   /**
-   * @description Refers to when skipping content scripts is enabled and the current script is ignored because it's a content script.
+   * @description Reason why a script is ignored because it is a Chrome extension content script.
    */
   skipContentScripts: 'Content script',
   /**
-   * @description Refers to when skipping known third party scripts is enabled and the current script is ignored because it's a known third party script.
+   * @description Reason why a script is ignored because it is marked with ignoreList in the source map.
    */
   skip3rdPartyScripts: 'Marked with ignoreList in source map',
   /**
-   * @description Refers to when skipping anonymous scripts is enabled and the current script is ignored because is an anonymous script.
+   * @description Reason why a script is ignored because it is an anonymous script.
    */
   skipAnonymousScripts: 'Anonymous script',
   /**
-   * @description Refers to when the current script is ignored because of an unknown rule.
+   * @description Reason why a script is ignored because of an unknown ignore rule.
    */
   unknown: 'Unknown',
 } as const;

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: e10b20e60f162e7ad88e4930833695a54f4e15fb
+Revision: c7a932d772cd4948f6199ee2b70c5e149ef4b357
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -57,6 +57,16 @@ function isCodeMirrorEditor(element: Element): boolean {
   return element.classList.contains('cm-editor');
 }
 
+/**
+ * Resolves the file path attribute for a CodeMirror editor element.
+ *
+ * @param element The editor element to check.
+ * @returns The file path string or undefined if not found.
+ */
+export function getEditorFilePath(element: Element): string|undefined {
+  return element.getAttribute('data-file-path') ?? undefined;
+}
+
 /**
  * Checks whether an element contains non-empty text content (after trimming whitespace),
  * including text from any nested shadow roots.
@@ -340,7 +350,7 @@ export function resolveCommentAnchor(
       return null;
     }
     textSignature = lineInfo.textSignature;
-    const filePath = target.getAttribute('data-file-path') ?? undefined;
+    const filePath = getEditorFilePath(target);
     editor = {lineNumber: lineInfo.lineNumber, filePath};
   } else {
     textSignature = target.deepTextContent();
@@ -379,7 +389,6 @@ export function resolveCommentAnchor(
  * @param limit Maximum number of matching elements to return (defaults to Infinity).
  * @returns Array of matching Elements in document order.
  */
-// eslint-disable-next-line @typescript-eslint/no-inferrable-types
 export function deepQuerySelectorAll(root: Document|Element, selector: string, limit: number = Infinity): Element[] {
   const results: Element[] = [];
   if (limit <= 0 || Number.isNaN(limit)) {
@@ -453,7 +462,7 @@ export function rematchCommentAnchor(comment: CommentThread, root: Document|Elem
     const {lineNumber, filePath} = anchor.editor;
     const cmEditors = deepQuerySelectorAll(root, '.cm-editor');
     const matchingEditors = cmEditors.filter(cmEditor => {
-      if (filePath !== undefined && cmEditor.getAttribute('data-file-path') !== filePath) {
+      if (filePath !== undefined && getEditorFilePath(cmEditor) !== filePath) {
         return false;
       }
       return VisualLogging.getVePath(cmEditor) === anchor.vePath;

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -9,6 +9,7 @@ import {
   type CommentThread,
   computeVisibleRect,
   deepQuerySelectorAll,
+  getEditorFilePath,
   rematchCommentAnchor,
   resolveCommentAnchor,
   resolveCommentAnchorElement,
@@ -298,6 +299,13 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         continue;
       }
 
+      if (thread.anchor.editor?.filePath) {
+        const currentFilePath = getEditorFilePath(el);
+        if (currentFilePath && currentFilePath !== thread.anchor.editor.filePath) {
+          continue;
+        }
+      }
+
       const observer = this.#getIntersectionObserver();
       if (!this.#observedThreads.has(el)) {
         observer.observe(el);
@@ -608,7 +616,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ['jslog', 'data-network-request-id', 'data-backend-node-id', 'aria-expanded'],
+      attributeFilter: ['jslog', 'data-network-request-id', 'data-backend-node-id', 'aria-expanded', 'data-file-path'],
     });
   }
 

package/front_end/ui/components/buttons/Button.docs.ts

@@ -4,7 +4,7 @@
 
 import {Button, FloatingButton} from './buttons.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   const buttonDocs = container.createChild('div', 'button-docs');
   const style = document.createElement('style');
   style.textContent = `

package/front_end/ui/components/buttons/button.css

@@ -358,3 +358,24 @@ button {
     transform: rotate(360deg);
   }
 }
+
+@media (forced-colors: active) {
+  button.outlined {
+    background: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+
+    devtools-icon {
+      color: ButtonText;
+    }
+
+    &:disabled {
+      border-color: GrayText;
+      color: GrayText;
+
+      devtools-icon {
+        color: GrayText;
+      }
+    }
+  }
+}

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

@@ -15,7 +15,7 @@ const exampleRenderHelper = (key: string, value: string) => html`
           <devtools-report-value>${value}</devtools-report-value>
         `;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   // clang-format off
   Lit.render(
       html`

package/front_end/ui/components/snackbars/Snackbars.docs.ts

@@ -4,7 +4,7 @@
 
 import {Snackbar} from './snackbars.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   const onActionClick = (): void => {
     console.log('Action button clicked!');
   };

package/front_end/ui/components/spinners/Spinner.ts

@@ -14,7 +14,7 @@ export interface SpinnerProperties {
 }
 
 export class Spinner extends HTMLElement {
-  static readonly observedAttributes = ['active'];
+  static readonly observedAttributes = ['active'] as const;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor(props?: SpinnerProperties) {

package/front_end/ui/components/spinners/Spinners.docs.ts

@@ -8,6 +8,6 @@ import * as Lit from '../../lit/lit.js';
 
 const {html} = Lit;
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   Lit.render(html`<devtools-spinner></devtools-spinner>`, container);
 }

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/enforce-custom-element-definitions-location */
 
 import * as CodeHighlighter from '../../../ui/components/code_highlighter/code_highlighter.js';
-import codeHighlighterStyles from '../../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -338,7 +337,7 @@ export class SuggestionInput extends LitElement {
   protected override render(): Lit.TemplateResult {
     // clang-format off
     return html`<style>${contentEditableStyles}</style>
-      <style>${codeHighlighterStyles}</style>
+      <style>${CodeHighlighter.codeHighlighterStyles}</style>
       <devtools-editable-content
         ?disabled=${this.disabled}
         class=${classMap({

package/front_end/ui/components/switch/Switch.docs.ts

@@ -4,7 +4,7 @@
 
 import {Switch} from './switch.js';
 
-export function render(container: HTMLElement) {
+export function render(container: HTMLElement): void {
   function switchExample({checked, disabled}: {checked: boolean, disabled: boolean}): HTMLElement {
     const example = document.createElement('div');
     example.style.marginTop = '20px';