chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

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

@@ -1,24 +1,22 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-/* 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 '../../../ui/components/adorners/adorners.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 {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
-import badgeStyles from './badge.css.js';
 import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
 import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
-const {html, Directives: {ifDefined}} = Lit;
+const {classMap} = Directives;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -75,23 +73,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/OriginTrialTreeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface BadgeData {
-  badgeContent: string;
-  style: 'error'|'success'|'secondary';
-}
-
-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}`);
-  return adorner;
-}
-
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
 
 /**
@@ -103,103 +84,124 @@ 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',
-      });
-
-      return html`
-        ${trial.trialName}
-        <style>${badgeStyles}</style>
-        ${createBadge({
-        badgeContent: trial.status,
-        style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
-      })}
-        ${trial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
-      `;
-    },
-  };
+function renderOriginTrialTree(originTrial: Protocol.Page.OriginTrial): LitTemplate {
+  const success = originTrial.status === Protocol.Page.OriginTrialStatus.Enabled;
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      ${originTrial.trialName}
+      <devtools-adorner class="badge-${success ? 'success' : 'error'}">
+        ${originTrial.status}
+      </devtools-adorner>
+      ${originTrial.tokensWithStatus.length > 1 ?  html`
+        <devtools-adorner class="badge-secondary">
+          ${i18nString(UIStrings.tokens, {PH1: originTrial.tokensWithStatus.length})}
+        </devtools-adorner>`
+        : nothing}
+      <ul role="group" hidden>
+        ${originTrial.tokensWithStatus.length > 1 ?
+          originTrial.tokensWithStatus.map(renderTokenNode) :
+          renderTokenDetailsNodes(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 renderTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): LitTemplate {
+  const success = token.status === Protocol.Page.OriginTrialTokenStatus.Success;
+  // Only display token status for convenience when the node is not expanded.
+  // clang-format off
+  return html`
+    <li role="treeitem">
+      ${i18nString(UIStrings.token)}
+      <devtools-adorner class="token-status-badge badge-${success ? 'success' : 'error'}">
+        ${token.status}
+      </devtools-adorner>
+      <ul role="group" hidden>
+        ${renderTokenDetailsNodes(token)}
+      </ul>
+    </li>`;
 }
 
 interface TokenField {
   name: string;
-  value: Lit.TemplateResult;
+  value: {text: string, hasError?: boolean};
 }
 
-function renderTokenDetails(node: TreeNode<OriginTrialTreeNodeData>): Lit.TemplateResult {
+function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): TemplateResult {
   return html`
-    <devtools-resources-origin-trial-token-rows .data=${{node} as OriginTrialTokenRowsData}>
-    </devtools-resources-origin-trial-token-rows>
-    `;
-}
-
-function constructTokenDetailsNodes(token: Protocol.Page.OriginTrialTokenWithStatus):
-    Array<TreeNode<OriginTrialTreeNodeData>> {
-  return [
-    {
-      treeNodeData: token,
-      id: 'TokenDetailsNode#' + token.rawTokenText,
-      renderer: renderTokenDetails,
-    },
-    constructRawTokenTextNode(token.rawTokenText),
-  ];
+    <li role="treeitem">
+      <devtools-widget .widgetConfig=${widgetConfig(OriginTrialTokenRows, {data: token})}>
+      </devtools-widget>
+    </li>`;
 }
 
-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>
-        `;
-      },
-    }],
-  };
+function renderTokenDetailsNodes(token: Protocol.Page.OriginTrialTokenWithStatus):
+    TemplateResult {
+  // clang-format off
+  return html`
+    ${renderTokenDetails(token)}
+    ${renderRawTokenTextNode(token.rawTokenText)}
+  `;
+  // clang-format on
 }
 
-function defaultRenderer(node: TreeNode<OriginTrialTreeNodeData>): Lit.TemplateResult {
-  return html`${String(node.treeNodeData)}`;
+function renderRawTokenTextNode(tokenText: string): 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 {
   node: TreeNode<OriginTrialTreeNodeData>;
 }
 
-export class OriginTrialTokenRows extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface RowsViewInput {
+  tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus;
+  parsedTokenDetails: TokenField[];
+}
+
+type RowsView = (input: RowsViewInput, output: undefined, target: HTMLElement) => void;
+
+const ROWS_DEFAULT_VIEW: RowsView = (input, _output, target) => {
+  const success = input.tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success;
+  // clang-format off
+  render(html`
+    <style>
+      ${originTrialTokenRowsStyles}
+      ${originTrialTreeViewStyles}
+    </style>
+    <div class="content">
+      <div class="key">${i18nString(UIStrings.status)}</div>
+      <div class="value">
+        <devtools-adorner class="badge-${success ? 'success' : 'error'}">
+          ${input.tokenWithStatus.status}
+        </devtools-adorner>
+      </div>
+      ${input.parsedTokenDetails.map((field: TokenField) => html`
+        <div class="key">${field.name}</div>
+        <div class="value">
+          <div class=${classMap({'error-text': Boolean(field.value.hasError)})}>
+            ${field.value.text}
+          </div>
+        </div>
+      `)}
+    </div>`, target);
+  // clang-format on
+};
+
+export class OriginTrialTokenRows extends UI.Widget.Widget {
+  #view: RowsView;
   #tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus|null = null;
   #parsedTokenDetails: TokenField[] = [];
   #dateFormatter: Intl.DateTimeFormat = new Intl.DateTimeFormat(
@@ -207,20 +209,20 @@ export class OriginTrialTokenRows extends HTMLElement {
       {dateStyle: 'long', timeStyle: 'long'},
   );
 
-  set data(data: OriginTrialTokenRowsData) {
-    this.#tokenWithStatus = data.node.treeNodeData as Protocol.Page.OriginTrialTokenWithStatus;
+  constructor(element?: HTMLElement, view: RowsView = ROWS_DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set data(data: Protocol.Page.OriginTrialTokenWithStatus) {
+    this.#tokenWithStatus = data;
     this.#setTokenFields();
   }
 
   connectedCallback(): void {
-    this.#render();
+    this.requestUpdate();
   }
 
-  #renderTokenField = (fieldValue: string, hasError?: boolean): Lit.TemplateResult => html`
-        <div class=${ifDefined(hasError ? 'error-text' : undefined)}>
-          ${fieldValue}
-        </div>`;
-
   #setTokenFields(): void {
     if (!this.#tokenWithStatus?.parsedToken) {
       return;
@@ -228,27 +230,29 @@ export class OriginTrialTokenRows extends HTMLElement {
     this.#parsedTokenDetails = [
       {
         name: i18nString(UIStrings.origin),
-        value: this.#renderTokenField(
-            this.#tokenWithStatus.parsedToken.origin,
-            this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.WrongOrigin),
+        value: {
+          text: this.#tokenWithStatus.parsedToken.origin,
+          hasError: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.WrongOrigin,
+        },
       },
       {
         name: i18nString(UIStrings.expiryTime),
-        value: this.#renderTokenField(
-            this.#dateFormatter.format(this.#tokenWithStatus.parsedToken.expiryTime * 1000),
-            this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired),
+        value: {
+          text: this.#dateFormatter.format(this.#tokenWithStatus.parsedToken.expiryTime * 1000),
+          hasError: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired
+        },
       },
       {
         name: i18nString(UIStrings.usageRestriction),
-        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.usageRestriction),
+        value: {text: this.#tokenWithStatus.parsedToken.usageRestriction},
       },
       {
         name: i18nString(UIStrings.isThirdParty),
-        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.isThirdParty.toString()),
+        value: {text: this.#tokenWithStatus.parsedToken.isThirdParty.toString()},
       },
       {
         name: i18nString(UIStrings.matchSubDomains),
-        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.matchSubDomains.toString()),
+        value: {text: this.#tokenWithStatus.parsedToken.matchSubDomains.toString()},
       },
     ];
 
@@ -256,53 +260,27 @@ export class OriginTrialTokenRows extends HTMLElement {
       this.#parsedTokenDetails = [
         {
           name: i18nString(UIStrings.trialName),
-          value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.trialName),
+          value: {text: this.#tokenWithStatus.parsedToken.trialName},
         },
         ...this.#parsedTokenDetails,
       ];
     }
+    this.requestUpdate();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#tokenWithStatus) {
       return;
     }
 
-    const tokenDetails: TokenField[] = [
-      {
-        name: i18nString(UIStrings.status),
-        value: html`
-          <style>${badgeStyles}</style>
-          ${createBadge({
-          badgeContent: this.#tokenWithStatus.status,
-          style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-        })}`,
-      },
-      ...this.#parsedTokenDetails,
-    ];
-
-    const tokenDetailRows = tokenDetails.map((field: TokenField) => {
-      return html`
-          <div class="key">${field.name}</div>
-          <div class="value">${field.value}</div>
-          `;
-    });
-
-    Lit.render(
-        html`
-      <style>
-        ${originTrialTokenRowsStyles}
-      </style>
-      <div class="content">
-        ${tokenDetailRows}
-      </div>
-    `,
-        this.#shadow, {host: this});
+    const viewInput: RowsViewInput = {
+      tokenWithStatus: this.#tokenWithStatus,
+      parsedTokenDetails: this.#parsedTokenDetails,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }
 
-customElements.define('devtools-resources-origin-trial-token-rows', OriginTrialTokenRows);
-
 export interface OriginTrialTreeViewData {
   trials: Protocol.Page.OriginTrial[];
 }
@@ -312,8 +290,7 @@ type View = (input: OriginTrialTreeViewData, output: undefined, target: HTMLElem
 const DEFAULT_VIEW: View = (input, _output, target) => {
   if (!input.trials.length) {
     // clang-format off
-    Lit.render(html`
-      <style>${originTrialTreeViewStyles}</style>
+    render(html`
       <span class="status-badge">
         <devtools-icon class="medium" name="clear"></devtools-icon>
         <span>${i18nString(UIStrings.noTrialTokens)}</span>
@@ -323,15 +300,15 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
   }
 
   // clang-format off
-  Lit.render(html`
-    <style>
-      ${originTrialTreeViewStyles}
-    </style>
-    <devtools-tree-outline .data=${{
-      tree: input.trials.map(constructOriginTrialTree),
-      defaultRenderer,
-    } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-    </devtools-tree-outline>
+  render(html`
+    <style>${originTrialTreeViewStyles}</style>
+    <devtools-tree .template=${html`
+      <style>${originTrialTreeViewStyles}</style>
+      <ul role="tree">
+        ${input.trials.map(renderOriginTrialTree)}
+      </ul>
+    `}>
+    </devtools-tree>
   `, target);
   // clang-format on
 };
@@ -354,9 +331,3 @@ export class OriginTrialTreeView extends UI.Widget.Widget {
     this.#view(this.#data, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-origin-trial-token-rows': OriginTrialTokenRows;
-  }
-}

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/originTrialTreeView.css

@@ -4,12 +4,42 @@
  * found in the LICENSE file.
  */
 
