chrome-devtools-frontend 1.0.1592362 → 1.0.1593518

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1449,6 +1449,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
+                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/console/consoleView.css

@@ -435,11 +435,16 @@
     --display-ignored-formatted-stack-frame: var(--display-formatted-stack-frame-default);
   }
 
-  &:has(.formatted-stack-frame .ignore-list-link):has(.formatted-stack-frame .devtools-link:not(.ignore-list-link)) {
+  &:has(.formatted-stack-frame .ignore-list-link):has(.formatted-stack-frame .devtools-link:not(.ignore-list-link)),
+  &:has(.formatted-stack-frame .ignore-list-link):has(.stack-preview-container.has-non-ignored-links) {
     /* If there are ignored frames and unignored frames, then we want
     to enable the show more/less links. To do that we override some
     variables to always display the structured stack trace, but possibly
-    only the links at the bottom of it, as we share its show more/less links. */
+    only the links at the bottom of it, as we share its show more/less links.
+    We also check the structured stack trace (StackTracePreviewContent) for
+    non-ignored links, so that when all inline Error frames are ignored but
+    the console.error() call stack has non-ignored frames (e.g. in async
+    traces), the toggle is still shown. See crbug.com/379788109. */
     --override-display-stack-preview-toggle-link: table-row;
     --override-display-stack-preview-hidden-div: block;
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -369,7 +369,10 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
-  get filterText(): string {
+  get filterText(): RegExp|string {
+    if (this.#filterIsRegex) {
+      return new RegExp(this.#filterText);
+    }
     return this.#filterText;
   }
 
@@ -385,6 +388,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.#filterText = newFilter.source;
       this.#filterIsRegex = true;
     }
+    this.filterRegex = this.#buildFilterRegex(this.#filterText);
     this.requestUpdate();
   }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1120,6 +1120,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+          resize: true,
           drag: true,
           click: true,
         })}`);

package/front_end/panels/elements/LayoutPane.ts

@@ -228,26 +228,27 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       event.preventDefault();
     }
   };
+  // clang-format off
   const renderElement = (element: LayoutElement): Lit.LitTemplate => html`<div
           class="element"
-          jslog=${VisualLogging.item()}>
+          jslog=${VisualLogging.item().track({resize: true})}>
         <devtools-checkbox
           data-element="true"
           class="checkbox-label"
           .checked=${element.enabled}
           @change=${(e: Event) => input.onElementToggle(element, e)}
