chrome-devtools-frontend 1.0.1537268 → 1.0.1537860

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

@@ -5,7 +5,7 @@
 import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/expandable_list/expandable_list.js';
 import '../../../ui/components/report_view/report_view.js';
-import '../../../ui/components/tree_outline/tree_outline.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -15,7 +15,6 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
-import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
@@ -213,22 +212,23 @@ function maybeRenderFrameTree(
     return nothing;
   }
 
-  function treeNodeRenderer(node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>): TemplateResult {
+  function renderFrameTreeNode(node: FrameTreeNodeData): TemplateResult {
     // clang-format off
     return html`
-      <div class="text-ellipsis">
-        ${node.treeNodeData.iconName ? html`
-          <devtools-icon class="inline-icon extra-large" .name=${node.treeNodeData.iconName} style="margin-bottom: -3px;">
+      <li role="treeitem" class="text-ellipsis">
+        ${node.iconName ? html`
+          <devtools-icon class="inline-icon extra-large" .name=${node.iconName} style="margin-bottom: -3px;">
           </devtools-icon>
         ` : nothing}
-        ${node.treeNodeData.text}
-      </div>`;
+        ${node.text}
+        ${node.children?.length ? html`
+          <ul role="group" hidden>
+            ${node.children.map(child => renderFrameTreeNode(child))}
+          </ul>` : nothing}
+      </li>`;
     // clang-format on
   }
 
-  const frameTreeNode = buildFrameTree(frameTreeData.node);
-  // Override the icon for the outermost frame.
-  frameTreeNode.treeNodeData.iconName = 'frame';
   let title = '';
   // The translation pipeline does not support nested plurals. We avoid this
   // here by pulling out the logic for one of the plurals into code instead.
@@ -237,49 +237,31 @@ function maybeRenderFrameTree(
   } else {
     title = i18nString(UIStrings.issuesInMultipleFrames, {n: frameTreeData.issueCount, m: frameTreeData.frameCount});
   }
-  const root: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> = {
-    treeNodeData: {
-      text: title,
-    },
-    id: 'root',
-    children: () => Promise.resolve([frameTreeNode]),
-  };
-
   // clang-format off
   return html`
     <devtools-report-key jslog=${VisualLogging.section('frames')}>${i18nString(UIStrings.framesTitle)}</devtools-report-key>
     <devtools-report-value>
-      <devtools-tree-outline .data=${{
-        tree: [root],
-        defaultRenderer: treeNodeRenderer,
-        compact: true,
-      } as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
-      </devtools-tree-outline>
+      <devtools-tree .template=${html`
+        <ul role="tree">
+          <li role="treeitem" class="text-ellipsis">
+            ${title}
+            <ul role="group">
+              ${renderFrameTreeNode(frameTreeData.node)}
+            </ul>
+          </li>
+        </ul>
+      `}>
+      </devtools-tree>
     </devtools-report-value>`;
   // clang-format on
 }
 
-let nextNodeId = 0;
-
-function buildFrameTree(data: FrameTreeNodeData): TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> {
-  const children = data.children;
-  const node = {
-    treeNodeData: {
-      text: data.text,
-      ...(data.iconName ? {iconName: data.iconName} : {}),
-    },
-    ...(children?.length ? {children: () => Promise.resolve(children.map(child => buildFrameTree(child)))} : {}),
-    id: String(nextNodeId++),
-  };
-  return node;
-}
-
 function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult {
   switch (status) {
     case true:
       // clang-format off
       return html`
-        <devtools-report-section class="cache-status-section" tabindex="-1">
+        <devtools-report-section autofocus tabindex="-1">
           <div class="status extra-large">
             <devtools-icon class="inline-icon extra-large" name="check-circle" style="color: var(--icon-checkmark-green);">
             </devtools-icon>
@@ -290,7 +272,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult
     case false:
       // clang-format off
       return html`
-        <devtools-report-section class="cache-status-section" tabindex="-1">
+        <devtools-report-section autofocus tabindex="-1">
           <div class="status">
             <devtools-icon class="inline-icon extra-large" name="clear">
             </devtools-icon>
@@ -301,7 +283,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult
   }
   // clang-format off
   return html`
-    <devtools-report-section class="cache-status-section" tabindex="-1">
+    <devtools-report-section autofocus tabindex="-1">
       ${i18nString(UIStrings.unknown)}
     </devtools-report-section>`;
   // clang-format on
@@ -477,7 +459,7 @@ export class BackForwardCacheView extends UI.Widget.Widget {
   #view: View;
 
   constructor(view = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+    super({useShadowDom: true, delegatesFocus: true});
     this.#view = view;
     this.#getMainResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.requestUpdate, this);
@@ -497,13 +479,17 @@ export class BackForwardCacheView extends UI.Widget.Widget {
 
   override async performUpdate(): Promise<void> {
     const reasonToFramesMap = new Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>();
-    const explanationTree = this.#getMainFrame()?.backForwardCacheDetails?.explanationsTree;
+    const frame = this.#getMainFrame();
+    const explanationTree = frame?.backForwardCacheDetails?.explanationsTree;
     if (explanationTree) {
       this.#buildReasonToFramesMap(explanationTree, {blankCount: 1}, reasonToFramesMap);
     }
+    const frameTreeData = this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1});
+    // Override the icon for the outermost frame.
+    frameTreeData.node.iconName = 'frame';
     const viewInput: ViewInput = {
-      frame: this.#getMainFrame(),
-      frameTreeData: this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1}),
+      frame,
+      frameTreeData,
       reasonToFramesMap,
       screenStatus: this.#screenStatus,
       navigateAwayAndBack: this.#navigateAwayAndBack.bind(this),
@@ -519,10 +505,7 @@ export class BackForwardCacheView extends UI.Widget.Widget {
     this.requestUpdate();
     void this.updateComplete.then(() => {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.testCompleted));
-      const resultsSection = this.contentElement?.querySelector('.cache-status-section') as HTMLElement;
-      if (resultsSection) {
-        resultsSection.focus();
-      }
+      this.contentElement.focus();
     });
   }
 

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

