chrome-devtools-frontend 1.0.1606789 → 1.0.1608868

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

@@ -1,8 +1,6 @@
 // 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-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/settings/settings.js';
 import '../../../ui/kit/kit.js';
@@ -22,7 +20,6 @@ import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -37,8 +34,8 @@ import type {MetricCardData} from './MetricCard.js';
 import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
-const {html, nothing} = Lit;
-const {widget, widgetRef} = UI.Widget;
+const {html, nothing, Directives: {live}} = Lit;
+const {widget} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -967,15 +964,10 @@ function renderLogSection(input: ViewInput, output: ViewOutput): Lit.LitTemplate
       class="logs-section"
       aria-label=${i18nString(UIStrings.eventLogs)}
     >
-      <devtools-widget ${widget(LiveMetricsLogs)}
-        ${widgetRef(LiveMetricsLogs, widget => {
-          if (input.highlightedInteractionId) {
-            widget.selectTab('interactions');
-          } else if (input.highlightedLayoutShiftClusterIds?.size) {
-            widget.selectTab('layout-shifts');
-          }
-        })}
-      >
+      <devtools-widget ${widget(LiveMetricsLogs, {
+        selectedTab: input.highlightedInteractionId               ? 'interactions'
+                   : input.highlightedLayoutShiftClusterIds?.size ? 'layout-shifts'
+                   : undefined})}>
         ${renderInteractionsLog(input, output)}
         ${renderLayoutShiftsLog(input, output)}
       </devtools-widget>