-          jslog=${VisualLogging.toggle().track({
-    click: true
-  })}>
+          jslog=${VisualLogging.toggle().track({click: true, resize: true })}>
           <span
               class="node-text-container"
               data-label="true"
               @mouseenter=${(e: MouseEvent) => input.onMouseEnter(element, e)}
               @mouseleave=${(e: MouseEvent) => input.onMouseLeave(element, e)}>
             <devtools-node-text .data=${{
-    nodeId: element.domId, nodeTitle: element.name, nodeClasses: element.domClasses,
-  }
-  }></devtools-node-text>
+                nodeId: element.domId,
+                nodeTitle: element.name,
+                nodeClasses: element.domClasses
+              }}>
+            </devtools-node-text>
           </span>
         </devtools-checkbox>
         <label

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -0,0 +1,254 @@
+// Copyright 2026 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 type * as SDK from '../../core/sdk/sdk.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import * as ElementsComponents from './components/components.js';
+import {StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import type {StylesContainer} from './StylesContainer.js';
+import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
+import {WebCustomData} from './WebCustomData.js';
+
+interface ViewInput {
+  sections: StylePropertiesSection[];
+}
+
+type View = (input: ViewInput, output_: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(
+      html`
+    <style>${stylesSidebarPaneStyles}</style>
+    <div class="style-panes-wrapper" jslog=${VisualLogging.section('standalone-styles').track({
+        resize: true
+      })}>
+      <div class="styles-pane">
+        ${input.sections.map(section => section.element)}
+      </div>
+    </div>
+  `,
+      target);
+};
+
+export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesContainer {
+  activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
+  isEditingStyle = false;
+  readonly sectionByElement = new WeakMap<Node, StylePropertiesSection>();
+  // TODO: Reference the MAX_LINK_LENGTH from StylesSidebarPane at a later stage, when we have a reference to it.
+  readonly linkifier: Components.Linkifier.Linkifier =
+      new Components.Linkifier.Linkifier(23, /* useLinkDecorator */ true);
+
+  #webCustomData: WebCustomData|undefined;
+  #userOperation = false;
+  #sections: StylePropertiesSection[] = [];
+  #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
+  #computedStyleModelInternal = new ComputedStyle.ComputedStyleModel.ComputedStyleModel();
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  get userOperation(): boolean {
+    return this.#userOperation;
+  }
+
+  get webCustomData(): WebCustomData|undefined {
+    if (!this.#webCustomData &&
+        Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
+      this.#webCustomData = WebCustomData.create();
+    }
+    return this.#webCustomData;
+  }
+
+  async #updateSections(): Promise<void> {
+    const node = this.node();
+    if (!node) {
+      this.#sections = [];
+      this.requestUpdate();
+      return;
+    }
+
+    const cssModel = node.domModel().cssModel();
+    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [parentStyles, computedStyles, extraStyles] = await Promise.all([
+      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null, cssModel.getComputedStyle(node.id),
+      cssModel.getComputedStyleExtraFields(node.id)
+    ]);
+
+    if (!matchedStyles) {
+      return;
+    }
+
+    const newSections: StylePropertiesSection[] = [];
+    let sectionIdx = 0;
+    for (const style of matchedStyles.nodeStyles()) {
+      const section = new StylePropertiesSection(
+          this, matchedStyles, style, sectionIdx++, computedStyles, parentStyles, extraStyles);
+      newSections.push(section);
+      this.sectionByElement.set(section.element, section);
+    }
+    this.#sections = newSections;
+    this.swatchPopoverHelper().reposition();
+  }
+
+  override async performUpdate(): Promise<void> {
+    if (this.isEditingStyle || this.#userOperation) {
+      return;
+    }
+
+    await this.#updateSections();
+
+    const viewInput: ViewInput = {
+      sections: this.#sections,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
+    return this.#swatchPopoverHelper;
+  }
+
+  // TODO: Refactor StylesContainer to use getter for node(), so that we can have a `node` setter here: set node().
+  set domNode(node: SDK.DOMModel.DOMNode|null) {
+    if (this.#computedStyleModelInternal.node === node) {
+      return;
+    }
+    this.#computedStyleModelInternal.node = node;
+    this.requestUpdate();
+  }
+
+  node(): SDK.DOMModel.DOMNode|null {
+    return this.#computedStyleModelInternal.node;
+  }
+
+  cssModel(): SDK.CSSModel.CSSModel|null {
+    return this.#computedStyleModelInternal.cssModel();
+  }
+
+  computedStyleModel(): ComputedStyle.ComputedStyleModel.ComputedStyleModel {
+    return this.#computedStyleModelInternal;
+  }
+
+  setActiveProperty(_treeElement: StylePropertyTreeElement|null): void {
+  }
+
+  refreshUpdate(editedSection: StylePropertiesSection, editedTreeElement?: StylePropertyTreeElement): void {
+    if (editedTreeElement) {
+      for (const section of this.#sections) {
+        section.updateVarFunctions(editedTreeElement);
+      }
+    }
+
+    if (this.isEditingStyle) {
+      return;
+    }
+
+    for (const section of this.#sections) {
+      section.update(section === editedSection);
+    }
+    this.swatchPopoverHelper().reposition();
+  }
+
+  filterRegex(): RegExp|null {
+    return null;
+  }
+
+  setEditingStyle(editing: boolean): void {
+    this.isEditingStyle = editing;
+  }
+
+  setUserOperation(userOperation: boolean): void {
+    this.#userOperation = userOperation;
+  }
+
+  forceUpdate(): void {
+    this.hideAllPopovers();
+    this.requestUpdate();
+  }
+
+  hideAllPopovers(): void {
+    this.#swatchPopoverHelper.hide();
+  }
+
+  allSections(): StylePropertiesSection[] {
+    return this.#sections;
+  }
+
+  getVariablePopoverContents(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, variableName: string,
+      computedValue: string|null): ElementsComponents.CSSVariableValueView.CSSVariableValueView {
+    const registration = matchedStyles.getRegisteredProperty(variableName);
+    return new ElementsComponents.CSSVariableValueView.CSSVariableValueView({
+      variableName,
+      value: computedValue ?? undefined,
+      // TODO: provide a goToDefinition to jump to the StylesSidebarPane
+      details: registration ? {registration, goToDefinition: () => {}} : undefined,
+    });
+  }
+
+  getVariableParserError(_matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, _variableName: string):
+      ElementsComponents.CSSVariableValueView.CSSVariableParserError|null {
+    return null;
+  }
+
+  jumpToFunctionDefinition(_functionName: string): void {
+  }
+
+  continueEditingElement(_sectionIndex: number, _propertyIndex: number): void {
+  }
+
+  revealProperty(_cssProperty: SDK.CSSProperty.CSSProperty): void {
+  }
+
+  resetFocus(): void {
+    const firstVisibleSection = this.#sections[0]?.findCurrentOrNextVisible(true);
+    if (firstVisibleSection) {
+      firstVisibleSection.element.tabIndex = this.hasFocus() ? -1 : 0;
+    }
+  }
+
+  removeSection(_section: StylePropertiesSection): void {
+  }
+
+  focusedSectionIndex(): number {
+    return this.#sections.findIndex(section => section.element.hasFocus());
+  }
+
+  addBlankSection(
+      _insertAfterSection: StylePropertiesSection, _styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader,
+      _ruleLocation: TextUtils.TextRange.TextRange): void {
+  }
+
+  jumpToProperty(_propertyName: string, _sectionName?: string, _blockName?: string): boolean {
+    return false;
+  }
+
+  jumpToSectionBlock(_section: string): void {
+  }
+
+  jumpToFontPaletteDefinition(_paletteName: string): void {
+  }
+
+  jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
+  }
+
+  addStyleUpdateListener(_listener: () => void): void {
+  }
+
+  removeStyleUpdateListener(_listener: () => void): void {
+  }
+}

