chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/ui/legacy/Widget.ts

@@ -673,8 +673,8 @@ const storedScrollPositions = new WeakMap<Element, {
 }>();
 
 export class VBox extends Widget {
-  constructor(isWebComponent?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
-    super(isWebComponent, delegatesFocus, element);
+  constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
+    super(useShadowDom, delegatesFocus, element);
     this.contentElement.classList.add('vbox');
   }
 
@@ -693,8 +693,8 @@ export class VBox extends Widget {
 }
 
 export class HBox extends Widget {
-  constructor(isWebComponent?: boolean) {
-    super(isWebComponent);
+  constructor(useShadowDom?: boolean) {
+    super(useShadowDom);
     this.contentElement.classList.add('hbox');
   }
 

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -35,7 +35,6 @@
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
@@ -237,7 +236,8 @@ export class CookiesTable extends UI.Widget.VBox {
       },
     ] as DataGrid.DataGrid.ColumnDescriptor[];
 
-    if (Root.Runtime.experiments.isEnabled('experimental-cookie-features')) {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config.devToolsEnableOriginBoundCookies?.schemeBindingEnabled) {
       const additionalColumns = [
         {
           id: SDK.Cookie.Attribute.SOURCE_SCHEME,
@@ -247,6 +247,11 @@ export class CookiesTable extends UI.Widget.VBox {
           weight: 7,
           editable,
         },
+      ] as DataGrid.DataGrid.ColumnDescriptor[];
+      columns.push(...additionalColumns);
+    }
+    if (config.devToolsEnableOriginBoundCookies?.portBindingEnabled) {
+      const additionalColumns = [
         {
           id: SDK.Cookie.Attribute.SOURCE_PORT,
           title: 'SourcePort',

package/front_end/ui/legacy/components/data_grid/DataGrid.test.ts

@@ -0,0 +1,51 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as UI from '../../legacy.js';
+
+import * as DataGrid from './data_grid.js';
+
+const {render, html} = LitHtml;
+const widgetRef = UI.Widget.widgetRef;
+
+describeWithEnvironment('DataGrid', () => {
+  it('can be instantiated from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
+
+    const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
+      implParams: {
+        displayName: 'testGrid',
+        columns: [{
+          id: 'test',
+          sortable: false,
+        }],
+      },
+      nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
+      markAsRoot: true,
+    };
+
+    // clang-format off
+        render(
+            html`
+        <devtools-data-grid-widget
+            .options=${dataGridOptions}
+            ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
+        ></devtools-data-grid-widget>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    assert.exists(widget);
+    // There is a single test row
+    assert.strictEqual(widget.dataGrid.rootNode().children.length, 1);
+  });
+});

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

@@ -228,7 +228,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.editing = false;
     this.selectedNode = null;
     this.expandNodesWhenArrowing = false;
-    this.setRootNode((new DataGridNode() as DataGridNode<T>));
+    this.setRootNode(new DataGridNode<T>());
 
     this.setHasSelection(false);
 
@@ -666,11 +666,16 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private startEditingConfig(_element: Element): UI.InplaceEditor.Config<any> {
-    return new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this));
+    return new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this), undefined);
   }
 
   private editingCommitted(
-      element: Element, newText: any, oldText: any, context: string|undefined, moveDirection: string): void {
+      element: Element,
+      newText: any,
+      _oldText: string|boolean|null,
+      _context: string|undefined,
+      moveDirection: string,
+      ): void {
     const columnId = this.columnIdFromNode(element);
     if (!columnId) {
       this.editingCancelled(element);
@@ -681,8 +686,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!this.editingNode) {
       return;
     }
-    const valueBeforeEditing =
-        (this.editingNode.data[columnId] === null ? '' : this.editingNode.data[columnId] as string | boolean);
+    const valueBeforeEditing = this.editingNode.data[columnId];
     const currentEditingNode = this.editingNode;
 
     function moveToNextIfNeeded(this: DataGridImpl<T>, wasChange: boolean): void {
@@ -1549,9 +1553,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return 0;
   }
 
-  asWidget(): DataGridWidget<T> {
+  asWidget(element?: HTMLElement): DataGridWidget<T> {
     if (!this.dataGridWidget) {
-      this.dataGridWidget = new DataGridWidget(this);
+      this.dataGridWidget = new DataGridWidget(this, element);
     }
     return this.dataGridWidget;
   }
@@ -2441,9 +2445,9 @@ export class CreationDataGridNode<T> extends DataGridNode<T> {
 }
 
 export class DataGridWidget<T> extends UI.Widget.VBox {
-  private readonly dataGrid: DataGridImpl<T>;
-  constructor(dataGrid: DataGridImpl<T>) {
-    super();
+  readonly dataGrid: DataGridImpl<T>;
+  constructor(dataGrid: DataGridImpl<T>, element?: HTMLElement) {
+    super(undefined, undefined, element);
     this.dataGrid = dataGrid;
     this.element.appendChild(dataGrid.element);
     this.setDefaultFocusedElement(dataGrid.element);
@@ -2466,6 +2470,92 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
     return [this.dataGrid.scrollContainer];
   }
 }
+
+export interface DataGridWidgetOptions<T> {
+  implParams: Parameters;
+  dataGridImpl?: DataGridImpl<T>;
+  markAsRoot?: boolean;
+  nodes: DataGridNode<T>[];
+}
+
+export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
+  #options: DataGridWidgetOptions<T>;
+
+  constructor() {
+    super();
+    // default values for options
+    this.#options = {
+      implParams: {
+        displayName: 'dataGrid',
+        columns: [],
+      },
+      nodes: [],
+    };
+  }
+
+  set options(options: DataGridWidgetOptions<T>) {
+    this.#options = options;
+  }
+
+  override createWidget(): DataGridWidget<T> {
+    const {
+      implParams,
+      markAsRoot,
+      nodes,
+    } = this.#options;
+
+    if (!this.#options.dataGridImpl) {
+      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
+    }
+
+    this.#options.dataGridImpl.rootNode().removeChildren();
+    for (const node of nodes) {
+      this.#options.dataGridImpl.rootNode().appendChild(node);
+    }
+
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    this.#options.dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    const widget = this.#options.dataGridImpl.asWidget(this);
+
+    if (markAsRoot) {
+      widget.markAsRoot();
+    }
+    return widget;
+  }
+
+  #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('selectedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #deselectedNode(): void {
+    const domEvent = new CustomEvent('deselectedNode');
+    this.dispatchEvent(domEvent);
+  }
+
+  #openedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('openedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #sortingChanged(): void {
+    const domEvent = new CustomEvent('sortingChanged');
+    this.dispatchEvent(domEvent);
+  }
+
+  #paddingChanged(): void {
+    const domEvent = new CustomEvent('paddingChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-data-grid-widget', DataGridWidgetElement);
+
 export interface Parameters {
   displayName: string;
   columns: ColumnDescriptor[];

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

@@ -14,7 +14,15 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     DataGridImpl)<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
   private visibleNodes: ViewportDataGridNode<T>[];
-  stickToBottom: boolean;
+  /** A datagrid preference to express that the grid represents an updating log of rows (eg Network panel request log, websocket messages).
+   * If `true`, the datagrid will mostly keep the scroll at the bottom, so new items are visible.
+   * If the data is sorted descending (eg Performance Call Tree, heap snapshot), keep the default of `false`.
+   */
+  enableAutoScrollToBottom: boolean = false;
+  /** When true, the datagrid will manipulate the scrollTop to focus on the bottom, mostly so new additions are visible.
+   * Some actions will unset this, like revealing or expanding a particular node.
+   * Only matters if enableAutoScrollToBottom is true. */
+  keepScrollingToBottom: boolean = false;
   private updateIsFromUser: boolean;
   private lastScrollTop: number;
   private firstVisibleIsStriped: boolean;
@@ -29,7 +37,6 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     this.visibleNodes = [];
     this.inline = false;
 
-    this.stickToBottom = false;
     this.updateIsFromUser = false;
     this.lastScrollTop = 0;
     this.firstVisibleIsStriped = false;
@@ -60,15 +67,15 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
   }
 
   override onResize(): void {
-    if (this.stickToBottom) {
+    if (this.keepScrollingToBottom) {
       this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
     }
     this.scheduleUpdate();
     super.onResize();
   }
 
-  setStickToBottom(stick: boolean): void {
-    this.stickToBottom = stick;
+  setEnableAutoScrollToBottom(stick: boolean): void {
+    this.keepScrollingToBottom = this.enableAutoScrollToBottom = stick;
   }
 
   private onScroll(_event: Event|null): void {
@@ -131,8 +138,10 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       bottomPadding += nodes[i].nodeSelfHeight();
     }
 
-    // enable stick-to-bottom if the last item is visible
-    this.stickToBottom = end === nodes.length;
+    if (this.enableAutoScrollToBottom) {
+      // If we're scrolled to the very end, keep the scroll viewport focused to the end (as new items arrive)
+      this.keepScrollingToBottom = end === nodes.length;
+    }
 
     return {
       topPadding,
@@ -157,7 +166,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     let scrollTop: number = this.scrollContainer.scrollTop;
     const currentScrollTop = scrollTop;
     const maxScrollTop = Math.max(0, this.contentHeight() - clientHeight);
-    if (!this.updateIsFromUser && this.stickToBottom) {
+    if (!this.updateIsFromUser && this.keepScrollingToBottom) {
       scrollTop = maxScrollTop;
     }
     this.updateIsFromUser = false;
@@ -185,7 +194,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       const nodes = (this.rootNode() as ViewportDataGridNode<T>).flatChildren();
       const index = nodes.indexOf(visibleNodes[0]);
       this.updateStripesClass(Boolean(index % 2));
-      if (this.stickToBottom && index !== -1 && Boolean(index % 2) !== this.firstVisibleIsStriped) {
+      if (this.keepScrollingToBottom && index !== -1 && Boolean(index % 2) !== this.firstVisibleIsStriped) {
         offset += 1;
       }
     }
@@ -233,7 +242,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeightInScroller();
     if (scrollTop > fromY) {
       scrollTop = fromY;
-      this.stickToBottom = false;
+      this.keepScrollingToBottom = false;
     } else if (scrollTop + visibleHeight < toY) {
       scrollTop = toY - visibleHeight;
     }
@@ -410,7 +419,7 @@ export class ViewportDataGridNode<T> extends DataGridNode<ViewportDataGridNode<T
     if (this.expanded) {
       return;
     }
-    (this.dataGrid as ViewportDataGrid<T>).stickToBottom = false;
+    (this.dataGrid as ViewportDataGrid<T>).keepScrollingToBottom = false;
     this.clearFlatNodes();
     super.expand();
     (this.dataGrid as ViewportDataGrid<T>).scheduleUpdateStructure();

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -86,6 +86,10 @@
 .data-grid tbody tr {
   display: none;
   height: 20px;
+
+  &:has(td.show-more) {
+    height: var(--sys-size-13);
+  }
 }
 
 .data-grid tbody tr.revealed {
@@ -291,10 +295,13 @@
 
 .data-grid td.show-more {
   white-space: normal;
-  gap: 4px;
+  gap: var(--sys-size-3);
 
   devtools-button {
     margin-right: var(--sys-size-6);
+    position: relative;
+    margin-top: 3px;
+    margin-bottom: 3px;
   }
 }
 

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -2,14 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './CSSAngleSwatch.js';
 import './CSSAngleEditor.js';
+import './CSSAngleSwatch.js';
 
 import * as LitHtml from '../../../lit-html/lit-html.js';
 
 import cssAngleStyles from './cssAngle.css.js';
-import type {CSSAngleEditorData} from './CSSAngleEditor.js';
-import type {CSSAngleSwatchData} from './CSSAngleSwatch.js';
 import {
   type Angle,
   AngleUnit,
@@ -61,7 +59,6 @@ const DefaultAngle = {
 };
 
 export class CSSAngle extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = DefaultAngle;
   private displayedAngle: Angle = DefaultAngle;
@@ -236,7 +233,7 @@ export class CSSAngle extends HTMLElement {
             @dblclick=${this.consume}
             .data=${{
               angle: this.angle,
-            } as CSSAngleSwatchData}>
+            }}>
           </devtools-css-angle-swatch><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
@@ -264,10 +261,10 @@ export class CSSAngle extends HTMLElement {
           this.updateAngle(angle);
         },
         background: contextualBackground,
-      } as CSSAngleEditorData}
+      }}
     ></devtools-css-angle-editor>
     `;
-    // clang-format on
+        // clang-format on
   }
 }
 

package/front_end/ui/legacy/components/inline_editor/CSSAngleEditor.ts

@@ -28,7 +28,6 @@ export interface CSSAngleEditorData {
 }
 
 export class CSSAngleEditor extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle-editor`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = {
     value: 0,

package/front_end/ui/legacy/components/inline_editor/CSSAngleSwatch.ts

@@ -17,7 +17,6 @@ export interface CSSAngleSwatchData {
 }
 
 export class CSSAngleSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle-swatch`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = {

package/front_end/ui/legacy/components/inline_editor/CSSLength.ts

@@ -57,7 +57,6 @@ type CSSLengthData = {
 };
 
 export class CSSLength extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-length`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private readonly onDraggingValue = this.dragValue.bind(this);

package/front_end/ui/legacy/components/inline_editor/ColorMixSwatch.ts

@@ -20,7 +20,6 @@ export interface EventTypes {
 }
 
 export class ColorMixSwatch extends Common.ObjectWrapper.eventMixin<EventTypes, typeof HTMLElement>(HTMLElement) {
-  static readonly litTagName = LitHtml.literal`devtools-color-mix-swatch`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private colorMixText: string = '';     // color-mix(in srgb, hotpink, white)
   private firstColorText: string = '';   // hotpink

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -41,7 +41,6 @@ export class ClickEvent extends Event {
 }
 
 export class ColorSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-color-swatch`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
   private color: Common.Color.Color|null = null;

package/front_end/ui/legacy/components/inline_editor/LinkSwatch.test.ts

@@ -34,6 +34,25 @@ describeWithLocale('CSSVarSwatch', () => {
     assert.instanceOf(component, HTMLElement, 'The swatch is an instance of HTMLElement');
   });
 
+  it('renders a var function with empty computed value', () => {
+    const component = new InlineEditor.LinkSwatch.CSSVarSwatch();
+    renderElementIntoDOM(component);
+    component.data = {
+      variableName: '--test',
+      computedValue: '',
+      fromFallback: false,
+      fallbackText: null,
+      onLinkActivate: () => {},
+    };
+
+    assertVarSwatch(component, {
+      valueTooltip: '',
+      linkTooltip: '',
+      isDefined: true,
+      varText: '--test',
+    });
+  });
+
   it('renders a var function without fallback', () => {
     const component = new InlineEditor.LinkSwatch.CSSVarSwatch();
     renderElementIntoDOM(component);

package/front_end/ui/legacy/components/inline_editor/LinkSwatch.ts

@@ -30,7 +30,6 @@ interface BaseLinkSwatchRenderData {
 }
 
 class BaseLinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-base-link-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
   protected onLinkActivate: (linkText: string, event: MouseEvent|KeyboardEvent) => void = () => undefined;
   #linkElement: HTMLSpanElement|undefined;
@@ -91,7 +90,6 @@ interface CSSVarSwatchRenderData {
 }
 
 export class CSSVarSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-var-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
   #link: BaseLinkSwatch|undefined;
 
@@ -120,7 +118,7 @@ export class CSSVarSwatch extends HTMLElement {
   protected render(data: CSSVarSwatchRenderData): void {
     const {variableName, fromFallback, computedValue, onLinkActivate} = data;
 
-    const isDefined = Boolean(computedValue) && !fromFallback;
+    const isDefined = computedValue !== null && !fromFallback;
     const title = isDefined ? computedValue ?? '' : i18nString(UIStrings.sIsNotDefined, {PH1: variableName});
 
     this.#link = new BaseLinkSwatch();
@@ -150,7 +148,6 @@ export interface LinkSwatchRenderData {
 }
 
 export class LinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-link-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
 
   set data(data: LinkSwatchRenderData) {

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -60,7 +60,6 @@ export class BezierSwatch extends HTMLSpanElement {
 }
 
 export class CSSShadowSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`css-shadow-swatch`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #icon: IconButton.Icon.Icon;
   readonly #model: CSSShadowModel;
@@ -76,7 +75,7 @@ export class CSSShadowSwatch extends HTMLElement {
         html`<devtools-icon name="shadow" class="shadow-swatch-icon"></devtools-icon><slot></slot>`, this.#shadow,
         {host: this});
 
-    this.#icon = this.#shadow.querySelector(IconButton.Icon.Icon.litTagName.value as string) as IconButton.Icon.Icon;
+    this.#icon = this.#shadow.querySelector('devtools-icon') as IconButton.Icon.Icon;
   }
 
   model(): CSSShadowModel {

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

@@ -127,7 +127,7 @@ const UIStrings = {
    * which are based on bytes and can be shown in a hexadecimal viewer.
    * Clicking on the button will display that object in the Memory inspector panel.
    */
-  revealInMemoryInpector: 'Reveal in Memory inspector panel',
+  openInMemoryInpector: 'Open in Memory inspector panel',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/ObjectPropertiesSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -391,7 +391,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     });
     memoryIcon.setAttribute('jslog', `${VisualLogging.action('open-memory-inspector').track({click: true})}`);
 
-    const revealText = i18nString(UIStrings.revealInMemoryInpector);
+    const revealText = i18nString(UIStrings.openInMemoryInpector);
     UI.Tooltip.Tooltip.install(memoryIcon, revealText);
     UI.ARIAUtils.setLabel(memoryIcon, revealText);
 
@@ -1715,7 +1715,7 @@ export class ExpandableTextPropertyValue extends ObjectPropertyValue {
     this.maxDisplayableTextLength = 10000000;
 
     const byteCount = Platform.StringUtilities.countWtf8Bytes(text);
-    const totalBytesText = Platform.NumberUtilities.bytesToString(byteCount);
+    const totalBytesText = i18n.ByteUtilities.bytesToString(byteCount);
     if (this.text.length < this.maxDisplayableTextLength) {
       this.expandElementText = i18nString(UIStrings.showMoreS, {PH1: totalBytesText});
       this.expandElement.setAttribute('data-text', this.expandElementText);

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

@@ -3,16 +3,7 @@
 // found in the LICENSE file.
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
-import {ARROW_SIDE, type Legend} from './FlameChart.js';
-import {getFontFamilyForCanvas} from './Font.js';
-
-const LEGEND_SHAPE_DIMENSION = 8;
-const LEGEND_SHAPE_RADIUS = 2;
-const LEGEND_SHAPE_TEXT_GAP = 4;
-const LEGEND_ITEM_GAP = 12;
-
-// The DEFAULT_FONT_SIZE is 11px, the legends' font size should be slightly smaller.
-const LEGEND_FONT_SIZE = '8px';
+import {ARROW_SIDE} from './FlameChart.js';
 
 export function horizontalLine(context: CanvasRenderingContext2D, width: number, y: number): void {
   context.moveTo(0, y);
@@ -62,76 +53,3 @@ export function drawIcon(
   context.fill(p);
   context.restore();
 }
-
-export function drawLegends(context: CanvasRenderingContext2D, x: number, y: number, legends: Legend[]): void {
-  context.save();
-  context.translate(x, y);
-  let xForLegend = 0;
-  for (const legend of legends) {
-    xForLegend = drawOneLegend(context, xForLegend, 4, legend.color, legend.category);
-  }
-  context.restore();
-}
-
-/**
- * Draw a legend for the given color and category.
- *
- * @param color should be a string parsed as CSS <color> value
- * @returns the x offset of the current legend
- */
-function drawOneLegend(
-    context: CanvasRenderingContext2D, x: number, y: number, color: string, category: string): number {
-  context.save();
-
-  context.beginPath();
-  context.fillStyle = color;
-  drawRoundedRectangle(context, x, y, LEGEND_SHAPE_DIMENSION, LEGEND_SHAPE_DIMENSION, LEGEND_SHAPE_RADIUS);
-  context.fill();
-
-  context.textBaseline = 'top';
-  context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
-  context.font = `${LEGEND_FONT_SIZE} ${getFontFamilyForCanvas()}`;
-  context.fillText(category, x + LEGEND_SHAPE_DIMENSION + LEGEND_SHAPE_TEXT_GAP, y);
-  const renderedTextWidth = context.measureText(category).width;
-  const endXPositionForEntry = x + LEGEND_SHAPE_DIMENSION + LEGEND_SHAPE_TEXT_GAP + renderedTextWidth;
-
-  context.restore();
-
-  return endXPositionForEntry + LEGEND_ITEM_GAP;
-}
-
-function drawRoundedRectangle(
-    context: CanvasRenderingContext2D, startX: number, startY: number, width: number, height: number,
-    borderRadius: number): void {
-  context.save();
-  const endY = startY + height;
-  const endX = startX + width;
-
-  const bezierCurveHandlerAmount = borderRadius * 0.25;
-
-  context.beginPath();
-  // Start at the top left, and draw a line to the top right.
-  context.moveTo(startX + borderRadius, startY);
-  context.lineTo(endX - borderRadius, startY);
-  // Curve from top right corner round and down
-  context.bezierCurveTo(
-      endX - bezierCurveHandlerAmount, startY, endX, startY + bezierCurveHandlerAmount, endX, startY + borderRadius);
-  // Draw down to bottom right corner
-  context.lineTo(endX, endY - borderRadius);
-  // Curve from bottom right corner round to face the bottom left corner
-  context.bezierCurveTo(
-      endX, endY - bezierCurveHandlerAmount, endX - bezierCurveHandlerAmount, endY, endX - borderRadius, endY);
-  // Draw line to bottom left corner
-  context.lineTo(startX + borderRadius, endY);
-  // Curve round and up from bottom left corner
-  context.bezierCurveTo(
-      startX + bezierCurveHandlerAmount, endY, startX, endY - bezierCurveHandlerAmount, startX, endY - borderRadius);
-  // Draw line up to top left corner
-  context.lineTo(startX, startY + borderRadius);
-  // Curve from top left corner round to meet the line we first drew.
-  context.bezierCurveTo(
-      startX, startY + bezierCurveHandlerAmount, startX + bezierCurveHandlerAmount, startY, startX + borderRadius,
-      startY);
-  context.closePath();
-  context.restore();
-}