chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

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

@@ -19,8 +19,6 @@ import {
   ObjectTree,
 } from './ObjectPropertiesSection.js';
 
-const {widget} = UI.Widget;
-
 const UIStrings = {
   /**
    * @description Context menu item to show a custom formatted object as a standard JavaScript object.
@@ -30,18 +28,38 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/CustomPreviewComponent.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class CustomPreviewSection {
-  private readonly sectionElement: HTMLSpanElement;
-  private readonly object: SDK.RemoteObject.RemoteObject;
+export class CustomPreviewSection extends UI.Widget.Widget {
+  #object?: SDK.RemoteObject.RemoteObject;
   private expanded = false;
-  private cachedContent?: unknown|ObjectTree|null;
+  private cachedContent?: unknown|ObjectTree;
   private headerJsonML?: unknown;
-  constructor(object: SDK.RemoteObject.RemoteObject) {
-    this.sectionElement = document.createElement('span');
-    this.sectionElement.classList.add('custom-expandable-section');
-    this.object = object;
-    const customPreview = object.customPreview();
+  private readonly view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.view = view;
+  }
+
+  get object(): SDK.RemoteObject.RemoteObject|undefined {
+    return this.#object;
+  }
 
+  set object(object: SDK.RemoteObject.RemoteObject|undefined) {
+    if (this.#object === object) {
+      return;
+    }
+    this.#object = object;
+    this.headerJsonML = undefined;
+    this.cachedContent = undefined;
+    this.expanded = false;
+    this.parseHeader();
+    // CustomPreviewComponent is used synchronously by ConsoleViewMessage. We must render synchronously
+    // so ConsoleViewport can measure the true row height upon insertion.
+    this.performUpdate();
+  }
+
+  private parseHeader(): void {
+    const customPreview = this.#object?.customPreview();
     if (!customPreview) {
       return;
     }
@@ -50,74 +68,88 @@ export class CustomPreviewSection {
       this.headerJsonML = JSON.parse(customPreview.header);
     } catch (e) {
       Common.Console.Console.instance().error('Broken formatter: header is invalid json ' + e);
-      return;
     }
-    this.render();
   }
 
-  private render(): void {
-    const customPreview = this.object.customPreview();
-    if (!customPreview || !this.headerJsonML) {
-      return;
+  override performUpdate(): void {
+    this.view({
+      object: this.#object,
+      headerJsonML: this.headerJsonML,
+      expanded: this.expanded,
+      cachedContent: this.cachedContent,
+      toggleExpanded: this.toggleExpanded,
+    },
+              undefined, this.contentElement);
+  }
+
+  private toggleExpanded = (): void => {
+    if (this.cachedContent !== undefined) {
+      this.toggleExpand();
+    } else {
+      void this.loadBody();
     }
+  };
 
-    const headerTemplate = this.renderJSONMLTag(this.headerJsonML);
-    if (customPreview.bodyGetterId) {
-      let bodyContent: LitTemplate|Node|undefined;
-      if (this.cachedContent instanceof ObjectTree) {
-        bodyContent = html`<devtools-widget class="custom-expandable-section-default-body" ${
-            widget(ObjectPropertiesSectionWidget, {
-              objectTree: this.cachedContent,
-              showOverflow: false,
-            })}></devtools-widget>`;
-      } else if (this.cachedContent !== undefined) {
-        bodyContent = this.renderJSONMLTag(this.cachedContent);
-      }
+  private toggleExpand(): void {
+    this.expanded = !this.expanded;
+    this.performUpdate();
+  }
 
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(
-          html`
-        <span class=${
-              Directives.classMap({'custom-expandable-section-header': true,
-                                   expanded: this.expanded})} @click=${(event: Event) => this.onClick(event)}>
-          <devtools-icon name=${
-              this.expanded ? 'triangle-down' : 'triangle-right'} class="custom-expand-icon"></devtools-icon>
-          ${headerTemplate}
-        </span>
-        ${
-              bodyContent ?
-                  html`<span class="custom-expandable-section-body" ?hidden=${!this.expanded}>${bodyContent}</span>` :
-                  nothing}
-      `,
-          this.sectionElement);
+  async loadBody(): Promise<void> {
+    const customPreview = this.#object?.customPreview();
+    if (!this.#object || !customPreview?.bodyGetterId) {
+      return;
+    }
+
+    const bodyJsonML =
+        await this.#object.callFunctionJSON(bodyGetter => bodyGetter(), [{objectId: customPreview.bodyGetterId}]);
+    if (bodyJsonML === null) {
+      // Per https://firefox-source-docs.mozilla.org/devtools-user/custom_formatters/index.html#custom-formatter-structure
+      // we are supposed to fall back to the default format when the `body()` callback returns `null`.
+      const objectTree = new ObjectTree(this.#object, {
+        readOnly: true,
+        propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+      });
+      objectTree.expanded = true;
+      this.cachedContent = objectTree;
     } else {
-      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(html`${headerTemplate}`, this.sectionElement);
+      this.cachedContent = bodyJsonML;
     }
-  }
 
-  element(): Element {
-    return this.sectionElement;
+    this.expanded = true;
+    this.performUpdate();
   }
+}
+
+const ALLOWED_TAGS = ['span', 'div', 'ol', 'li', 'table', 'tr', 'td'];
+
+export interface ViewInput {
+  object?: SDK.RemoteObject.RemoteObject;
+  headerJsonML?: unknown;
+  expanded: boolean;
+  cachedContent?: unknown|ObjectTree|null;
+  toggleExpanded: () => void;
+}
 
-  private renderJSONMLTag(jsonML: unknown): LitTemplate {
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  const renderJSONMLTag = (object: SDK.RemoteObject.RemoteObject, jsonML: unknown): LitTemplate => {
     if (!Array.isArray(jsonML)) {
       return html`${String(jsonML)}`;
     }
 
     if (jsonML[0] !== 'object') {
-      return this.renderElement(jsonML);
+      return renderElement(object, jsonML);
     }
     if (jsonML.length !== 2) {
       Common.Console.Console.instance().error('Broken formatter: object reference must contain exactly two elements');
       return html`<span></span>`;
     }
-    return this.layoutObjectTag(jsonML);
-  }
+    return layoutObjectTag(object, jsonML);
+  };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private renderElement(object: any[]): LitTemplate {
-    const it = object[Symbol.iterator]();
+  const renderElement = (object: SDK.RemoteObject.RemoteObject, jsonML: any[]): LitTemplate => {
+    const it = jsonML[Symbol.iterator]();
     const tagName = it.next().value as string;
     if (!ALLOWED_TAGS.includes(tagName)) {
       Common.Console.Console.instance().error('Broken formatter: element ' + tagName + ' is not allowed!');
@@ -145,7 +177,7 @@ export class CustomPreviewSection {
 
     const children: LitTemplate[] = [];
     while (!next.done) {
-      children.push(this.renderJSONMLTag(next.value));
+      children.push(renderJSONMLTag(object, next.value));
       next = it.next();
     }
     const style = Directives.styleMap(stylePropertyMap);
@@ -168,65 +200,65 @@ export class CustomPreviewSection {
       default:
         return html`<span>${children}</span>`;
     }
-  }
+  };
 
-  private layoutObjectTag(objectTag: unknown[]): LitTemplate {
+  const layoutObjectTag = (object: SDK.RemoteObject.RemoteObject, objectTag: unknown[]): LitTemplate => {
     const it = objectTag[Symbol.iterator]();
     it.next();  // skip 'object'
     const attributes = it.next().value;
-    const remoteObject = this.object.runtimeModel().createRemoteObject((attributes as Protocol.Runtime.RemoteObject));
+    const remoteObject = object.runtimeModel().createRemoteObject((attributes as Protocol.Runtime.RemoteObject));
     if (remoteObject.customPreview()) {
-      return html`${(new CustomPreviewSection(remoteObject)).element()}`;
+      return html`${UI.Widget.widget(CustomPreviewSection, {object: remoteObject})}`;
     }
 
     return defaultObjectPresentation(remoteObject, undefined, undefined, undefined,
                                      {'custom-expandable-section-standard-section': remoteObject.hasChildren});
-  }
+  };
 
-  private onClick(event: Event): void {
+  const onClick = (event: Event): void => {
     event.consume(true);
-    if (this.cachedContent !== undefined) {
-      this.toggleExpand();
-    } else {
-      void this.loadBody();
-    }
-  }
+    input.toggleExpanded();
+  };
 
-  private toggleExpand(): void {
-    this.expanded = !this.expanded;
-    this.render();
+  const object = input.object;
+  const customPreview = object?.customPreview();
+  if (!object || !customPreview || !input.headerJsonML) {
+    render(nothing, target);
+    return;
   }
 
-  async loadBody(): Promise<void> {
-    const customPreview = this.object.customPreview();
-
-    if (!customPreview) {
-      return;
+  const headerTemplate = renderJSONMLTag(object, input.headerJsonML);
+  if (customPreview.bodyGetterId) {
+    let bodyContent: LitTemplate|Node|undefined;
+    if (input.cachedContent instanceof ObjectTree) {
+      bodyContent = html`<devtools-widget class="custom-expandable-section-default-body" ${
+          UI.Widget.widget(ObjectPropertiesSectionWidget, {
+            objectTree: input.cachedContent,
+            showOverflow: false,
+          })}></devtools-widget>`;
+    } else if (input.cachedContent) {
+      bodyContent = renderJSONMLTag(object, input.cachedContent);
     }
 
-    if (customPreview.bodyGetterId) {
-      const bodyJsonML =
-          await this.object.callFunctionJSON(bodyGetter => bodyGetter(), [{objectId: customPreview.bodyGetterId}]);
-      if (bodyJsonML === null) {
-        // Per https://firefox-source-docs.mozilla.org/devtools-user/custom_formatters/index.html#custom-formatter-structure
-        // we are supposed to fall back to the default format when the `body()` callback returns `null`.
-        const objectTree = new ObjectTree(this.object, {
-          readOnly: true,
-          propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-        });
-        objectTree.expanded = true;
-        this.cachedContent = objectTree;
-      } else {
-        this.cachedContent = bodyJsonML;
-      }
-
-      this.expanded = true;
-      this.render();
-    }
+    render(html`
+      <span class=${Directives.classMap({'custom-expandable-section-header': true,
+                                         expanded: input.expanded})} @click=${onClick}>
+        <devtools-icon name=${
+               input.expanded ? 'triangle-down' : 'triangle-right'} class="custom-expand-icon"></devtools-icon>
+        ${headerTemplate}
+      </span>
+      ${
+               bodyContent ?
+                   html`<span class="custom-expandable-section-body" ?hidden=${!input.expanded}>${bodyContent}</span>` :
+                   nothing}
+    `,
+           target, {container: {classes: ['custom-expandable-section']}});
+  } else {
+    render(html`${headerTemplate}`, target, {container: {classes: ['custom-expandable-section']}});
   }
-}
+};
 
-const ALLOWED_TAGS = ['span', 'div', 'ol', 'li', 'table', 'tr', 'td'];
+export type View = typeof DEFAULT_VIEW;
 
 export class CustomPreviewComponent {
   private readonly object: SDK.RemoteObject.RemoteObject;
@@ -234,27 +266,27 @@ export class CustomPreviewComponent {
   element: HTMLSpanElement;
   constructor(object: SDK.RemoteObject.RemoteObject) {
     this.object = object;
-    this.customPreviewSection = new CustomPreviewSection(object);
+    this.customPreviewSection = new CustomPreviewSection();
+    this.customPreviewSection.object = object;
     this.element = document.createElement('span');
     this.element.classList.add('source-code');
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(this.element, {cssFile: customPreviewComponentStyles});
     this.element.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
-    shadowRoot.appendChild(this.customPreviewSection.element());
+    this.customPreviewSection.show(shadowRoot, undefined, /* suppressOrphanWidgetError= */ true);
   }
 
