chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/front_end/panels/application/components/OriginTrialTreeView.ts

@@ -5,12 +5,13 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/icon_button/icon_button.js';
-import '../../../ui/components/tree_outline/tree_outline.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import badgeStyles from './badge.css.js';
@@ -77,36 +78,24 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface BadgeData {
   badgeContent: string;
   style: 'error'|'success'|'secondary';
+  additionalClass?: string;
 }
 
-export class Badge extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #adorner = new Adorners.Adorner.Adorner();
-
-  set data(data: BadgeData) {
-    this.#render(data);
-  }
-
-  #render(data: BadgeData): void {
-    const adornerContent = document.createElement('span');
-    adornerContent.textContent = data.badgeContent;
-    this.#adorner.data = {
-      name: 'badge',
-      content: adornerContent,
-    };
-    this.#adorner.classList.add(`badge-${data.style}`);
-
-    Lit.render(
-        html`
-      <style>${badgeStyles}</style>
-      ${this.#adorner}
-    `,
-        this.#shadow, {host: this});
+function createBadge(data: BadgeData): Adorners.Adorner.Adorner {
+  const adorner = new Adorners.Adorner.Adorner();
+  const adornerContent = document.createElement('span');
+  adornerContent.textContent = data.badgeContent;
+  adorner.data = {
+    name: 'badge',
+    content: adornerContent,
+  };
+  adorner.classList.add(`badge-${data.style}`);
+  if (data.additionalClass) {
+    adorner.classList.add(data.additionalClass);
   }
+  return adorner;
 }
 
-customElements.define('devtools-resources-origin-trial-tree-view-badge', Badge);
-
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
 
 /**
@@ -118,51 +107,46 @@ type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
  **/
 export type OriginTrialTreeNodeData = Protocol.Page.OriginTrial|Protocol.Page.OriginTrialTokenWithStatus|string;
 
-function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): TreeNode<OriginTrialTreeNodeData> {
-  return {
-    treeNodeData: originTrial,
-    id: 'OriginTrialTreeNode#' + originTrial.trialName,
-    children: async () => originTrial.tokensWithStatus.length > 1 ?
-        originTrial.tokensWithStatus.map(constructTokenNode) :
-        constructTokenDetailsNodes(originTrial.tokensWithStatus[0]),
-    renderer: (node: TreeNode<OriginTrialTreeNodeData>) => {
-      const trial = node.treeNodeData as Protocol.Page.OriginTrial;
-      const tokenCountBadge = html`
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
-        badgeContent: i18nString(UIStrings.tokens, {PH1: trial.tokensWithStatus.length}),
-        style: 'secondary',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-      `;
+function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): Lit.LitTemplate {
+  const tokenCountBadge = createBadge({
+    badgeContent: i18nString(UIStrings.tokens, {PH1: originTrial.tokensWithStatus.length}),
+    style: 'secondary',
+  });
 
-      return html`
-        ${trial.trialName}
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
-        badgeContent: trial.status,
-        style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-        ${trial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
-      `;
-    },
-  };
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      ${originTrial.trialName}
+      <style>${badgeStyles}</style>
+      ${createBadge({
+        badgeContent: originTrial.status,
+        style: originTrial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
+      })}
+      ${originTrial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
+      <ul role="group" hidden>
+        ${originTrial.tokensWithStatus.length > 1 ?
+          originTrial.tokensWithStatus.map(constructTokenNode) :
+          constructTokenDetailsNodes(originTrial.tokensWithStatus[0])}
+      </ul>
+    </li>`;
+  // clang-format on
 }
 
-function constructTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): TreeNode<OriginTrialTreeNodeData> {
-  return {
-    treeNodeData: token.status,
-    id: 'TokenNode#' + token.rawTokenText,
-    children: async () => constructTokenDetailsNodes(token),
-    renderer: (node: TreeNode<OriginTrialTreeNodeData>, state: {isExpanded: boolean}) => {
-      const tokenStatus = node.treeNodeData as string;
-      const statusBadge = html`
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
-        badgeContent: tokenStatus,
-        style: tokenStatus === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-      `;
-      // Only display token status for convenience when the node is not expanded.
-      return html`${i18nString(UIStrings.token)} ${state.isExpanded ? Lit.nothing : statusBadge}`;
-    },
-  };
+function constructTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): Lit.LitTemplate {
+  const statusBadge = createBadge({
+    badgeContent: token.status,
+    style: token.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
+    additionalClass: 'token-status-badge',
+  });
+  // Only display token status for convenience when the node is not expanded.
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      ${i18nString(UIStrings.token)} ${statusBadge}
+      <ul role="group" hidden>
+        ${constructTokenDetailsNodes(token)}
+      </ul>
+    </li>`;
 }
 
 interface TokenField {
@@ -170,46 +154,38 @@ interface TokenField {
   value: Lit.TemplateResult;
 }
 
-function renderTokenDetails(node: TreeNode<OriginTrialTreeNodeData>): Lit.TemplateResult {
+function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): Lit.TemplateResult {
   return html`
-    <devtools-resources-origin-trial-token-rows .data=${{node} as OriginTrialTokenRowsData}>
-    </devtools-resources-origin-trial-token-rows>
-    `;
+    <li role="treeitem">
+      <devtools-resources-origin-trial-token-rows .data=${token}>
+      </devtools-resources-origin-trial-token-rows>
+    </li>`;
 }
 
 function constructTokenDetailsNodes(token: Protocol.Page.OriginTrialTokenWithStatus):
-    Array<TreeNode<OriginTrialTreeNodeData>> {
-  return [
-    {
-      treeNodeData: token,
-      id: 'TokenDetailsNode#' + token.rawTokenText,
-      renderer: renderTokenDetails,
-    },
-    constructRawTokenTextNode(token.rawTokenText),
-  ];
-}
-
-function constructRawTokenTextNode(tokenText: string): TreeNode<OriginTrialTreeNodeData> {
-  return {
-    treeNodeData: i18nString(UIStrings.rawTokenText),
-    id: 'TokenRawTextContainerNode#' + tokenText,
-    children: async () => [{
-      treeNodeData: tokenText,
-      id: 'TokenRawTextNode#' + tokenText,
-      renderer: (data: TreeNode<OriginTrialTreeNodeData>) => {
-        const tokenText = data.treeNodeData as string;
-        return html`
-        <div style="overflow-wrap: break-word;">
-          ${tokenText}
-        </div>
-        `;
-      },
-    }],
-  };
+    Lit.LitTemplate {
+  // clang-format off
+  return html`
+    ${renderTokenDetails(token)}
+    ${constructRawTokenTextNode(token.rawTokenText)}
+  `;
+  // clang-format on
 }
 
-function defaultRenderer(node: TreeNode<OriginTrialTreeNodeData>): Lit.TemplateResult {
-  return html`${String(node.treeNodeData)}`;
+function constructRawTokenTextNode(tokenText: string): Lit.LitTemplate {
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      ${i18nString(UIStrings.rawTokenText)}
+      <ul role="group" hidden>
+        <li role="treeitem">
+          <div style="overflow-wrap: break-word;">
+            ${tokenText}
+          </div>
+        </li>
+      </ul>
+    </li>`;
+  // clang-format on
 }
 
 export interface OriginTrialTokenRowsData {
@@ -225,8 +201,8 @@ export class OriginTrialTokenRows extends HTMLElement {
       {dateStyle: 'long', timeStyle: 'long'},
   );
 
-  set data(data: OriginTrialTokenRowsData) {
-    this.#tokenWithStatus = data.node.treeNodeData as Protocol.Page.OriginTrialTokenWithStatus;
+  set data(data: Protocol.Page.OriginTrialTokenWithStatus) {
+    this.#tokenWithStatus = data;
     this.#setTokenFields();
   }
 
@@ -234,6 +210,14 @@ export class OriginTrialTokenRows extends HTMLElement {
     this.#render();
   }
 
+  override cloneNode(): HTMLElement {
+    const clone = UI.UIUtils.cloneCustomElement(this);
+    if (this.#tokenWithStatus) {
+      clone.data = this.#tokenWithStatus;
+    }
+    return clone;
+  }
+
   #renderTokenField = (fieldValue: string, hasError?: boolean): Lit.TemplateResult => html`
         <div class=${ifDefined(hasError ? 'error-text' : undefined)}>
           ${fieldValue}
@@ -290,10 +274,11 @@ export class OriginTrialTokenRows extends HTMLElement {
       {
         name: i18nString(UIStrings.status),
         value: html`
-          <devtools-resources-origin-trial-tree-view-badge .data=${{
+          <style>${badgeStyles}</style>
+          ${createBadge({
           badgeContent: this.#tokenWithStatus.status,
           style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-        } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>`,
+        })}`,
       },
       ...this.#parsedTokenDetails,
     ];
@@ -307,7 +292,9 @@ export class OriginTrialTokenRows extends HTMLElement {
 
     Lit.render(
         html`
-      <style>${originTrialTokenRowsStyles}</style>
+      <style>
+        ${originTrialTokenRowsStyles}
+      </style>
       <div class="content">
         ${tokenDetailRows}
       </div>
@@ -322,45 +309,57 @@ export interface OriginTrialTreeViewData {
   trials: Protocol.Page.OriginTrial[];
 }
 
-export class OriginTrialTreeView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: OriginTrialTreeViewData, output: undefined, target: HTMLElement) => void;
 
-  set data(data: OriginTrialTreeViewData) {
-    this.#render(data.trials);
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (!input.trials.length) {
+    // clang-format off
+    Lit.render(html`
+      <style>${originTrialTreeViewStyles}</style>
+      <span class="status-badge">
+        <devtools-icon class="medium" name="clear"></devtools-icon>
+        <span>${i18nString(UIStrings.noTrialTokens)}</span>
+      </span>`, target);
+    // clang-format on
+    return;
   }
 
-  #render(trials: Protocol.Page.OriginTrial[]): void {
-    if (!trials.length) {
-      Lit.render(
-          html`
-    <style>${originTrialTreeViewStyles}</style>
-    <span class="status-badge">
-      <devtools-icon class="medium" name="clear"></devtools-icon>
-      <span>${i18nString(UIStrings.noTrialTokens)}</span>
-    </span>`,
-          this.#shadow, {host: this});
-      return;
-    }
+  // clang-format off
+  Lit.render(html`
+    <style>
+      ${originTrialTreeViewStyles}
+    </style>
+    <devtools-tree .template=${html`
+      <ul role="tree">
+        ${input.trials.map(constructOriginTrialTree)}
+      </ul>
+    `}>
+    </devtools-tree>
+  `, target);
+  // clang-format on
+};
+
+export class OriginTrialTreeView extends UI.Widget.Widget {
+  #data: OriginTrialTreeViewData = {trials: []};
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-    Lit.render(
-        html`
-      <style>${originTrialTreeViewStyles}</style>
-      <devtools-tree-outline .data=${{
-          tree: trials.map(constructOriginTrialTree),
-          defaultRenderer,
-        } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-      </devtools-tree-outline>
-    `,
-        this.#shadow, {host: this});
+  set data(data: OriginTrialTreeViewData) {
+    this.#data = data;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-resources-origin-trial-tree-view', OriginTrialTreeView);
+  override performUpdate(): void {
+    this.#view(this.#data, undefined, this.contentElement);
+  }
+}
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-resources-origin-trial-tree-view': OriginTrialTreeView;
     'devtools-resources-origin-trial-token-rows': OriginTrialTokenRows;
-    'devtools-resources-origin-trial-tree-view-badge': Badge;
   }
 }

package/front_end/panels/application/components/backForwardCacheView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+devtools-report-value {
+  overflow: hidden;
+}
+
 .inline-icon {
   vertical-align: sub;
 }
@@ -73,6 +77,10 @@ devtools-report-value:has(devtools-tree-outline) {
   margin-left: var(--sys-size-7);
 }
 
+.cache-status-section:focus-visible {
+ outline: 0;
+}
+
 .tree-outline li .selection {
   margin-left: -5px;
 }

package/front_end/panels/application/components/badge.css

@@ -20,6 +20,14 @@
 }
 
 /* Use mono-space source code font to assist reading of adorner content */
-:host {
+:host devtools-adorner {
   font-family: var(--source-code-font-family);
 }
+
+.token-status-badge {
+  display: none;
+}
+
+[aria-expanded='false'] .token-status-badge {
+  display: inline-flex;
+}

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -16,7 +16,7 @@ import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import preloadingGridStyles from './preloadingGrid.css.js';
-import {capitalizedAction, composedStatus, ruleSetTagOrLocationShort} from './PreloadingString.js';
+import {capitalizedAction, composedStatus, ruleSetTagOrLocationShort, sortOrder} from './PreloadingString.js';
 
 const {PreloadingStatus} = SDK.PreloadingModel;
 
@@ -100,7 +100,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
                 <td title=${attempt.key.url}>${this.#urlShort(row, securityOrigin)}</td>
                 <td>${capitalizedAction(attempt.action)}</td>
                 <td>${row.ruleSets.length === 0 ? '' : ruleSetTagOrLocationShort(row.ruleSets[0], pageURL)}</td>
-                <td>
+                <td data-value=${sortOrder(attempt)}>
                   <div style=${styleMap({color: hasWarning ? 'var(--sys-color-orange-bright)'
                                                 : hasError   ? 'var(--sys-color-error)'
                                                              : 'var(--sys-color-on-surface)'})}>

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -741,6 +741,33 @@ export function capitalizedAction(action: Protocol.Preload.SpeculationAction): C
   }
 }
 
+export function sortOrder(attempt: SDK.PreloadingModel.PreloadingAttempt): number {
+  switch (attempt.status) {
+    case SDK.PreloadingModel.PreloadingStatus.NOT_TRIGGERED:
+      return 0;
+    case SDK.PreloadingModel.PreloadingStatus.NOT_SUPPORTED:
+      return 1;
+    case SDK.PreloadingModel.PreloadingStatus.PENDING:
+      return 2;
+    case SDK.PreloadingModel.PreloadingStatus.RUNNING:
+      return 3;
+    case SDK.PreloadingModel.PreloadingStatus.READY:
+      return 4;
+    case SDK.PreloadingModel.PreloadingStatus.SUCCESS:
+      return 5;
+    case SDK.PreloadingModel.PreloadingStatus.FAILURE: {
+      switch (attempt.action) {
+        case Protocol.Preload.SpeculationAction.Prefetch:
+          return 6;
+        case Protocol.Preload.SpeculationAction.Prerender:
+          return 7;
+        case Protocol.Preload.SpeculationAction.PrerenderUntilScript:
+          return 8;
+      }
+    }
+  }
+}
+
 export function status(status: SDK.PreloadingModel.PreloadingStatus): string {
   // See content/public/browser/preloading.h PreloadingAttemptOutcome.
   switch (status) {

package/front_end/panels/autofill/AutofillView.ts

@@ -20,7 +20,7 @@ import autofillViewStyles from './autofillView.css.js';
 
 const {html, render, Directives: {styleMap}} = Lit;
 const {FillingStrategy} = Protocol.Autofill;
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -126,10 +126,9 @@ const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/CategorizedBre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-const {html, render, Directives: {ref}} = Lit;
+const {html, render} = Lit;
 
 interface ViewOutput {
-  defaultFocus: Element|undefined;
   userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
 }
 interface ViewInput {
@@ -211,53 +210,49 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         style="flex: 1;"
         ></devtools-toolbar-input>
     </devtools-toolbar>
-    <devtools-tree
-      ${ref(e => { output.defaultFocus = e; })}
-      .template=${html`
-        <ul role="tree">
-          ${filteredCategories.map(([category, breakpoints]) => html`
-            <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
-                role="treeitem"
-                jslog-context=${category}
-                aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
-                  ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
-                  : false}>
-              <style>${categorizedBreakpointsSidebarPaneStyles}</style>
-              <devtools-checkbox
-                class="small"
-                tabIndex=-1
-                title=${getLocalizedCategory(category)}
-                ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
-                                 breakpoints.some(breakpoint => breakpoint.enabled())}
-                ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
-                @change=${(e: Event) => onCheckboxClicked(e, category)}
-              >${getLocalizedCategory(category)}</devtools-checkbox>
-              <ul
-                  role="group"
-                  ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
-                ${breakpoints.map(breakpoint => html`
-                <li
-                    role="treeitem"
-                    aria-checked=${breakpoint.enabled()}
-                    jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
-                  <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
-                  <devtools-checkbox
-                    class=${classes(breakpoint)}
-                    tabIndex=-1
-                    title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
-                    ?checked=${breakpoint.enabled()}
-                    aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
-                                                                            : Lit.nothing}
-                    @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
-                  >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
-                </li>`)}
-              </ul>
-            </li>`)}
-        </ul>
-      `}>
-    </devtools-tree>`,
-      // clang-format on
-      target);
+    <devtools-tree autofocus .template=${html`
+      <ul role="tree">
+        ${filteredCategories.map(([category, breakpoints]) => html`
+          <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
+              role="treeitem"
+              jslog-context=${category}
+              aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
+                ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
+                : false}>
+            <style>${categorizedBreakpointsSidebarPaneStyles}</style>
+            <devtools-checkbox
+              class="small"
+              tabIndex=-1
+              title=${getLocalizedCategory(category)}
+              ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
+                                breakpoints.some(breakpoint => breakpoint.enabled())}
+              ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
+              @change=${(e: Event) => onCheckboxClicked(e, category)}
+            >${getLocalizedCategory(category)}</devtools-checkbox>
+            <ul
+                role="group"
+                ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
+              ${breakpoints.map(breakpoint => html`
+              <li
+                  role="treeitem"
+                  aria-checked=${breakpoint.enabled()}
+                  jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
+                <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
+                <devtools-checkbox
+                  class=${classes(breakpoint)}
+                  tabIndex=-1
+                  title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
+                  ?checked=${breakpoint.enabled()}
+                  aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
+                                                                          : Lit.nothing}
+                  @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
+                >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
+              </li>`)}
+            </ul>
+          </li>`)}
+      </ul>`}>
+    </devtools-tree>`, target);
+  // clang-format on
 };
 
 export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
