chrome-devtools-frontend 1.0.934269 → 1.0.935784

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;

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

@@ -379,6 +379,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.Synced,
   order: 1,
   title: i18nLazyString(UIStrings.showUserAgentShadowDOM),
   settingName: 'showUAShadowDOM',
@@ -388,6 +389,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.Synced,
   order: 2,
   title: i18nLazyString(UIStrings.wordWrap),
   settingName: 'domWordWrap',
@@ -407,6 +409,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.Synced,
   order: 3,
   title: i18nLazyString(UIStrings.showHtmlComments),
   settingName: 'showHTMLComments',
@@ -426,6 +429,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.Synced,
   order: 4,
   title: i18nLazyString(UIStrings.revealDomNodeOnHover),
   settingName: 'highlightNodeOnHoverInOverlay',
@@ -435,6 +439,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.Synced,
   order: 5,
   title: i18nLazyString(UIStrings.showDetailedInspectTooltip),
   settingName: 'showDetailedInspectTooltip',

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/event_listeners/module.json

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

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Root from '../../core/root/root.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
@@ -35,10 +34,7 @@ export class ProtocolService {
   }
 
   getLocales(): readonly string[] {
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.LOCALIZED_DEVTOOLS)) {
-      return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
-    }
-    return navigator.languages;
+    return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
   startLighthouse(auditURL: string, categoryIDs: string[], flags: Object): Promise<ReportRenderer.RunnerResult> {

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

@@ -132,6 +132,7 @@ UI.ActionRegistration.registerActionExtension({
 });
 
 Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.Synced,
   settingName: 'customNetworkConditions',
   settingType: Common.Settings.SettingType.ARRAY,
   defaultValue: [],

package/front_end/panels/network/module.json

@@ -1,11 +1,8 @@
 {
   "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/network/network-meta.ts

@@ -275,6 +275,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.NETWORK,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.colorcodeResourceTypes),
   settingName: 'networkColorCodeResourceTypes',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -297,6 +298,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.NETWORK,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.groupNetworkLogByFrame),
   settingName: 'network.group-by-frame',
   settingType: Common.Settings.SettingType.BOOLEAN,

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/profiler-meta.ts

@@ -162,6 +162,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.showNativeFunctions),
   settingName: 'showNativeFunctionsInJSProfile',
   settingType: Common.Settings.SettingType.BOOLEAN,

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/sensors/sensors-meta.ts

