chrome-devtools-frontend 1.0.981537 → 1.0.995491

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

@@ -126,8 +126,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private editCallback: ((arg0: any, arg1: string, arg2: any, arg3: any) => void)|undefined;
   private readonly deleteCallback: ((arg0: any) => void)|undefined;
   private readonly refreshCallback: (() => void)|undefined;
-  private readonly headerTable: Element;
-  private headerTableHeaders: {
+  private dataTableHeaders: {
     [x: string]: Element,
   };
   scrollContainerInternal: Element;
@@ -139,8 +138,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   };
   visibleColumnsArray: ColumnDescriptor[];
   cellClass: string|null;
-  private readonly headerTableColumnGroup: Element;
-  private headerTableBodyInternal: HTMLTableSectionElement;
+  private dataTableHeadInternal: HTMLTableSectionElement;
   private readonly headerRow: Element;
   private readonly dataTableColumnGroup: Element;
   dataTableBody: Element;
@@ -190,9 +188,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.deleteCallback = deleteCallback;
     this.refreshCallback = refreshCallback;
 
-    const headerContainer = this.element.createChild('div', 'header-container');
-    this.headerTable = headerContainer.createChild('table', 'header');
-    this.headerTableHeaders = {};
+    this.dataTableHeaders = {};
+
     this.scrollContainerInternal = this.element.createChild('div', 'data-container');
     this.dataTable = this.scrollContainerInternal.createChild('table', 'data');
 
@@ -214,14 +211,16 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.cellClass = null;
 
-    this.headerTableColumnGroup = this.headerTable.createChild('colgroup');
-    this.headerTableBodyInternal = (this.headerTable.createChild('tbody') as HTMLTableSectionElement);
-    this.headerRow = this.headerTableBodyInternal.createChild('tr');
-
     this.dataTableColumnGroup = this.dataTable.createChild('colgroup');
