chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/ui/legacy/Widget.ts

@@ -109,10 +109,16 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
   }
 }
 
+// The resolved `updateComplete` promise, which is used as a marker for the
+// Widget's `#updateComplete` private property to indicate that there's no
+// pending update.
+const UPDATE_COMPLETE = Promise.resolve(true);
+const UPDATE_COMPLETE_RESOLVE = (_result: boolean): void => {};
+
 export class Widget {
   readonly element: HTMLElement;
   contentElement: HTMLElement;
-  private shadowRoot: ShadowRoot|undefined;
+  private shadowRoot: typeof Element.prototype.shadowRoot;
   protected visibleInternal: boolean;
   private isRoot: boolean;
   private isShowingInternal: boolean;
@@ -127,16 +133,16 @@ export class Widget {
   private constraintsInternal?: Constraints;
   private invalidationsRequested?: boolean;
   private externallyManaged?: boolean;
+  #updateComplete = UPDATE_COMPLETE;
+  #updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
+  #updateRequestID = 0;
   constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
     this.element = element || document.createElement('div');
-    this.shadowRoot = this.element.shadowRoot || undefined;
+    this.shadowRoot = this.element.shadowRoot;
     if (useShadowDom && !this.shadowRoot) {
       this.element.classList.add('vbox');
       this.element.classList.add('flex-auto');
-      this.shadowRoot = createShadowRootWithCoreStyles(this.element, {
-        cssFile: undefined,
-        delegatesFocus,
-      });
+      this.shadowRoot = createShadowRootWithCoreStyles(this.element, {delegatesFocus});
       this.contentElement = document.createElement('div');
       this.shadowRoot.appendChild(this.contentElement);
     } else {
@@ -434,6 +440,15 @@ export class Widget {
       return;
     }
 
+    // Cancel any pending update.
+    if (this.#updateRequestID !== 0) {
+      cancelAnimationFrame(this.#updateRequestID);
+      this.#updateCompleteResolve(true);
+      this.#updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
+      this.#updateComplete = UPDATE_COMPLETE;
+      this.#updateRequestID = 0;
+    }
+
     // hideOnDetach means that we should never remove element from dom - content
     // has iframes and detaching it will hurt.
     //
@@ -514,20 +529,11 @@ export class Widget {
   }
 
   registerRequiredCSS(cssFile: {cssContent: string}): void {
-    if (this.shadowRoot) {
-      ThemeSupport.ThemeSupport.instance().appendStyle((this.shadowRoot as DocumentFragment), cssFile);
-    } else {
-      ThemeSupport.ThemeSupport.instance().appendStyle(this.element, cssFile);
-    }
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.shadowRoot ?? this.element, cssFile);
   }
 
   registerCSSFiles(cssFiles: CSSStyleSheet[]): void {
-    let root: ShadowRoot|Document;
-    if (this.shadowRoot) {
-      root = this.shadowRoot;
-    } else {
-      root = Helpers.GetRootNode.getRootNode(this.contentElement);
-    }
+    const root = this.shadowRoot ?? Helpers.GetRootNode.getRootNode(this.contentElement);
     root.adoptedStyleSheets = root.adoptedStyleSheets.concat(cssFiles);
   }
 
@@ -665,6 +671,79 @@ export class Widget {
     assert(!this.parentWidgetInternal, 'Attempt to mark widget as externally managed after insertion to the DOM');
     this.externallyManaged = true;
   }
+
+  /**
+   * Override this method in derived classes to perform the actual view update.
+   *
+   * This is not meant to be called directly, but invoked (indirectly) through
+   * the `requestAnimationFrame` and executed with the animation frame. Instead,
+   * use the `update()` method to schedule an asynchronous update.
+   *
+   * @return can either return nothing or a promise; in that latter case, the
+   *         update logic will await the resolution of the returned promise
+   *         before proceeding.
+   */
+  protected doUpdate(): Promise<void>|void {
+  }
+
+  async #updateCallback(): Promise<boolean> {
+    // Mark this update cycle as complete by assigning
+    // the marker sentinel.
+    this.#updateComplete = UPDATE_COMPLETE;
+    this.#updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
+    this.#updateRequestID = 0;
+
+    // Run the actual update logic.
+    await this.doUpdate();
+
+    // Resolve the `updateComplete` with `true` if no
+    // new update was triggered during this cycle.
+    return this.#updateComplete === UPDATE_COMPLETE;
+  }
+
+  /**
+   * Schedules an asynchronous update for this widget.
+   *
+   * The update will be deduplicated and executed with the next animation
+   * frame.
+   */
+  update(): void {
+    if (this.#updateComplete === UPDATE_COMPLETE) {
+      this.#updateComplete = new Promise((resolve, reject) => {
+        this.#updateCompleteResolve = resolve;
+        this.#updateRequestID = requestAnimationFrame(() => this.#updateCallback().then(resolve, reject));
+      });
+    }
+  }
+
+  /**
+   * The `updateComplete` promise resolves when the widget has finished updating.
+   *
+   * Use `updateComplete` to wait for an update:
+   * ```js
+   * await widget.updateComplete;
+   * // do stuff
+   * ```
+   *
+   * This method is primarily useful for unit tests, to wait for widgets to build
+   * their DOM. For example:
+   * ```js
+   * // Set up the test widget, and wait for the initial update cycle to complete.
+   * const widget = new SomeWidget(someData);
+   * widget.update();
+   * await widget.updateComplete;
+   *
+   * // Assert state of the widget.
+   * assert.isTrue(widget.someDataLoaded);
+   * ```
+   *
+   * @returns a promise that resolves to a `boolean` when the widget has finished
+   *          updating, the value is `true` if there are no more pending updates,
+   *          and `false` if the update cycle triggered another update.
+   */
+  get updateComplete(): Promise<boolean> {
+    return this.#updateComplete;
+  }
 }
 
 const storedScrollPositions = new WeakMap<Element, {

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -98,7 +98,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       expandedChangedCallback: () => void, colorSelectedCallback: (arg0: Common.Color.Legacy) => void) {
     super();
     this.contrastInfo = contrastInfo;
-    this.elementInternal = contentElement.createChild('div', 'spectrum-contrast-details collapsed') as HTMLElement;
+    this.elementInternal = contentElement.createChild('div', 'spectrum-contrast-details collapsed');
 
     this.toggleMainColorPicker = toggleMainColorPickerCallback;
 
@@ -217,7 +217,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private createFixColorButton(parent: Element, suggestedColor: Common.Color.Color): HTMLElement {
-    const button = parent.createChild('button', 'contrast-fix-button') as HTMLElement;
+    const button = parent.createChild('button', 'contrast-fix-button');
     const formattedColor = suggestedColor.asString(this.contrastInfo.colorFormat());
     const suggestedColorString = formattedColor ? formattedColor + ' ' : '';
     const label = i18nString(UIStrings.useSuggestedColorStoFixLow, {PH1: suggestedColorString});
@@ -484,8 +484,8 @@ export class Swatch {
   constructor(parentElement: Element) {
     this.parentElement = parentElement;
     this.swatchElement = parentElement.createChild('span', 'swatch contrast swatch-inner-white');
-    this.swatchInnerElement = this.swatchElement.createChild('span', 'swatch-inner') as HTMLElement;
-    this.textPreview = this.swatchElement.createChild('div', 'text-preview') as HTMLElement;
+    this.swatchInnerElement = this.swatchElement.createChild('span', 'swatch-inner');
+    this.textPreview = this.swatchElement.createChild('div', 'text-preview');
     this.textPreview.textContent = 'Aa';
   }
 

package/front_end/ui/legacy/components/color_picker/Spectrum.test.ts

@@ -61,6 +61,6 @@ describeWithMockConnection('PaletteGenerator', () => {
 
     const palette = await new Promise<ColorPicker.Spectrum.Palette>(r => new ColorPicker.Spectrum.PaletteGenerator(r));
 
-    assert.deepStrictEqual(palette.colors, ['#0f0']);
+    assert.deepEqual(palette.colors, ['#0f0']);
   });
 });

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -290,7 +290,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.dragX = 0;
     this.dragY = 0;
 
-    const toolsContainer: HTMLElement = this.contentElement.createChild('div', 'spectrum-tools') as HTMLElement;
+    const toolsContainer = this.contentElement.createChild('div', 'spectrum-tools');
     const toolbar = new UI.Toolbar.Toolbar('spectrum-eye-dropper', toolsContainer);
     const toggleEyeDropperShortcut =
         UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('elements.toggle-eye-dropper');
@@ -1626,7 +1626,7 @@ export class Swatch {
     const swatchElement = parentElement.createChild('span', 'swatch');
     swatchElement.setAttribute('jslog', `${VisualLogging.action('copy-color').track({click: true})}`);
     this.swatchInnerElement = swatchElement.createChild('span', 'swatch-inner');
-    this.swatchOverlayElement = swatchElement.createChild('span', 'swatch-overlay') as HTMLElement;
+    this.swatchOverlayElement = swatchElement.createChild('span', 'swatch-overlay');
     UI.ARIAUtils.markAsButton(this.swatchOverlayElement);
     UI.ARIAUtils.setPressed(this.swatchOverlayElement, false);
     this.swatchOverlayElement.tabIndex = 0;

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -13,6 +13,7 @@
   overflow: hidden;
 }
 
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 :selection {
   background-color: var(--sys-color-tonal-container);
   color: var(--sys-color-on-tonal-container);
@@ -495,7 +496,7 @@ devtools-icon.copy-color-icon {
 }
 
 .palette-color-shades > .spectrum-palette-color:not(.empty-color):hover,
-.spectrum-palette > .spectrum-palette-color:not(.empty-color):not(.has-material-shades):hover {
+.spectrum-palette > .spectrum-palette-color:not(.empty-color, .has-material-shades):hover {
   transform: scale(1.15);
 }
 

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

@@ -20,13 +20,11 @@ describeWithEnvironment('DataGrid', () => {
     let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
 
     const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
-      implParams: {
-        displayName: 'testGrid',
-        columns: [{
-          id: 'test',
-          sortable: false,
-        }],
-      },
+      displayName: 'testGrid',
+      columns: [{
+        id: 'test',
+        sortable: false,
+      }],
       nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
       markAsRoot: true,
     };
@@ -34,6 +32,7 @@ describeWithEnvironment('DataGrid', () => {
     // clang-format off
         render(
             html`
+        <!-- @ts-ignore -->
         <devtools-data-grid-widget
             .options=${dataGridOptions}
             ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
@@ -42,10 +41,8 @@ describeWithEnvironment('DataGrid', () => {
         container, {host: this});
     // clang-format on
 
-    await new Promise(resolve => setTimeout(resolve, 0));
-
     assert.exists(widget);
     // There is a single test row
-    assert.strictEqual(widget.dataGrid.rootNode().children.length, 1);
+    assert.lengthOf(widget.dataGrid.rootNode().children, 1);
   });
 });

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

@@ -24,7 +24,7 @@
  */
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable rulesdir/check_license_header */
+/* eslint-disable rulesdir/check-license-header */
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -213,13 +213,13 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.dataTableColumnGroup = this.dataTable.createChild('colgroup');
 
-    this.dataTableHeadInternal = this.dataTable.createChild('thead') as HTMLTableSectionElement;
+    this.dataTableHeadInternal = this.dataTable.createChild('thead');
     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);
+    this.topFillerRow = this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed');
     UI.ARIAUtils.setHidden(this.topFillerRow, true);
-    this.bottomFillerRow = (this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed') as HTMLElement);
+    this.bottomFillerRow = this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed');
     UI.ARIAUtils.setHidden(this.bottomFillerRow, true);
 
     this.setVerticalPadding(0, 0, true);
@@ -478,12 +478,12 @@ 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 dataColumn = (this.dataTableColumnGroup.createChild('col') as HTMLElement);
+      const dataColumn = this.dataTableColumnGroup.createChild('col');
       if (column.width) {
         dataColumn.style.width = column.width;
       }
       this.headerRow.appendChild(this.dataTableHeaders[columnId]);
-      const topFillerRowCell = (this.topFillerRow.createChild('th', 'top-filler-td') as HTMLTableCellElement);
+      const topFillerRowCell = this.topFillerRow.createChild('th', 'top-filler-td');
       topFillerRowCell.textContent = column.title || null;
       topFillerRowCell.scope = 'col';
       const bottomFillerRowChild = this.bottomFillerRow.createChild('td', 'bottom-filler-td');
@@ -493,7 +493,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const headerCorner = this.headerRow.createChild('th', 'corner');
     UI.ARIAUtils.setHidden(headerCorner, true);
 
-    const topFillerRowCornerCell = (this.topFillerRow.createChild('th', 'corner') as HTMLTableCellElement);
+    const topFillerRowCornerCell = this.topFillerRow.createChild('th', 'corner');
     topFillerRowCornerCell.classList.add('top-filler-td');
     topFillerRowCornerCell.scope = 'col';
 
@@ -1703,7 +1703,7 @@ export class DataGridNode<T> {
     return this.elementInternal as Element;
   }
 
-  protected createElement(): Element {
+  protected createElement(): HTMLElement {
     this.elementInternal = document.createElement('tr');
     this.elementInternal.setAttribute(
         'jslog', `${VisualLogging.tableRow().track({keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}`);
@@ -1736,7 +1736,7 @@ export class DataGridNode<T> {
     return this.elementInternal;
   }
 
-  existingElement(): Element|null {
+  existingElement(): HTMLElement|null {
     return this.elementInternal || null;
   }
 
@@ -2003,7 +2003,7 @@ export class DataGridNode<T> {
     this.cellAccessibleTextMap.set(columnId, name);
     // Mark all direct children of cell as hidden so cell name is properly announced
     for (let i = 0; i < cell.children.length; i++) {
-      UI.ARIAUtils.markAsHidden(cell.children[i]);
+      UI.ARIAUtils.setHidden(cell.children[i], true);
     }
     UI.ARIAUtils.setLabel(cell, name);
   }
@@ -2471,61 +2471,62 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
   }
 }
 
-export interface DataGridWidgetOptions<T> {
-  implParams: Parameters;
-  dataGridImpl?: DataGridImpl<T>;
-  markAsRoot?: boolean;
-  nodes: DataGridNode<T>[];
-}
+export type DataGridWidgetOptions<T> = Parameters&{
+  markAsRoot?: boolean,
+  striped?: boolean, nodes: DataGridNode<T>[],
+};
 
 export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
   #options: DataGridWidgetOptions<T>;
+  widget?: DataGridWidget<T>;
 
   constructor() {
     super();
     // default values for options
     this.#options = {
-      implParams: {
-        displayName: 'dataGrid',
-        columns: [],
-      },
+      displayName: 'dataGrid',
+      columns: [],
       nodes: [],
     };
   }
 
   set options(options: DataGridWidgetOptions<T>) {
     this.#options = options;
+    this.#updateGrid();
   }
 
   override createWidget(): DataGridWidget<T> {
-    const {
-      implParams,
-      markAsRoot,
-      nodes,
-    } = this.#options;
+    const dataGridImpl = new DataGridImpl<T>(this.#options);
 
-    if (!this.#options.dataGridImpl) {
-      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
-    }
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    this.widget = dataGridImpl.asWidget(this);
 
-    this.#options.dataGridImpl.rootNode().removeChildren();
-    for (const node of nodes) {
-      this.#options.dataGridImpl.rootNode().appendChild(node);
+    if (this.#options.markAsRoot) {
+      this.widget.markAsRoot();
     }
 
-    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
-    // use lit templates to bind listeners.
-    this.#options.dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
-    const widget = this.#options.dataGridImpl.asWidget(this);
+    this.#updateGrid();
+
+    return this.widget;
+  }
 
-    if (markAsRoot) {
-      widget.markAsRoot();
+  #updateGrid(): void {
+    if (this.widget) {
+      this.widget.dataGrid.rootNode().removeChildren();
+      for (const node of this.#options.nodes) {
+        this.widget.dataGrid.rootNode().appendChild(node);
+      }
+
+      if (this.#options.striped) {
+        this.widget.dataGrid.setStriped(true);
+      }
     }
-    return widget;
   }
 
   #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {

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

@@ -4,12 +4,10 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Coordinator from '../../../components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../components/render_coordinator/render_coordinator.js';
 
 import {type DataGridData, DataGridImpl, DataGridNode, type Parameters} from './DataGrid.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTypes, typeof DataGridImpl>(
     DataGridImpl)<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
@@ -90,7 +88,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
 
   scheduleUpdate(isFromUser?: boolean): void {
     this.updateIsFromUser = this.updateIsFromUser || Boolean(isFromUser);
-    void coordinator.write('ViewportDataGrid.render', this.update.bind(this));
+    void RenderCoordinator.write('ViewportDataGrid.render', this.update.bind(this));
   }
 
   // TODO(allada) This should be fixed to never be needed. It is needed right now for network because removing
@@ -270,7 +268,7 @@ export class ViewportDataGridNode<T> extends DataGridNode<ViewportDataGridNode<T
     this.isStripedInternal = false;
   }
 
-  override element(): Element {
+  override element(): HTMLElement {
     const existingElement = this.existingElement();
     const element = existingElement || this.createElement();
     if (!existingElement || this.stale) {

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

@@ -21,12 +21,8 @@
 
 .data-grid .data-container {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-x: hidden;
-  overflow-y: overlay;
+  inset: 0;
+  overflow: hidden overlay;
   transform: translateZ(0);
   background-color: var(--sys-color-cdt-base-container);
 }
@@ -71,10 +67,7 @@
 
 .data-grid table.data {
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   border-top: 0 none transparent;
   table-layout: fixed;
 }
@@ -96,8 +89,8 @@
   display: table-row;
 }
 
-.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected),
-.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected) {
+.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty, .selected),
+.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty, .selected) {
   background-color: var(--sys-color-surface1);
 }
 
@@ -245,7 +238,7 @@
   background-color: var(--sys-color-tonal-container);
 }
 
-.data-grid tbody tr.revealed:not(.data-grid-filler-row):not(.selected):hover {
+.data-grid tbody tr.revealed:not(.data-grid-filler-row, .selected):hover {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
 
@@ -343,8 +336,8 @@
     background-color: HighlightText;
   }
 
-  .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected),
-  .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected),
+  .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty, .selected),
+  .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty, .selected),
   .request-cookies-view tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
   .cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
     background-color: canvas;
@@ -358,8 +351,8 @@
   .data-grid th.sortable:hover,
   .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):not(.dirty):not(.selected),
-  .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected),
+  .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd):not(.dirty, .selected),
+  .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even):not(.dirty, .selected),
   .request-cookies-view tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
   .cookies-table tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
     forced-color-adjust: none;

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

@@ -196,10 +196,10 @@ describe('CSSAngle', () => {
       assert.deepEqual(
           InlineEditor.CSSAngleUtils.parseText('ray(20.8deg closest-side)'),
           {value: 20.8, unit: InlineEditor.CSSAngleUtils.AngleUnit.DEG});
-      assert.deepEqual(InlineEditor.CSSAngleUtils.parseText('rotate(12345)'), null);
-      assert.deepEqual(InlineEditor.CSSAngleUtils.parseText(''), null);
+      assert.isNull(InlineEditor.CSSAngleUtils.parseText('rotate(12345)'));
+      assert.isNull(InlineEditor.CSSAngleUtils.parseText(''));
       // TODO(changhaohan): crbug.com/1138628 handle unitless 0 case
-      assert.deepEqual(InlineEditor.CSSAngleUtils.parseText('rotate(0)'), null);
+      assert.isNull(InlineEditor.CSSAngleUtils.parseText('rotate(0)'));
     });
 
     it('converts angles in degree to other units correctly', () => {

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

@@ -162,6 +162,7 @@ export class CSSAngle extends HTMLElement {
     this.displayedAngle = roundAngleByUnit(convertAngleUnit(angle, this.displayedAngle.unit));
     this.angle = this.displayedAngle;
     this.dispatchEvent(new ValueChangedEvent(`${this.angle.value}${this.angle.unit}`));
+    this.render();
   }
 
   private displayNextUnit(): void {

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

@@ -129,7 +129,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.xInput = this.createTextInput(xField, i18nString(UIStrings.xOffset), 'x-offset');
     const yField = this.contentElement.createChild('div', 'shadow-editor-field');
     this.yInput = this.createTextInput(yField, i18nString(UIStrings.yOffset), 'y-offset');
-    this.xySlider = (xField.createChild('canvas', 'shadow-editor-2D-slider') as HTMLCanvasElement);
+    this.xySlider = xField.createChild('canvas', 'shadow-editor-2D-slider');
     this.xySlider.setAttribute('jslog', `${VisualLogging.slider('xy').track({
                                  click: true,
                                  drag: true,
@@ -175,7 +175,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
     slider.addEventListener('input', this.onSliderInput.bind(this), false);
     slider.setAttribute('jslog', `${VisualLogging.slider().track({click: true, drag: true}).context(jslogContext)}`);
     field.appendChild(slider);
-    return slider as HTMLInputElement;
+    return slider;
   }
 
   override wasShown(): void {

package/front_end/ui/legacy/components/inline_editor/ColorMixSwatch.test.ts

@@ -50,7 +50,7 @@ describeWithLocale('ColorMixSwatch', () => {
     swatch.setColorMixText('color-mix(in hsl, yellow, yellow)');
     assert.lengthOf(cb.getCalls(), 4);
 
-    assert.deepStrictEqual(values, [
+    assert.deepEqual(values, [
       'color-mix(in srgb, red, red)',
       'color-mix(in srgb, blue, red)',
       'color-mix(in srgb, blue, purple)',

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.test.ts

@@ -94,12 +94,12 @@ describeWithLocale('ColorSwatch', () => {
     dispatchClickEvent(target);
     dispatchClickEvent(target);
     dispatchClickEvent(target);
-    assert.strictEqual(swatchClickEventsReceived.length, 3, 'The right click events were received');
+    assert.lengthOf(swatchClickEventsReceived, 3, 'The right click events were received');
 
     swatch.removeEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName, onClick);
 
     dispatchClickEvent(target);
-    assert.strictEqual(swatchClickEventsReceived.length, 3, 'No more click events received after removing listener');
+    assert.lengthOf(swatchClickEventsReceived, 3, 'No more click events received after removing listener');
   });
 
   it('does not dispatch an event on click when it is readonly', () => {
@@ -116,7 +116,7 @@ describeWithLocale('ColorSwatch', () => {
     dispatchClickEvent(target);
     dispatchClickEvent(target);
     dispatchClickEvent(target);
-    assert.strictEqual(swatchClickEventsReceived.length, 0, 'No click events received for readonly color swatch');
+    assert.lengthOf(swatchClickEventsReceived, 0, 'No click events received for readonly color swatch');
   });
 
   it('does not dispatch a swatch-click event on shift-click', () => {
@@ -131,7 +131,7 @@ describeWithLocale('ColorSwatch', () => {
 
     const contextMenu = getMenuForShiftClick(target);
 
-    assert.strictEqual(swatchClickEventsReceived.length, 0, 'No swatch-click events are received on shift-click');
+    assert.lengthOf(swatchClickEventsReceived, 0, 'No swatch-click events are received on shift-click');
 
     swatch.removeEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName, onClick);
     assert.exists(contextMenu);
@@ -151,7 +151,7 @@ describeWithLocale('ColorSwatch', () => {
     dispatchClickEvent(target);
     dispatchClickEvent(target);
 
-    assert.strictEqual(formatChangedEventsReceived.length, 0, 'No formatchanged events are received on click');
+    assert.lengthOf(formatChangedEventsReceived, 0, 'No formatchanged events are received on click');
 
     swatch.removeEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, onClick);
   });