package/front_end/panels/elements/components/ComputedStyleTrace.ts

@@ -24,6 +24,10 @@ export class ComputedStyleTrace extends HTMLElement {
   #onNavigateToSource: ((event?: Event) => void) = () => {};
   #ruleOriginNode?: Node;
 
+  connectedCallback(): void {
+    this.#render();
+  }
+
   set data(data: ComputedStyleTraceData) {
     this.#selector = data.selector;
     this.#active = data.active;

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -303,7 +303,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   data-crumb="true"
                 >
                   <a href="#" draggable=false class="crumb-link"
-                    jslog=${VisualLogging.item().track({click:true})}
+                    jslog=${VisualLogging.item().track({click:true, resize:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -194,7 +194,8 @@ export class StylePropertyEditor extends HTMLElement {
     return html`
       <button title=${title}
               class=${classes}
-              jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
+              jslog=${
+        VisualLogging.item().track({click: true, resize: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
         <devtools-icon style=${transform} name=${iconInfo.iconName}>
         </devtools-icon>

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -19,7 +19,7 @@
   min-height: 16px;
   box-sizing: border-box;
   padding-top: 2px;
-  white-space: nowrap;
+  white-space: var(--override-computed-style-property-white-space, nowrap);
   user-select: text;
 }
 

package/front_end/panels/elements/elements.ts

@@ -54,6 +54,7 @@ import * as NodeStackTraceWidget from './NodeStackTraceWidget.js';
 import * as PlatformFontsWidget from './PlatformFontsWidget.js';
 import * as PropertiesWidget from './PropertiesWidget.js';
 import * as PropertyRenderer from './PropertyRenderer.js';
+import * as StandaloneStylesContainer from './StandaloneStylesContainer.js';
 import * as StyleEditorWidget from './StyleEditorWidget.js';
 import * as StylePropertiesSection from './StylePropertiesSection.js';
 import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
@@ -90,6 +91,7 @@ export {
   PlatformFontsWidget,
   PropertiesWidget,
   PropertyRenderer,
+  StandaloneStylesContainer,
   StyleEditorWidget,
   StylePropertiesSection,
   StylePropertyHighlighter,

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -163,11 +163,6 @@ const UIStrings = {
    * @description Tooltip of the rotate/screen orientation button.
    */
   screenOrientationOptions: 'Screen orientation options',
-  /**
-   * @description Tooltip shown on the rotate button when screen orientation is locked by the page
-   * via screen.orientation.lock().
-   */
-  screenOrientationLocked: 'Screen orientation is locked by the page',
   /**
    * @description Tooltip for a button which turns on/off dual-screen mode, which emulates devices
    * like tablets which have two screens.
@@ -622,9 +617,6 @@ export class DeviceModeToolbar {
   private modeMenuClicked(event: {
     data: Event,
   }): void {
-    if (this.model.isScreenOrientationLocked()) {
-      return;
-    }
     const device = this.model.device();
     const model = this.model;
     const autoAdjustScaleSetting = this.autoAdjustScaleSetting;
@@ -812,23 +804,6 @@ export class DeviceModeToolbar {
       }
       this.persistenceSetting.set(value);
     }
-
-    // When screen orientation is locked by the page (via screen.orientation.lock()),
-    // disable the rotate button to prevent user-initiated rotation.
-    // When unlocked, restore the button to its normal state.
-    if (this.model.isScreenOrientationLocked()) {
-      this.modeButton.setEnabled(false);
-      setTitleForButton(this.modeButton, i18nString(UIStrings.screenOrientationLocked));
-    } else if (this.cachedModelDevice) {
-      const modeCount = this.cachedModelDevice.modes.length;
-      this.modeButton.setEnabled(modeCount >= 2);
-      setTitleForButton(
-          this.modeButton,
-          modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions));
-    } else if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
-      this.modeButton.setEnabled(true);
-      setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
-    }
   }
 
   restore(): void {

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -84,7 +84,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
                role="option"
                aria-selected=${isSelected}
-               jslog=${VisualLogging.item('player').track({click: true})}>
+               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -408,7 +408,8 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
+    this.waterfallHeaderElement.setAttribute(
+        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -62,7 +62,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     ${headers.map(header => html`
       <devtools-header-section-row
         .data=${{ header }}
-        jslog=${VisualLogging.item('request-header')}
+        jslog=${VisualLogging.item('request-header').track({resize: true})}
       ></devtools-header-section-row>
     `)}
   `, target);

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -990,7 +990,7 @@ function renderTargetSelectorRow(input: ViewInput): Lit.TemplateResult|undefined
             jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
             @change=${input.onTargetSelected}>
       ${input.targets.map(target => html`
-        <option jslog=${VisualLogging.item('target').track({click: true})}
+        <option jslog=${VisualLogging.item('target').track({click: true, resize: true})}
                 value=${target.id()} ?selected=${target.id() === input.targetId}>
           ${target.name()} (${target.inspectedURL()})
         </option>`)}

package/front_end/panels/recorder/components/RecordingListView.ts

@@ -140,7 +140,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                   @keydown=${(event: Event) => onKeyDown(recording.storageName, event)}
                   @click=${(event: Event) => onOpenClick(recording.storageName, event)}
                   jslog=${VisualLogging.item()
-                    .track({ click: true })
+                    .track({ click: true, resize: true })
                     .context('recording')}>
                   <div class="icon">
                     <devtools-icon name="flow">

package/front_end/panels/recorder/components/StepEditor.ts

@@ -646,7 +646,7 @@ export class StepEditor extends LitElement {
   #renderTypeRow(editable: boolean): Lit.TemplateResult {
     this.#renderedAttributes.add('type');
     // clang-format off
-    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
+    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type').track({resize: true})}>
       <div id="type">type<span class="separator">:</span></div>
       <devtools-suggestion-input
         aria-labelledby="type"
@@ -667,7 +667,7 @@ export class StepEditor extends LitElement {
       return;
     }
     // clang-format off
-    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute))}>
+    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute)).track({resize: true})}>
       <div id=${attribute}>${attribute}<span class="separator">:</span></div>
       <devtools-suggestion-input
         .disabled=${this.disabled}
