chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

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

@@ -29,6 +29,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../../components/highlighting/highlighting.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -37,7 +39,6 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
-import * as Highlighting from '../../../components/highlighting/highlighting.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import {
   type DirectiveResult,
@@ -168,7 +169,7 @@ interface NodeChildren {
   accessors?: ObjectTreeNode[];
 }
 
-export interface ObjectTreeOptions {
+interface ObjectTreeOptions {
   readonly propertiesMode: ObjectPropertiesMode;
   readonly readOnly: boolean;
   readonly expansionTracker?: ObjectTreeExpansionTracker;
@@ -178,7 +179,7 @@ export interface ObjectTreeOptions {
 // WASM properties are index-based (e.g. locals[0], globals[1]); alphabetical
 // reordering would break the correspondence between displayed index and actual
 // index, so WASM objects are always shown in insertion order.
-export function isWasmObject(object: SDK.RemoteObject.RemoteObject|undefined): boolean {
+function isWasmObject(object: SDK.RemoteObject.RemoteObject|undefined): boolean {
   return object?.subtype === 'webassemblymemory' || object?.subtype === 'wasmvalue';
 }
 
@@ -703,7 +704,7 @@ interface ArrayGroupRange {
   count: number;
 }
 
-export class ArrayGroupTreeNode extends ObjectTreeNodeBase {
+class ArrayGroupTreeNode extends ObjectTreeNodeBase {
   readonly #object: SDK.RemoteObject.RemoteObject;
   readonly #range: ArrayGroupRange;
   constructor(object: SDK.RemoteObject.RemoteObject, range: ArrayGroupRange, parent: ObjectTreeNodeBase,
@@ -1244,19 +1245,6 @@ const ARRAY_LOAD_THRESHOLD = 100;
 
 const maxRenderableStringLength = 10000;
 
-export interface TreeOutlineOptions {
-  readOnly?: boolean;
-}
-
-export class ObjectPropertiesSectionsTreeOutline extends UI.TreeOutline.TreeOutlineInShadow {
-  constructor() {
-    super();
-    this.registerRequiredCSS(objectValueStyles, objectPropertiesSectionStyles);
-    this.contentElement.classList.add('source-code');
-    this.contentElement.classList.add('object-properties-section');
-  }
-}
-
 export const enum ObjectPropertiesMode {
   ALL = 0,                             // All properties, including prototype properties
   OWN_AND_INTERNAL_AND_INHERITED = 1,  // Own, internal, and inherited properties
@@ -1301,7 +1289,7 @@ export function populateObjectTreeContextMenu(
       {checked: object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
 }
 
-interface ObjectTreeViewInput {
+export interface ObjectTreeViewInput {
   renderAsSubtree: boolean;
   objectTree?: ObjectTree;
   linkifier?: Components.Linkifier.Linkifier;
@@ -1309,7 +1297,7 @@ interface ObjectTreeViewInput {
   skipProto: boolean;
   onExpand: (expanded: boolean) => void;
 }
-type ObjectTreeView = (input: ObjectTreeViewInput, output: object, target: HTMLElement) => void;
+export type ObjectTreeView = (input: ObjectTreeViewInput, output: object, target: HTMLElement) => void;
 export const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target) => {
   const objectTree = input.objectTree;
   if (!objectTree) {
@@ -1351,7 +1339,7 @@ export class ObjectTreeWidget extends UI.Widget.Widget {
   #skipProto = false;
   readonly #view: ObjectTreeView;
 
-  constructor(element?: HTMLElement, view = OBJECT_TREE_DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: ObjectTreeView = OBJECT_TREE_DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }
@@ -1543,10 +1531,9 @@ export function renderPropertyValue(value: SDK.RemoteObject.RemoteObject, wasThr
                                     variableName?: string, includeNullOrUndefined?: boolean, useCustomPreview = false,
                                     valueRef?: (element: Element|undefined) => void): LitTemplate {
   if (useCustomPreview && value.customPreview()) {
-    const result = (new CustomPreviewComponent(value)).element;
-    result.classList.add('object-properties-section-custom-section');
-    valueRef?.(result);
-    return html`${result}`;
+    return html`<devtools-widget class="object-properties-section-custom-section" ${
+        UI.Widget.widget(CustomPreviewComponent,
+                         {object: value})} ${valueRef ? Directives.ref(valueRef) : nothing}></devtools-widget>`;
   }
 
   const type = value.type;
@@ -1660,7 +1647,7 @@ export function defaultObjectPresentation(objectOrTree: SDK.RemoteObject.RemoteO
  * Number of initially visible children in an ObjectPropertyTreeElement.
  * Remaining children are shown as soon as requested via a show more properties button.
  **/
-export const InitialVisibleChildrenLimit = 200;
+const InitialVisibleChildrenLimit = 200;
 
 export interface ObjectPropertyViewInput {
   editable: boolean;
@@ -1676,13 +1663,10 @@ export interface ObjectPropertyViewInput {
   node: ObjectTreeNode;
   search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 }
-interface ObjectPropertyViewOutput {
-  valueElement: Element|undefined;
-  nameElement: Element|undefined;
-}
-type ObjectPropertyView = (input: ObjectPropertyViewInput, output: ObjectPropertyViewOutput, target: HTMLElement) =>
-    void;
-export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output, target) => {
+export type ObjectPropertyViewOutput = undefined;
+export type ObjectPropertyView =
+    (input: ObjectPropertyViewInput, output: ObjectPropertyViewOutput, target: HTMLElement) => void;
+export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, _output, target) => {
   const {property} = input.node;
   const isInternalEntries = property.synthetic && input.node.name === '[[Entries]]';
   const completionsId = `completions-${input.node.parent?.object?.objectId?.replaceAll('.', '-')}-${input.node.name}`;
@@ -1716,19 +1700,14 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
   const valueRanges =
       (entries ?? []).filter(e => e !== currentMatch && e.matchType === 'value').map(e => e.range.cssValue()).join(' ');
   const value = (): LitTemplate => {
-    const valueRef = ref(e => {
-      output.valueElement = e;
-    });
     if (isInternalEntries) {
-      return html`<span ${valueRef} class=value></span>`;
+      return html`<span class=value></span>`;
     }
     if (property.value) {
       const showPreview = property.name !== '[[Prototype]]';
       return renderPropertyValue(property.value, property.wasThrown, showPreview, input.linkifier, property.synthetic,
                                  input.node.path /* variableName */, input.node.includeNullOrUndefinedValues,
-                                 /* useCustomPreview */ true, e => {
-                                   output.valueElement = e;
-                                 });
+                                 /* useCustomPreview */ true);
     }
     if (property.getter) {
       const getter = property.getter;
@@ -1736,13 +1715,13 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
         event.consume();
         input.invokeGetter(getter);
       };
-      return html`<span ${valueRef}><span
+      return html`<span><span
         class=object-value-calculate-value-button
         title=${i18nString(UIStrings.invokePropertyGetter)}
         @click=${invokeGetter}
         >${i18nString(UIStrings.dots)}</span></span>`;
     }
-    return html`<span ${valueRef}
+    return html`<span
         class=object-value-unavailable
         title=${i18nString(UIStrings.valueNotAccessibleToTheDebugger)}>${
         i18nString(UIStrings.valueUnavailable)}</span>`;
@@ -1761,7 +1740,6 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
   // clang-format off
   render(
         html`<span class=name-and-value><span
-          ${ref(e => { output.nameElement = e; })}
           class=${nameClasses}
           title=${input.node.path}><devtools-highlight ranges=${nameRanges} current-range=${nameCurrent}>${property.private ?
             html`<span class="private-property-hash">${property.name[0]}</span>${
@@ -1795,10 +1773,7 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
 };
 
 export class ObjectPropertyWidget extends UI.Widget.Widget {
-  #highlightChanges: Highlighting.HighlightChange[] = [];
   #property?: ObjectTreeNode;
-  #nameElement?: Element;
-  #valueElement?: Element;
   #completions: string[] = [];
   #editing = false;
   readonly #view: ObjectPropertyView;
@@ -1807,7 +1782,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   #editable = false;
   #search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 
-  constructor(target?: HTMLElement, view = OBJECT_PROPERTY_DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: ObjectPropertyView = OBJECT_PROPERTY_DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }
@@ -1877,55 +1852,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
       startEditing: this.startEditing.bind(this),
       search: this.#search,
     };
-    const that = this;
-    const output: ObjectPropertyViewOutput = {
-      set nameElement(e: Element|undefined) {
-        that.#nameElement = e;
-      },
-      set valueElement(e: Element|undefined) {
-        that.#valueElement = e;
-      },
-    };
-    this.#view(input, output, this.element);
-  }
-
-  setSearchRegex(regex: RegExp, additionalCssClassName?: string): boolean {
-    let cssClasses = Highlighting.highlightedSearchResultClassName;
-    if (additionalCssClassName) {
-      cssClasses += ' ' + additionalCssClassName;
-    }
-    this.revertHighlightChanges();
-
-    if (this.#nameElement) {
-      this.#applySearch(regex, this.#nameElement, cssClasses);
-    }
-    if (this.property?.object) {
-      const valueType = this.property?.object.type;
-      if (valueType !== 'object' && this.#valueElement) {
-        this.#applySearch(regex, this.#valueElement, cssClasses);
-      }
-    }
-
-    return Boolean(this.#highlightChanges.length);
-  }
-
-  #applySearch(regex: RegExp, element: Element, cssClassName: string): void {
-    const ranges = [];
-    const content = element.textContent || '';
-    regex.lastIndex = 0;
-    let match = regex.exec(content);
-    while (match) {
-      ranges.push(new TextUtils.TextRange.SourceRange(match.index, match[0].length));
-      match = regex.exec(content);
-    }
-    if (ranges.length) {
-      Highlighting.highlightRangesWithStyleClass(element, ranges, cssClassName, this.#highlightChanges);
-    }
-  }
-
-  revertHighlightChanges(): void {
-    Highlighting.revertDomChanges(this.#highlightChanges);
-    this.#highlightChanges = [];
+    this.#view(input, undefined, this.element);
   }
 
   async #updateCompletions(expression: string, filter: string, force: boolean): Promise<void> {
@@ -2124,14 +2051,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  revertHighlightChanges(): void {
-    this.#widget.revertHighlightChanges();
-  }
-
-  setSearchRegex(regex: RegExp, additionalCssClassName?: string): boolean {
-    return this.#widget.setSearchRegex(regex, additionalCssClassName);
-  }
-
   // This is called by layout tests
   startEditing(): void {
     this.#widget.startEditing();
@@ -2522,7 +2441,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
   static sparseIterationThreshold = 250000;
 }
 
-interface ExpandableTextViewInput {
+export interface ExpandableTextViewInput {
   copyText: () => void;
   expandText: () => void;
   expanded: boolean;
@@ -2530,7 +2449,7 @@ interface ExpandableTextViewInput {
   byteCount: number;
   text: string;
 }
-type ExpandableTextView = (input: ExpandableTextViewInput, output: object, target: HTMLElement) => void;
+export type ExpandableTextView = (input: ExpandableTextViewInput, output: object, target: HTMLElement) => void;
 export const EXPANDABLE_TEXT_DEFAULT_VIEW: ExpandableTextView = (input, output, target) => {
   const totalBytesText = i18n.ByteUtilities.bytesToString(input.byteCount);
   const canExpand = input.text.length < ExpandableTextPropertyValue.MAX_DISPLAYABLE_TEXT_LENGTH;
@@ -2588,7 +2507,7 @@ export class ExpandableTextPropertyValue extends UI.Widget.Widget {
   #maxLength = ExpandableTextPropertyValue.EXPANDABLE_MAX_LENGTH;
   readonly #view: ExpandableTextView;
 
-  constructor(target?: HTMLElement, view = EXPANDABLE_TEXT_DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: ExpandableTextView = EXPANDABLE_TEXT_DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }

package/front_end/ui/legacy/components/object_ui/customPreviewComponent.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  display: inline-flex;
+}
+
 .custom-expandable-section {
   display: inline-flex;
   flex-direction: column;
@@ -11,8 +15,8 @@
 
 .custom-expand-icon {
   user-select: none;
-  margin-right: 4px;
-  margin-bottom: -4px;
+  margin-right: var(--sys-size-3);
+  margin-bottom: calc(-1 * var(--sys-size-3));
 }
 
 .custom-expandable-section-standard-section {
@@ -20,5 +24,5 @@
 }
 
 .custom-expandable-section-default-body {
-  padding-left: 12px;
+  padding-left: var(--sys-size-6);
 }

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -18,7 +18,7 @@
   color: var(--sys-color-on-surface);
   display: flex;
   flex-direction: column;
-  overflow-x: auto;
+  overflow: auto hidden;
 }
 
 .object-properties-section li,

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

@@ -495,10 +495,6 @@ export class FlameChart extends FlameChartBase implements NetworkTimeCalculator.
     }
   }
 
-  getBarHeight(): number {
-    return this.barHeight;
-  }
-
   setBarHeight(value: number): void {
     this.barHeight = value;
   }
@@ -1654,60 +1650,6 @@ export class FlameChart extends FlameChartBase implements NetworkTimeCalculator.
     this.canvas.addEventListener(eventName, onEvent);
   }
 
-  drawTrackOnCanvas(trackName: string, context: CanvasRenderingContext2D, minWidth: number):
-      {top: number, height: number, visibleEntries: Set<number>}|null {
-    const timelineData = this.timelineData();
-    if (!timelineData) {
-      return null;
-    }
-    const canvasWidth = this.offsetWidth;
-    const canvasHeight = this.offsetHeight;
-    context.save();
-    const ratio = window.devicePixelRatio;
-    context.scale(ratio, ratio);
-    context.fillStyle = 'rgba(0, 0, 0, 0)';
-    context.fillRect(0, 0, canvasWidth, canvasHeight);
-    context.font = this.#font;
-
-    const groups = this.rawTimelineData?.groups || [];
-    const groupOffsets = this.groupOffsets;
-    if (!groups.length || !groupOffsets) {
-      return null;
-    }
-    const trackIndex = groups.findIndex(g => g.name.includes(trackName));
-    if (trackIndex < 0) {
-      return null;
-    }
-    this.scrollGroupIntoView(trackIndex);
-    const group = groups[trackIndex];
-    const startLevel = group.startLevel;
-    const endLevel = groups[trackIndex + 1].startLevel;
-    const groupTop = groupOffsets[trackIndex];
-    const nextOffset = groupOffsets[trackIndex + 1];
-
-    const {drawBatches, titleIndices} = this.getDrawBatches(context, timelineData);
-
-    const entryIndexIsInTrack = (index: number): boolean => {
-      const barWidth = Math.min(this.#eventBarWidth(timelineData, index), canvasWidth);
-      return timelineData.entryLevels[index] >= startLevel && timelineData.entryLevels[index] < endLevel &&
-          barWidth > minWidth;
-    };
-    let allFilteredIndexes: number[] = [];
-    for (const [{color, outline}, {indexes}] of drawBatches) {
-      const filteredIndexes = indexes.filter(entryIndexIsInTrack);
-      allFilteredIndexes = [...allFilteredIndexes, ...filteredIndexes];
-      this.#drawBatchEvents(context, timelineData, color, filteredIndexes, outline);
-    }
-    const filteredTitleIndices = titleIndices.filter(entryIndexIsInTrack);
-    this.drawEventTitles(context, timelineData, filteredTitleIndices, canvasWidth);
-    context.restore();
-    return {
-      top: groupOffsets[trackIndex],
-      height: nextOffset - groupTop,
-      visibleEntries: new Set(allFilteredIndexes),
-    };
-  }
-
   private handleKeyboardGroupNavigation(event: Event): boolean {
     const keyboardEvent = (event as KeyboardEvent);
     let handled = false;
@@ -2595,14 +2537,6 @@ export class FlameChart extends FlameChartBase implements NetworkTimeCalculator.
     return barHeight;
   }
 
-  entryWidth(entryIndex: number): number {
-    const timelineData = this.timelineData();
-    if (!timelineData) {
-      return 0;
-    }
-    return this.#eventBarWidth(timelineData, entryIndex);
-  }
-
   #eventBarWidth(timelineData: FlameChartTimelineData, entryIndex: number): number {
     const {entryTotalTimes, entryStartTimes} = timelineData;
     const duration = entryTotalTimes[entryIndex];

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as BrickBreaker from './BrickBreaker.js';
 import * as ChartViewport from './ChartViewport.js';
 import * as FilmStripView from './FilmStripView.js';
 import * as FlameChart from './FlameChart.js';
@@ -17,7 +16,6 @@ import * as TimelineOverviewCalculator from './TimelineOverviewCalculator.js';
 import * as TimelineOverviewPane from './TimelineOverviewPane.js';
 
 export {
-  BrickBreaker,
   ChartViewport,
   FilmStripView,
   FlameChart,

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

@@ -4,10 +4,16 @@
  * found in the LICENSE file.
  */
 
+:host {
+  display: block;
+}
+
 .root {
   align-items: flex-start; /* keep chart at top so it doesnt change position as the legend changes height */
+  gap: var(--sys-size-6) 30px;
   display: flex;
-  min-width: fit-content;
+  flex-wrap: wrap;
+  justify-content: flex-start;
   white-space: nowrap;
 }
 
@@ -48,10 +54,6 @@
   stroke-linejoin: round;
 }
 
-.pie-chart-legend {
-  margin-left: 30px;
-}
-
 .pie-chart-legend-row {
   margin: 5px var(--sys-size-2) 5px auto;
   padding-right: 25px;

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

@@ -107,8 +107,8 @@ export interface EventTypes {
   [Events.EDITOR_SCROLL]: void;
 }
 
-type FormatFn = (lineNo: number, state: CodeMirror.EditorState) => string;
-export const LINE_NUMBER_FORMATTER = CodeMirror.Facet.define<FormatFn, FormatFn>({
+export type FormatFn = (lineNo: number, state: CodeMirror.EditorState) => string;
+export const LINE_NUMBER_FORMATTER: CodeMirror.Facet<FormatFn, FormatFn> = CodeMirror.Facet.define<FormatFn, FormatFn>({
   combine(value): FormatFn {
     if (value.length === 0) {
       return (lineNo: number) => lineNo.toString();
@@ -1184,7 +1184,8 @@ const nonBreakableLineMark = new (class extends CodeMirror.GutterMarker {
 })();
 
 /** Effect to add lines (by position) to the set of non-breakable lines. **/
-export const addNonBreakableLines = CodeMirror.StateEffect.define<readonly number[]>();
+export const addNonBreakableLines: CodeMirror.StateEffectType<readonly number[]> =
+    CodeMirror.StateEffect.define<readonly number[]>();
 
 const nonBreakableLines = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
   create(): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
@@ -1264,8 +1265,10 @@ export interface SourceFrameInfobar {
 }
 
 /** Infobar panel state, used to show additional panels below the editor. **/
-export const addSourceFrameInfobar = CodeMirror.StateEffect.define<SourceFrameInfobar>();
-export const removeSourceFrameInfobar = CodeMirror.StateEffect.define<SourceFrameInfobar>();
+export const addSourceFrameInfobar: CodeMirror.StateEffectType<SourceFrameInfobar> =
+    CodeMirror.StateEffect.define<SourceFrameInfobar>();
+export const removeSourceFrameInfobar: CodeMirror.StateEffectType<SourceFrameInfobar> =
+    CodeMirror.StateEffect.define<SourceFrameInfobar>();
 
 const sourceFrameInfobarState = CodeMirror.StateField.define<SourceFrameInfobar[]>({
   create(): SourceFrameInfobar[] {

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

@@ -217,7 +217,7 @@ export class StackTracePreviewContent extends UI.Widget.Widget<ShadowRoot> {
   #expanded = false;
   #showIgnoreListed = false;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: 'pure'});
     this.#view = view;
   }

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

@@ -1285,7 +1285,7 @@ export interface EventTypes {
   [Events.LIVE_LOCATION_UPDATED]: Bindings.LiveLocation.LiveLocation;
 }
 
-interface ScriptLocationViewInput {
+export interface ScriptLocationViewInput {
   target?: SDK.Target.Target;
   scriptId?: Protocol.Runtime.ScriptId;
   sourceURL: Platform.DevToolsPath.UrlString;
@@ -1294,9 +1294,9 @@ interface ScriptLocationViewInput {
   linkifier: Linkifier;
 }
 
-type ScriptLocationView = (input: ScriptLocationViewInput, output: undefined, target: HTMLElement) => void;
+export type ScriptLocationView = (input: ScriptLocationViewInput, output: undefined, target: HTMLElement) => void;
 
-const DEFAULT_SCRIPT_LOCATION_VIEW: ScriptLocationView = (input, _output, target) => {
+export const DEFAULT_SCRIPT_LOCATION_VIEW: ScriptLocationView = (input, _output, target) => {
   render(
       html`${
           input.linkifier.linkifyScriptLocation(
@@ -1310,10 +1310,10 @@ export class ScriptLocationLink extends UI.Widget.Widget {
   sourceURL = '' as Platform.DevToolsPath.UrlString;
   lineNumber?: number;
   options?: LinkifyOptions;
-  linkifier = new Linkifier();
+  linkifier: Linkifier = new Linkifier();
   #view: ScriptLocationView;
 
-  constructor(element: HTMLElement, view = DEFAULT_SCRIPT_LOCATION_VIEW) {
+  constructor(element: HTMLElement, view: ScriptLocationView = DEFAULT_SCRIPT_LOCATION_VIEW) {
     super(element);
     this.#view = view;
   }

package/front_end/ui/legacy/inspectorCommon.css

@@ -766,12 +766,6 @@ devtools-toolbar {
     padding: 0 var(--sys-size-1);
   }
 
-  devtools-adorner.fix-perf-icon {
-    --override-adorner-text-color: transparent;
-    --override-adorner-border-color: transparent;
-    --override-adorner-background-color: transparent;
-  }
-
   devtools-issue-counter.main-toolbar {
     margin-left: var(--sys-size-1);
     margin-right: var(--sys-size-1);
@@ -1301,3 +1295,44 @@ devtools-toolbar {
     }
   }
 }
+
+.devtools-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-size: var(--sys-typescale-body4-size);
+  gap: var(--sys-size-3);
+  padding: var(--sys-size-1) var(--sys-size-3) var(--sys-size-1) var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-extra-small);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  box-sizing: border-box;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active:not(:disabled, [aria-disabled="true"]),
+  &[aria-pressed="true"]:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible:not(:disabled, [aria-disabled="true"]) {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: var(--sys-size-2);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    color: var(--sys-color-state-disabled);
+    border-color: var(--sys-color-state-disabled);
+    cursor: not-allowed;
+  }
+}

package/front_end/ui/legacy/legacy.ts

@@ -42,6 +42,7 @@ import * as SoftContextMenu from './SoftContextMenu.js';
 import * as SoftDropDown from './SoftDropDown.js';
 import * as SplitWidget from './SplitWidget.js';
 import * as StackedPane from './StackedPane.js';
+import * as StatusBar from './StatusBar.js';
 import * as SuggestBox from './SuggestBox.js';
 import * as TabbedPane from './TabbedPane.js';
 import * as TargetCrashedScreen from './TargetCrashedScreen.js';
@@ -98,6 +99,7 @@ export {
   SoftDropDown,
   SplitWidget,
   StackedPane,
+  StatusBar,
   SuggestBox,
   TabbedPane,
   TargetCrashedScreen,

package/front_end/ui/legacy/statusBar.css

@@ -0,0 +1,18 @@
+/* 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. */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    flex: none;
+  }
+
+  .status-bar {
+    display: flex;
+    padding: var(--sys-size-4) var(--sys-size-5);
+    justify-content: space-between;
+    align-items: center;
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
+    background: var(--sys-color-cdt-base-container);
+  }
+}

package/front_end/ui/visual_logging/Debugging.ts

@@ -443,7 +443,8 @@ export const enum DebugLoggingFormat {
   AD_HOC_ANALYSIS = 'AdHocAnalysis',
 }
 
-export function setVeDebugLoggingEnabled(enabled: boolean, format = DebugLoggingFormat.INTUITIVE): void {
+export function setVeDebugLoggingEnabled(enabled: boolean,
+                                         format: DebugLoggingFormat = DebugLoggingFormat.INTUITIVE): void {
   if (enabled) {
     localStorage.setItem('veDebugLoggingEnabled', format);
   } else {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -13,7 +13,7 @@
  * See crbug.com/504758084 for details.
  */
 
-export const knownContextValues = new Set([
+export const knownContextValues: Set<string> = new Set([
   '%',
   '*',
   '-alternative-animation-with-timeline',
@@ -914,6 +914,7 @@ export const knownContextValues = new Set([
   'command',
   'command-editor',
   'command-input',
+  'comments-status-bar-pill',
   'comments.toggle-comment-mode',
   'commit',
   'compatibility-lookup-link',
@@ -1782,6 +1783,7 @@ export const knownContextValues = new Set([
   'flex-wrap',
   'flex-wrap-nowrap',
   'flex-wrap-wrap',
+  'flex-wrap-wrap-reverse',
   'flexbox-overlays',
   'float',
   'float-32-bit',