@@ -154,6 +154,7 @@ UI.ActionRegistration.registerActionExtension({
 });
 
 Common.Settings.registerSettingExtension({
+  storageType: Common.Settings.SettingStorageType.Synced,
   settingName: 'emulation.locations',
   settingType: Common.Settings.SettingType.ARRAY,
   // TODO(crbug.com/1136655): http://crrev.com/c/2666426 regressed localization of city titles.

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/sources/CallStackSidebarPane.ts

@@ -82,6 +82,10 @@ const UIStrings = {
   *@description A context menu item in the Call Stack Sidebar Pane of the Sources panel
   */
   addAllContentScriptsToIgnoreList: 'Add all content scripts to ignore list',
+  /**
+  *@description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
+  */
+  callFrameWarnings: 'Some call frames have warnings',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CallStackSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -92,6 +96,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
                                                                         UI.ListControl.ListDelegate<Item> {
   private readonly ignoreListMessageElement: Element;
   private readonly notPausedMessageElement: HTMLElement;
+  private readonly callFrameWarningsElement: HTMLElement;
   private readonly items: UI.ListModel.ListModel<Item>;
   private list: UI.ListControl.ListControl<Item>;
   private readonly showMoreMessageElement: Element;
@@ -113,6 +118,12 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.notPausedMessageElement.textContent = i18nString(UIStrings.notPaused);
     this.notPausedMessageElement.tabIndex = -1;
 
+    this.callFrameWarningsElement = this.contentElement.createChild('div', 'ignore-listed-message');
+    const icon = UI.Icon.Icon.create('smallicon-warning', 'call-frame-warning-icon');
+    this.callFrameWarningsElement.appendChild(icon);
+    this.callFrameWarningsElement.appendChild(document.createTextNode(i18nString(UIStrings.callFrameWarnings)));
+    this.callFrameWarningsElement.tabIndex = -1;
+
     this.items = new UI.ListModel.ListModel();
     this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);
     this.contentElement.appendChild(this.list.element);
@@ -164,6 +175,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private async doUpdate(): Promise<void> {
     this.locationPool.disposeAll();
 
+    this.callFrameWarningsElement.classList.add('hidden');
+
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (!details) {
       this.notPausedMessageElement.classList.remove('hidden');
@@ -178,6 +191,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.notPausedMessageElement.classList.add('hidden');
 
     const itemPromises = [];
+    const uniqueWarnings: Set<string> = new Set();
     for (const frame of details.callFrames) {
       const itemPromise =
           Item.createForDebuggerCallFrame(frame, this.locationPool, this.refreshItem.bind(this)).then(item => {
@@ -185,8 +199,15 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
             return item;
           });
       itemPromises.push(itemPromise);
+      for (const warning of frame.warnings) {
+        uniqueWarnings.add(warning);
+      }
     }
     const items = await Promise.all(itemPromises);
+    if (uniqueWarnings.size) {
+      this.callFrameWarningsElement.classList.remove('hidden');
+      UI.Tooltip.Tooltip.install(this.callFrameWarningsElement, Array.from(uniqueWarnings).join('\n'));
+    }
 
     let asyncStackTrace: Protocol.Runtime.StackTrace|null|undefined = details.asyncStackTrace;
     if (!asyncStackTrace && details.asyncStackTraceId) {

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

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -303,6 +303,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private textPrompt?: ObjectUI.ObjectPropertiesSection.ObjectPropertyPrompt;
   private result?: SDK.RemoteObject.RemoteObject|null;
   private preventClickTimeout?: number;
+  private resizeObserver?: ResizeObserver;
   constructor(
       expression: string|null,
       expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController,
@@ -412,6 +413,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (this.expressionInternal) {
       this.expandController.stopWatchSectionsWithId(this.expressionInternal);
     }
+    this.resizeObserver?.disconnect();
     this.expressionInternal = newExpression;
     this.update();
     this.dispatchEventToListeners(Events.ExpressionUpdated, this);
@@ -442,6 +444,19 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       expressionValue?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails): Element {
     const headerElement = this.element.createChild('div', 'watch-expression-header');
     const deleteButton = UI.Icon.Icon.create('smallicon-cross', 'watch-expression-delete-button');
+    this.resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        // 55 serves as a width threshold here (in px)
+        if (entry.contentRect.width < 55) {
+          deleteButton.classList.remove('right-aligned');
+          deleteButton.classList.add('left-aligned');
+        } else {
+          deleteButton.classList.remove('left-aligned');
+          deleteButton.classList.add('right-aligned');
+        }
+      });
+    });
+    this.resizeObserver.observe(headerElement);
     UI.Tooltip.Tooltip.install(deleteButton, i18nString(UIStrings.deleteWatchExpression));
     deleteButton.addEventListener('click', this.deleteWatchExpression.bind(this), false);
 

package/front_end/panels/sources/module.json

@@ -1,14 +1,10 @@
 {
   "dependencies": [
     "ui/legacy",
-    "panels/search",
     "ui/legacy/components/source_frame",
-    "panels/snippets",
-    "ui/legacy/components/quick_open",
     "ui/legacy/components/inline_editor",
     "ui/legacy/components/color_picker",
     "panels/event_listeners",
-    "ui/legacy/components/object_ui",
     "panels/coverage"
   ]
 }

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

@@ -1249,6 +1249,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.searchInAnonymousAndContent),
   settingName: 'searchInAnonymousAndContentScripts',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1267,6 +1268,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.automaticallyRevealFilesIn),
   settingName: 'autoRevealInNavigator',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1285,6 +1287,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableJavascriptSourceMaps),
   settingName: 'jsSourceMapsEnabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1303,6 +1306,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableTabMovesFocus),
   settingName: 'textEditorTabMovesFocus',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1321,6 +1325,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.detectIndentation),
   settingName: 'textEditorAutoDetectIndent',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1339,6 +1344,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.autocompletion),
   settingName: 'textEditorAutocompletion',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1375,6 +1381,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.codeFolding),
   settingName: 'textEditorCodeFolding',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1393,6 +1400,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.showWhitespaceCharacters),
   settingName: 'showWhitespacesInEditor',
   settingType: Common.Settings.SettingType.ENUM,
@@ -1418,6 +1426,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.displayVariableValuesInlineWhile),
   settingName: 'inlineVariableValues',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1436,6 +1445,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableAutoFocusOnDebuggerPaused),
   settingName: 'autoFocusOnDebuggerPausedEnabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1454,6 +1464,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.enableCssSourceMaps),
   settingName: 'cssSourceMapsEnabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
@@ -1472,6 +1483,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.allowScrollingPastEndOfFile),
   settingName: 'allowScrollPastEof',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,12 +7,19 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  right: 16px;
   cursor: pointer;
   opacity: 0%;
 }
 