@@ -341,11 +336,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       highlightedItem: this.#highlightedItem,
       userExpandedCategories: this.#userExpandedCategories,
     };
-    const that = this;
     const output: ViewOutput = {
-      set defaultFocus(e: Element|undefined) {
-        that.setDefaultFocusedElement(e ?? null);
-      },
       userExpandedCategories: this.#userExpandedCategories,
     };
     this.#view(input, output, this.contentElement);

package/front_end/panels/console/ConsoleView.ts

@@ -51,6 +51,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -470,29 +471,30 @@ export class ConsoleView extends UI.Widget.VBox implements
     const preserveConsoleLogSetting = Common.Settings.Settings.instance().moduleSetting('preserve-console-log');
     const userActivationEvalSetting = Common.Settings.Settings.instance().moduleSetting('console-user-activation-eval');
     settingsPane.append(
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.hideNetwork), this.filter.hideNetworkMessagesSetting,
             this.filter.hideNetworkMessagesSetting.title()),
-        UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.logXMLHttpRequests), monitoringXHREnabledSetting),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
+            i18nString(UIStrings.logXMLHttpRequests), monitoringXHREnabledSetting),
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
             i18nString(UIStrings.doNotClearLogOnPageReload)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             consoleEagerEvalSetting.title(), consoleEagerEvalSetting,
             i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.selectedContextOnly), this.filter.filterByExecutionContextSetting,
             i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             this.consoleHistoryAutocompleteSetting.title(), this.consoleHistoryAutocompleteSetting,
             i18nString(UIStrings.autocompleteFromHistory)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             this.groupSimilarSetting.title(), this.groupSimilarSetting,
             i18nString(UIStrings.groupSimilarMessagesInConsole)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             userActivationEvalSetting.title(), userActivationEvalSetting,
             i18nString(UIStrings.treatEvaluationAsUserActivation)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             this.showCorsErrorsSetting.title(), this.showCorsErrorsSetting,
             i18nString(UIStrings.showCorsErrorsInConsole)),
     );

package/front_end/panels/coverage/CoverageView.ts

@@ -126,8 +126,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/coverage/CoverageView.ts', UISt
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nTemplate = unboundI18nTemplate.bind(undefined, str_);
 const {ref} = Directives;
-const {bindToAction} = UI.UIUtils;
-const {bindToSetting} = UI.SettingsUI;
+const {bindToAction, bindToSetting} = UI.UIUtils;
 const {widgetConfig} = UI.Widget;
 
 let coverageViewInstance: CoverageView|undefined;