chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,32 +40,22 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 83,
-  header: 'What\'s new in DevTools 142',
+  version: 143,
+  header: 'What\'s new in DevTools 143',
   markdownLinks: [
     {
-      key: 'perf-ai-agent',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#perf-ai-agent',
+      key: 'mcp-server',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#mcp-server',
     },
     {
-      key: 'ai-code-completion',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-code-completion',
+      key: 'trace-sharing',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#trace-sharing',
     },
     {
-      key: 'gdp',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#gdp',
-    },
-    {
-      key: 'ai-main-button',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-main-button',
-    },
-  ],
-  videoLinks: [
-    {
-      description: 'See past highlights from Chrome 141',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141' as Platform.DevToolsPath.UrlString,
-      type: VideoType.WHATS_NEW,
+      key: 'starting-style',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#starting-style',
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-142/',
+  videoLinks: [],
+  link: 'https://developer.chrome.com/blog/new-in-devtools-143/',
 };

package/front_end/panels/whats_new/resources/WNDT.md

@@ -1,11 +1,11 @@
-### [Full stack trace AI agent in Performance panel](perf-ai-agent)
-The Performance panel now integrates a more capable AI agent that has full access to the stack trace.
+### [MCP server](mcp-server)
 
-### [AI code completion in Sources and Console](ai-code-completion)
-Code completion powered by AI is now available in the Sources panel and the Console.
+Let your favourite coding agent debug your pages at runtime, using the Chrome DevTools MCP server.
 
-### [Google Developer Program support](gdp)
-The Google Developer Program, a ready-made subscription and community platform, is now in DevTools, offering a more personalized experience, a badge system, and easier discovery of new features.
+### [Improved trace sharing](trace-sharing)
 
-### [One main 'Debug with AI' button](ai-main-button)
-The primary action bar at the top of DevTools now features the primary "Debug with AI" button which opens the 'AI assistance' panel in a right-hand side bar.
+Optionally include resource content and script source maps in exported performance traces.
+
+### [Support for @starting-style](starting-style)
+
+Debug and identify CSS entry animations using the new adorner in the Elements panel.

package/front_end/third_party/chromium/README.chromium

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

package/front_end/third_party/puppeteer/third_party/mitt/README.chromium

@@ -1,6 +1,7 @@
 Name: mitt
 Short Name: mitt
 URL: https://github.com/developit/mitt
+Version: 3.0.1
 License: MIT
 License File: LICENSE
 Security Critical: no

package/front_end/third_party/puppeteer/third_party/parsel/README.chromium

@@ -1,6 +1,7 @@
 Name: parsel
 Short Name: parsel
 URL: https://github.com/LeaVerou/parsel
+Version: 1.2.2
 License: MIT
 License File: LICENSE
 Security Critical: no

package/front_end/third_party/puppeteer/third_party/rxjs/README.chromium

@@ -1,6 +1,7 @@
 Name: rxjs
 Short Name: rxjs
 URL: https://github.com/ReactiveX/rxjs
+Version: 7.8.2
 License: Apache-2.0
 License File: LICENSE
 Security Critical: no

package/front_end/ui/components/adorners/Adorner.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import type * as Platform from '../../../core/platform/platform.js';
 import {html, render} from '../../../ui/lit/lit.js';

package/front_end/ui/components/annotations/AnnotationRepository.ts

@@ -0,0 +1,98 @@
+// 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 * as Common from '../../../core/common/common.js';
+import * as Root from '../../../core/root/root.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+
+import {AnnotationType} from './AnnotationType.js';
+
+interface BaseAnnotationData {
+  id: number;
+  type: AnnotationType;
+  message: string;
+  // Sometimes the anchor for an annotation is not known, but is provided using a
+  // string id instead (which can be converted to an `anchor` later).
+  lookupId: string;
+  // Sometimes we want annotations to anchor to a particular string on the page.
+  anchorToString?: string;
+}
+
+interface ElementsAnnotationData extends BaseAnnotationData {
+  type: AnnotationType.ELEMENT_NODE;
+  anchor?: SDK.DOMModel.DOMNode;
+}
+
+export const enum Events {
+  ANNOTATION_ADDED = 'AnnotationAdded',
+}
+
+export interface EventTypes {
+  [Events.ANNOTATION_ADDED]: BaseAnnotationData;
+}
+
+export class AnnotationRepository {
+  static #instance: AnnotationRepository|null = null;
+  #events = new Common.ObjectWrapper.ObjectWrapper<EventTypes>();
+  #annotations: BaseAnnotationData[] = [];
+  #nextId = 0;
+
+  static instance(): AnnotationRepository {
+    if (!AnnotationRepository.#instance) {
+      AnnotationRepository.#instance = new AnnotationRepository();
+    }
+    return AnnotationRepository.#instance;
+  }
+
+  static annotationsEnabled(): boolean {
+    return Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+  }
+
+  addEventListener<T extends keyof EventTypes>(
+      eventType: T, listener: (arg0: Common.EventTarget.EventTargetEvent<EventTypes[T]>) => void,
+      thisObject?: Object): Common.EventTarget.EventDescriptor<EventTypes, T> {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received request to add event listener with annotations disabled');
+    }
+    return this.#events.addEventListener(eventType, listener, thisObject);
+  }
+
+  getAnnotationsByType(type: AnnotationType): BaseAnnotationData[] {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received query for annotation types with annotations disabled');
+      return [];
+    }
+
+    const annotations = this.#annotations.filter(annotation => annotation.type === type);
+    return annotations;
+  }
+
+  addElementsAnnotation(
+      label: string,
+      lookupId?: string,
+      anchor?: SDK.DOMModel.DOMNode,
+      anchorToString?: string,
+      ): void {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received annotation registration with annotations disabled');
+      return;
+    }
+
+    const annotationData: ElementsAnnotationData = {
+      id: this.#nextId++,
+      type: AnnotationType.ELEMENT_NODE,
+      message: label,
+      lookupId: lookupId || '',
+      anchor,
+      anchorToString
+    };
+    this.#annotations.push(annotationData);
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationRepository] Added annotation:', label, {
+      annotationData,
+      annotations: this.#annotations.length,
+    });
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationData);
+  }
+}