@@ -1000,7 +992,7 @@ function renderNodeView(input: ViewInput): Lit.LitTemplate {
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   if (input.isNode) {
-    Lit.render(renderNodeView(input), target, {host: input});
+    Lit.render(renderNodeView(input), target);
     return;
   }
 
@@ -1061,12 +1053,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </div>
     </div>
   `;
-  Lit.render(outputTemplate, target, {host: input});
+  // clang-format on
+  Lit.render(outputTemplate, target);
 
   if (input.highlightedInteractionId) {
     const interactionEl = target.querySelector<HTMLElement>('#' + CSS.escape(input.highlightedInteractionId));
     if (interactionEl) {
-      void RenderCoordinator.write(() => {
+      requestAnimationFrame(() => {
         interactionEl.scrollIntoView({
           block: 'center',
         });
@@ -1086,7 +1079,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
 
     if (layoutShiftEls.length) {
-      void RenderCoordinator.write(() => {
+      requestAnimationFrame(() => {
         layoutShiftEls[0].scrollIntoView({
           block: 'start',
         });
@@ -1262,20 +1255,61 @@ export class LiveMetricsView extends UI.Widget.Widget {
   }
 }
 
+interface LiveMetricsLogsViewInput {
+  onClear: () => void;
+  selectedTab?: string;
+  onTabSelected: (tabId: string) => void;
+}
+
+type LiveMetricsLogsView = (input: LiveMetricsLogsViewInput, output: undefined, target: HTMLElement) => void;
+
+const LIVE_METRICS_LOGS_VIEW: LiveMetricsLogsView = (input, output, target) => {
+  // clang-format off
+  Lit.render(html`
+    <style>
+      /* Any children of the root element will be matched to the slots defined within the container
+         widget's shadow DOM. */
+      :host,
+      .widget {
+        display: contents;
+      }
+    </style>
+    <devtools-tabbed-pane @select=${(event: Event) => input.onTabSelected((event as CustomEvent).detail.tabId)}>
+      <devtools-toolbar slot="right">
+        <devtools-button .iconName=${'clear'} .variant=${Buttons.Button.Variant.TOOLBAR}
+                         title=${i18nString(UIStrings.clearCurrentLog)} @click=${input.onClear}
+                         .jslogContext=${'timeline.landing.clear-log'}>
+        </devtools-button>
+      </devtools-toolbar>
+      <!-- Taking advantage of web component slots allows us to render updates in the lit templates defined in the
+      main component. This should be more performant and doesn't require us to inject live metrics styles twice. -->
+      <slot name="interactions-log-content" id="interactions" ?selected=${live(input.selectedTab === 'interactions')}
+            title=${i18nString(UIStrings.interactions)} jslogcontext="timeline.landing.interactions-log">
+      </slot>
+      <slot name="layout-shifts-log-content" id="layout-shifts" ?selected=${live(input.selectedTab === 'layout-shifts')}
+            title=${i18nString(UIStrings.layoutShifts)} jslogcontext="timeline.landing.layout-shifts-log">
+      </slot>
+    </devtools-tabbed-pane>
+  `, target);
+  // clang-format on
+};
+
 class LiveMetricsLogs extends UI.Widget.Widget {
-  #tabbedPane: UI.TabbedPane.TabbedPane;
+  #view: LiveMetricsLogsView;
+  #selectedTab = 'interactions';
 
-  /**
-   * Returns `true` if selecting the tab was successful.
-   */
-  selectTab(tabId: string): boolean {
-    return this.#tabbedPane.selectTab(tabId);
+  set selectedTab(tabId: string|undefined) {
+    if (!tabId || this.#selectedTab === tabId) {
+      return;
+    }
+    this.#selectedTab = tabId;
+    this.requestUpdate();
   }
 
   #clearCurrentLog(): void {
     const liveMetrics = LiveMetrics.LiveMetrics.instance();
 
-    switch (this.#tabbedPane.selectedTabId) {
+    switch (this.#selectedTab) {
       case 'interactions':
         liveMetrics.clearInteractions();
         break;
@@ -1284,35 +1318,22 @@ class LiveMetricsLogs extends UI.Widget.Widget {
         break;
     }
   }
-  constructor(element: HTMLElement) {
+  constructor(element: HTMLElement, view: LiveMetricsLogsView = LIVE_METRICS_LOGS_VIEW) {
     super(element, {useShadowDom: true});
-    this.element.style.display = 'contents';
-    // Any children of the root element `this` will be matched to the slots defined within the container
-    // widget's shadow DOM.
-    this.contentElement.style.display = 'contents';
-
-    this.#tabbedPane = new UI.TabbedPane.TabbedPane();
-
-    // Taking advantage of web component slots allows us to render updates in the lit templates defined in the
-    // main component. This should be more performant and doesn't require us to inject live metrics styles twice.
-    const interactionsSlot = document.createElement('slot');
-    interactionsSlot.name = 'interactions-log-content';
-    const interactionsTab = UI.Widget.Widget.getOrCreateWidget(interactionsSlot);
-    this.#tabbedPane.appendTab(
-        'interactions', i18nString(UIStrings.interactions), interactionsTab, undefined, undefined, undefined, undefined,
-        undefined, 'timeline.landing.interactions-log');
-
-    const layoutShiftsSlot = document.createElement('slot');
-    layoutShiftsSlot.name = 'layout-shifts-log-content';
-    const layoutShiftsTab = UI.Widget.Widget.getOrCreateWidget(layoutShiftsSlot);
-    this.#tabbedPane.appendTab(
-        'layout-shifts', i18nString(UIStrings.layoutShifts), layoutShiftsTab, undefined, undefined, undefined,
-        undefined, undefined, 'timeline.landing.layout-shifts-log');
-
-    const clearButton = new UI.Toolbar.ToolbarButton(
-        i18nString(UIStrings.clearCurrentLog), 'clear', undefined, 'timeline.landing.clear-log');
-    clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#clearCurrentLog, this);
-    this.#tabbedPane.rightToolbar().appendToolbarItem(clearButton);
-    this.#tabbedPane.show(this.contentElement);
+    this.#view = view;
+
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const viewInput: LiveMetricsLogsViewInput = {
+      onClear: this.#clearCurrentLog.bind(this),
+      selectedTab: this.#selectedTab,
+      onTabSelected: (tabId: string) => {
+        this.selectedTab = tabId;
+      },
+    };
+
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/timeline/components/timelineRangeSummaryView.css

@@ -16,6 +16,10 @@
   height: 100%;
 }
 
+.timeline-tree-view {
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
+}
+
 @container (max-width: 450px) {
   .timeline-details-range-summary {
     display: grid;
@@ -27,6 +31,10 @@
   .timeline-summary {
     width: 100%;
   }
+
+  .timeline-tree-view {
+    border-left: none;
+  }
 }
 
 .timeline-summary {

package/front_end/panels/timeline/thirdPartyTreeView.css

@@ -82,7 +82,6 @@
     max-width: min(100%, 550px);
     min-width: 350px; /* Lower than this, there's not enough room for the entity name */
     padding: 0 0 0 var(--sys-size-6);
-    border-left: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .has-max-rows {

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

@@ -62,6 +62,10 @@ const UIStrings = {
    * @description Title of a setting under the Performance category in Settings
    */
   chromeFrameInLayersView: 'Chrome frame in Layers view',
+  /**
+   * @description Title of a setting under the Performance category in Settings
+   */
+  timelineShowAllEvents: 'Show all events',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/timeline-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -314,6 +318,15 @@ Common.Settings.registerSettingExtension({
   defaultValue: true,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.timelineShowAllEvents),
+  settingName: 'timeline-show-all-events',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 // IMPORTANT: if you are updating this, you should also update the setting in
 // js_timeline-meta.
 Common.Settings.registerSettingExtension({

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

package/front_end/ui/legacy/TabbedPane.ts

@@ -900,7 +900,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     // Perform measurement
     for (const [measuringTabElement, tab] of measuringTabElements) {
       const width = measuringTabElement.getBoundingClientRect().width;
-      tab.measuredWidth = Math.ceil(width);
+      tab.measuredWidth = Math.ceil(width) || undefined;  // Don't cache 0
     }
 
     // Nuke elements from the UI
@@ -1670,6 +1670,7 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
                                  child.removeAttribute('selected');
                                }
                              }
+                             this.dispatchEvent(new CustomEvent('select', {detail: {tabId: widget.selectedTabId}}));
                            });
                            this.#syncTabs(widget);
                            return widget;
@@ -1716,6 +1717,7 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
       view.setHideOnDetach();
       if (widget.selectedTabId !== id) {
         view.hideWidget();
+        child.classList.add('hidden');
       } else {
         view.showWidget();
       }

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -273,8 +273,8 @@ export const enum PanelOrDrawer {
 export class CommandMenuProvider extends Provider {
   private commands: Command[];
 
-  constructor(jslogContext: string, commandsForTest: Command[] = []) {
-    super(jslogContext);
+  constructor(commandsForTest: Command[] = []) {
+    super();
     this.commands = commandsForTest;
   }
 
@@ -453,7 +453,7 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
 registerProvider({
   prefix: '>',
   iconName: 'chevron-right',
-  provider: (jslogContext: string) => Promise.resolve(new CommandMenuProvider(jslogContext)),
+  provider: () => Promise.resolve(new CommandMenuProvider()),
   helpTitle: () => i18nString(UIStrings.runCommand),
   titlePrefix: () => i18nString(UIStrings.run),
   titleSuggestion: () => i18nString(UIStrings.command),

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -590,10 +590,7 @@ export interface EventTypes {
 
 export class Provider {
   private refreshCallback!: () => void;
-  jslogContext: string;
-  constructor(jslogContext: string) {
-    this.jslogContext = jslogContext;
-  }
+  jslogContext = '';
 
   setRefreshCallback(refreshCallback: () => void): void {
     this.refreshCallback = refreshCallback;
@@ -657,7 +654,7 @@ export function getRegisteredProviders(): ProviderRegistration[] {
 export interface ProviderRegistration {
   prefix: string;
   iconName: string;
-  provider: (jslogContext: string) => Promise<Provider>;
+  provider: () => Promise<Provider>;
   helpTitle: (() => string);
   titlePrefix: (() => string);
   titleSuggestion?: (() => string);

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -17,8 +17,8 @@ export class HelpQuickOpen extends Provider {
     jslogContext: string,
   }>;
 
-  constructor(jslogContext: string) {
-    super(jslogContext);
+  constructor() {
+    super();
     this.providers = [];
     getRegisteredProviders().forEach(this.addProvider.bind(this));
   }
@@ -74,8 +74,8 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'help',
-  provider: jslogContext => Promise.resolve(new HelpQuickOpen(jslogContext)),
+  provider: () => Promise.resolve(new HelpQuickOpen()),
   helpTitle: () => 'Help',
   titlePrefix: () => 'Help',
-  jslogContext: 'help'
+  jslogContext: 'help',
 });

package/front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -54,7 +54,11 @@ export class QuickOpenImpl {
     }
     this.prefixes.push(prefix);
     this.providers.set(prefix, {
-      provider: () => extension.provider(extension.jslogContext),
+      provider: async () => {
+        const provider = await extension.provider();
+        provider.jslogContext = extension.jslogContext;
+        return provider;
+      },
       titlePrefix: extension.titlePrefix,
       titleSuggestion: extension.titleSuggestion,
     });

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

@@ -611,7 +611,8 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       jslogContext: options.jslogContext || 'url',
       lineNumber,
       columnNumber,
-      userMetric: options?.userMetric
+      userMetric: options?.userMetric,
+      onRef: options.onRef,
     };
     return Linkifier.renderLink(linkText, className, linkOptions);
   }

package/front_end/ui/legacy/components/utils/imagePreview.css

@@ -12,7 +12,7 @@
 
 .image-preview-container img {
   margin: 6px 0;
-  max-width: 100px;
+  width: auto;
   max-height: 100px;
   background-image: var(--image-file-checker);
   user-select: text;

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1013,6 +1013,7 @@ export const knownContextValues = new Set([
   'copy-full-xpath',
   'copy-initiator-url',
   'copy-js-path',
+  'copy-key',
   'copy-link-address',
   'copy-object',
   'copy-outer-html',
@@ -1089,6 +1090,7 @@ export const knownContextValues = new Set([
   'cpu-throttling',
   'cpu-throttling-selector',
   'cpu-throttling-selector-calibrate',
+  'crash-report-context',
   'create-new-snippet',
   'create-profile',
   'create-recording',
@@ -1768,9 +1770,6 @@ export const knownContextValues = new Set([
   'freestyler.settings',
   'freestyler.style-tab-context',
   'full-accessibility',
-  'full-accessibility-tree',
-  'full-accessibility-tree-documentation',
-  'full-accessibility-tree-feedback',
   'full-version',
   'function',
   'galaxy-z-fold-5',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1606789"
+  "version": "1.0.1608868"
 }