chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/ui/legacy/DropTarget.ts

@@ -97,7 +97,12 @@ export class DropTarget {
   }
 }
 
-export const Type = {
+export interface DropTargetType {
+  kind: string;
+  type: RegExp;
+}
+
+export const Type: Record<'URI'|'Folder'|'File'|'WebFile'|'ImageFile', DropTargetType> = {
   URI: {kind: 'string', type: /text\/uri-list/},
   Folder: {kind: 'file', type: /$^/},
   File: {kind: 'file', type: /.*/},

package/front_end/ui/legacy/EmptyWidget.ts

@@ -52,7 +52,7 @@ export class EmptyWidget extends VBox {
   #link: Platform.DevToolsPath.UrlString|undefined|null;
   #view: View;
 
-  constructor(headerOrElement: string|HTMLElement, text = '', element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(headerOrElement: string|HTMLElement, text = '', element?: HTMLElement, view: View = DEFAULT_VIEW) {
     const header = typeof headerOrElement === 'string' ? headerOrElement : '';
     if (!element && headerOrElement instanceof HTMLElement) {
       element = headerOrElement;

package/front_end/ui/legacy/GlassPane.ts

@@ -372,4 +372,4 @@ const containers = new Map<Document, Element>();
 const panes = new Set<GlassPane>();
 
 /** Exported for layout tests. **/
-export const GlassPanePanes = panes;
+export const GlassPanePanes: Set<GlassPane> = panes;

package/front_end/ui/legacy/InspectorView.ts

@@ -10,6 +10,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon, type Icon} from '../kit/kit.js';
+import * as Lit from '../lit/lit.js';
 import * as SettingsUI from '../settings/settings.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -26,12 +27,15 @@ import {InspectorDrawerView} from './InspectorDrawerView.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
 import type {Panel} from './Panel.js';
 import {type ShowMode, SplitWidget} from './SplitWidget.js';
+import {StatusBarWidget} from './StatusBar.js';
 import {type EventData, Events as TabbedPaneEvents, type TabbedPane, type TabbedPaneTabDelegate} from './TabbedPane.js';
 import {Tooltip} from './Tooltip.js';
 import {UIUserMetrics} from './UIUserMetrics.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
 import {ViewManager} from './ViewManager.js';
-import {VBox, type Widget, WidgetFocusRestorer} from './Widget.js';
+import {VBox, type Widget, widget, WidgetFocusRestorer} from './Widget.js';
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -166,6 +170,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   #resizeObserver: ResizeObserver;
   #drawerShowModeBeforeDockSideChange: ShowMode|null = null;
   #drawerMinimizedBeforeDockSideChange: boolean|null = null;
+  #statusBarContainer?: HTMLDivElement;
 
   constructor() {
     super();
@@ -848,6 +853,17 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
+  renderStatusBar(): void {
+    if (!this.#statusBarContainer) {
+      this.#statusBarContainer = document.createElement('div');
+      this.#statusBarContainer.style.display = 'contents';
+      this.element.appendChild(this.#statusBarContainer);
+    }
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    Lit.render(html`<devtools-widget class="flex-none" ${widget(StatusBarWidget)}></devtools-widget>`,
+               this.#statusBarContainer);
+  }
+
   private createInfoBarDiv(): void {
     if (!this.infoBarDiv) {
       this.infoBarDiv = document.createElement('div');

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -514,10 +514,10 @@ export class ShortcutTreeNode {
 }
 
 export class ForwardedShortcut {
-  static instance = new ForwardedShortcut();
+  static instance: ForwardedShortcut = new ForwardedShortcut();
 }
 
-export const ForwardedActions = new Set<string>([
+export const ForwardedActions: Set<string> = new Set<string>([
   'main.toggle-dock',
   'debugger.toggle-breakpoints-active',
   'debugger.toggle-pause',

package/front_end/ui/legacy/SplitWidget.ts

@@ -81,7 +81,14 @@ export class SplitWidget extends SplitWidgetBase {
     const mainSlot = this.#mainElement.createChild('slot');
     mainSlot.name = 'main';
     mainSlot.addEventListener('slotchange', (_: Event) => {
-      const assignedNode = mainSlot.assignedNodes()[0];
+      const assignedNode = mainSlot.assignedNodes().find(node => {
+        const widget = node instanceof HTMLElement ? Widget.get(node) : null;
+        if (widget) {
+          return widget === this.#mainWidget || widget.isShowing();
+        }
+        return node instanceof HTMLElement && !node.classList.contains('hidden');
+      }) ??
+          mainSlot.assignedNodes()[0];
       const widget = assignedNode instanceof HTMLElement ? Widget.getOrCreateWidget(assignedNode) : null;
       if (widget && widget !== this.#mainWidget) {
         this.setMainWidget(widget);
@@ -90,7 +97,14 @@ export class SplitWidget extends SplitWidgetBase {
     const sidebarSlot = this.#sidebarElement.createChild('slot');
     sidebarSlot.name = 'sidebar';
     sidebarSlot.addEventListener('slotchange', (_: Event) => {
-      const assignedNode = sidebarSlot.assignedNodes()[0];
+      const assignedNode = sidebarSlot.assignedNodes().find(node => {
+        const widget = node instanceof HTMLElement ? Widget.get(node) : null;
+        if (widget) {
+          return widget === this.#sidebarWidget || widget.isShowing();
+        }
+        return node instanceof HTMLElement && !node.classList.contains('hidden');
+      }) ??
+          sidebarSlot.assignedNodes()[0];
       const widget = assignedNode instanceof HTMLElement ? Widget.getOrCreateWidget(assignedNode) : null;
       if (widget && widget !== this.#sidebarWidget) {
         this.setSidebarWidget(widget);
@@ -888,7 +902,8 @@ export class SplitWidget extends SplitWidgetBase {
 }
 
 export class SplitWidgetElement extends WidgetElement<SplitWidget> {
-  static readonly observedAttributes = ['direction', 'sidebar-position', 'sidebar-initial-size', 'sidebar-visibility'];
+  static readonly observedAttributes: string[] =
+      ['direction', 'sidebar-position', 'sidebar-initial-size', 'sidebar-visibility'];
 
   constructor() {
     super();

package/front_end/ui/legacy/StackedPane.ts

@@ -157,7 +157,7 @@ export class ExpandableContainerWidget extends VBox {
 const expandableContainerForView = new WeakMap<View, ExpandableContainerWidget>();
 
 export class StackedPane extends VBox {
-  readonly expandableContainers = new Map<string, ExpandableContainerWidget>();
+  readonly expandableContainers: Map<string, ExpandableContainerWidget> = new Map<string, ExpandableContainerWidget>();
   constructor(
       private readonly createToolbar: CreateToolbarFn,
       private readonly setWidgetForView: SetWidgetForViewFn,

package/front_end/ui/legacy/StatusBar.ts

@@ -0,0 +1,78 @@
+// 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.
+
+import * as Lit from '../lit/lit.js';
+
+import statusBarStyles from './statusBar.css.js';
+import {ViewManager} from './ViewManager.js';
+import {ViewLocationValues} from './ViewRegistration.js';
+import {type AnyWidget, Widget} from './Widget.js';
+
+const {html, render} = Lit;
+
+export const DEFAULT_VIEW = (_input: undefined, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${statusBarStyles}</style>
+    <div class="status-bar"></div>
+  `, target);
+  // clang-format on
+};
+
+type View = typeof DEFAULT_VIEW;
+
+export class StatusBarWidget extends Widget {
+  readonly #view: View;
+  #containerElement?: HTMLElement;
+  readonly #widgets: AnyWidget[] = [];
+  #viewsLoadedPromise?: Promise<void>;
+
+  constructor(
+      element: HTMLElement|undefined,
+      view: View = DEFAULT_VIEW,
+  ) {
+    super(element);
+    this.#view = view;
+  }
+
+  viewsLoadedForTest(): Promise<void> {
+    return this.#viewsLoadedPromise ?? Promise.resolve();
+  }
+
+  #attachWidgets(): void {
+    if (!this.#containerElement) {
+      return;
+    }
+    for (const widget of this.#widgets) {
+      if (!widget.isShowing()) {
+        widget.show(this.#containerElement);
+      }
+    }
+  }
+
+  async #loadViews(): Promise<void> {
+    const views = ViewManager.instance().viewsForLocation(
+        ViewLocationValues.STATUS_BAR,
+    );
+    for (const view of views) {
+      const widget = await view.widget();
+      if (widget instanceof Widget && !this.#widgets.includes(widget)) {
+        this.#widgets.push(widget);
+      }
+    }
+    this.#attachWidgets();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+    this.#viewsLoadedPromise = this.#loadViews();
+  }
+
+  override performUpdate(): void {
+    this.#view(undefined, undefined, this.contentElement);
+    this.#containerElement = this.contentElement.querySelector('.status-bar') ?? undefined;
+    this.#attachWidgets();
+  }
+}

package/front_end/ui/legacy/TargetCrashedScreen.ts

@@ -35,7 +35,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 
 export class TargetCrashedScreen extends VBox {
   private readonly hideCallback: () => void;
-  constructor(hideCallback: () => void, view = DEFAULT_VIEW) {
+  constructor(hideCallback: () => void, view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     view({}, {}, this.contentElement);
     this.hideCallback = hideCallback;

package/front_end/ui/legacy/TextPrompt.ts

@@ -68,7 +68,8 @@ import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
  * @attribute value Sets the initial text value that's edited when editing starts. If not provided, the slot's inner text is used.
  */
 export class TextPromptElement extends HTMLElement {
-  static readonly observedAttributes = ['editing', 'completions', 'placeholder', 'cancel-on-blur', 'render-as-block'];
+  static readonly observedAttributes: string[] =
+      ['editing', 'completions', 'placeholder', 'cancel-on-blur', 'render-as-block'];
   static formAssociated = true;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #internals = this.attachInternals();

package/front_end/ui/legacy/Toolbar.ts

@@ -873,11 +873,15 @@ export class ToolbarFilter extends ToolbarInput {
         toggledIconName: regexIconName,
         toggleType: Buttons.Button.ToggleType.PRIMARY,
         toggled: false,
+        checked: false,
         title: i18nString(UIStrings.useRegularExpression),
         jslogContext: regexIconName,
       };
+      regexButton.style.setProperty('--dot-toggle-top', 'calc(100% - var(--sys-size-3) - var(--sys-size-1))');
+      regexButton.style.setProperty('--dot-toggle-left', 'calc(100% - var(--sys-size-3) - var(--sys-size-1))');
       ARIAUtils.setLabel(regexButton, i18nString(UIStrings.useRegularExpression));
       regexButton.addEventListener('click', () => {
+        regexButton.checked = regexButton.toggled;
         onRegexToggle?.();
       });
       this.insertTrailingElement(regexButton);
@@ -886,7 +890,7 @@ export class ToolbarFilter extends ToolbarInput {
 }
 
 export class ToolbarInputElement extends HTMLElement {
-  static observedAttributes = ['value', 'disabled', 'regex'];
+  static observedAttributes: string[] = ['value', 'disabled', 'regex'];
 
   item?: ToolbarInput;
   datalist: HTMLDataListElement|null = null;

package/front_end/ui/legacy/Treeoutline.ts

@@ -459,6 +459,19 @@ export class TreeOutlineInShadow extends TreeOutline {
     this.contentElement.classList.toggle('tree-outline-dense', dense);
   }
 
+  setDisclosureClass(disclosureClass: string): void {
+    const isHideOverflow = this.disclosureElement.classList.contains('tree-outline-disclosure-hide-overflow');
+    this.disclosureElement.className = 'tree-outline-disclosure';
+    if (isHideOverflow) {
+      this.disclosureElement.classList.add('tree-outline-disclosure-hide-overflow');
+    }
+    for (const cls of disclosureClass.split(/\s+/)) {
+      if (cls) {
+        this.disclosureElement.classList.add(cls);
+      }
+    }
+  }
+
   override onStartedEditingTitle(treeElement: TreeElement): void {
     const selection = this.shadowRoot.getSelection();
     if (selection) {
@@ -467,7 +480,7 @@ export class TreeOutlineInShadow extends TreeOutline {
   }
 }
 
-export const treeElementBylistItemNode = new WeakMap<Node, TreeElement>();
+export const treeElementBylistItemNode: WeakMap<Node, TreeElement> = new WeakMap<Node, TreeElement>();
 export class TreeElement {
   treeOutline: TreeOutline|null;
   parent: TreeElement|null;
@@ -663,6 +676,7 @@ export class TreeElement {
     for (let current = child.firstChild(); this.treeOutline && current;
          current = current.traverseNextTreeElement(false, child, true)) {
       this.treeOutline.bindTreeElement(current);
+      current.ensureSelection();
     }
     child.onattach();
     child.ensureSelection();
@@ -945,7 +959,7 @@ export class TreeElement {
     }
   }
 
-  private ensureSelection(): void {
+  protected ensureSelection(): void {
     if (!this.treeOutline?.renderSelection) {
       return;
     }
@@ -1001,12 +1015,17 @@ export class TreeElement {
       return;
     }
 
+    if (event.defaultPrevented) {
+      return;
+    }
+
     const handled = this.ondblclick(event);
     if (handled) {
       return;
     }
     if (this.expandable && !this.expanded) {
       void this.#setExpandedFromUser(true, false);
+      this.listItemElement.focus();
     }
   }
 
@@ -1591,11 +1610,9 @@ export namespace TreeSearch {
 }
 
 class TreeViewTreeElement extends TreeElement {
-  static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog', 'draggable']));
+  static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog', 'draggable', 'style']));
   #clonedAttributes = new Set<string>();
   #clonedClasses = new Set<string>();
-  #userExpanded = false;
-  #isProcessingAttribute = false;
   #previousOpenAttributeValue?: string|null;
   #refreshScheduled = false;
 
@@ -1609,39 +1626,16 @@ class TreeViewTreeElement extends TreeElement {
     this.refresh();
   }
 
-  override onexpand(): void {
-    if (!this.#isProcessingAttribute) {
-      this.#userExpanded = true;
-    }
-  }
-
-  override oncollapse(): void {
-    if (!this.#isProcessingAttribute) {
-      this.#userExpanded = false;
-    }
-  }
-
   updateExpansionFromAttribute(): void {
-    this.#isProcessingAttribute = true;
-    try {
-      const openAttr = this.configElement.getAttribute('open');
-      if (openAttr === this.#previousOpenAttributeValue) {
-        return;
-      }
-      this.#previousOpenAttributeValue = openAttr;
-      if (openAttr === null) {
-        if (this.#userExpanded) {
-          this.expand();
-        } else {
-          this.collapse();
-        }
-      } else if (openAttr === 'false') {
-        this.collapse();
-      } else {
-        this.expand();
-      }
-    } finally {
-      this.#isProcessingAttribute = false;
+    const openAttr = this.configElement.getAttribute('open');
+    if (openAttr === this.#previousOpenAttributeValue) {
+      return;
+    }
+    this.#previousOpenAttributeValue = openAttr;
+    if (openAttr !== null && openAttr !== 'false') {
+      this.expand();
+    } else {
+      this.collapse();
     }
   }
 
@@ -1680,6 +1674,7 @@ class TreeViewTreeElement extends TreeElement {
   }
 
   refresh(): void {
+    const hadFocus = this.listItemElement.hasFocus();
     this.titleElement.textContent = '';
     this.updateAttributes();
     const childUl = this.configElement.querySelector(':scope > ul[role="group"]');
@@ -1698,12 +1693,29 @@ class TreeViewTreeElement extends TreeElement {
     this.updateExpansionFromAttribute();
 
     Highlighting.HighlightManager.HighlightManager.instance().apply(this.titleElement);
+    if (hadFocus) {
+      this.listItemElement.focus();
+    }
   }
 
   static get(configElement: Node|undefined): TreeViewTreeElement|undefined {
     return configElement && TreeViewTreeElement.#elementToTreeElement.get(configElement);
   }
 
+  override onselect(selectedByUser?: boolean): boolean {
+    this.listItemElement.dispatchEvent(new TreeViewElement.SelectEvent({selectedByUser: Boolean(selectedByUser)}));
+    return super.onselect(selectedByUser);
+  }
+
+  override onenter(): boolean {
+    const enterEvent = new TreeViewElement.EnterEvent();
+    const shouldExpand = this.listItemElement.dispatchEvent(enterEvent);
+    if (!shouldExpand) {
+      return false;
+    }
+    return super.onenter();
+  }
+
   remove(): void {
     removeNode(this,
                Boolean(this.parent &&
@@ -1828,12 +1840,20 @@ function removeNode(node: TreeElement, preserveParentExpandable = false): void {
  * @attribute hide-overflow
  */
 export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes =
-      ['navigation-variant', 'hide-overflow', 'dense', 'show-selection-on-keyboard-focus'];
+  static readonly observedAttributes: string[] =
+      ['navigation-variant', 'hide-overflow', 'dense', 'show-selection-on-keyboard-focus', 'disclosure-class'];
   readonly #treeOutline = new TreeOutlineInShadow(undefined, this, true);
+  readonly #syncedTreeClasses = new Set<string>();
 
   constructor() {
     super();
+    this.#treeOutline.contentElement.removeAttribute('jslog');
+    if (!this.hasAttribute('jslog')) {
+      this.setAttribute('jslog', `${VisualLogging.tree()}`);
+    }
+    if (this.hasAttribute('disclosure-class')) {
+      this.#treeOutline.setDisclosureClass(this.getAttribute('disclosure-class') ?? '');
+    }
     this.addEventListener('focusin', (event: Event) => {
       const actualTarget = event.composedPath()[0];
       if (actualTarget === this.#treeOutline.contentElement && !this.#treeOutline.selectedTreeElement &&
@@ -1841,11 +1861,6 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
         this.#treeOutline.firstChild()?.select(/* omitFocus */ true, /* selectedByUser */ false);
       }
     });
-    this.#treeOutline.addEventListener(Events.ElementSelected, event => {
-      if (event.data instanceof TreeViewTreeElement) {
-        event.data.listItemElement.dispatchEvent(new TreeViewElement.SelectEvent());
-      }
-    });
     this.#treeOutline.addEventListener(Events.ElementExpanded, event => {
       // TODO(crbug.com/1166669): This is a stopgap. We can remove the global event once devtools-tree-wrapper is no longer needed.
       this.dispatchEvent(new TreeViewElement.TreeElementExpandEvent(event.data, true));
@@ -1899,6 +1914,24 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
   }
 
   protected override updateNode(node: Node, attributeName: string|null): void {
+    if (node instanceof HTMLUListElement && node.role === 'tree') {
+      if (attributeName === null || attributeName === 'class') {
+        for (const cls of this.#syncedTreeClasses) {
+          if (!node.classList.contains(cls)) {
+            this.#treeOutline.contentElement.classList.remove(cls);
+          }
+        }
+        this.#syncedTreeClasses.clear();
+        for (const cls of node.classList) {
+          if (cls) {
+            this.#syncedTreeClasses.add(cls);
+            this.#treeOutline.contentElement.classList.add(cls);
+          }
+        }
+        this.#treeOutline.contentElement.classList.add('tree-outline');
+      }
+      return;
+    }
     let current: Node|null = node;
     while (current?.parentNode && !(current instanceof HTMLElement)) {
       current = current.parentNode;
@@ -2039,14 +2072,17 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       case 'show-selection-on-keyboard-focus':
         this.#treeOutline.setShowSelectionOnKeyboardFocus(booleanValueIsTrue);
         break;
+      case 'disclosure-class':
+        this.#treeOutline.setDisclosureClass(newValue ?? '');
+        break;
     }
   }
 }
 
 export namespace TreeViewElement {
-  export class SelectEvent extends CustomEvent<void> {
-    constructor() {
-      super('select');
+  export class SelectEvent extends CustomEvent<{selectedByUser?: boolean}> {
+    constructor(detail?: {selectedByUser?: boolean}) {
+      super('select', {detail});
     }
   }
 
@@ -2056,6 +2092,12 @@ export namespace TreeViewElement {
     }
   }
 
+  export class EnterEvent extends CustomEvent<void> {
+    constructor() {
+      super('enter', {bubbles: true, cancelable: true, composed: true});
+    }
+  }
+
   /**
    * @deprecated
    */
@@ -2104,7 +2146,8 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     return node.expanded;
   }
 }
-export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+export const ifExpanded: (content: Lit.LitTemplate|Iterable<Lit.LitTemplate>) =>
+    Lit.DirectiveResult<typeof IfExpandedDirective> = Lit.Directive.directive(IfExpandedDirective);
 
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;

package/front_end/ui/legacy/UIUtils.ts

@@ -71,7 +71,8 @@ declare global {
     'dt-small-bubble': DevToolsSmallBubble;
   }
 }
-const {Directives, render} = Lit;
+const Directives: typeof Lit.Directives = Lit.Directives;
+const render: typeof Lit.render = Lit.render;
 
 const UIStrings = {
   /**
@@ -753,7 +754,8 @@ class AnimateOnDirective extends Lit.Directive.Directive {
   }
 }
 
-export const animateOn = Lit.Directive.directive(AnimateOnDirective);
+export const animateOn: (_condition: boolean, _className: string) => Lit.DirectiveResult<typeof AnimateOnDirective> =
+    Lit.Directive.directive(AnimateOnDirective);
 
 export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
@@ -1195,7 +1197,8 @@ export function setTitle(element: HTMLElement, title: string): void {
 }
 
 export class CheckboxLabel extends HTMLElement {
-  static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label', 'small'];
+  static readonly observedAttributes: string[] =
+      ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label', 'small'];
 
   readonly #shadowRoot!: DocumentFragment;
   #checkboxElement!: HTMLInputElement;
@@ -2080,7 +2083,8 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     const clones: Node[] = [];
     for (const cloneRef of cloneSet) {
       const clone = cloneRef.deref();
-      if (clone) {
+      const root = clone?.getRootNode();
+      if (clone && (root instanceof Document || root instanceof DocumentFragment)) {
         clones.push(clone);
       } else {
         cloneSet.delete(cloneRef);

package/front_end/ui/legacy/ViewManager.ts

@@ -173,7 +173,7 @@ export interface EventTypes {
 }
 
 export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly views = new Map<string, View>();
+  readonly views: Map<string, View> = new Map<string, View>();
   private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 

package/front_end/ui/legacy/ViewRegistration.ts

@@ -60,6 +60,7 @@ export const enum ViewLocationValues {
   NETWORK_SIDEBAR = 'network-sidebar',
   SOURCES_SIDEBAR_TOP = 'sources.sidebar-top',
   SOURCES_SIDEBAR_TABS = 'sources.sidebar-tabs',
+  STATUS_BAR = 'status-bar',
 }
 
 export interface ViewRegistration {

package/front_end/ui/legacy/Widget.ts

@@ -212,7 +212,7 @@ function runNextUpdate(): void {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const widgetConfigs = new WeakMap<HTMLElement, WidgetConfig<any>>();
+export const widgetConfigs: WeakMap<HTMLElement, WidgetConfig<any>> = new WeakMap<HTMLElement, WidgetConfig<any>>();
 
 export function registerWidgetConfig<WidgetT extends AnyWidget>(element: HTMLElement,
                                                                 config: WidgetConfig<WidgetT>): void {

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -1645,7 +1645,13 @@ const MaterialPaletteShades = new Map([
   ],
 ]);
 
-export const MaterialPalette = {
+export const MaterialPalette: {
+  title: string,
+  mutable: boolean,
+  matchUserFormat: boolean,
+  colors: string[],
+  colorNames: string[],
+} = {
   title: 'Material',
   mutable: false,
   matchUserFormat: true,

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

@@ -1756,7 +1756,7 @@ export class DataGridNode<T> {
   selectable = true;
   isRoot = false;
   nodeAccessibleText = '';
-  cellAccessibleTextMap = new Map<string, string>();
+  cellAccessibleTextMap: Map<string, string> = new Map<string, string>();
   isCreationNode = false;
   #data: DataGridData;
   #hasChildren: boolean;

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

@@ -58,7 +58,7 @@ type DataGridElementNode = SortableNode|DynamicHeightNode;
 const elementToNode = new WeakMap<Element, DataGridElementNode>();
 
 export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes = ['striped', 'name', 'inline', 'resize', 'highlight'];
+  static readonly observedAttributes: string[] = ['striped', 'name', 'inline', 'resize', 'highlight'];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   #dataGrid!: DataGridImpl<any>;
@@ -805,7 +805,8 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     return node.expanded;
   }
 }
-export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+export const ifExpanded: (content: Lit.LitTemplate|Iterable<Lit.LitTemplate>) =>
+    Lit.DirectiveResult<typeof IfExpandedDirective> = Lit.Directive.directive(IfExpandedDirective);
 
 function getNode(element: Element|undefined): DataGridElementNode|undefined {
   return element ? elementToNode.get(element) : undefined;