chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

package/front_end/ui/legacy/Widget.ts

@@ -125,6 +125,14 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
     widget.show(this.parentElement as HTMLElement, undefined, /* suppressOrphanWidgetError= */ true);
   }
 
+  disconnectedCallback(): void {
+    const widget = Widget.get(this);
+    if (widget) {
+      widget.setHideOnDetach();
+      widget.detach();
+    }
+  }
+
   override appendChild<T extends Node>(child: T): T {
     if (child instanceof HTMLElement && child.tagName !== 'STYLE') {
       Widget.getOrCreateWidget(child).show(this);
@@ -264,7 +272,6 @@ export class Widget {
   #notificationDepth = 0;
   #invalidationsSuspended = 0;
   #parentWidget: Widget|null = null;
-  #defaultFocusedElement?: Element|null;
   #cachedConstraints?: Geometry.Constraints;
   #constraints?: Geometry.Constraints;
   #invalidationsRequested?: boolean;
@@ -724,7 +731,13 @@ export class Widget {
   }
 
   setDefaultFocusedElement(element: Element|null): void {
-    this.#defaultFocusedElement = element;
+    const defaultFocusedElement = this.getDefaultFocusedElement();
+    if (defaultFocusedElement) {
+      defaultFocusedElement.removeAttribute('autofocus');
+    }
+    if (element) {
+      element.setAttribute('autofocus', '');
+    }
   }
 
   setDefaultFocusedChild(child: Widget): void {
@@ -732,21 +745,28 @@ export class Widget {
     this.defaultFocusedChild = child;
   }
 
-  focus(): void {
-    if (!this.isShowing()) {
-      return;
+  getDefaultFocusedElement(): HTMLElement|null {
+    const autofocusElement = this.contentElement.hasAttribute('autofocus') ?
+        this.contentElement :
+        this.contentElement.querySelector<HTMLElement>('[autofocus]');
+    let widgetElement: Element|null = autofocusElement;
+    while (widgetElement) {
+      const widget = Widget.get(widgetElement);
+      if (widget) {
+        return widget === this ? autofocusElement : null;
+      }
+      widgetElement = widgetElement.parentElementOrShadowHost();
     }
+    return null;
+  }
 
-    if (this.#shadowRoot?.delegatesFocus && this.contentElement.querySelector('[autofocus]')) {
-      this.element.focus();
+  focus(): void {
+    if (!this.isShowing()) {
       return;
     }
-
-    const element = (this.#defaultFocusedElement as HTMLElement | null);
-    if (element) {
-      if (!element.hasFocus()) {
-        element.focus();
-      }
+    const autofocusElement = this.getDefaultFocusedElement();
+    if (autofocusElement) {
+      autofocusElement.focus();
       return;
     }
 
@@ -759,10 +779,6 @@ export class Widget {
           return;
         }
       }
-      let child = this.contentElement.traverseNextNode(this.contentElement);
-      while (child) {
-        child = child.traverseNextNode(this.contentElement);
-      }
     }
   }
 

package/front_end/ui/legacy/XLink.ts

@@ -4,7 +4,6 @@
 
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
-import {html} from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -155,5 +154,3 @@ export class ContextMenuProvider implements Provider<Node> {
 }
 
 customElements.define('x-link', XLink);
-
-export const sample = html`<p>Hello, <x-link>world!</x-link></p>`;

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

@@ -372,6 +372,15 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       this.#updateColumns();
     }
     this.#updateCreationNode();
+
+    const hadAddedNodes = mutationList.some(m => m.addedNodes.length > 0);
+    // If we got an update, and the data grid is sorted, we need to update the
+    // columns to maintain the sort order as the data within has changed.
+    // However, if we have nodes added, that will trigger a sort anyway so we
+    // don't need to re-sort again.
+    if (this.#dataGrid.sortColumnId() !== null && !hadAddedNodes) {
+      this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
+    }
   }
 
   #editCallback(

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -35,6 +35,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -438,7 +439,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       wrapperElement.classList.add('error');
       wrapperElement.classList.add('value');
       wrapperElement.appendChild(
-          i18n.i18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue.element}));
+          uiI18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue.element}));
       propertyValue.element = wrapperElement;
     }
     propertyValue.element.classList.add('value');

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -919,7 +919,7 @@ export class LinkContextMenuProvider implements UI.ContextMenu.Provider<Node> {
 
 let linkHandlerSettingUIInstance: LinkHandlerSettingUI;
 
-export class LinkHandlerSettingUI implements UI.SettingsUI.SettingUI {
+export class LinkHandlerSettingUI {
   private element: HTMLSelectElement;
 
   private constructor() {
@@ -960,8 +960,14 @@ export class LinkHandlerSettingUI implements UI.SettingsUI.SettingUI {
     Linkifier.linkHandlerSetting().set(value);
   }
 
-  settingElement(): Element|null {
-    return UI.SettingsUI.createCustomSetting(i18nString(UIStrings.linkHandling), this.element);
+  settingElement(): Element {
+    const p = document.createElement('p');
+    p.classList.add('settings-select');
+    const label = p.createChild('label');
+    label.textContent = i18nString(UIStrings.linkHandling);
+    UI.ARIAUtils.bindLabelToControl(label, this.element);
+    p.appendChild(this.element);
+    return p;
   }
 }
 

package/front_end/ui/legacy/legacy.ts

@@ -42,7 +42,6 @@ import * as SuggestBox from './SuggestBox.js';
 import * as TabbedPane from './TabbedPane.js';
 import * as TargetCrashedScreen from './TargetCrashedScreen.js';
 import * as TextPrompt from './TextPrompt.js';
-import * as ThrottledWidget from './ThrottledWidget.js';
 import * as Toolbar from './Toolbar.js';
 import * as Tooltip from './Tooltip.js';
 import * as TreeOutline from './Treeoutline.js';
@@ -95,7 +94,6 @@ export {
   TabbedPane,
   TargetCrashedScreen,
   TextPrompt,
-  ThrottledWidget,
   Toolbar,
   Tooltip,
   TreeOutline,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -849,6 +849,7 @@ export const knownContextValues = new Set([
   'console-group-similar-false',
   'console-history-autocomplete',
   'console-history-autocomplete-false',
+  'console-insight-teaser',
   'console-insight-teasers-enabled',
   'console-insights',
   'console-insights-enabled',
@@ -3162,6 +3163,7 @@ export const knownContextValues = new Set([
   'row-rule-color',
   'row-rule-outset',
   'row-rule-style',
+  'row-rule-visibility-items',
   'row-rule-width',
   'rp-id',
   'rpId',
@@ -3686,6 +3688,7 @@ export const knownContextValues = new Set([
   'targets',
   'task-duration',
   'te',
+  'teaser-info-tooltip',
   'terms-of-service',
   'terms-of-service-accepted',
   'terms-of-service.console-insights',
@@ -3836,7 +3839,7 @@ export const knownContextValues = new Set([
   'timeline.enable',
   'timeline.export-trace-options',
   'timeline.export-trace-options.annotations-checkbox',
-  'timeline.export-trace-options.script-content-checkbox',
+  'timeline.export-trace-options.resource-content-checkbox',
   'timeline.export-trace-options.should-compress-checkbox',
   'timeline.export-trace-options.source-maps-checkbox',
   'timeline.extension',

package/mcp/mcp.ts

@@ -2,6 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * IMPORTANT! Make sure that any class that is exported here has related unit
+ * tests added to foundation_unittests. See front_end/core/i18n/BUILD.gn as an
+ * example.
+ */
+export * as I18n from '../front_end/core/i18n/i18n.js';
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export {
   PerformanceInsightFormatter

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1535712"
+  "version": "1.0.1537268"
 }

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatterBounds.snapshot.txt

@@ -1,4 +0,0 @@
-Title: PerformanceTraceFormatterBounds serializeBounds works
-Content:
-{min: 1, max: 2}
-=== end content

package/front_end/ui/components/docs/breadcrumbs_perf/initial-breadcrumb-perf.html

@@ -1,20 +0,0 @@
-<!--
-  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.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Breadcrumb example</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./initial-breadcrumb-perf.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/breadcrumbs_perf/initial-breadcrumb-perf.ts

@@ -1,25 +0,0 @@
-// 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.
-
-import * as Trace from '../../../../../front_end/models/trace/trace.js';
-import * as TimelineComponents from '../../../../../front_end/panels/timeline/components/components.js';
-
-const breadcrumbsUI = new TimelineComponents.BreadcrumbsUI.BreadcrumbsUI();
-document.getElementById('container')?.appendChild(breadcrumbsUI);
-
-const traceWindow: Trace.Types.Timing.TraceWindowMicro = {
-  min: Trace.Types.Timing.Micro(3),
-  max: Trace.Types.Timing.Micro(9),
-  range: Trace.Types.Timing.Micro(6),
-};
-
-const breadcrumb: Trace.Types.File.Breadcrumb = {
-  window: traceWindow,
-  child: null,
-};
-
-breadcrumbsUI.data = {
-  initialBreadcrumb: breadcrumb,
-  activeBreadcrumb: breadcrumb,
-};

package/front_end/ui/components/docs/breadcrumbs_perf/nested-breadcrumbs-perf.html

@@ -1,20 +0,0 @@
-<!--
-  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.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Breadcrumb example</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./nested-breadcrumbs-perf.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/breadcrumbs_perf/nested-breadcrumbs-perf.ts

@@ -1,36 +0,0 @@
-// 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.
-
-import * as Trace from '../../../../../front_end/models/trace/trace.js';
-import * as TimelineComponents from '../../../../../front_end/panels/timeline/components/components.js';
-
-const breadcrumbsUI = new TimelineComponents.BreadcrumbsUI.BreadcrumbsUI();
-document.getElementById('container')?.appendChild(breadcrumbsUI);
-
-const traceWindow2: Trace.Types.Timing.TraceWindowMicro = {
-  min: Trace.Types.Timing.Micro(4),
-  max: Trace.Types.Timing.Micro(8),
-  range: Trace.Types.Timing.Micro(4),
-};
-
-const traceWindow: Trace.Types.Timing.TraceWindowMicro = {
-  min: Trace.Types.Timing.Micro(3),
-  max: Trace.Types.Timing.Micro(9),
-  range: Trace.Types.Timing.Micro(6),
-};
-
-const breadcrumb2: Trace.Types.File.Breadcrumb = {
-  window: traceWindow2,
-  child: null,
-};
-
-const breadcrumb: Trace.Types.File.Breadcrumb = {
-  window: traceWindow,
-  child: breadcrumb2,
-};
-
-breadcrumbsUI.data = {
-  initialBreadcrumb: breadcrumb,
-  activeBreadcrumb: breadcrumb,
-};

package/front_end/ui/components/docs/recorder_create_recording_view/basic.html

@@ -1,20 +0,0 @@
-<!--
-  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.
--->
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>Recorder: CreateRecordingView</title>
-</head>
-
-<body>
-  <div id="container"></div>
-  <script src="./basic.js" type="module"></script>
-</body>
-
-</html>

package/front_end/ui/components/docs/recorder_create_recording_view/basic.ts

@@ -1,27 +0,0 @@
-// 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.
-
-import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-async function initializeGlobalActions(): Promise<void> {
-  const UI = await import('../../../../../front_end/ui/legacy/legacy.js');
-  const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
-  UI.ShortcutRegistry.ShortcutRegistry.instance({
-    forceNew: true,
-    actionRegistry,
-  });
-}
-
-await initializeGlobalActions();
-
-const component1 = new RecorderComponents.CreateRecordingView.CreateRecordingView();
-document.getElementById('container')?.appendChild(component1);
-
-const component2 = new RecorderComponents.CreateRecordingView.CreateRecordingView();
-document.getElementById('container')?.appendChild(component2);
-component2.shadowRoot?.querySelector('devtools-control-button')?.click();

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -1,48 +0,0 @@
-// Copyright 2014 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 {VBox} from './Widget.js';
-
-export class ThrottledWidget extends VBox {
-  private readonly updateThrottler: Common.Throttler.Throttler;
-  private updateWhenVisible: boolean;
-  protected lastUpdatePromise: Promise<void> = Promise.resolve();
-
-  constructor(useShadowDom?: boolean, timeout?: number) {
-    super({useShadowDom});
-    this.updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
-    this.updateWhenVisible = false;
-  }
-
-  protected doUpdate(): Promise<void> {
-    return Promise.resolve();
-  }
-
-  update(): void {
-    this.updateWhenVisible = !this.isShowing();
-    if (this.updateWhenVisible) {
-      return;
-    }
-    this.lastUpdatePromise = this.updateThrottler.schedule(() => {
-      if (this.isShowing()) {
-        return this.doUpdate();
-      }
-      this.updateWhenVisible = true;
-      return Promise.resolve();
-    });
-  }
-
-  override get updateComplete(): Promise<boolean> {
-    return this.updateThrottler.processCompleted?.then(result => Boolean(result)) || Promise.resolve(false);
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    if (this.updateWhenVisible) {
-      this.update();
-    }
-  }
-}