chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/front_end/models/trace/README.md

@@ -31,7 +31,7 @@ This folder contains the new trace engine that was first implemented for the Per
                          │
                          │
       ┌──────────────────▼─────────────────┐
-      │const data = model.parsedTrace()│
+      │const data = model.parsedTrace()    │
       └────────────────────────────────────┘
 ```
 
@@ -98,3 +98,30 @@ The object returned from `parsedTrace()` is an object of key-value pairs where e
   // and so on for each enabled Handler
 }
 ```
+
+## Pairing begin & end events
+
+Note: this detail is not useful if you are using the Trace Engine, but it is if you are working on it.
+
+Trace events are often emitted as `begin` & `end` events to represent the lifetime of the event. These have the `b` and `e` phase.
+
+When we find these events, we often try to pair them into what we call a "Synthetic" event. This is a trace event that doesn't exist in the raw trace, but one that we create to make it easier to deal with. This means we can represent a `b` & `e` pair as a single event rather than pass two events around.
+
+When we pair these events, we look for an ID. Some events have a top level `id` field, others have a nested `id2.local` field (this is for various historical reasons). `getSyntheticId` in `Trace.Helpers` takes care of this, and tries to account for potential collisions by appending a few other pieces of metadata onto the ID.
+
+This approach worked well until July 2025 when an upstream change in Perfetto [https://chromium.googlesource.com/external/github.com/google/perfetto.git/+/aef636b27ffbf379fd722e7798030da2c5c4d699] meant that Perfetto will try to minimise the amount of unique IDs it uses. A consequence of this change is that IDs can be reused by consecutive, non-overlapping events.
+
+For example, take the following set of events:
+
+```
+=== E1 === === E2 ===
+```
+
+These could have the same ID, because they do not overlap.
+
+Whereas these events will have different IDs because otherwise you cannot reliably pair them up:
+
+```
+=== E1 ===
+  === E2 ===
+```

package/front_end/models/trace/handlers/UserTimingsHandler.ts

@@ -223,9 +223,9 @@ export async function finalize(): Promise<void> {
 
 export function data(): UserTimingsData {
   return {
+    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
     performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing') as
         Types.Events.SyntheticUserTimingPair[],
-    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
     performanceMarks: performanceMarkEvents,
     timestampEvents,
     measureTraceByTraceId,

package/front_end/models/trace/helpers/Trace.ts

@@ -12,6 +12,7 @@ import {SyntheticEventsManager} from './SyntheticEvents.js';
 import {eventTimingsMicroSeconds} from './Timing.js';
 
 interface MatchingPairableAsyncEvents {
+  syntheticId: string;
   begin: Types.Events.PairableAsyncBegin|null;
   end: Types.Events.PairableAsyncEnd|null;
   instant?: Types.Events.PairableAsyncInstant[];
@@ -290,62 +291,113 @@ export function makeProfileCall(
 }
 
 /**
- * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant (ASYNC_NESTABLE_INSTANT)
- * if provided, though currently only coming from Animations. Traces may contain multiple instant events so we need to
- * account for that.
+ * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant
+ * if provided. Traces may contain multiple instant events so we need to
+ * account for that. Additionally we have seen cases where we might only have a
+ * begin event & instant event(s), with no end event. So we account for that
+ * situation also.
  *
- * @returns Map of the animation's ID to it's matching events.
+ * You might also like to read the models/trace/README.md which has some
+ * documentation on trace IDs. This is important as Perfetto will reuse trace
+ * IDs when emitting events (if they do not overlap). This means it's not as
+ * simple as grouping events by IDs. Instead, we group begin & instant events
+ * by ID as we find them. When we find end events, we then pop any matching
+ * begin/instant events off the stack and group those. That way, if we meet the
+ * same ID later on it doesn't cause us collisions.
+ *
+ * @returns An array of all the matched event groups, along with their ID. Note
+ * that two event groups can have the same ID if they were non-overlapping
+ * events. You cannot rely on ID being unique across a trace. The returned set
+ * of groups are NOT SORTED in any order.
  */
-export function matchEvents(unpairedEvents: Types.Events.PairableAsync[]): Map<string, MatchingPairableAsyncEvents> {
+function matchEvents(unpairedEvents: Types.Events.PairableAsync[]): MatchingPairableAsyncEvents[] {
+  sortTraceEventsInPlace(unpairedEvents);
   // map to store begin and end of the event
-  const matchedPairs = new Map<string, MatchingPairableAsyncEvents>();
+  const matches: MatchingPairableAsyncEvents[] = [];
 
-  // looking for start and end
+  const beginEventsById = new Map<string, Types.Events.PairableAsyncBegin[]>();
+  const instantEventsById = new Map<string, Types.Events.PairableAsyncInstant[]>();
   for (const event of unpairedEvents) {
-    const syntheticId = getSyntheticId(event);
-    if (syntheticId === undefined) {
+    const id = getSyntheticId(event);
+    if (id === undefined) {
       continue;
     }
-    // Create a synthetic id to prevent collisions across categories.
-    // Console timings can be dispatched with the same id, so use the
-    // event name as well to generate unique ids.
-    const otherEventsWithID = Platform.MapUtilities.getWithDefault(matchedPairs, syntheticId, () => {
-      return {begin: null, end: null, instant: []};
-    });
-
-    const isStartEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_START;
-    const isEndEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_END;
-    const isInstantEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_INSTANT;
-
-    if (isStartEvent) {
-      otherEventsWithID.begin = event as Types.Events.PairableAsyncBegin;
-    } else if (isEndEvent) {
-      otherEventsWithID.end = event as Types.Events.PairableAsyncEnd;
-    } else if (isInstantEvent) {
-      if (!otherEventsWithID.instant) {
-        otherEventsWithID.instant = [];
+    if (Types.Events.isPairableAsyncBegin(event)) {
+      const existingEvents = beginEventsById.get(id) ?? [];
+      existingEvents.push(event);
+      beginEventsById.set(id, existingEvents);
+    } else if (Types.Events.isPairableAsyncInstant(event)) {
+      const existingEvents = instantEventsById.get(id) ?? [];
+      existingEvents.push(event);
+      instantEventsById.set(id, existingEvents);
+    } else if (Types.Events.isPairableAsyncEnd(event)) {
+      // Find matching begin event by ID
+      const beginEventsWithMatchingId = beginEventsById.get(id) ?? [];
+      const beginEvent = beginEventsWithMatchingId.pop();
+      if (!beginEvent) {
+        continue;
       }
-      otherEventsWithID.instant.push(event as Types.Events.PairableAsyncInstant);
+      const instantEventsWithMatchingId = instantEventsById.get(id) ?? [];
+      // Find all instant events after the begin event ts.
+      const instantEventsForThisGroup: Types.Events.PairableAsyncInstant[] = [];
+      while (instantEventsWithMatchingId.length > 0) {
+        if (instantEventsWithMatchingId[0].ts >= beginEvent.ts) {
+          const event = instantEventsWithMatchingId.pop();
+          if (event) {
+            instantEventsForThisGroup.push(event);
+          }
+        } else {
+          break;
+        }
+      }
+      const matchingGroup: MatchingPairableAsyncEvents = {
+        begin: beginEvent,
+        end: event,
+        instant: instantEventsForThisGroup,
+        syntheticId: id,
+      };
+      matches.push(matchingGroup);
     }
   }
-  return matchedPairs;
+
+  // At this point we know we have paired up all the Begin & End & Instant
+  // events. But it is possible to see only begin & instant events with the
+  // same ID, and no end event. So now we do a second pass through our begin
+  // events to find any that did not have an end event. If we find some
+  // instant events for the begin event, we create a new group.
+  // Also, because there were no end events, we know that the IDs will be
+  // unique now; e.g. each key in the map should have no more than one item in
+  // it.
+  for (const [id, beginEvents] of beginEventsById) {
+    const beginEvent = beginEvents.pop();
+    if (!beginEvent) {
+      continue;
+    }
+    const matchingInstantEvents = instantEventsById.get(id);
+    if (matchingInstantEvents?.length) {
+      matches.push({
+        syntheticId: id,
+        begin: beginEvent,
+        end: null,
+        instant: matchingInstantEvents,
+      });
+    }
+  }
+
+  return matches;
 }
 
-function getSyntheticId(event: Types.Events.PairableAsync): string|undefined {
+export function getSyntheticId(event: Types.Events.PairableAsync): string|undefined {
   const id = extractId(event);
   return id && `${event.cat}:${id}:${event.name}`;
 }
 
-export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    matchedPairs: Map<string, {
-      begin: Types.Events.PairableAsyncBegin | null,
-      end: Types.Events.PairableAsyncEnd | null,
-      instant?: Types.Events.PairableAsyncInstant[],
-    }>,
-    syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void,
+function createSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
+    matchedPairs: MatchingPairableAsyncEvents[],
     ): Array<Types.Events.SyntheticEventPair<T>> {
   const syntheticEvents: Array<Types.Events.SyntheticEventPair<T>> = [];
-  for (const [id, eventsTriplet] of matchedPairs.entries()) {
+  for (const eventsTriplet of matchedPairs) {
+    const id = eventsTriplet.syntheticId;
     const beginEvent = eventsTriplet.begin;
     const endEvent = eventsTriplet.end;
     const instantEvents = eventsTriplet.instant;
@@ -399,17 +451,21 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
       // crbug.com/1472375
       continue;
     }
-    syntheticEventCallback?.(event);
     syntheticEvents.push(event);
   }
-  return syntheticEvents.sort((a, b) => a.ts - b.ts);
+  sortTraceEventsInPlace(syntheticEvents);
+  return syntheticEvents;
 }
 
-export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    unpairedAsyncEvents: T[], syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void):
+/**
+ * Groups up sets of async events into synthetic events.
+ * @param unpairedAsyncEvents the raw array of begin, end and async instant
+ * events. These MUST be sorted in timestamp ASC order.
+ */
+export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(unpairedAsyncEvents: T[]):
     Array<Types.Events.SyntheticEventPair<T>> {
   const matchedPairs = matchEvents(unpairedAsyncEvents);
-  const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs, syntheticEventCallback);
+  const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs);
   return syntheticEvents;
 }
 

package/front_end/models/trace/types/TraceEvents.ts

@@ -1358,6 +1358,15 @@ export interface PairableAsyncInstant extends PairableAsync {
 export interface PairableAsyncEnd extends PairableAsync {
   ph: Phase.ASYNC_NESTABLE_END;
 }
+export function isPairableAsyncBegin(e: Event): e is PairableAsyncBegin {
+  return e.ph === Phase.ASYNC_NESTABLE_START;
+}
+export function isPairableAsyncEnd(e: Event): e is PairableAsyncEnd {
+  return e.ph === Phase.ASYNC_NESTABLE_END;
+}
+export function isPairableAsyncInstant(e: Event): e is PairableAsyncInstant {
+  return e.ph === Phase.ASYNC_NESTABLE_INSTANT;
+}
 
 export interface AnimationFrame extends PairableAsync {
   name: Name.ANIMATION_FRAME;

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -1,14 +1,15 @@
 // Copyright 2016 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 rulesdir/no-imperative-dom-api */
 
 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 UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import accessibilityPropertiesStyles from './accessibilityProperties.css.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 import {ariaMetadata} from './ARIAMetadata.js';
 
@@ -24,214 +25,135 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/ARIAAttributesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html} = Lit;
+
+interface ViewInput {
+  propertyCompletions: Map<SDK.DOMModel.Attribute, string[]>;
+  onStartEditing: (attribute: SDK.DOMModel.Attribute) => void;
+  onCommitEditing: (attribute: SDK.DOMModel.Attribute, result: string) => void;
+  onCancelEditing: (attribute: SDK.DOMModel.Attribute) => void;
+  attributeBeingEdited: SDK.DOMModel.Attribute|null;
+  attributes: SDK.DOMModel.Attribute[];
+}
+
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const MAX_CONTENT_LENGTH = 10000;
+
+  const onStartEditing = (attribute: SDK.DOMModel.Attribute, e: MouseEvent): void => {
+    e.consume(true);
+    input.onStartEditing(attribute);
+  };
+
+  const propertyCompletions = (attribute: SDK.DOMModel.Attribute): Lit.LitTemplate => {
+    const values = input.propertyCompletions.get(attribute);
+    if (!values?.length) {
+      return Lit.nothing;
+    }
+
+    return html`<datalist id=completions>
+      ${values.map(value => html`<option>${value}</option>`)}
+    </datalist>`;
+  };
+
+  render(
+      // clang-format off
+      input.attributes.length === 0 ?
+         html`
+          <style>${accessibilityPropertiesStyles}</style>
+          <devtools-widget
+            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget,
+                                                   {text: i18nString(UIStrings.noAriaAttributes)})}
+            class="gray-info-message info-message-overflow"></devtools-widget>` :
+         html`<devtools-tree
+           hide-overflow
+           .template=${html`
+             <ul role="tree">
+              ${input.attributes?.map(attribute => html`
+                <li role="treeitem">
+                  <style>${accessibilityPropertiesStyles}</style>
+                  <span class="ax-name monospace" @mousedown=${onStartEditing.bind(null, attribute)}>
+                    ${attribute.name}
+                  </span>
+                  <span class="separator" @mousedown=${onStartEditing.bind(null, attribute)}>${':\xA0'}</span>
+                  <devtools-prompt
+                    completions=completions
+                    class="monospace"
+                    @mousedown=${onStartEditing.bind(null, attribute)}
+                    .completionTimeout=${0}
+                    ?editing=${input.attributeBeingEdited === attribute}
+                    @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) =>
+                      input.onCommitEditing(attribute, e.detail)}
+                    @cancel=${() => input.onCancelEditing(attribute)}>
+                      ${Platform.StringUtilities.trimMiddle(attribute.value, MAX_CONTENT_LENGTH)}
+                      ${propertyCompletions(attribute)}
+                  </devtools-prompt>
+                </li>`)}
+             </ul>
+           `}></devtools-tree>`,
+      // clang-format on
+      target);
+};
+
 export class ARIAAttributesPane extends AccessibilitySubPane {
-  private readonly noPropertiesInfo: Element;
-  private readonly treeOutline: UI.TreeOutline.TreeOutline;
+  readonly #view: View;
+  #attributeBeingEdited: SDK.DOMModel.Attribute|null = null;
 
-  constructor() {
+  constructor(view = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.ariaAttributes),
       viewId: 'aria-attributes',
       jslog: `${VisualLogging.section('aria-attributes')}`,
     });
 
-    this.noPropertiesInfo = this.createInfo(i18nString(UIStrings.noAriaAttributes));
-    this.treeOutline = this.createTreeOutline();
+    this.#view = view;
   }
 
   override setNode(node: SDK.DOMModel.DOMNode|null): void {
     super.setNode(node);
-    this.treeOutline.removeChildren();
-    if (!node) {
-      return;
-    }
-    const target = node.domModel().target();
-    const attributes = node.attributes();
-    for (let i = 0; i < attributes.length; ++i) {
-      const attribute = attributes[i];
-      if (!this.isARIAAttribute(attribute)) {
-        continue;
-      }
+    this.requestUpdate();
+  }
 
-      this.treeOutline.appendChild(new ARIAAttributesTreeElement(this, attribute, target));
-    }
+  override performUpdate(): void {
+    const onStartEditing = (attribute: SDK.DOMModel.Attribute): void => {
+      this.#attributeBeingEdited = attribute;
+      this.requestUpdate();
+    };
+    const onCancelEditing = (attribute: SDK.DOMModel.Attribute): void => {
+      if (attribute === this.#attributeBeingEdited) {
+        this.#attributeBeingEdited = null;
+      }
+      this.requestUpdate();
+    };
+
+    const onCommitEditing = (attribute: SDK.DOMModel.Attribute, result: string): void => {
+      // Make the changes to the attribute
+      const node = this.node();
+      if (node && attribute.value !== result) {
+        node.setAttributeValue(attribute.name, result);
+      }
+      if (attribute === this.#attributeBeingEdited) {
+        this.#attributeBeingEdited = null;
+      }
+      this.requestUpdate();
+    };
 
-    const foundAttributes = (this.treeOutline.rootElement().childCount() !== 0);
-    this.noPropertiesInfo.classList.toggle('hidden', foundAttributes);
-    this.treeOutline.element.classList.toggle('hidden', !foundAttributes);
-  }
+    const attributes = this.node()?.attributes()?.filter(attribute => this.isARIAAttribute(attribute)) ?? [];
+    const propertyCompletions =
+        new Map(attributes.map(attribute => [attribute, ariaMetadata().valuesForProperty(attribute.name)]));
 
-  getTreeOutlineForTesting(): Readonly<UI.TreeOutline.TreeOutline>|undefined {
-    return this.treeOutline;
+    const input: ViewInput = {
+      attributeBeingEdited: this.#attributeBeingEdited,
+      attributes,
+      onStartEditing,
+      onCommitEditing,
+      onCancelEditing,
+      propertyCompletions,
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   private isARIAAttribute(attribute: SDK.DOMModel.Attribute): boolean {
     return SDK.DOMModel.ARIA_ATTRIBUTES.has(attribute.name);
   }
 }
-
-export class ARIAAttributesTreeElement extends UI.TreeOutline.TreeElement {
-  private readonly parentPane: ARIAAttributesPane;
-  private readonly attribute: SDK.DOMModel.Attribute;
-  private nameElement?: HTMLSpanElement;
-  private valueElement?: Element;
-  private prompt?: ARIAAttributePrompt;
-
-  constructor(parentPane: ARIAAttributesPane, attribute: SDK.DOMModel.Attribute, _target: SDK.Target.Target) {
-    super('');
-
-    this.parentPane = parentPane;
-    this.attribute = attribute;
-
-    this.selectable = false;
-  }
-
-  static createARIAValueElement(value: string): Element {
-    const valueElement = document.createElement('span');
-    valueElement.classList.add('monospace');
-    // TODO(aboxhall): quotation marks?
-    valueElement.setTextContentTruncatedIfNeeded(value || '');
-    return valueElement;
-  }
-
-  override onattach(): void {
-    this.populateListItem();
-    this.listItemElement.addEventListener('click', this.mouseClick.bind(this));
-  }
-
-  getPromptForTesting(): Readonly<ARIAAttributePrompt>|undefined {
-    return this.prompt;
-  }
-
-  private populateListItem(): void {
-    this.listItemElement.removeChildren();
-    this.appendNameElement(this.attribute.name);
-    this.listItemElement.createChild('span', 'separator').textContent = ':\xA0';
-    this.appendAttributeValueElement(this.attribute.value);
-  }
-
-  appendNameElement(name: string): void {
-    this.nameElement = document.createElement('span');
-    this.nameElement.textContent = name;
-    this.nameElement.classList.add('ax-name');
-    this.nameElement.classList.add('monospace');
-    this.listItemElement.appendChild(this.nameElement);
-  }
-
-  appendAttributeValueElement(value: string): void {
-    this.valueElement = ARIAAttributesTreeElement.createARIAValueElement(value);
-    this.listItemElement.appendChild(this.valueElement);
-  }
-
-  private mouseClick(event: Event): void {
-    if (event.target === this.listItemElement) {
-      return;
-    }
-
-    event.consume(true);
-
-    this.startEditing();
-  }
-
-  private startEditing(): void {
-    const valueElement = this.valueElement;
-
-    if (!valueElement || UI.UIUtils.isBeingEdited(valueElement)) {
-      return;
-    }
-
-    const previousContent = valueElement.textContent || '';
-
-    function blurListener(this: ARIAAttributesTreeElement, previousContent: string, event: Event): void {
-      const target = event.target as HTMLElement;
-      const text = target.textContent || '';
-      this.editingCommitted(text, previousContent);
-    }
-
-    const attributeName = (this.nameElement as HTMLSpanElement).textContent || '';
-    this.prompt = new ARIAAttributePrompt(ariaMetadata().valuesForProperty(attributeName));
-    this.prompt.setAutocompletionTimeout(0);
-    const proxyElement =
-        this.prompt.attachAndStartEditing(valueElement, blurListener.bind(this, previousContent)) as HTMLElement;
-
-    proxyElement.addEventListener('keydown', event => this.editingValueKeyDown(previousContent, event), false);
-
-    const selection = valueElement.getComponentSelection();
-    if (selection) {
-      selection.selectAllChildren(valueElement);
-    }
-  }
-
-  private removePrompt(): void {
-    if (!this.prompt) {
-      return;
-    }
-    this.prompt.detach();
-    delete this.prompt;
-  }
-
-  private editingCommitted(userInput: string, previousContent: string): void {
-    this.removePrompt();
-
-    // Make the changes to the attribute
-    if (userInput !== previousContent) {
-      const node = this.parentPane.node() as SDK.DOMModel.DOMNode;
-      node.setAttributeValue(this.attribute.name, userInput);
-    }
-  }
-
-  private editingCancelled(): void {
-    this.removePrompt();
-    this.populateListItem();
-  }
-
-  private editingValueKeyDown(previousContent: string, event: KeyboardEvent): void {
-    if (event.handled) {
-      return;
-    }
-
-    if (event.key === 'Enter') {
-      const target = event.target as HTMLElement;
-      this.editingCommitted(target.textContent || '', previousContent);
-      event.consume();
-      return;
-    }
-
-    if (Platform.KeyboardUtilities.isEscKey(event)) {
-      this.editingCancelled();
-      event.consume();
-      return;
-    }
-  }
-}
-
-export class ARIAAttributePrompt extends UI.TextPrompt.TextPrompt {
-  private readonly ariaCompletions: string[];
-  constructor(ariaCompletions: string[]) {
-    super();
-    this.initialize(this.buildPropertyCompletions.bind(this));
-
-    this.ariaCompletions = ariaCompletions;
-  }
-
-  private async buildPropertyCompletions(expression: string, prefix: string, force?: boolean):
-      Promise<UI.SuggestBox.Suggestions> {
-    prefix = prefix.toLowerCase();
-    if (!prefix && !force && expression) {
-      return [];
-    }
-    return this.ariaCompletions.filter(value => value.startsWith(prefix)).map(c => {
-      return {
-        text: c,
-        title: undefined,
-        subtitle: undefined,
-        priority: undefined,
-        isSecondary: undefined,
-        subtitleRenderer: undefined,
-        selectionRange: undefined,
-        hideGhostText: undefined,
-        iconElement: undefined,
-      };
-    });
-  }
-}

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -120,8 +120,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityNode
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class AXNodeSubPane extends AccessibilitySubPane {
   override axNode: SDK.AccessibilityModel.AccessibilityNode|null;
-  private readonly noNodeInfo: Element;
-  private readonly ignoredInfo: Element;
+  private readonly noNodeInfo: UI.Widget.Widget;
+  private readonly ignoredInfo: UI.Widget.Widget;
   private readonly treeOutline: UI.TreeOutline.TreeOutline;
   private readonly ignoredReasonsTree: UI.TreeOutline.TreeOutline;
   constructor() {
@@ -137,7 +137,7 @@ export class AXNodeSubPane extends AccessibilitySubPane {
     this.contentElement.classList.add('ax-subpane');
 
     this.noNodeInfo = this.createInfo(i18nString(UIStrings.noAccessibilityNode));
-    this.ignoredInfo = this.createInfo(i18nString(UIStrings.accessibilityNodeNotExposed), 'ax-ignored-info hidden');
+    this.ignoredInfo = this.createInfo(i18nString(UIStrings.accessibilityNodeNotExposed), 'ax-ignored-info', 'hidden');
 
     this.treeOutline = this.createTreeOutline();
     this.ignoredReasonsTree = this.createTreeOutline();
@@ -160,21 +160,21 @@ export class AXNodeSubPane extends AccessibilitySubPane {
 
     if (!axNode) {
       treeOutline.element.classList.add('hidden');
-      this.ignoredInfo.classList.add('hidden');
+      this.ignoredInfo.element.classList.add('hidden');
       ignoredReasons.element.classList.add('hidden');
 
-      this.noNodeInfo.classList.remove('hidden');
+      this.noNodeInfo.element.classList.remove('hidden');
       this.element.classList.add('ax-ignored-node-pane');
 
       return;
     }
 
     if (axNode.ignored()) {
-      this.noNodeInfo.classList.add('hidden');
+      this.noNodeInfo.element.classList.add('hidden');
       treeOutline.element.classList.add('hidden');
       this.element.classList.add('ax-ignored-node-pane');
 
-      this.ignoredInfo.classList.remove('hidden');
+      this.ignoredInfo.element.classList.remove('hidden');
       ignoredReasons.element.classList.remove('hidden');
       function addIgnoredReason(property: Protocol.Accessibility.AXProperty): void {
         ignoredReasons.appendChild(
@@ -191,9 +191,9 @@ export class AXNodeSubPane extends AccessibilitySubPane {
     }
     this.element.classList.remove('ax-ignored-node-pane');
 
-    this.ignoredInfo.classList.add('hidden');
+    this.ignoredInfo.element.classList.add('hidden');
     ignoredReasons.element.classList.add('hidden');
-    this.noNodeInfo.classList.add('hidden');
+    this.noNodeInfo.element.classList.add('hidden');
 
     treeOutline.element.classList.remove('hidden');
 

package/front_end/panels/accessibility/AccessibilitySubPane.ts

@@ -33,10 +33,12 @@ export class AccessibilitySubPane extends UI.View.SimpleView {
     this.nodeInternal = node;
   }
 
-  createInfo(textContent: string, className?: string): Element {
-    const info = this.element.createChild('div', className || 'gray-info-message');
-    info.classList.add('info-message-overflow');
-    info.textContent = textContent;
+  createInfo(textContent: string, ...classNames: string[]): UI.Widget.Widget {
+    const info = new UI.EmptyWidget.EmptyWidget(textContent);
+    if (classNames.length === 0) {
+      classNames.push('gray-info-message');
+    }
+    info.element.classList.add(...classNames, 'info-message-overflow');
     return info;
   }