-.watch-expression-header:hover .watch-expression-delete-button {
+.right-aligned {
+  right: 16px;
+}
+
+.left-aligned {
+  left: -11px;
+}
+
+.watch-expression-title:hover .watch-expression-delete-button {
   opacity: 100%;
 }
 
@@ -108,7 +115,7 @@ li.watch-expression-editing::before {
 }
 
 @media (forced-colors: active) {
-  .watch-expression-header:hover .watch-expression-delete-button,
+  .watch-expression-title:hover .watch-expression-delete-button,
   .watch-expressions .dimmed {
     opacity: 100%;
   }

package/front_end/panels/timeline/module.json

@@ -4,7 +4,6 @@
     "panels/coverage",
     "panels/layer_viewer",
     "ui/legacy/components/perf_ui",
-    "ui/legacy/components/data_grid",
     "panels/profiler",
     "panels/mobile_throttling"
   ]

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

@@ -390,6 +390,7 @@ UI.ActionRegistration.registerActionExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.hideChromeFrameInLayersView),
   settingName: 'frameViewerHideChromeWindow',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/webauthn/module.json

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

package/front_end/ui/components/text_editor/config.ts

@@ -57,7 +57,7 @@ export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.k
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
 }]));
 
-export const autocompletion = DynamicSetting.bool('textEditorAutocompletion', CM.autocompletion());
+export const autocompletion = DynamicSetting.bool('textEditorAutocompletion', CM.autocompletion({icons: false}));
 
 export const bracketMatching = DynamicSetting.bool('textEditorBracketMatching', CM.bracketMatching());
 

package/front_end/ui/components/text_editor/theme.ts

@@ -57,6 +57,11 @@ export const editorTheme = CM.EditorView.theme({
     padding: '0 3px 0 9px',
   },
 
+  '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    background: 'transparent',
+    borderBottom: 'none',
+  },
+
   '&:focus-within .cm-matchingBracket': {
     color: 'inherit',
     backgroundColor: 'var(--color-matching-bracket-background)',
@@ -112,6 +117,14 @@ export const editorTheme = CM.EditorView.theme({
     width: 'fit-content',
   },
 
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    minWidth: '16em',
+    '& > li[aria-selected]': {
+      backgroundColor: 'var(--color-selected-option-background)',
+      color: 'var(--color-selected-option)',
+    },
+  },
+
   '.cm-highlightedLine': {
     animation: 'cm-fading-highlight 2s 0s',
   },

package/front_end/ui/legacy/GlassPane.ts

@@ -58,6 +58,10 @@ export class GlassPane {
     this.widgetInternal.registerRequiredCSS(cssFile);
   }
 
+  registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
+    this.widgetInternal.registerCSSFiles(cssFiles);
+  }
+
   setDefaultFocusedElement(element: Element|null): void {
     this.widgetInternal.setDefaultFocusedElement(element);
   }

package/front_end/ui/legacy/InspectorView.ts

@@ -443,10 +443,6 @@ function getDisableLocaleInfoBarSetting(): Common.Settings.Setting<boolean> {
 }
 
 function shouldShowLocaleInfobar(): boolean {
-  if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.LOCALIZED_DEVTOOLS)) {
-    return false;
-  }
-
   if (getDisableLocaleInfoBarSetting().get()) {
     return false;
   }

package/front_end/ui/legacy/TabbedPane.ts

@@ -251,6 +251,10 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   closeTabs(ids: string[], userGesture?: boolean): void {
+    if (ids.length === 0) {
+      return;
+    }
+
     const focused = this.hasFocus();
     for (let i = 0; i < ids.length; ++i) {
       this.innerCloseTab(ids[i], userGesture);

package/front_end/ui/legacy/ViewManager.ts

@@ -28,6 +28,11 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/ViewManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export const defaultOptionsForTabs = {
+  security: true,
+};
+
 export class PreRegisteredView implements View {
   private readonly viewRegistration: ViewRegistration;
   private widgetRequested: boolean;
@@ -615,9 +620,12 @@ export class _TabbedLocation extends Location implements TabbedViewLocation {
   private setOrUpdateCloseableTabsSetting(): void {
     // Update the setting value, we respect the closed state decided by the user
     // and append the new tabs with value of true so they are shown open
-    const defaultOptionsForTabs = {'security': true};
     const tabs = this.closeableTabSetting.get();
-    const newClosable = Object.assign(defaultOptionsForTabs, tabs);
+    const newClosable = Object.assign(
+        {
+          ...defaultOptionsForTabs,
+        },
+        tabs);
     this.closeableTabSetting.set(newClosable);
   }
 

package/front_end/ui/legacy/components/cookie_table/module.json

@@ -1,7 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/data_grid"
+    "ui/legacy"
   ],
     "resources": [
     "cookiesTable.css"