chrome-devtools-frontend 1.0.934857 → 1.0.935332

package/config/gni/all_devtools_files.gni

@@ -53,8 +53,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/cpu_profiler_test_runner/cpu_profiler_test_runner.js",
   "front_end/panels/css_overview/module.json",
   "front_end/legacy_test_runner/data_grid_test_runner/data_grid_test_runner.js",
-  "front_end/ui/legacy/components/data_grid/dataGrid.css",
-  "front_end/ui/legacy/components/data_grid/module.json",
   "front_end/legacy_test_runner/device_mode_test_runner/device_mode_test_runner.js",
   "front_end/legacy_test_runner/elements_test_runner/elements_test_runner.js",
   "front_end/legacy_test_runner/elements_test_runner/EditDOMTestRunner.js",
@@ -101,7 +99,6 @@ all_devtools_files = [
   "front_end/panels/network/module.json",
   "front_end/entrypoints/node_main/module.json",
   "front_end/entrypoints/node_main/nodeConnectionsPanel.css",
-  "front_end/ui/legacy/components/object_ui/module.json",
   "front_end/ui/legacy/components/perf_ui/chartViewport.css",
   "front_end/ui/legacy/components/perf_ui/filmStripView.css",
   "front_end/ui/legacy/components/perf_ui/flameChart.css",

package/config/gni/devtools_grd_files.gni

@@ -514,14 +514,12 @@ grd_files_release_sources = [
   "front_end/ui/legacy/components/cookie_table/cookie_table_module.js",
   "front_end/ui/legacy/components/data_grid/data_grid-legacy.js",
   "front_end/ui/legacy/components/data_grid/data_grid.js",
-  "front_end/ui/legacy/components/data_grid/data_grid_module.js",
   "front_end/ui/legacy/components/inline_editor/inline_editor-legacy.js",
   "front_end/ui/legacy/components/inline_editor/inline_editor.js",
   "front_end/ui/legacy/components/inline_editor/inline_editor_module.js",
   "front_end/ui/legacy/components/object_ui/object_ui-legacy.js",
   "front_end/ui/legacy/components/object_ui/object_ui-meta.js",
   "front_end/ui/legacy/components/object_ui/object_ui.js",
-  "front_end/ui/legacy/components/object_ui/object_ui_module.js",
   "front_end/ui/legacy/components/perf_ui/perf_ui-legacy.js",
   "front_end/ui/legacy/components/perf_ui/perf_ui-meta.js",
   "front_end/ui/legacy/components/perf_ui/perf_ui.js",
@@ -1503,6 +1501,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/data_grid/ShowMoreDataGridNode.js",
   "front_end/ui/legacy/components/data_grid/SortableDataGrid.js",
   "front_end/ui/legacy/components/data_grid/ViewportDataGrid.js",
+  "front_end/ui/legacy/components/data_grid/dataGrid.css.js",
   "front_end/ui/legacy/components/inline_editor/BezierEditor.js",
   "front_end/ui/legacy/components/inline_editor/BezierUI.js",
   "front_end/ui/legacy/components/inline_editor/CSSAngle.js",

package/front_end/core/i18n/locales/en-US.json

@@ -4778,6 +4778,15 @@
   "panels/elements/StylesSidebarPane.ts | copySelector": {
     "message": "Copy selector"
   },
+  "panels/elements/StylesSidebarPane.ts | cssPropertyName": {
+    "message": "CSS property name"
+  },
+  "panels/elements/StylesSidebarPane.ts | cssPropertyValue": {
+    "message": "CSS property value"
+  },
+  "panels/elements/StylesSidebarPane.ts | cssSelector": {
+    "message": "CSS selector"
+  },
   "panels/elements/StylesSidebarPane.ts | filter": {
     "message": "Filter"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -4778,6 +4778,15 @@
   "panels/elements/StylesSidebarPane.ts | copySelector": {
     "message": "Ĉóp̂ý selector"
   },
+  "panels/elements/StylesSidebarPane.ts | cssPropertyName": {
+    "message": "CSS p̂ŕôṕêŕt̂ý n̂ám̂é"
+  },
+  "panels/elements/StylesSidebarPane.ts | cssPropertyValue": {
+    "message": "CSS p̂ŕôṕêŕt̂ý v̂ál̂úê"
+  },
+  "panels/elements/StylesSidebarPane.ts | cssSelector": {
+    "message": "CSS ŝél̂éĉt́ôŕ"
+  },
   "panels/elements/StylesSidebarPane.ts | filter": {
     "message": "F̂íl̂t́êŕ"
   },

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -208,7 +208,7 @@ const supportsPrefersContrast = (): boolean => {
 };
 
 const supportsJpegXl = async(): Promise<boolean> => {
-  const JPEG_XL_IMAGE_URL = 'data:image/jxl;base64,/wp/QCQIBgEAFABLEiRhAA==';
+  const JPEG_XL_IMAGE_URL = 'data:image/jxl;base64,/wr/BwiDBAwASyAY';
   const promise = new Promise<boolean>((resolve): void => {
     const img = document.createElement('img');
     img.onload = (): void => resolve(true);

package/front_end/entrypoints/shell/shell.json

@@ -7,11 +7,9 @@
     { "name": "ui/legacy/components/color_picker" },
     { "name": "panels/console" },
     { "name": "panels/coverage" },
-    { "name": "ui/legacy/components/data_grid" },
     { "name": "panels/event_listeners" },
     { "name": "ui/legacy/components/inline_editor" },
     { "name": "panels/input"},
-    { "name": "ui/legacy/components/object_ui" },
     { "name": "ui/legacy/components/perf_ui" },
     { "name": "panels/profiler" },
     { "name": "panels/protocol_monitor"},

package/front_end/panels/application/module.json

@@ -3,9 +3,7 @@
     "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/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/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/module.json

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

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

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

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

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

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

@@ -6,7 +6,6 @@
     "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/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/webauthn/module.json

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

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

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

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -31,6 +31,8 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
+import dataGridStyles from './dataGrid.css.js';
+
 const UIStrings = {
   /**
   *@description Accessible text label for expandible nodes in datagrids
@@ -169,7 +171,6 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const {displayName, columns: columnsArray, editCallback, deleteCallback, refreshCallback} = dataGridParameters;
     this.element = document.createElement('div');
     this.element.classList.add('data-grid');
-    UI.Utils.appendStyle(this.element, 'ui/legacy/components/data_grid/dataGrid.css');
     this.element.tabIndex = 0;
     this.element.addEventListener('keydown', this.keyDown.bind(this), false);
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), true);
@@ -2351,6 +2352,7 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
   }
 
   wasShown(): void {
+    this.registerCSSFiles([dataGridStyles]);
     this.dataGrid.wasShown();
   }
 

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -154,6 +154,7 @@
 }
 
 .data-grid th .sort-order-icon-container {
+  background-color: var(--color-background-elevation-1);
   position: absolute;
   top: 1px;
   right: 0;
@@ -162,6 +163,10 @@
   align-items: center;
 }
 
+.data-grid th:hover .sort-order-icon-container {
+  background-color: var(--color-background-highlight);
+}
+
 .data-grid th .sort-order-icon {
   margin-right: 4px;
   margin-bottom: -2px;

package/front_end/ui/legacy/components/inline_editor/CSSLength.ts

@@ -77,6 +77,10 @@ export class CSSLength extends HTMLElement {
   }
 
   private onValueMousedown(event: MouseEvent): void {
+    if (event.button !== 0) {
+      return;
+    }
+
     this.currentMouseClientX = event.clientX;
     const targetDocument = event.target instanceof Node && event.target.ownerDocument;
     if (targetDocument) {
@@ -136,9 +140,12 @@ export class CSSLength extends HTMLElement {
         <span class="value"
           @mousedown=${this.onValueMousedown}
           @mouseup=${this.onValueMouseup}
-        >${this.length.value}</span><select class="unit ${this.length.unit}" @mouseup=${this.onUnitMouseup} @change=${this.onUnitChange}>
-          ${options}
-        </select>
+        >${this.length.value}</span><span class="unit">${this.length.unit}</span><div class="unit-dropdown">
+          <span class="icon"></span>
+          <select @mouseup=${this.onUnitMouseup} @change=${this.onUnitChange}>
+            ${options}
+          </select>
+        </div>
       `;
     // clang-format on
   }

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -14,21 +14,42 @@
   cursor: ew-resize;
 }
 
-select.unit {
+.unit-dropdown {
+  display: none;
+}
+
+.unit-dropdown select {
   all: unset;
   cursor: pointer;
-  width: 2ch;
+  opacity: 0%;
+  width: 0.8em;
+}
+
+.icon {
+  position: absolute;
+  display: inline-block;
+  -webkit-mask-image: var(--image-file-chevrons);
+  -webkit-mask-position: -12px 4px;
+  -webkit-mask-size: 19px 6px;
+  -webkit-mask-repeat: no-repeat;
+  background-color: var(--color-text-primary);
+  content: '';
+  height: 1em;
+  width: 1em;
+}
+
+:host(:not(:last-child)) {
+  margin-right: 0.1em;
 }
 
-select.unit:hover {
-  text-decoration: underline;
+:host(:not(:last-child)) .unit-dropdown {
+  position: absolute;
 }
 
-select.unit.rem {
-  width: 3ch;
+.css-length:hover .unit-dropdown {
+  display: inline-block;
 }
 
-select.unit.vmin,
-select.unit.vmax {
-  width: 4ch;
+:host(:last-child) .unit-dropdown select {
+  width: 0.6em;
 }

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

@@ -1,8 +1,7 @@
 {
   "dependencies": [
     "ui/legacy/components/text_editor",
-    "ui/legacy",
-    "ui/legacy/components/object_ui"
+    "ui/legacy"
   ],
     "resources": [
     "fontView.css",

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.934857"
+  "version": "1.0.935332"
 }

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

@@ -1,8 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-  "resources": [
-    "dataGrid.css"
-  ]
-}

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

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