chrome-devtools-frontend 1.0.1521746 → 1.0.1522145

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,28 +40,32 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 82,
-  header: 'What\'s new in DevTools 141',
+  version: 83,
+  header: 'What\'s new in DevTools 142',
   markdownLinks: [
     {
-      key: 'ai-insight',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ai-insight',
+      key: 'perf-ai-agent',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#perf-ai-agent',
     },
     {
-      key: 'ai-chat-export',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ai-chat-export',
+      key: 'ai-code-completion',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-code-completion',
     },
     {
-      key: 'ipp',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141/#ipp',
+      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 140',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-140' as Platform.DevToolsPath.UrlString,
+      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,
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-141/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-142/',
 };

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

@@ -1,8 +1,11 @@
-### [Debug the network dependency tree with Gemini](ai-insight)
-In Performance > Insights > Network dependency tree, click the corresponding AI button to discuss and debug said tree with Gemini in the 'AI assistance' panel.
+### [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.
 
-### [Export your chats with Gemini](ai-chat-export)
-You can now export your current chat with Gemini or copy its response to clipboard with a click of a button.
+### [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.
 
-### [Filter IP protected network requests](ipp)
-In the Network panel, you can now filter requests sent to IP Protection proxies.
+### [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.
+
+### [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.

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: c0cd408650a942d836b07c15facd3f4fede1d578
+Revision: e8bb55e7f56140e285b00abfd3811f1c3656ca4c
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/diff/README.chromium

@@ -3,7 +3,6 @@ Short Name: diff-match-patch
 URL: https://github.com/google/diff-match-patch/tree/master/javascript
 Version: 5.60.0
 Revision: 0ae308daa77aeddb089cd6b7b0a443fca026266e
-Update Mechanism: Manual
 License: Apache-2.0
 License File: LICENSE
 Update Mechanism: Static.HardFork (https://crbug.com/422918273)

package/front_end/ui/legacy/Treeoutline.ts

@@ -1637,7 +1637,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  * <devtools-tree
  *   .template=${html`
  *     <ul role="tree">
- *        <li role="treeitem">
+ *        <li role="treeitem" @expand=${onExpand}>
  *          Tree Node Text
  *          <ul role="group">
  *            Node with subtree
@@ -1659,7 +1659,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  * tree node). If a tree node contains a <ul role="group">, that defines a subtree under that tree node. The `hidden`
  * attribute on the <ul> defines whether that subtree should render as collapsed. Note that node expanding/collapsing do
  * not reflect this state back to the attribute on the config element, those state changes are rather sent out as
- * `expand` events.
+ * `expand` events on the config element.
  *
  * Under the hood this uses TreeOutline.
  *
@@ -1687,7 +1687,6 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  *
  * @property template Define the tree contents
  * @event selected A node was selected
- * @event expand A subtree was expanded or collapsed
  * @attribute navigation-variant Turn this tree into the navigation variant
  * @attribute hide-overflow
  */
@@ -1704,14 +1703,12 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     });
     this.#treeOutline.addEventListener(Events.ElementExpanded, event => {
       if (event.data instanceof TreeViewTreeElement) {
-        this.dispatchEvent(new TreeViewElement.ExpandEvent(
-            {expanded: true, target: (event.data as TreeViewTreeElement).configElement}));
+        event.data.listItemElement.dispatchEvent(new TreeViewElement.ExpandEvent({expanded: true}));
       }
     });
     this.#treeOutline.addEventListener(Events.ElementCollapsed, event => {
       if (event.data instanceof TreeViewTreeElement) {
-        this.dispatchEvent(new TreeViewElement.ExpandEvent(
-            {expanded: false, target: (event.data as TreeViewTreeElement).configElement}));
+        event.data.listItemElement.dispatchEvent(new TreeViewElement.ExpandEvent({expanded: false}));
       }
     });
     this.addNodes(getTreeNodes([this]));
@@ -1832,8 +1829,8 @@ export namespace TreeViewElement {
     }
   }
 
-  export class ExpandEvent extends CustomEvent<{expanded: boolean, target: HTMLLIElement}> {
-    constructor(detail: {expanded: boolean, target: HTMLLIElement}) {
+  export class ExpandEvent extends CustomEvent<{expanded: boolean}> {
+    constructor(detail: {expanded: boolean}) {
       super('expand', {detail});
     }
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -62,7 +62,6 @@ import smallBubbleStyles from './smallBubble.css.js';
 import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {Widget} from './Widget.js';
-import type {XWidget} from './XWidget.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -1935,27 +1934,11 @@ function updateWidgetfocusWidgetForNode(node: Node|null): void {
   }
 }
 
-function updateXWidgetfocusWidgetForNode(node: Node|null): void {
-  node = node?.parentNodeOrShadowHost() ?? null;
-  const XWidgetConstructor = customElements.get('x-widget') as Platform.Constructor.Constructor<XWidget>| undefined;
-  let widget = null;
-  while (node) {
-    if (XWidgetConstructor && node instanceof XWidgetConstructor) {
-      if (widget) {
-        node.defaultFocusedElement = widget;
-      }
-      widget = node;
-    }
-    node = node.parentNodeOrShadowHost();
-  }
-}
-
 function focusChanged(event: Event): void {
   const target = event.target as HTMLElement;
   const document = target ? target.ownerDocument : null;
   const element = document ? Platform.DOMUtilities.deepActiveElement(document) : null;
   updateWidgetfocusWidgetForNode(element);
-  updateXWidgetfocusWidgetForNode(element);
 }
 
 /**
@@ -2282,6 +2265,10 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     }
   }
 
+  get templateRoot(): DocumentFragment|HTMLElement {
+    return this.#contentTemplate?.content ?? this;
+  }
+
   set template(template: Lit.LitTemplate) {
     if (!this.#contentTemplate) {
       this.removeChildren();

package/front_end/ui/legacy/Widget.ts

@@ -36,7 +36,6 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
-import {XWidget} from './XWidget.js';
 
 // Remember the original DOM mutation methods here, since we
 // will override them below to sanity check the Widget system.
@@ -757,10 +756,6 @@ export class Widget {
       }
       let child = this.contentElement.traverseNextNode(this.contentElement);
       while (child) {
-        if (child instanceof XWidget) {
-          child.focus();
-          return;
-        }
         child = child.traverseNextNode(this.contentElement);
       }
     }

package/front_end/ui/legacy/XElement.ts

@@ -39,36 +39,3 @@ export class XElement extends HTMLElement {
     }
   }
 }
-
-class XBox extends XElement {
-  constructor(direction: string) {
-    super();
-    this.style.setProperty('display', 'flex');
-    this.style.setProperty('flex-direction', direction);
-    this.style.setProperty('justify-content', 'flex-start');
-  }
-
-  static override get observedAttributes(): string[] {
-    return super.observedAttributes.concat(['x-start', 'x-center', 'x-stretch', 'x-baseline', 'justify-content']);
-  }
-
-  override attributeChangedCallback(attr: string, oldValue: string|null, newValue: string|null): void {
-    if (attr === 'x-start' || attr === 'x-center' || attr === 'x-stretch' || attr === 'x-baseline') {
-      if (newValue === null) {
-        this.style.removeProperty('align-items');
-      } else {
-        this.style.setProperty('align-items', attr === 'x-start' ? 'flex-start' : attr.substr(2));
-      }
-      return;
-    }
-    super.attributeChangedCallback(attr, oldValue, newValue);
-  }
-}
-
-class XHBox extends XBox {
-  constructor() {
-    super('row');
-  }
-}
-
-customElements.define('x-hbox', XHBox);

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

@@ -95,7 +95,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
 
     this.#resizeObserver.observe(this);
     this.#updateColumns();
-    this.addNodes(this.querySelectorAll('tr'));
+    this.addNodes(this.templateRoot.querySelectorAll('tr'));
   }
 
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
@@ -155,7 +155,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     this.#hideableColumns.clear();
     this.#columns = [];
     let hasEditableColumn = false;
-    for (const column of this.querySelectorAll('th[id]') || []) {
+    for (const column of this.templateRoot.querySelectorAll('th[id]') || []) {
       const id = column.id as Lowercase<string>;
       let title = column.textContent?.trim() || '';
       const titleDOMFragment = column.firstElementChild ? document.createDocumentFragment() : undefined;
@@ -308,7 +308,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       this.#usedCreationNode = null;
       this.#dataGrid.creationNode = undefined;
     }
-    const placeholder = this.querySelector('tr[placeholder]');
+    const placeholder = this.templateRoot.querySelector('tr[placeholder]');
     if (!placeholder) {
       this.#dataGrid.creationNode?.remove();
       this.#dataGrid.creationNode = undefined;

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -149,8 +149,7 @@ interface DialogParsedTrace {
 }
 
 export class Dialog {
-  private fragment: UI.Fragment.Fragment;
-  private readonly widget: UI.XWidget.XWidget;
+  private readonly widget: UI.Widget.Widget;
   private index: number;
   private dialog: UI.Dialog.Dialog|null = null;
 
@@ -173,21 +172,32 @@ export class Dialog {
     UI.Tooltip.Tooltip.install(prevButton, i18nString(UIStrings.previousFrame));
     const nextButton = UI.UIUtils.createTextButton('\u25B6', this.onNextFrame.bind(this));
     UI.Tooltip.Tooltip.install(nextButton, i18nString(UIStrings.nextFrame));
-    this.fragment = UI.Fragment.Fragment.build`
-      <x-widget flex=none margin='var(--sys-size-7) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8)'>
-        <x-hbox overflow=auto border='var(--sys-size-1) solid var(--sys-color-divider)'>
-          <img $='image' data-film-strip-dialog-img style="max-height: 80vh; max-width: 80vw;"></img>
-        </x-hbox>
-        <x-hbox x-center justify-content=center margin-top='var(--sys-size-6)'>
-          ${prevButton}
-          <x-hbox $='time' margin='var(--sys-size-5)'></x-hbox>
-          ${nextButton}
-        </x-hbox>
-      </x-widget>
-    `;
-    this.widget = (this.fragment.element() as UI.XWidget.XWidget);
-    (this.widget as HTMLElement).tabIndex = 0;
-    this.widget.addEventListener('keydown', this.keyDown.bind(this), false);
+    this.widget = new UI.Widget.Widget({classes: ['film-strip-image-dialog']});
+    this.widget.registerRequiredCSS(filmStripViewStyles);
+
+    const imageBox = document.createElement('div');
+    imageBox.classList.add('image-box');
+
+    const image = document.createElement('img');
+    image.setAttribute('data-film-strip-dialog-img', '');
+    imageBox.append(image);
+
+    const buttonBox = document.createElement('div');
+    buttonBox.classList.add('button-box');
+
+    const timeBox = document.createElement('div');
+    timeBox.classList.add('time-box');
+
+    buttonBox.append(prevButton);
+    buttonBox.append(timeBox);
+    buttonBox.append(nextButton);
+
+    this.widget.contentElement.append(imageBox);
+    this.widget.contentElement.append(buttonBox);
+
+    this.widget.element.tabIndex = 0;
+    this.widget.contentElement.append();
+    this.widget.contentElement.addEventListener('keydown', this.keyDown.bind(this), false);
     this.dialog = null;
 
     void this.render();
@@ -210,8 +220,8 @@ export class Dialog {
   private resize(): void {
     if (!this.dialog) {
       this.dialog = new UI.Dialog.Dialog();
-      this.dialog.contentElement.appendChild(this.widget);
-      this.dialog.setDefaultFocusedElement(this.widget);
+      this.widget.show(this.dialog.contentElement);
+      this.dialog.setDefaultFocusedElement(this.widget.element);
       this.dialog.show();
     }
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
@@ -273,8 +283,15 @@ export class Dialog {
   private render(): void {
     const frame = this.#data.frames[this.index];
     const timestamp = Trace.Helpers.Timing.microToMilli(frame.screenshotEvent.ts);
-    this.fragment.$('time').textContent = i18n.TimeUtilities.millisToString(timestamp - this.#zeroTime());
-    const image = (this.fragment.$('image') as HTMLImageElement);
+    const timeBox = this.widget.contentElement.querySelector('.time-box');
+    if (timeBox) {
+      timeBox.textContent = i18n.TimeUtilities.millisToString(timestamp - this.#zeroTime());
+    }
+
+    const image = this.widget.contentElement.querySelector('img');
+    if (!image) {
+      return;
+    }
     image.setAttribute('data-frame-index', this.index.toString());
     const imgData = Trace.Handlers.ModelHandlers.Screenshots.screenshotImageDataUri(frame.screenshotEvent);
     FilmStripView.setImageData(image, imgData);

package/front_end/ui/legacy/components/perf_ui/filmStripView.css

@@ -59,3 +59,32 @@
 .film-strip-view .frame:focus .thumbnail img {
   box-shadow: none;
 }
+
+.film-strip-image-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .image-box {
+    overflow: auto;
+    margin: var(--sys-size-7) var(--sys-size-8) var(--sys-size-8)
+      var(--sys-size-8);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+  }
+
+  img {
+    max-height: 80vh;
+    max-width: 80vw;
+  }
+
+  .time-box {
+    margin: 0 var(--sys-size-3);
+  }
+
+  .button-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--sys-size-6) 0 var(--sys-size-5);
+  }
+}

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
+import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import xmlTreeStyles from './xmlTree.css.js';
@@ -29,7 +30,7 @@ function* attributes(element: Element): Generator<Attr> {
 }
 
 function hasNonTextChildren(node: Node): boolean {
-  return node.childNodes.length !== node.childTextNodes.length;
+  return Boolean(node.childNodes.values().find(node => node.nodeType !== Node.TEXT_NODE));
 }
 
 function textView(treeNode: XMLTreeViewNode, closeTag: boolean): string {
@@ -249,7 +250,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
   #nextJump: SearchResult|undefined;
 
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(target, {jslog: 'xml-view', classes: ['shadow-xml-view', 'source-code']});
+    super(target, {jslog: `${VisualLogging.pane('xml-view')}`, classes: ['shadow-xml-view', 'source-code']});
     this.#view = view;
   }
 

package/front_end/ui/legacy/legacy.ts

@@ -52,7 +52,6 @@ import * as ViewManager from './ViewManager.js';
 import * as Widget from './Widget.js';
 import * as XElement from './XElement.js';
 import * as XLink from './XLink.js';
-import * as XWidget from './XWidget.js';
 import * as ZoomManager from './ZoomManager.js';
 
 export {
@@ -106,6 +105,5 @@ export {
   Widget,
   XElement,
   XLink,
-  XWidget,
   ZoomManager,
 };

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -4137,6 +4137,7 @@ export const knownContextValues = new Set([
   'x-offset',
   'x-small',
   'xhr',
+  'xml-view',
   'xr',
   'xx-large',
   'xx-small',

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1521746"
+  "version": "1.0.1522145"
 }

package/front_end/panels/application/components/reportingApiGrid.css

@@ -1,31 +0,0 @@
-/*
- * 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.
- */
-
-:host {
-  overflow: auto;
-  height: 100%;
-}
-
-.reporting-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.reporting-header {
-  font-size: 15px;
-  background-color: var(--sys-color-surface2);
-  padding: 1px 4px;
-  flex-shrink: 0;
-}
-
-devtools-data-grid {
-  flex: auto;
-}
-
-.inline-icon {
-  vertical-align: text-bottom;
-}

package/front_end/ui/legacy/XWidget.ts

@@ -1,133 +0,0 @@
-// Copyright 2017 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import {XElement} from './XElement.js';
-
-let observer: ResizeObserver|null = null;
-
-const storedScrollPositions = new WeakMap<Element, {
-  scrollLeft: number,
-  scrollTop: number,
-}>();
-
-export class XWidget extends XElement {
-  private visible: boolean;
-  defaultFocusedElement: Element|null;
-  private elementsToRestoreScrollPositionsFor: Element[];
-  private onShownCallback!: (() => void)|null;
-  private onHiddenCallback!: (() => void)|null;
-  private onResizedCallback!: (() => void)|null;
-
-  constructor() {
-    super();
-    this.style.setProperty('display', 'flex');
-    this.style.setProperty('flex-direction', 'column');
-    this.style.setProperty('align-items', 'stretch');
-    this.style.setProperty('justify-content', 'flex-start');
-    this.style.setProperty('contain', 'layout style');
-
-    this.visible = false;
-    this.defaultFocusedElement = null;
-    this.elementsToRestoreScrollPositionsFor = [];
-
-    if (!observer) {
-      observer = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          const widget = (entry.target as XWidget);
-          if (widget.visible && widget.onResizedCallback) {
-            widget.onResizedCallback.call(null);
-          }
-        }
-      });
-    }
-
-    observer.observe(this);
-
-    this.setElementsToRestoreScrollPositionsFor([this]);
-  }
-
-  isShowing(): boolean {
-    return this.visible;
-  }
-
-  setElementsToRestoreScrollPositionsFor(elements: Element[]): void {
-    for (const element of this.elementsToRestoreScrollPositionsFor) {
-      element.removeEventListener('scroll', XWidget.storeScrollPosition, {capture: false});
-    }
-    this.elementsToRestoreScrollPositionsFor = elements;
-    for (const element of this.elementsToRestoreScrollPositionsFor) {
-      element.addEventListener('scroll', XWidget.storeScrollPosition, {passive: true, capture: false});
-    }
-  }
-
-  restoreScrollPositions(): void {
-    for (const element of this.elementsToRestoreScrollPositionsFor) {
-      const storedPositions = storedScrollPositions.get(element);
-      if (storedPositions) {
-        element.scrollTop = storedPositions.scrollTop;
-        element.scrollLeft = storedPositions.scrollLeft;
-      }
-    }
-  }
-
-  private static storeScrollPosition(event: Event): void {
-    const element = (event.currentTarget as Element);
-    storedScrollPositions.set(element, {scrollLeft: element.scrollLeft, scrollTop: element.scrollTop});
-  }
-
-  setDefaultFocusedElement(element: Element|null): void {
-    if (element && !this.isSelfOrAncestor(element)) {
-      throw new Error('Default focus must be descendant');
-    }
-    this.defaultFocusedElement = element;
-  }
-
-  override focus(): void {
-    if (!this.visible) {
-      return;
-    }
-
-    let element;
-    if (this.defaultFocusedElement && this.isSelfOrAncestor(this.defaultFocusedElement)) {
-      element = this.defaultFocusedElement;
-    } else if (this.tabIndex !== -1) {
-      element = this;
-    } else {
-      let child = this.traverseNextNode(this);
-      while (child) {
-        if ((child instanceof XWidget) && child.visible) {
-          element = child;
-          break;
-        }
-        child = child.traverseNextNode(this);
-      }
-    }
-
-    if (!element || element.hasFocus()) {
-      return;
-    }
-    if (element === this) {
-      HTMLElement.prototype.focus.call(this);
-    } else {
-      (element as HTMLElement).focus();
-    }
-  }
-
-  connectedCallback(): void {
-    this.visible = true;
-    this.restoreScrollPositions();
-    if (this.onShownCallback) {
-      this.onShownCallback.call(null);
-    }
-  }
-
-  disconnectedCallback(): void {
-    this.visible = false;
-    if (this.onHiddenCallback) {
-      this.onHiddenCallback.call(null);
-    }
-  }
-}
-
-customElements.define('x-widget', XWidget);