@@ -5,7 +5,7 @@
 /* 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';
@@ -78,6 +78,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface BadgeData {
   badgeContent: string;
   style: 'error'|'success'|'secondary';
+  additionalClass?: string;
 }
 
 function createBadge(data: BadgeData): Adorners.Adorner.Adorner {
@@ -89,6 +90,9 @@ function createBadge(data: BadgeData): Adorners.Adorner.Adorner {
     content: adornerContent,
   };
   adorner.classList.add(`badge-${data.style}`);
+  if (data.additionalClass) {
+    adorner.classList.add(data.additionalClass);
+  }
   return adorner;
 }
 
@@ -103,48 +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 = createBadge({
-        badgeContent: i18nString(UIStrings.tokens, {PH1: trial.tokensWithStatus.length}),
-        style: 'secondary',
-      });
+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}
-        <style>${badgeStyles}</style>
-        ${createBadge({
-        badgeContent: trial.status,
-        style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
+  // 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',
       })}
-        ${trial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
-      `;
-    },
-  };
+      ${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 = createBadge({
-        badgeContent: tokenStatus,
-        style: tokenStatus === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-      });
-      // 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 {
@@ -152,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 {
@@ -207,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();
   }
 
@@ -216,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}
@@ -327,11 +329,12 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     <style>
       ${originTrialTreeViewStyles}
     </style>
-    <devtools-tree-outline .data=${{
-      tree: input.trials.map(constructOriginTrialTree),
-      defaultRenderer,
-    } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-    </devtools-tree-outline>
+    <devtools-tree .template=${html`
+      <ul role="tree">
+        ${input.trials.map(constructOriginTrialTree)}
+      </ul>
+    `}>
+    </devtools-tree>
   `, target);
   // clang-format on
 };

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;
 }

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

@@ -23,3 +23,11 @@
 :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/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;

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -129,7 +129,7 @@ export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  #select(id: string, shouldFocus = false): Promise<boolean> {
+  #select(id: string, shouldFocus = false): Promise<void> {
     this.#selectedId = id;
     this.requestUpdate();
     this.#onItemSelected(id, shouldFocus);

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -17,7 +17,7 @@ import {DeveloperResourcesListView} from './DeveloperResourcesListView.js';
 import developerResourcesViewStyles from './developerResourcesView.css.js';
 
 const {widgetConfig} = UI.Widget;
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -12,7 +12,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import elementStatePaneWidgetStyles from './elementStatePaneWidget.css.js';
 
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/elements/EventListenersWidget.ts

@@ -39,8 +39,7 @@ import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as EventListeners from '../event_listeners/event_listeners.js';
 
-const {bindToSetting} = UI.SettingsUI;
-const {bindToAction} = UI.UIUtils;
+const {bindToAction, bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/elements/PropertiesWidget.ts

@@ -47,7 +47,7 @@ import propertiesWidgetStyles from './propertiesWidget.css.js';
 
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
-const {bindToSetting} = UI.SettingsUI;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**

package/front_end/panels/network/NetworkConfigView.ts

@@ -8,6 +8,7 @@ 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 Protocol from '../../generated/protocol.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -208,7 +209,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
 
   private createCacheSection(): void {
     const section = this.createSection(i18nString(UIStrings.caching), 'network-config-disable-cache');
-    section.appendChild(UI.SettingsUI.createSettingCheckbox(
+    section.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.disableCache), Common.Settings.Settings.instance().moduleSetting('cache-disabled')));
   }
 

package/front_end/panels/network/NetworkPanel.ts

@@ -48,6 +48,7 @@ import type * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -259,17 +260,17 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     const settingsPane = panel.contentElement.createChild('div', 'network-settings-pane');
     settingsPane.append(
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.useLargeRequestRows), this.networkLogLargeRowsSetting,
             i18nString(UIStrings.showMoreInformationInRequestRows)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.groupByFrame),
             Common.Settings.Settings.instance().moduleSetting('network.group-by-frame'),
             i18nString(UIStrings.groupRequestsByTopLevelRequest)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.showOverview), this.networkLogShowOverviewSetting,
             i18nString(UIStrings.showOverviewOfNetworkRequests)),
-        UI.SettingsUI.createSettingCheckbox(
+        SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.captureScreenshots), this.networkRecordFilmStripSetting,
             i18nString(UIStrings.captureScreenshotsWhenLoadingA)),