chrome-devtools-frontend 1.0.934332 → 1.0.935974

package/front_end/panels/application/module.json

@@ -1,11 +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",

package/front_end/panels/changes/changes-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 WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -28,8 +27,6 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 async function loadChangesModule(): Promise<typeof Changes> {
   if (!loadedChangesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/changes');
     loadedChangesModule = await import('./changes.js');
   }
   return loadedChangesModule;

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/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/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/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

@@ -1052,7 +1052,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         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;

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

@@ -2,7 +2,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/event_listeners/module.json

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

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/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,7 @@
 {
   "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/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/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,9 @@
 {
   "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"
   ]
 }