chrome-devtools-frontend 1.0.934857 → 1.0.936663

package/front_end/models/issues_manager/issues_manager.ts

@@ -7,7 +7,6 @@ import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
 import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CorsIssue from './CorsIssue.js';
 import * as CrossOriginEmbedderPolicyIssue from './CrossOriginEmbedderPolicyIssue.js';
-import * as DeprecationIssue from './DeprecationIssue.js';
 import * as GenericIssue from './GenericIssue.js';
 import * as HeavyAdIssue from './HeavyAdIssue.js';
 import * as Issue from './Issue.js';
@@ -16,6 +15,7 @@ import * as IssuesManager from './IssuesManager.js';
 import * as LowTextContrastIssue from './LowTextContrastIssue.js';
 import * as MarkdownIssueDescription from './MarkdownIssueDescription.js';
 import * as MixedContentIssue from './MixedContentIssue.js';
+import * as NavigatorUserAgentIssue from './NavigatorUserAgentIssue.js';
 import * as QuirksModeIssue from './QuirksModeIssue.js';
 import * as RelatedIssue from './RelatedIssue.js';
 import * as SameSiteCookieIssue from './SameSiteCookieIssue.js';
@@ -30,7 +30,6 @@ export {
   ContrastCheckTrigger,
   CorsIssue,
   CrossOriginEmbedderPolicyIssue,
-  DeprecationIssue,
   GenericIssue,
   HeavyAdIssue,
   Issue,
@@ -39,6 +38,7 @@ export {
   LowTextContrastIssue,
   MarkdownIssueDescription,
   MixedContentIssue,
+  NavigatorUserAgentIssue,
   QuirksModeIssue,
   RelatedIssue,
   SameSiteCookieIssue,

package/front_end/panels/application/BackForwardCacheView.ts

@@ -4,6 +4,7 @@
 
 import type * as Platform from '../../core/platform/platform.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as ReportView from '../../ui/components/report_view/report_view.js';
@@ -19,10 +20,6 @@ const UIStrings = {
    * @description Title text in Back-forward Cache view of the Application panel
    */
   mainFrame: 'Main Frame',
-  /**
-   * @description Section header text in Back-forward Cache view of the Application panel
-   */
-  lastMainFrameNavigation: 'Last Main Frame Navigation',
   /**
    * @description Title text in Back-forward Cache view of the Application panel
    */
@@ -83,6 +80,10 @@ const UIStrings = {
    * of chrome they will not prevent back-forward cache usage anymore.
    */
   supportPending: 'Pending Support',
+  /**
+   * @description Button name for showing whether BFCache is available in the pages.
+   */
+  runTest: 'Run Test',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
    * for back-forward cache.
@@ -131,6 +132,48 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     return this.getMainResourceTreeModel()?.mainFrame || null;
   }
 
+  private async goBackOneHistoryEntry(): Promise<void> {
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+        this.goBackOneHistoryEntry, this);
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    if (!mainTarget) {
+      return;
+    }
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceTreeModel) {
+      return;
+    }
+    const historyResults = await resourceTreeModel.navigationHistory();
+    if (!historyResults) {
+      return;
+    }
+    resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
+  }
+
+  private async navigateAwayAndBack(): Promise<void> {
+    // Checking BFCache Compatibility
+
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    if (!mainTarget) {
+      return;
+    }
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+
+    if (resourceTreeModel) {
+      // This event is removed by inside of goBackOneHistoryEntry().
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+          this.goBackOneHistoryEntry, this);
+
+      // We can know whether the current page can use BFCache
+      // as the browser navigates to another unrelated page and goes back to the current page.
+      // We chose "chrome://version" because it must be cross-site.
+      // Ideally, We want to have our own testing page like "chrome: //bfcache-test".
+      resourceTreeModel.navigate('chrome://version/');
+    }
+  }
+
   private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
     if (!mainFrame) {
       return LitHtml.html`<${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.mainFrame)}</${
@@ -140,8 +183,13 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       </${ReportView.ReportView.ReportValue.litTagName}>`;
     }
     return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.lastMainFrameNavigation)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${Buttons.Button.Button.litTagName}
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            @click=${this.navigateAwayAndBack}>
+            ${i18nString(UIStrings.runTest)}
+      </${Buttons.Button.Button.litTagName}>
+      </${ReportView.ReportView.ReportSectionHeader.litTagName}>
       <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>${mainFrame.url}</${

package/front_end/panels/application/module.json

@@ -1,13 +1,8 @@
 {
   "dependencies": [
     "ui/legacy/components/source_frame",
-    "ui/legacy/components/cookie_table",
-    "ui/legacy/components/inline_editor",
-    "ui/legacy/components/data_grid",
     "ui/legacy",
-    "ui/legacy/components/object_ui",
     "ui/legacy/components/perf_ui",
-    "panels/mobile_throttling",
     "panels/network",
     "panels/sources"
   ]

package/front_end/panels/console/ConsoleFilter.ts

@@ -68,7 +68,7 @@ export class ConsoleFilter {
     }
 
     if (message.type === SDK.ConsoleModel.FrontendMessageType.Command ||
-        message.type === SDK.ConsoleModel.FrontendMessageType.Result) {
+        message.type === SDK.ConsoleModel.FrontendMessageType.Result || message.isGroupMessage()) {
       return true;
     }
     if (message.level && !this.levelsMask[message.level as string]) {

package/front_end/panels/console/ConsolePinPane.ts

@@ -263,6 +263,7 @@ export class ConsolePin {
         ]),
         CM.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
         TE.Config.baseConfiguration(expression),
+        TE.Config.autocompletion,
       ],
     }));
     parent.appendChild(this.editor);

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1057,25 +1057,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   matchesFilterText(filter: string): boolean {
-    return ConsoleViewMessage.recursivelyTestParentConsoleMessage(this.message, filter) ||
-        ConsoleViewMessage.recursivelyTestChildrenConsoleMessage(this.message, filter);
-  }
-
-  static recursivelyTestParentConsoleMessage(consoleMessage: SDK.ConsoleModel.ConsoleMessage, filterString: string):
-      boolean {
-    const doesFilterMatchText = consoleMessage.messageText.toLowerCase().includes(filterString.toLowerCase());
-    const doesParentMatchText = consoleMessage.groupParent &&
-        ConsoleViewMessage.recursivelyTestParentConsoleMessage(consoleMessage.groupParent, filterString);
-    return Boolean(doesFilterMatchText || doesParentMatchText);
-  }
-
-  static recursivelyTestChildrenConsoleMessage(consoleMessage: SDK.ConsoleModel.ConsoleMessage, filterString: string):
-      boolean {
-    const doesFilterMatchChildren = consoleMessage.groupChildren?.some(childMessage => {
-      const filterMatch = childMessage.messageText.toLowerCase().includes(filterString.toLowerCase());
-      return filterMatch || ConsoleViewMessage.recursivelyTestChildrenConsoleMessage(childMessage, filterString);
-    });
-    return Boolean(doesFilterMatchChildren);
+    const text = this.contentElement().deepTextContent();
+    return text.toLowerCase().includes(filter.toLowerCase());
   }
 
   updateTimestamp(): void {

package/front_end/panels/console/module.json

@@ -1,8 +1,6 @@
 {
   "dependencies": [
     "ui/legacy",
-    "ui/legacy/components/data_grid",
-    "ui/legacy/components/object_ui",
     "ui/legacy/components/text_editor"
   ]
 }

package/front_end/panels/console_counters/console_counters-meta.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -12,8 +11,6 @@ let loadedConsoleCountersModule: (typeof ConsoleCounters|undefined);
 
 async function loadConsoleCountersModule(): Promise<typeof ConsoleCounters> {
   if (!loadedConsoleCountersModule) {
-    // Side-effect import reconsole_counters in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/console_counters');
     loadedConsoleCountersModule = await import('./console_counters.js');
   }
   return loadedConsoleCountersModule;

package/front_end/panels/coverage/CoverageListView.ts

@@ -138,8 +138,8 @@ export class CoverageListView extends UI.Widget.VBox {
     this.highlightRegExp = null;
 
     const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
-      {id: 'url', title: i18nString(UIStrings.url), width: '250px', fixedWidth: false, sortable: true},
-      {id: 'type', title: i18nString(UIStrings.type), width: '45px', fixedWidth: true, sortable: true},
+      {id: 'url', title: i18nString(UIStrings.url), width: '250px', weight: 3, fixedWidth: false, sortable: true},
+      {id: 'type', title: i18nString(UIStrings.type), width: '45px', weight: 1, fixedWidth: true, sortable: true},
       {
         id: 'size',
         title: i18nString(UIStrings.totalBytes),
@@ -147,6 +147,7 @@ export class CoverageListView extends UI.Widget.VBox {
         fixedWidth: true,
         sortable: true,
         align: DataGrid.DataGrid.Align.Right,
+        weight: 1,
       },
       {
         id: 'unusedSize',
@@ -156,9 +157,17 @@ export class CoverageListView extends UI.Widget.VBox {
         sortable: true,
         align: DataGrid.DataGrid.Align.Right,
         sort: DataGrid.DataGrid.Order.Descending,
+        weight: 1,
       },
-      {id: 'bars', title: i18nString(UIStrings.usageVisualization), width: '250px', fixedWidth: false, sortable: true},
-    ] as DataGrid.DataGrid.ColumnDescriptor[];
+      {
+        id: 'bars',
+        title: i18nString(UIStrings.usageVisualization),
+        width: '250px',
+        fixedWidth: false,
+        sortable: true,
+        weight: 1,
+      },
+    ];
     this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid<GridNode>({
       displayName: i18nString(UIStrings.codeCoverage),
       columns,

package/front_end/panels/coverage/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy/components/data_grid",
     "ui/legacy/components/source_frame",
     "ui/legacy"
   ]

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -106,6 +106,7 @@ export class CSSOverviewStartView extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+    // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
     render(html`
       <div class="css-overview-start-view">
         <h1 class="summary-header">${i18nString(UIStrings.identifyCSSImprovements)}</h1>

package/front_end/panels/css_overview/module.json

@@ -1,5 +1,4 @@
 {
-    "dependencies": [
-    "ui/legacy/components/data_grid"
+  "dependencies": [
   ]
 }

package/front_end/panels/developer_resources/developer_resources-meta.ts

@@ -26,8 +26,6 @@ let loadedDeveloperResourcesModule: (typeof DeveloperResources|undefined);
 
 async function loadDeveloperResourcesModule(): Promise<typeof DeveloperResources> {
   if (!loadedDeveloperResourcesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/developer_resources');
     loadedDeveloperResourcesModule = await import('./developer_resources.js');
   }
   return loadedDeveloperResourcesModule;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1049,10 +1049,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           },
         ]),
         TextEditor.Config.baseConfiguration(initialValue),
+        TextEditor.Config.autocompletion,
         html(),
         TextEditor.Config.domWordWrap,
         CodeMirror.EditorView.theme({
-          '.cm-editor': {maxHeight: '300px'},
+          '&.cm-editor': {maxHeight: '300px'},
           '.cm-scroller': {overflowY: 'auto'},
         }),
         CodeMirror.EditorView.domEventHandlers({

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -160,6 +160,18 @@ const UIStrings = {
   *@description Tooltip text that appears when hovering over the largeicon add button in the Styles Sidebar Pane of the Elements panel
   */
   newStyleRule: 'New Style Rule',
+  /**
+  *@description Text that is announced by the screen reader when the user focuses on an input field for entering the name of a CSS property in the Styles panel
+  */
+  cssPropertyName: '`CSS` property name',
+  /**
+  *@description Text that is announced by the screen reader when the user focuses on an input field for entering the value of a CSS property in the Styles panel
+  */
+  cssPropertyValue: '`CSS` property value',
+  /**
+  *@description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
+  */
+  cssSelector: '`CSS` selector',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -1235,6 +1247,7 @@ export class StylePropertiesSection {
 
     const selectorContainer = document.createElement('div');
     this.selectorElement = document.createElement('span');
+    UI.ARIAUtils.setAccessibleName(this.selectorElement, i18nString(UIStrings.cssSelector));
     this.selectorElement.classList.add('selector');
     this.selectorElement.textContent = this.headerText();
     selectorContainer.appendChild(this.selectorElement);
@@ -2985,6 +2998,7 @@ export class StylesSidebarPropertyRenderer {
 
   renderName(): Element {
     const nameElement = document.createElement('span');
+    UI.ARIAUtils.setAccessibleName(nameElement, i18nString(UIStrings.cssPropertyName));
     nameElement.className = 'webkit-css-property';
     nameElement.textContent = this.propertyName;
     nameElement.normalize();
@@ -2993,6 +3007,7 @@ export class StylesSidebarPropertyRenderer {
 
   renderValue(): Element {
     const valueElement = document.createElement('span');
+    UI.ARIAUtils.setAccessibleName(valueElement, i18nString(UIStrings.cssPropertyValue));
     valueElement.className = 'value';
     if (!this.propertyValue) {
       return valueElement;
@@ -3040,7 +3055,7 @@ export class StylesSidebarPropertyRenderer {
       }
       processors.push(this.fontHandler);
     }
-    if (this.lengthHandler) {
+    if (Root.Runtime.experiments.isEnabled('cssTypeComponentLength') && this.lengthHandler) {
       // TODO(changhaohan): crbug.com/1138628 refactor this to handle unitless 0 cases
       regexes.push(InlineEditor.CSSLengthUtils.CSSLengthRegex);
       processors.push(this.lengthHandler);

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -286,6 +286,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   crumb: true,
                   selected: crumb.selected,
                 };
+                // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
                 return LitHtml.html`
                   <li class=${LitHtml.Directives.classMap(crumbClasses)}
                     data-node-id=${crumb.node.id}

package/front_end/panels/elements/components/QueryContainer.ts

@@ -81,6 +81,7 @@ export class QueryContainer extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+    // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
     render(html`
       →
       <a href="#"

package/front_end/panels/elements/module.json

@@ -1,9 +1,6 @@
 {
   "dependencies": [
     "ui/legacy",
-    "ui/legacy/components/inline_editor",
-    "ui/legacy/components/color_picker",
-    "panels/event_listeners",
     "ui/legacy/components/text_editor"
   ]
 }

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -56,6 +56,10 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
     this.showDeviceModeSetting.set(!this.showDeviceModeSetting.get());
   }
 
+  isDeviceModeOn(): boolean {
+    return this.showDeviceModeSetting.get();
+  }
+
   captureScreenshot(fullSize?: boolean, clip?: Protocol.Page.Viewport): boolean {
     if (!this.deviceModeView) {
       this.deviceModeView = new DeviceModeView();

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -6,6 +6,7 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as UILegacy from '../../../ui/legacy/legacy.js';
 
 class SizeChangedEvent extends Event {
   static readonly eventName = 'sizechanged';
@@ -14,6 +15,10 @@ class SizeChangedEvent extends Event {
   }
 }
 
+function getInputValue(event: Event): number {
+  return Number((event.target as HTMLInputElement).value);
+}
+
 export class SizeInputElement extends HTMLElement {
   #root = this.attachShadow({mode: 'open'});
   #disabled = false;
@@ -86,13 +91,24 @@ export class SizeInputElement extends HTMLElement {
              placeholder=${this.#placeholder}
              ?disabled=${this.#disabled}
              .value=${this.#size}
-             @change=${this.fireSizeChange} />
+             @change=${this.fireSizeChange}
+             @keydown=${this.handleModifierKeys} />
     `,
         this.#root, {host: this});
   }
 
   private fireSizeChange(event: Event): void {
-    this.dispatchEvent(new SizeChangedEvent(Number((event.target as HTMLInputElement).value)));
+    this.dispatchEvent(new SizeChangedEvent(getInputValue(event)));
+  }
+
+  private handleModifierKeys(event: Event): void {
+    const modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
+    if (modifiedValue === null) {
+      return;
+    }
+
+    event.preventDefault();
+    (event.target as HTMLInputElement).value = String(modifiedValue);
   }
 }
 

package/front_end/panels/emulation/module.json

@@ -1,7 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "panels/mobile_throttling"
+    "ui/legacy"
   ],
     "resources": [
     "deviceModeToolbar.css",

package/front_end/panels/help/help-meta.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -51,8 +50,6 @@ let loadedHelpModule: (typeof Help|undefined);
 
 async function loadHelpModule(): Promise<typeof Help> {
   if (!loadedHelpModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/help');
     loadedHelpModule = await import('./help.js');
   }
   return loadedHelpModule;

package/front_end/panels/input/input-meta.ts

@@ -46,8 +46,6 @@ let loadedInputModule: (typeof Input|undefined);
 
 async function loadInputModule(): Promise<typeof Input> {
   if (!loadedInputModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/input');
     loadedInputModule = await import('./input.js');
   }
   return loadedInputModule;

package/front_end/panels/media/module.json

@@ -1,7 +1,6 @@
 {
   "dependencies": [
     "ui/legacy",
-    "ui/legacy/components/data_grid",
     "ui/legacy/components/source_frame",
     "ui/legacy/components/perf_ui"
   ]

package/front_end/panels/mobile_throttling/mobile_throttling-meta.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -53,8 +52,6 @@ let loadedMobileThrottlingModule: (typeof MobileThrottling|undefined);
 
 async function loadMobileThrottlingModule(): Promise<typeof MobileThrottling> {
   if (!loadedMobileThrottlingModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/mobile_throttling');
     loadedMobileThrottlingModule = await import('./mobile_throttling.js');
   }
   return loadedMobileThrottlingModule;

package/front_end/panels/network/module.json

@@ -1,11 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy/components/cookie_table",
-    "ui/legacy/components/data_grid",
-    "panels/mobile_throttling",
-    "ui/legacy/components/object_ui",
     "ui/legacy/components/perf_ui",
-    "panels/search",
     "ui/legacy/components/source_frame",
     "ui/legacy"
   ]

package/front_end/panels/performance_monitor/performance_monitor-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -47,8 +46,6 @@ let loadedPerformanceMonitorModule: (typeof PerformanceMonitor|undefined);
 
 async function loadPerformanceMonitorModule(): Promise<typeof PerformanceMonitor> {
   if (!loadedPerformanceMonitorModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/performance_monitor');
     loadedPerformanceMonitorModule = await import('./performance_monitor.js');
   }
   return loadedPerformanceMonitorModule;

package/front_end/panels/profiler/module.json

@@ -1,8 +1,6 @@
 {
   "dependencies": [
     "ui/legacy",
-    "ui/legacy/components/perf_ui",
-    "ui/legacy/components/data_grid",
-    "ui/legacy/components/object_ui"
+    "ui/legacy/components/perf_ui"
   ]
 }

package/front_end/panels/profiler/profilesPanel.css

@@ -55,7 +55,7 @@
 
 .profile-view .data-grid span.percent-column {
   color: var(--color-text-secondary);
-  width: 50px;
+  width: 55px;
   display: inline-block;
 }
 

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -24,7 +24,7 @@
 }
 
 .devices-settings-tab .devices-list {
-  width: 350px;
+  width: min(350px, 100%);
   margin-top: 10px;
 }
 

package/front_end/panels/settings/settings-meta.ts

@@ -61,8 +61,6 @@ let loadedSettingsModule: (typeof Settings|undefined);
 
 async function loadSettingsModule(): Promise<typeof Settings> {
   if (!loadedSettingsModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/settings');
     loadedSettingsModule = await import('./settings.js');
   }
   return loadedSettingsModule;

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -71,6 +71,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     const editorConfig = [
       (await CodeMirror.javascript()).javascriptLanguage,
       TextEditor.Config.baseConfiguration(oldCondition || ''),
+      TextEditor.Config.autocompletion,
       CodeMirror.EditorView.lineWrapping,
       TextEditor.Config.showCompletionHint,
       await TextEditor.JavaScript.completion(),

package/front_end/panels/sources/NavigatorView.ts

@@ -782,8 +782,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.rename(node, false);
   }
 
-  private handleContextMenuExclude(project: Workspace.Workspace.Project, path: string): void {
-    const shouldExclude = window.confirm(i18nString(UIStrings.areYouSureYouWantToExcludeThis));
+  private async handleContextMenuExclude(project: Workspace.Workspace.Project, path: string): Promise<void> {
+    const shouldExclude = await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.areYouSureYouWantToExcludeThis));
     if (shouldExclude) {
       UI.UIUtils.startBatchUpdate();
       project.excludeFolder(
@@ -792,8 +792,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
   }
 
-  private handleContextMenuDelete(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const shouldDelete = window.confirm(i18nString(UIStrings.areYouSureYouWantToDeleteThis));
+  private async handleContextMenuDelete(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    const shouldDelete = await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.areYouSureYouWantToDeleteThis));
     if (shouldDelete) {
       uiSourceCode.project().deleteFile(uiSourceCode);
     }
@@ -816,8 +816,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     contextMenu.show();
   }
 
-  private handleDeleteOverrides(node: NavigatorTreeNode): void {
-    const shouldRemove = window.confirm(i18nString(UIStrings.areYouSureYouWantToDeleteAll));
+  private async handleDeleteOverrides(node: NavigatorTreeNode): Promise<void> {
+    const shouldRemove = await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.areYouSureYouWantToDeleteAll));
     if (shouldRemove) {
       this.handleDeleteOverridesHelper(node);
     }
@@ -871,8 +871,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
       contextMenu.defaultSection().appendAction('sources.add-folder-to-workspace', undefined, true);
       if (node instanceof NavigatorGroupTreeNode) {
-        contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeFolderFromWorkspace), () => {
-          const shouldRemove = window.confirm(i18nString(UIStrings.areYouSureYouWantToRemoveThis));
+        contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeFolderFromWorkspace), async () => {
+          const shouldRemove = await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.areYouSureYouWantToRemoveThis));
           if (shouldRemove) {
             project.remove();
           }