package/front_end/ui/components/annotations/AnnotationType.ts

@@ -0,0 +1,10 @@
+// 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.
+
+export enum AnnotationType {
+  ELEMENT_NODE = 0,
+  STYLE_RULE = 1,
+  NETWORK_REQUEST = 2,
+  NETWORK_REQUEST_SUBPANEL_HEADERS = 3,
+}

package/front_end/ui/components/annotations/annotations.ts

@@ -0,0 +1,6 @@
+// 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.
+
+export * from './AnnotationRepository.js';
+export * from './AnnotationType.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../icon_button/icon_button.js';
 

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 import '../icon_button/icon_button.js';
 
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';

package/front_end/ui/components/dialogs/ButtonDialog.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import type * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';

package/front_end/ui/components/dialogs/Dialog.ts

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -1,6 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable @devtools/enforce-custom-element-definitions-location */
 import './ButtonDialog.js';
 
 /* eslint-disable @devtools/no-lit-render-outside-of-view */

package/front_end/ui/components/diff_view/DiffView.ts

@@ -1,7 +1,7 @@
 // Copyright 2019 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Diff from '../../../third_party/diff/diff.js';

package/front_end/ui/components/expandable_list/ExpandableList.ts

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';

package/front_end/ui/components/highlighting/HighlightElement.ts

@@ -1,6 +1,7 @@
 // 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.
+/* eslint-disable @devtools/enforce-custom-element-definitions-location */
 
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 

package/front_end/ui/components/highlighting/MarkupHighlight.ts