+
+    this.dataTableHeadInternal = this.dataTable.createChild('thead') as HTMLTableSectionElement;
+    this.headerRow = this.dataTableHeadInternal.createChild('tr');
+
     this.dataTableBody = this.dataTable.createChild('tbody');
     this.topFillerRow = (this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed') as HTMLElement);
+    UI.ARIAUtils.setHidden(this.topFillerRow, true);
     this.bottomFillerRow = (this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed') as HTMLElement);
+    UI.ARIAUtils.setHidden(this.bottomFillerRow, true);
 
     this.setVerticalPadding(0, 0, true);
     this.refreshHeader();
@@ -265,20 +264,25 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return lastSelectableNode;
   }
 
-  setElementContent(element: Element, value: any): void {
+  setElementContent(element: Element, value: string): void {
     const columnId = this.columnIdFromNode(element);
     if (!columnId) {
       return;
     }
     const column = this.columns[columnId];
+    const parentElement = element.parentElement;
+    let gridNode;
+    if (parentElement) {
+      gridNode = this.elementToDataGridNode.get(parentElement);
+    }
     if (column.dataType === DataType.Boolean) {
-      DataGridImpl.setElementBoolean(element, (Boolean(value) as boolean));
+      DataGridImpl.setElementBoolean(element, Boolean(value), gridNode);
     } else if (value !== null) {
-      DataGridImpl.setElementText(element, (value as string), Boolean(column.longText));
+      DataGridImpl.setElementText(element, value, Boolean(column.longText), gridNode);
     }
   }
 
-  static setElementText(element: Element, newText: string, longText: boolean): void {
+  static setElementText(element: Element, newText: string, longText: boolean, gridNode?: DataGridNode<string>): void {
     if (longText && newText.length > 1000) {
       element.textContent = Platform.StringUtilities.trimEndWithMaxLength(newText, 1000);
       UI.Tooltip.Tooltip.install(element as HTMLElement, newText);
@@ -288,11 +292,48 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       UI.Tooltip.Tooltip.install(element as HTMLElement, '');
       elementToLongTextMap.delete(element);
     }
+    if (gridNode) {
+      DataGridImpl.updateNodeAccessibleText(gridNode);
+    }
   }
 
-  static setElementBoolean(element: Element, value: boolean): void {
+  static setElementBoolean(element: Element, value: boolean, gridNode?: DataGridNode<string>): void {
     element.textContent = value ? '\u2713' : '';
     UI.Tooltip.Tooltip.install(element as HTMLElement, '');
+    if (gridNode) {
+      DataGridImpl.updateNodeAccessibleText(gridNode);
+    }
+  }
+
+  static updateNodeAccessibleText(gridNode: DataGridNode<string>): void {
+    let accessibleText = '';
+    let colElement: Element|null = gridNode.elementInternal?.children[0] || null;
+    if (!colElement) {
+      return;
+    }
+
+    while (colElement && !colElement.classList.contains('corner')) {
+      let columnClass = null;
+      for (const cssClass of colElement.classList) {
+        if (cssClass.includes('-column')) {
+          columnClass = cssClass.substring(0, cssClass.indexOf('-column'));
+          break;
+        }
+      }
+      if (columnClass && gridNode.dataGrid) {
+        const colName = gridNode.dataGrid.columns[columnClass];
+        if (colName) {
+          accessibleText += `${colName.title}: ${colElement.textContent}, `;
+        }
+      }
+      colElement = colElement.nextElementSibling;
+    }
+
+    if (accessibleText.length > 0) {
+      // Trim off comma and space at the end.
+      accessibleText = accessibleText.substring(0, accessibleText.length - 2);
+    }
+    gridNode.nodeAccessibleText = accessibleText;
   }
 
   setStriped(isStriped: boolean): void {
@@ -315,7 +356,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     // Update the label with the provided text or the current selected node
     const accessibleText =
         (this.selectedNode && this.selectedNode.existingElement()) ? this.selectedNode.nodeAccessibleText : '';
-    if (this.element === this.element.ownerDocument.deepActiveElement()) {
+    if (this.element === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument)) {
       // Only alert if the datagrid has focus
       UI.ARIAUtils.alert(text ? text : accessibleText);
     }
@@ -345,10 +386,6 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     UI.ARIAUtils.alert(accessibleText);
   }
 
-  headerTableBody(): Element {
-    return this.headerTableBodyInternal;
-  }
-
   private innerAddColumn(column: ColumnDescriptor, position?: number): void {
     column.defaultWeight = column.weight;
 
@@ -370,7 +407,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const cell = document.createElement('th');
     cell.className = columnId + '-column';
     nodeToColumnIdMap.set(cell, columnId);
-    this.headerTableHeaders[columnId] = cell;
+    this.dataTableHeaders[columnId] = cell;
 
     const div = document.createElement('div');
     if (column.titleDOMFragment) {
@@ -406,11 +443,11 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     delete this.columns[columnId];
     const index = this.columnsArray.findIndex(columnConfig => columnConfig.id === columnId);
     this.columnsArray.splice(index, 1);
-    const cell = this.headerTableHeaders[columnId];
+    const cell = this.dataTableHeaders[columnId];
     if (cell.parentElement) {
       cell.parentElement.removeChild(cell);
     }
-    delete this.headerTableHeaders[columnId];
+    delete this.dataTableHeaders[columnId];
   }
 
   removeColumn(columnId: string): void {
@@ -422,7 +459,6 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private refreshHeader(): void {
-    this.headerTableColumnGroup.removeChildren();
     this.dataTableColumnGroup.removeChildren();
     this.headerRow.removeChildren();
     this.topFillerRow.removeChildren();
@@ -431,13 +467,11 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     for (let i = 0; i < this.visibleColumnsArray.length; ++i) {
       const column = this.visibleColumnsArray[i];
       const columnId = column.id;
-      const headerColumn = (this.headerTableColumnGroup.createChild('col') as HTMLElement);
       const dataColumn = (this.dataTableColumnGroup.createChild('col') as HTMLElement);
       if (column.width) {
-        headerColumn.style.width = column.width;
         dataColumn.style.width = column.width;
       }
-      this.headerRow.appendChild(this.headerTableHeaders[columnId]);
+      this.headerRow.appendChild(this.dataTableHeaders[columnId]);
       const topFillerRowCell = (this.topFillerRow.createChild('th', 'top-filler-td') as HTMLTableCellElement);
       topFillerRowCell.textContent = column.title || null;
       topFillerRowCell.scope = 'col';
@@ -445,12 +479,15 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       nodeToColumnIdMap.set(bottomFillerRowChild, columnId);
     }
 
-    this.headerRow.createChild('th', 'corner');
+    const headerCorner = this.headerRow.createChild('th', 'corner');
+    UI.ARIAUtils.setHidden(headerCorner, true);
+
     const topFillerRowCornerCell = (this.topFillerRow.createChild('th', 'corner') as HTMLTableCellElement);
     topFillerRowCornerCell.classList.add('top-filler-td');
     topFillerRowCornerCell.scope = 'col';
+
     this.bottomFillerRow.createChild('td', 'corner').classList.add('bottom-filler-td');
-    this.headerTableColumnGroup.createChild('col', 'corner');
+
     this.dataTableColumnGroup.createChild('col', 'corner');
   }
 
@@ -864,7 +901,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
       // Use container size to avoid changes of table width caused by change of column widths.
       const tableWidth = this.element.offsetWidth - this.cornerWidth;
-      const cells = this.headerTableBodyInternal.rows[0].cells;
+      const cells = this.dataTableHeadInternal.rows[0].cells;
       const numColumns = cells.length - 1;  // Do not process corner column.
       for (let i = 0; i < numColumns; i++) {
         const column = this.visibleColumnsArray[i];
@@ -935,8 +972,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private getPreferredWidth(columnIndex: number): number {
-    return elementToPreferedWidthMap.get(this.headerTableColumnGroup.children[columnIndex]) ||
-        this.headerTableBodyInternal.rows[0].cells[columnIndex].offsetWidth;
+    return elementToPreferedWidthMap.get(this.dataTableColumnGroup.children[columnIndex]) ||
+        this.dataTableHeadInternal.rows[0].cells[columnIndex].offsetWidth;
   }
 
   private applyColumnWeights(): void {
@@ -998,7 +1035,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private positionResizers(): void {
-    const headerTableColumns = this.headerTableColumnGroup.children;
+    const headerTableColumns = this.dataTableColumnGroup.children;
     const numColumns = headerTableColumns.length - 1;  // Do not process corner column.
     const left: number[] = [];
     const resizers = this.resizers;
@@ -1014,7 +1051,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       // Get the width of the cell in the first (and only) row of the
       // header table in order to determine the width of the column, since
       // it is not possible to query a column for its width.
-      left[i] = (left[i - 1] || 0) + this.headerTableBodyInternal.rows[0].cells[i].offsetWidth;
+      left[i] = (left[i - 1] || 0) + this.dataTableHeadInternal.rows[0].cells[i].offsetWidth;
     }
 
     // Make n - 1 resizers for n columns.
@@ -1241,12 +1278,12 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (this.sortColumnCell) {
       this.sortColumnCell.classList.remove(Order.Ascending, Order.Descending);
     }
-    this.sortColumnCell = this.headerTableHeaders[columnId];
+    this.sortColumnCell = this.dataTableHeaders[columnId];
     this.sortColumnCell.classList.add(sortOrder);
   }
 
   headerTableHeader(columnId: string): Element {
-    return this.headerTableHeaders[columnId];
+    return this.dataTableHeaders[columnId];
   }
 
   private mouseDownInDataTable(event: Event): void {
@@ -1299,13 +1336,13 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (sortableColumns.length > 0) {
       const sortMenu = contextMenu.defaultSection().appendSubMenuItem(i18nString(UIStrings.sortByString));
       for (const column of sortableColumns) {
-        const headerCell = this.headerTableHeaders[column.id];
+        const headerCell = this.dataTableHeaders[column.id];
         sortMenu.defaultSection().appendItem(
             (column.title as string), this.sortByColumnHeaderCell.bind(this, headerCell));
       }
     }
 
-    if (target.isSelfOrDescendant(this.headerTableBodyInternal)) {
+    if (target.isSelfOrDescendant(this.dataTableHeadInternal)) {
       if (this.headerContextMenuCallback) {
         this.headerContextMenuCallback(contextMenu);
       }
@@ -1472,13 +1509,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private setPreferredWidth(columnIndex: number, width: number): void {
-    const pxWidth = width + 'px';
-    const headerTableChildElement = (this.headerTableColumnGroup.children[columnIndex] as HTMLElement);
-    elementToPreferedWidthMap.set(headerTableChildElement, width);
-    headerTableChildElement.style.width = pxWidth;
-
     const dataTableChildElement = (this.dataTableColumnGroup.children[columnIndex] as HTMLElement);
-    dataTableChildElement.style.width = pxWidth;
+    elementToPreferedWidthMap.set(dataTableChildElement, width);
+    dataTableChildElement.style.width = width + 'px';
   }
 
   columnOffset(columnId: string): number {
@@ -1505,6 +1538,20 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   topFillerRowElement(): HTMLElement {
     return this.topFillerRow;
   }
+
+  protected headerHeight(): number {
+    return this.dataTableHeadInternal.offsetHeight;
+  }
+
+  revealNode(element: HTMLElement): void {
+    element.scrollIntoViewIfNeeded(false);
+    // The header row is a child of the scrollable container, and uses position: sticky
+    // so scrollIntoViewIfNeeded may place the element behind it. If the element is
+    // obscured by the header, adjust the scrollTop so that the element is fully revealed.
+    if (element.offsetTop - this.scrollContainer.scrollTop < this.headerHeight()) {
+      this.scrollContainer.scrollTop = element.offsetTop - this.headerHeight();
+    }
+  }
 }
 
 // Keep in sync with .data-grid col.corner style rule.
@@ -1690,7 +1737,10 @@ export class DataGridNode<T> {
       accessibleTextArray.push(`${column.title}: ${this.cellAccessibleTextMap.get(column.id) || cell.textContent}`);
     }
     this.nodeAccessibleText = accessibleTextArray.join(', ');
-    element.appendChild(this.createTDWithClass('corner'));
+
+    const cornerCell = this.createTDWithClass('corner');
+    UI.ARIAUtils.setHidden(cornerCell, true);
+    element.appendChild(cornerCell);
   }
 
   get data(): DataGridData {
@@ -2125,7 +2175,7 @@ export class DataGridNode<T> {
   }
 
   reveal(): void {
-    if (this.isRoot) {
+    if (this.isRoot || !this.dataGrid) {
       return;
     }
     let currentAncestor: (DataGridNode<T>|null) = this.parent;
@@ -2136,7 +2186,7 @@ export class DataGridNode<T> {
       currentAncestor = currentAncestor.parent;
     }
 
-    this.element().scrollIntoViewIfNeeded(false);
+    this.dataGrid.revealNode(this.element() as HTMLElement);
   }
 
   select(supressSelectedEvent?: boolean): void {

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

@@ -172,7 +172,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       delete this.updateAnimationFrameId;
     }
 
-    const clientHeight = this.scrollContainer.clientHeight;
+    const clientHeight = this.scrollContainer.clientHeight - this.headerHeight();
     let scrollTop: number = this.scrollContainer.scrollTop;
     const currentScrollTop = scrollTop;
     const maxScrollTop = Math.max(0, this.contentHeight() - clientHeight);
@@ -249,11 +249,12 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     }
     const toY = fromY + node.nodeSelfHeight();
     let scrollTop: number = this.scrollContainer.scrollTop;
+    const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeight();
     if (scrollTop > fromY) {
       scrollTop = fromY;
       this.stickToBottom = false;
-    } else if (scrollTop + (this.scrollContainer as HTMLElement).offsetHeight < toY) {
-      scrollTop = toY - (this.scrollContainer as HTMLElement).offsetHeight;
+    } else if (scrollTop + visibleHeight < toY) {
+      scrollTop = toY - visibleHeight;
     }
     this.scrollContainer.scrollTop = scrollTop;
   }

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

@@ -19,25 +19,22 @@
   width: 100%;
 }
 
-.data-grid .header-container,
 .data-grid .data-container {
   position: absolute;
+  top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
-  overflow-x: hidden;
+  overflow: overlay;
+  transform: translateZ(0);
   background-color: var(--color-background);
 }
 
-.data-grid .header-container {
+.data-grid thead {
+  position: sticky;
   top: 0;
   height: 21px;
-}
-
-.data-grid .data-container {
-  top: 21px;
-  bottom: 0;
-  overflow-y: overlay;
-  transform: translateZ(0);
+  z-index: 1;
 }
 
 .data-grid .aria-live-label {
@@ -46,7 +43,6 @@
   overflow: hidden;
 }
 
-.data-grid.inline .header-container,
 .data-grid.inline .data-container {
   position: static;
 }
@@ -86,12 +82,12 @@
   position: static;
 }
 
-.data-grid table.data tr {
+.data-grid tbody tr {
   display: none;
   height: 20px;
 }
 
-.data-grid table.data tr.revealed {
+.data-grid tbody tr.revealed {
   display: table-row;
 }
 
@@ -220,12 +216,12 @@
   -webkit-mask-position: -16px 0;
 }
 
-.data-grid table.data tr.revealed.selected {
+.data-grid tbody tr.revealed.selected {
   background-color: var(--color-background-highlight);
   color: inherit;
 }
 
-.data-grid table.data tr.revealed.selected.dirty {
+.data-grid tbody tr.revealed.selected.dirty {
   color: var(--color-selected-option);
 }
 
@@ -233,21 +229,21 @@
   border: 1px solid var(--color-primary) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.data-grid:focus table.data tr.selected {
+.data-grid:focus tbody tr.selected {
   background-color: var(--color-selected-option-background);
   color: var(--color-selected-option);
 }
 
-.data-grid:focus tr.selected.dirty {
-  --override-data-grid-dirty-background-color: hsl(0deg 100% 70%);
-}
-
-.data-grid table.data tr.selected.dirty {
+.data-grid tbody tr.selected.dirty {
   --override-data-grid-dirty-background-color: hsl(0deg 100% 30%);
 
   background-color: var(--override-data-grid-dirty-background-color);
 }
 
+.data-grid:focus tr.selected.dirty {
+  --override-data-grid-dirty-background-color: hsl(0deg 100% 70%);
+}
+
 .data-grid:focus tr.selected .devtools-link {
   color: var(--color-selected-option);
 }
@@ -306,7 +302,7 @@
   .data-grid th.sortable:hover .sort-order-icon-container [is="ui-icon"].icon-mask,
   .data-grid tr.parent.selected td.disclosure::before,
   .data-grid:focus tr.parent.selected td.disclosure::before,
-  .data-grid table.data tr.parent.revealed:hover td.disclosure::before {
+  .data-grid tbody tr.parent.revealed:hover td.disclosure::before {
     background-color: HighlightText;
   }
 
@@ -323,8 +319,8 @@
   }
 
   .data-grid th.sortable:hover,
-  .data-grid table.data tr.revealed:hover,
-  .data-grid table.data tr.revealed.selected,
+  .data-grid tbody tr.revealed:hover,
+  .data-grid tbody tr.revealed.selected,
   .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd),
   .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even),
   .request-cookies-view tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
@@ -333,10 +329,10 @@
     background-color: Highlight;
   }
 
-  .data-grid table.data tr.revealed:hover *,
-  .data-grid table.data tr.revealed.selected *,
-  .data-grid table.data tr.revealed:focus *,
-  .data-grid table.data tr.revealed:hover .heap-object-tag {
+  .data-grid tbody tr.revealed:hover *,
+  .data-grid tbody tr.revealed.selected *,
+  .data-grid tbody tr.revealed:focus *,
+  .data-grid tbody tr.revealed:hover .heap-object-tag {
     color: HighlightText;
   }
 

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

@@ -66,7 +66,6 @@ export class CSSAngle extends HTMLElement {
   private popoverStyleTop = '';
   private popoverStyleLeft = '';
   private onMinifyingAction = this.minify.bind(this);
-  private onAngleUpdate = this.updateAngle.bind(this);
 
   connectedCallback(): void {
     this.shadow.adoptedStyleSheets = [cssAngleStyles];
@@ -113,15 +112,8 @@ export class CSSAngle extends HTMLElement {
     const miniIconBottom = this.swatchElement.getBoundingClientRect().bottom;
     const miniIconLeft = this.swatchElement.getBoundingClientRect().left;
     if (miniIconBottom && miniIconLeft) {
-      // We offset mini icon's X and Y positions with the containing styles
-      // pane's positions because DevTools' root SplitWidget's
-      // insertion-point-sidebar slot, where most of the DevTools content lives,
-      // has an offset of positions, which makes all of its children's DOMRect
-      // positions to have this offset.
-      const offsetTop = this.containingPane.getBoundingClientRect().top;
-      const offsetLeft = this.containingPane.getBoundingClientRect().left;
-      this.popoverStyleTop = `${miniIconBottom - offsetTop}px`;
-      this.popoverStyleLeft = `${miniIconLeft - offsetLeft}px`;
+      this.popoverStyleTop = `${miniIconBottom}px`;
+      this.popoverStyleLeft = `${miniIconLeft}px`;
     }
 
     this.popoverOpen = true;
@@ -247,7 +239,9 @@ export class CSSAngle extends HTMLElement {
       style=${styleMap({top: this.popoverStyleTop, left: this.popoverStyleLeft})}
       .data=${{
         angle: this.angle,
-        onAngleUpdate: this.onAngleUpdate,
+        onAngleUpdate: (angle: Angle):void => {
+          this.updateAngle(angle);
+        },
         background: contextualBackground,
       } as CSSAngleEditorData}
     ></${CSSAngleEditor.litTagName}>

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

@@ -37,6 +37,7 @@ export class CSSLength extends HTMLElement {
   private isEditingSlot = false;
   private isDraggingValue = false;
   private currentMouseClientX = 0;
+  #valueMousedownTime = 0;
 
   set data(data: CSSLengthData) {
     const parsedResult = parseText(data.lengthText);
@@ -61,8 +62,12 @@ export class CSSLength extends HTMLElement {
   private dragValue(event: MouseEvent): void {
     event.preventDefault();
     event.stopPropagation();
-    this.isDraggingValue = true;
+    if (Date.now() - this.#valueMousedownTime <= 300) {
+      // Delay drag callback by 300ms to prioritize click over drag.
+      return;
+    }
 
+    this.isDraggingValue = true;
     let displacement = event.clientX - this.currentMouseClientX;
     this.currentMouseClientX = event.clientX;
     if (event.shiftKey) {
@@ -81,6 +86,8 @@ export class CSSLength extends HTMLElement {
       return;
     }
 
+    this.#valueMousedownTime = Date.now();
+
     this.currentMouseClientX = event.clientX;
     const targetDocument = event.target instanceof Node && event.target.ownerDocument;
     if (targetDocument) {

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -123,6 +123,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/ObjectPropertiesSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const EXPANDABLE_MAX_LENGTH = 50;
+const EXPANDABLE_MAX_DEPTH = 100;
 
 const parentMap = new WeakMap<SDK.RemoteObject.RemoteObjectProperty, SDK.RemoteObject.RemoteObject|null>();
 
@@ -548,7 +549,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     if (this.object instanceof SDK.RemoteObject.LocalJSONObject) {
       contextMenu.viewSection().appendItem(
           i18nString(UIStrings.expandRecursively),
-          this.objectTreeElementInternal.expandRecursively.bind(this.objectTreeElementInternal, Number.MAX_VALUE));
+          this.objectTreeElementInternal.expandRecursively.bind(this.objectTreeElementInternal, EXPANDABLE_MAX_DEPTH));
       contextMenu.viewSection().appendItem(
           i18nString(UIStrings.collapseChildren),
           this.objectTreeElementInternal.collapseChildren.bind(this.objectTreeElementInternal));
@@ -653,7 +654,7 @@ export class RootElement extends UI.TreeOutline.TreeElement {
     }
 
     contextMenu.viewSection().appendItem(
-        i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this, Number.MAX_VALUE));
+        i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this, EXPANDABLE_MAX_DEPTH));
     contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this));
     void contextMenu.show();
   }
@@ -696,6 +697,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.maxNumPropertiesToShow = InitialVisibleChildrenLimit;
     this.listItemElement.addEventListener('contextmenu', this.contextMenuFired.bind(this), false);
     this.listItemElement.dataset.objectPropertyNameForTest = property.name;
+    this.setExpandRecursively(property.name !== '[[Prototype]]');
   }
 
   static async populate(
@@ -1027,13 +1029,14 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       const getter = this.property.getter;
       element.addEventListener('click', (event: Event) => {
         event.consume();
+        const invokeGetter = `
+          function invokeGetter(getter) {
+            return Reflect.apply(getter, this, []);
+          }`;
         // @ts-ignore No way to teach TypeScript to preserve the Function-ness of `getter`.
+        // Also passing a string instead of a Function to avoid coverage implementation messing with it.
         void object.callFunction(invokeGetter, [SDK.RemoteObject.RemoteObject.toCallArgument(getter)])
             .then(this.onInvokeGetterClick.bind(this));
-
-        function invokeGetter(this: Object, getter: Function): Object {
-          return Reflect.apply(getter, this, []);
-        }
       }, false);
     } else {
       this.valueElement = document.createElement('span');
@@ -1113,7 +1116,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     if (parentMap.get(this.property) instanceof SDK.RemoteObject.LocalJSONObject) {
       contextMenu.viewSection().appendItem(
-          i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this, Number.MAX_VALUE));
+          i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this, EXPANDABLE_MAX_DEPTH));
       contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this));
     }
     if (this.propertyValue) {