-  expandIfPossible(): void {
+  async expandIfPossible(): Promise<void> {
     const customPreview = this.object.customPreview();
     if (customPreview && customPreview.bodyGetterId && this.customPreviewSection) {
-      void this.customPreviewSection.loadBody();
+      await this.customPreviewSection.loadBody();
     }
   }
 
   private contextMenuEventFired(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (this.customPreviewSection) {
-      contextMenu.revealSection().appendItem(
-          i18nString(UIStrings.showAsJavascriptObject), this.disassemble.bind(this),
-          {jslogContext: 'show-as-javascript-object'});
+      contextMenu.revealSection().appendItem(i18nString(UIStrings.showAsJavascriptObject), this.disassemble.bind(this),
+                                             {jslogContext: 'show-as-javascript-object'});
     }
     contextMenu.appendApplicableItems(this.object);
     void contextMenu.show();
@@ -262,8 +294,11 @@ export class CustomPreviewComponent {
 
   private disassemble(): void {
     if (this.element.shadowRoot) {
+      if (this.customPreviewSection) {
+        this.customPreviewSection.detach();
+        this.customPreviewSection = null;
+      }
       this.element.shadowRoot.textContent = '';
-      this.customPreviewSection = null;
       // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
       render(defaultObjectPresentation(this.object), this.element.shadowRoot);
     }

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

@@ -58,7 +58,7 @@ export class ObjectPopoverHelper {
 
       if (result.customPreview()) {
         const customPreviewComponent = new CustomPreviewComponent(result);
-        customPreviewComponent.expandIfPossible();
+        void customPreviewComponent.expandIfPossible();
         popoverContentElement = customPreviewComponent.element;
       } else {
         popoverContentElement = document.createElement('div');

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

@@ -1301,7 +1301,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 +1309,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 +1351,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;
   }
@@ -1676,12 +1676,12 @@ export interface ObjectPropertyViewInput {
   node: ObjectTreeNode;
   search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 }
-interface ObjectPropertyViewOutput {
+export interface ObjectPropertyViewOutput {
   valueElement: Element|undefined;
   nameElement: Element|undefined;
 }
-type ObjectPropertyView = (input: ObjectPropertyViewInput, output: ObjectPropertyViewOutput, target: HTMLElement) =>
-    void;
+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]]';
@@ -1807,7 +1807,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;
   }
@@ -2522,7 +2522,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
   static sparseIterationThreshold = 250000;
 }
 
-interface ExpandableTextViewInput {
+export interface ExpandableTextViewInput {
   copyText: () => void;
   expandText: () => void;
   expanded: boolean;
@@ -2530,7 +2530,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 +2588,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/objectPropertiesSection.css

@@ -90,6 +90,8 @@ li.object-properties-section  {
 
 .tree-outline.hide-selection-when-blurred .selected:focus-visible {
   background: none;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: calc(-1 * var(--sys-size-2));
 }
 
 .tree-outline.hide-selection-when-blurred .selected:focus-visible ::slotted(*),

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

@@ -37,7 +37,12 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/FilmStripView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(UI.Widget.HBox) {
+const FilmStripViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.HBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.HBox,
+    );
+
+export class FilmStripView extends FilmStripViewBase {
   private statusLabel: HTMLElement;
   private zeroTime: Trace.Types.Timing.Milli = Trace.Types.Timing.Milli(0);
   #filmStrip: Trace.Extras.FilmStrip.Data|null = null;

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

@@ -245,8 +245,12 @@ export type DrawOverride =
     (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number,
      timeToPosition: (time: number) => number, transformColor: (color: string) => string) => PositionOverride;
 
-export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements NetworkTimeCalculator.Calculator, ChartViewportDelegate {
+const FlameChartBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class FlameChart extends FlameChartBase implements NetworkTimeCalculator.Calculator, ChartViewportDelegate {
   private readonly flameChartDelegate: FlameChartDelegate;
   private chartViewport: ChartViewport;
   private dataProvider: FlameChartDataProvider;

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

@@ -6,7 +6,7 @@
 import * as Common from '../../../../core/common/common.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as TraceBounds from '../../../../services/trace_bounds/trace_bounds.js';
-import * as VisualLoggging from '../../../visual_logging/visual_logging.js';
+import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
@@ -14,8 +14,12 @@ import {Events as OverviewGridEvents, OverviewGrid, type WindowChangedWithPositi
 import {TimelineOverviewCalculator} from './TimelineOverviewCalculator.js';
 import timelineOverviewInfoStyles from './timelineOverviewInfo.css.js';
 
-export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const TimelineOverviewPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineOverviewPane extends TimelineOverviewPaneBase {
   readonly overviewCalculator: TimelineOverviewCalculator;
   private readonly overviewGrid: OverviewGrid;
   private readonly cursorArea: HTMLElement;
@@ -41,7 +45,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.overviewCalculator = new TimelineOverviewCalculator();
     this.overviewGrid = new OverviewGrid(prefix, this.overviewCalculator);
     this.overviewGrid.element.setAttribute(
-        'jslog', `${VisualLoggging.timeline(`${prefix}-overview`).track({click: true, drag: true, hover: true})}`);
+        'jslog', `${VisualLogging.timeline(`${prefix}-overview`).track({click: true, drag: true, hover: true})}`);
     this.element.appendChild(this.overviewGrid.element);
     this.cursorArea = this.overviewGrid.element.createChild('div', 'overview-grid-cursor-area');
     this.cursorElement = this.overviewGrid.element.createChild('div', 'overview-grid-cursor-position');

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/quick_open/FilteredListWidget.ts

@@ -44,8 +44,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/FilteredListWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) implements UI.ListControl.ListDelegate<number> {
+const FilteredListWidgetBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class FilteredListWidget extends FilteredListWidgetBase implements UI.ListControl.ListDelegate<number> {
   private promptHistory: string[];
   private scoringTimer: number;
   private filterTimer: number;
@@ -154,8 +158,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.inputBoxElement.setSuggestion(suggestion);
   }
 
-  setHintElement(hint: string): void {
+  setHintElement(hint: string, accessibleName: string): void {
     this.hintElement.textContent = hint;
+    UI.ARIAUtils.setLabel(this.hintElement, accessibleName);
   }
 
   showAsDialog(dialogTitle?: string): void {

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

@@ -17,6 +17,10 @@ const UIStrings = {
    * @description Hint text displayed below the quick open input prompt.
    */
   typeToSeeAvailableCommands: 'Type ? to see available commands',
+  /**
+   * @description Accessible text for the hint displayed below the quick open input prompt.
+   */
+  typeQuestionMarkToSeeAvailableCommands: 'Type question mark to see available commands',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/QuickOpen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -42,7 +46,8 @@ export class QuickOpenImpl {
     const quickOpen = new this();
     const filteredListWidget = new FilteredListWidget(null, history, quickOpen.queryChanged.bind(quickOpen));
     quickOpen.filteredListWidget = filteredListWidget;
-    filteredListWidget.setHintElement(i18nString(UIStrings.typeToSeeAvailableCommands));
+    filteredListWidget.setHintElement(i18nString(UIStrings.typeToSeeAvailableCommands),
+                                      i18nString(UIStrings.typeQuestionMarkToSeeAvailableCommands));
     filteredListWidget.showAsDialog();
     filteredListWidget.setQuery(query);
   }

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();
@@ -117,8 +117,13 @@ export const LINE_NUMBER_FORMATTER = CodeMirror.Facet.define<FormatFn, FormatFn>
   },
 });
 
-export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.View.SimpleView>(
-    UI.View.SimpleView) implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable, Transformer {
+const SourceFrameImplBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.View.SimpleView> =
+    Common.ObjectWrapper.eventMixin(
+        UI.View.SimpleView,
+    );
+
+export class SourceFrameImpl extends SourceFrameImplBase implements UI.SearchableView.Searchable,
+                                                                    UI.SearchableView.Replaceable, Transformer {
   private readonly lazyContent: () => Promise<TextUtils.ContentData.ContentDataOrError>;
   private prettyInternal: boolean;
   private rawContent: string|CodeMirror.Text|null;
@@ -1179,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> {
@@ -1259,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;
   }