-.status-badge {
-  border-radius: 4px;
-  padding: 4px;
-  background: var(--sys-color-neutral-container);
+:host {
+  .status-badge {
+    border-radius: 4px;
+    padding: 4px;
+    background: var(--sys-color-neutral-container);
 
-  & > devtools-icon {
-    vertical-align: sub;
+    & > devtools-icon {
+      vertical-align: sub;
+    }
   }
-}
+
+  .badge-error {
+    --override-adorner-text-color: var(--sys-color-error-bright);
+    --override-adorner-border-color: var(--sys-color-error-bright);
+  }
+
+  .badge-success {
+    --override-adorner-text-color: var(--sys-color-tertiary);
+    --override-adorner-border-color: var(--sys-color-tertiary);
+  }
+
+  .badge-secondary {
+    --override-adorner-text-color: var(--sys-color-token-subtle);
+    --override-adorner-border-color: var(--sys-color-token-subtle);
+  }
+
+  /* Use mono-space source code font to assist reading of adorner content */
+  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

@@ -4,7 +4,7 @@
 
 import type * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type * as Platform from '../../../../core/platform/platform.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
@@ -741,6 +741,35 @@ export function capitalizedAction(action: Protocol.Preload.SpeculationAction): C
   }
 }
 
+export function sortOrder(attempt: SDK.PreloadingModel.PreloadingAttempt): number {
+  switch (attempt.status) {
+    case SDK.PreloadingModel.PreloadingStatus.NOT_SUPPORTED:
+      return 0;
+    case SDK.PreloadingModel.PreloadingStatus.PENDING:
+      return 1;
+    case SDK.PreloadingModel.PreloadingStatus.RUNNING:
+      return 2;
+    case SDK.PreloadingModel.PreloadingStatus.READY:
+      return 3;
+    case SDK.PreloadingModel.PreloadingStatus.SUCCESS:
+      return 4;
+    case SDK.PreloadingModel.PreloadingStatus.FAILURE: {
+      switch (attempt.action) {
+        case Protocol.Preload.SpeculationAction.Prefetch:
+          return 5;
+        case Protocol.Preload.SpeculationAction.Prerender:
+          return 6;
+        case Protocol.Preload.SpeculationAction.PrerenderUntilScript:
+          return 7;
+      }
+    }
+    case SDK.PreloadingModel.PreloadingStatus.NOT_TRIGGERED:
+      return 8;
+    default:
+      Platform.assertNever(attempt.status, 'Unknown Preloading attempt status');
+  }
+}
+
 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 = {
   /**