@@ -706,7 +706,7 @@ export class StepEditor extends LitElement {
     }
     // clang-format off
     return html`
-      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame')}>
+      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame').track({resize: true})}>
         <div class="row">
           <div id="frame">frame<span class="separator">:</span></div>
           ${this.#renderDeleteButton('frame')}

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -345,7 +345,8 @@ export class ShortcutListItem {
     this.settingsTab = settingsTab;
     this.item = item;
     this.element = document.createElement('div');
-    this.element.setAttribute('jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape'})}`);
+    this.element.setAttribute(
+        'jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape', resize: true})}`);
     this.editedShortcuts = new Map();
     this.shortcutInputs = new Map();
     this.shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(item.id());

package/front_end/panels/sources/components/HeadersView.ts

@@ -404,7 +404,7 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format off
     return html`
       <div class="row" data-block-index=${blockIndex}
-           jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined)}>
+           jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined).track({resize: true})}>
         <div>${i18n.i18n.lockedString('Apply to')}</div>
         <div class="separator">:</div>
         ${this.#renderEditable(pattern, 'apply-to')}
@@ -427,7 +427,7 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format off
     return html`
       <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}
-           jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent')}>
+           jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent').track({resize: true})}>
         ${this.#renderEditable(header.name, 'header-name red', true)}
         <div class="separator">:</div>
         ${this.#renderEditable(header.value, 'header-value')}

package/front_end/panels/timeline/components/BreadcrumbsUI.ts

@@ -111,7 +111,7 @@ export class BreadcrumbsUI extends HTMLElement {
     // clang-format off
     return html`
           <div class="breadcrumb" @contextmenu=${(event: Event) => this.#onContextMenu(event, breadcrumb)} @click=${() => this.#activateBreadcrumb(breadcrumb)}
-          jslog=${VisualLogging.item('timeline.breadcrumb-select').track({click: true})}>
+          jslog=${VisualLogging.item('timeline.breadcrumb-select').track({click: true, resize: true})}>
            <span class="${(breadcrumb === this.#activeBreadcrumb) ? 'active-breadcrumb' : ''} range">
             ${(index === 0) ?
               `Full range (${i18n.TimeUtilities.preciseMillisToString(breadcrumbRange, 2)})` :

package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -424,7 +424,7 @@ export const DEFAULT_VIEW: (input: SidebarAnnotationsTabViewInput, output: objec
                   @mouseout=${() => (annotation.type === 'ENTRY_LABEL') ? input.onAnnotationHoverOut() : null}
                   aria-label=${label}
                   tabindex="0"
-                  jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${jslogForAnnotation(annotation)}`).track({click: true})}
+                  jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${jslogForAnnotation(annotation)}`).track({click: true, resize: true})}
                 >
                   <div class="annotation">
                     ${renderAnnotationIdentifier(annotation, input.annotationEntryToColorMap)}

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

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: 24.37.5
+Version: 24.38.0
 License: Apache-2.0
 License File: LICENSE
-Revision: fcb37e3b3a4f6b55b6f81a40811243260bcea16f
+Revision: d3356fac46478974c5b88ba2b26b26954cb741ff
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/bidi/core/Navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../../src/bidi/core/Navigation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAE1D,OAAO,EAAkB,aAAa,EAAC,MAAM,0BAA0B,CAAC;AAExE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,YAAY,CAAC;IAC3C,gEAAgE;IAChE,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,QAAQ,EAAE,cAAc,CAAC;IACzB,sCAAsC;IACtC,MAAM,EAAE,cAAc,CAAC;IACvB,2CAA2C;IAC3C,OAAO,EAAE,cAAc,CAAC;CACzB,CAAC;;IACA,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,GAAG,UAAU;IAYjD,OAAO;IA2GP,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,OAAO,IAAI,OAAO,GAAG,SAAS,CAEjC;IACD,IAAI,UAAU,IAAI,UAAU,GAAG,SAAS,CAEvC;IAGD,OAAO,CAAC,OAAO;IAIN,CAAC,aAAa,CAAC,IAAI,IAAI;CAIjC"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../../src/bidi/core/Navigation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAE1D,OAAO,EAAkB,aAAa,EAAC,MAAM,0BAA0B,CAAC;AAExE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,IAAI,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,YAAY,CAAC;IAC3C,gEAAgE;IAChE,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,QAAQ,EAAE,cAAc,CAAC;IACzB,sCAAsC;IACtC,MAAM,EAAE,cAAc,CAAC;IACvB,2CAA2C;IAC3C,OAAO,EAAE,cAAc,CAAC;CACzB,CAAC;;IACA,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,GAAG,UAAU;IAYjD,OAAO;IA4GP,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,OAAO,IAAI,OAAO,GAAG,SAAS,CAEjC;IACD,IAAI,UAAU,IAAI,UAAU,GAAG,SAAS,CAEvC;IAGD,OAAO,CAAC,OAAO;IAIN,CAAC,aAAa,CAAC,IAAI,IAAI;CAIjC"}