@@ -0,0 +1,162 @@
+// 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 * as TextUtils from '../../../models/text_utils/text_utils.js';
+
+export const highlightedSearchResultClassName = 'highlighted-search-result';
+export const highlightedCurrentSearchResultClassName = 'current-search-result';
+
+export interface HighlightChange {
+  node: Element|Text;
+  type: string;
+  oldText?: string;
+  newText?: string;
+  nextSibling?: Node;
+  parent?: Node;
+}
+
+export function highlightRangesWithStyleClass(
+    element: Element, resultRanges: TextUtils.TextRange.SourceRange[], styleClass: string,
+    changes?: HighlightChange[]): Element[] {
+  changes = changes || [];
+  const highlightNodes: Element[] = [];
+  const textNodes = element.childTextNodes();
+  const lineText = textNodes
+                       .map(function(node) {
+                         return node.textContent;
+                       })
+                       .join('');
+  const ownerDocument = element.ownerDocument;
+
+  if (textNodes.length === 0) {
+    return highlightNodes;
+  }
+
+  const nodeRanges: TextUtils.TextRange.SourceRange[] = [];
+  let rangeEndOffset = 0;
+  for (const textNode of textNodes) {
+    const range =
+        new TextUtils.TextRange.SourceRange(rangeEndOffset, textNode.textContent ? textNode.textContent.length : 0);
+    rangeEndOffset = range.offset + range.length;
+    nodeRanges.push(range);
+  }
+
+  let startIndex = 0;
+  for (let i = 0; i < resultRanges.length; ++i) {
+    const startOffset = resultRanges[i].offset;
+    const endOffset = startOffset + resultRanges[i].length;
+
+    while (startIndex < textNodes.length &&
+           nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset) {
+      startIndex++;
+    }
+    let endIndex = startIndex;
+    while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset) {
+      endIndex++;
+    }
+    if (endIndex === textNodes.length) {
+      break;
+    }
+
+    const highlightNode = ownerDocument.createElement('span');
+    highlightNode.className = styleClass;
+    highlightNode.textContent = lineText.substring(startOffset, endOffset);
+
+    const lastTextNode = textNodes[endIndex];
+    const lastText = lastTextNode.textContent || '';
+    lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
+    changes.push({
+      node: (lastTextNode as Element),
+      type: 'changed',
+      oldText: lastText,
+      newText: lastTextNode.textContent,
+      nextSibling: undefined,
+      parent: undefined,
+    });
+
+    if (startIndex === endIndex && lastTextNode.parentElement) {
+      lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
+      changes.push({
+        node: highlightNode,
+        type: 'added',
+        nextSibling: lastTextNode,
+        parent: lastTextNode.parentElement,
+        oldText: undefined,
+        newText: undefined,
+      });
+      highlightNodes.push(highlightNode);
+
+      const prefixNode =
+          ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
+      lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
+      changes.push({
+        node: prefixNode,
+        type: 'added',
+        nextSibling: highlightNode,
+        parent: lastTextNode.parentElement,
+        oldText: undefined,
+        newText: undefined,
+      });
+    } else {
+      const firstTextNode = textNodes[startIndex];
+      const firstText = firstTextNode.textContent || '';
+      const anchorElement = firstTextNode.nextSibling;
+
+      if (firstTextNode.parentElement) {
+        firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
+        changes.push({
+          node: highlightNode,
+          type: 'added',
+          nextSibling: anchorElement || undefined,
+          parent: firstTextNode.parentElement,
+          oldText: undefined,
+          newText: undefined,
+        });
+        highlightNodes.push(highlightNode);
+      }
+
+      firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
+      changes.push({
+        node: (firstTextNode as Element),
+        type: 'changed',
+        oldText: firstText,
+        newText: firstTextNode.textContent,
+        nextSibling: undefined,
+        parent: undefined,
+      });
+
+      for (let j = startIndex + 1; j < endIndex; j++) {
+        const textNode = textNodes[j];
+        const text = textNode.textContent;
+        textNode.textContent = '';
+        changes.push({
+          node: (textNode as Element),
+          type: 'changed',
+          oldText: text || undefined,
+          newText: textNode.textContent,
+          nextSibling: undefined,
+          parent: undefined,
+        });
+      }
+    }
+    startIndex = endIndex;
+    nodeRanges[startIndex].offset = endOffset;
+    nodeRanges[startIndex].length = lastTextNode.textContent.length;
+  }
+  return highlightNodes;
+}
+
+export function revertDomChanges(domChanges: HighlightChange[]): void {
+  for (let i = domChanges.length - 1; i >= 0; --i) {
+    const entry = domChanges[i];
+    switch (entry.type) {
+      case 'added':
+        entry.node.remove();
+        break;
+      case 'changed':
+        entry.node.textContent = entry.oldText ?? null;
+        break;
+    }
+  }
+}

package/front_end/ui/components/highlighting/highlighting.ts

@@ -6,4 +6,11 @@ import './HighlightElement.js';
 
 import * as HighlightManager from './HighlightManager.js';
 
+export {
+  type HighlightChange,
+  highlightedCurrentSearchResultClassName,
+  highlightedSearchResultClassName,
+  highlightRangesWithStyleClass,
+  revertDomChanges
+} from './MarkupHighlight.js';
 export {HighlightManager};

package/front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import './IconButton.js';
 

package/front_end/ui/components/icon_button/Icon.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../Images/Images.js';
 
@@ -74,7 +74,9 @@ export class Icon extends HTMLElement {
 
   constructor() {
     super();
-    this.role = 'presentation';
+    if (!this.role) {
+      this.role = 'presentation';
+    }
     const style = document.createElement('style');
     style.textContent = iconStyles;
     this.#icon = document.createElement('span');

package/front_end/ui/components/icon_button/IconButton.ts

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import './Icon.js';
 

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../icon_button/icon_button.js';
 

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../ui/components/icon_button/icon_button.js';
 

package/front_end/ui/components/legacy_wrapper/LegacyWrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/enforce-custom-element-definitions-location*/
 
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as UI from '../../legacy/legacy.js';

package/front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* 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 Lit from '../../lit/lit.js';