chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

package/front_end/third_party/puppeteer/package/src/common/ConsoleMessage.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type {Protocol} from 'devtools-protocol';
+
 import type {Frame} from '../api/Frame.js';
 import type {JSHandle} from '../api/JSHandle.js';
 
@@ -62,6 +64,7 @@ export class ConsoleMessage {
   #args: JSHandle[];
   #stackTraceLocations: ConsoleMessageLocation[];
   #frame?: Frame;
+  #rawStackTrace?: Protocol.Runtime.StackTrace;
 
   /**
    * @internal
@@ -72,12 +75,14 @@ export class ConsoleMessage {
     args: JSHandle[],
     stackTraceLocations: ConsoleMessageLocation[],
     frame?: Frame,
+    rawStackTrace?: Protocol.Runtime.StackTrace,
   ) {
     this.#type = type;
     this.#text = text;
     this.#args = args;
     this.#stackTraceLocations = stackTraceLocations;
     this.#frame = frame;
+    this.#rawStackTrace = rawStackTrace;
   }
 
   /**
@@ -117,4 +122,13 @@ export class ConsoleMessage {
   stackTrace(): ConsoleMessageLocation[] {
     return this.#stackTraceLocations;
   }
+
+  /**
+   * The underlying protocol stack trace if available.
+   *
+   * @internal
+   */
+  _rawStackTrace(): Protocol.Runtime.StackTrace | undefined {
+    return this.#rawStackTrace;
+  }
 }

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '142.0.7444.162',
-  'chrome-headless-shell': '142.0.7444.162',
-  firefox: 'stable_145.0',
+  chrome: '142.0.7444.175',
+  'chrome-headless-shell': '142.0.7444.175',
+  firefox: 'stable_145.0.1',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.30.0';
+export const packageVersion = '24.31.0';
 // x-release-please-end

package/front_end/third_party/puppeteer/puppeteer-tsconfig.json

@@ -6,6 +6,7 @@
     "package/lib/esm/puppeteer/api/Browser.js",
     "package/lib/esm/puppeteer/api/BrowserContext.js",
     "package/lib/esm/puppeteer/api/CDPSession.js",
+    "package/lib/esm/puppeteer/api/DeviceRequestPrompt.js",
     "package/lib/esm/puppeteer/api/Dialog.js",
     "package/lib/esm/puppeteer/api/ElementHandle.js",
     "package/lib/esm/puppeteer/api/ElementHandleSymbol.js",

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -69,6 +69,11 @@ export const markdownLinks = new Map<string, string>([
   ],
   ['storagePartitioningExplainer', 'https://developers.google.com/privacy-sandbox/cookies/storage-partitioning'],
   ['storageAccessAPI', 'https://developer.mozilla.org/en-US/docs/Web/API/StorageAccessHandle/createObjectURL'],
+  ['https://goo.gle/ps-status', 'https://goo.gle/ps-status'],
+  [
+    'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/',
+    'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/'
+  ],
 ]);
 
 export const getMarkdownLink = (key: string): string => {

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

@@ -523,7 +523,7 @@ async function getArgumentsForExpression(
   }
   const expression = doc.sliceString(callee.from, callee.to);
   const result = await evaluateExpression(context, expression, 'argumentsHint');
-  if (!result || result.type !== 'function') {
+  if (result?.type !== 'function') {
     return null;
   }
   const objGetter = async(): Promise<SDK.RemoteObject.RemoteObject|null> => {

package/front_end/ui/legacy/ARIAUtils.ts

@@ -5,6 +5,7 @@
 import * as Platform from '../../core/platform/platform.js';
 
 import {Dialog} from './Dialog.js';
+import {getEnclosingShadowRootForNode} from './DOMUtilities.js';
 
 let id = 0;
 
@@ -348,8 +349,7 @@ export function setActiveDescendant(element: Element, activedescendant: Element|
 
   if (activedescendant.isConnected && element.isConnected) {
     console.assert(
-        Platform.DOMUtilities.getEnclosingShadowRootForNode(activedescendant) ===
-            Platform.DOMUtilities.getEnclosingShadowRootForNode(element),
+        getEnclosingShadowRootForNode(activedescendant) === getEnclosingShadowRootForNode(element),
         'elements are not in the same shadow dom');
   }
 

package/front_end/ui/legacy/ActionRegistration.ts

@@ -215,6 +215,10 @@ export class Action extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     return this.actionRegistration.bindings;
   }
 
+  configurableBindings(): boolean {
+    return this.actionRegistration.configurableBindings ?? true;
+  }
+
   experiment(): string|undefined {
     return this.actionRegistration.experiment;
   }
@@ -536,6 +540,13 @@ export interface ActionRegistration {
    * are flavors of the current appliaction context.
    */
   bindings?: Binding[];
+  /**
+   * Whether the action's bindings should be displayed for configuration in the
+   * Settings UI. Setting this to `false` will hide the action from the Shortcuts
+   * tab. Defaults to `true`.
+   */
+  // TODO(crbug.com/436764687): Consider removing this again if parametrized actions get moved to a separate mechanism
+  configurableBindings?: boolean;
   /**
    * The name of the experiment an action is associated with. Enabling and disabling the declared
    * experiment will enable and disable the action respectively.

package/front_end/ui/legacy/ListWidget.ts

@@ -56,12 +56,12 @@ export class ListWidget<T> extends VBox {
   private readonly list: HTMLElement;
   private lastSeparator: boolean;
   private focusRestorer: ElementFocusRestorer|null;
-  private items: T[];
+  #items: T[];
   private editable: boolean[];
-  private elements: Element[];
+  private elements: HTMLElement[];
   private editor: Editor<T>|null;
   private editItem: T|null;
-  private editElement: Element|null;
+  private editElement: HTMLElement|null;
   private emptyPlaceholder: Element|null;
   private isTable: boolean;
   constructor(delegate: Delegate<T>, delegatesFocus = true, isTable = false) {
@@ -73,7 +73,7 @@ export class ListWidget<T> extends VBox {
 
     this.lastSeparator = false;
     this.focusRestorer = null;
-    this.items = [];
+    this.#items = [];
     this.editable = [];
     this.elements = [];
     this.editor = null;
@@ -90,8 +90,12 @@ export class ListWidget<T> extends VBox {
     this.updatePlaceholder();
   }
 
+  get items(): T[] {
+    return this.#items;
+  }
+
   clear(): void {
-    this.items = [];
+    this.#items = [];
     this.editable = [];
     this.elements = [];
     this.lastSeparator = false;
@@ -100,8 +104,34 @@ export class ListWidget<T> extends VBox {
     this.stopEditing();
   }
 
-  appendItem(item: T, editable: boolean): void {
-    if (this.lastSeparator && this.items.length) {
+  updateItem(index: number, newItem: T, editable: boolean, focusable = true, controlLabels: {
+    edit?: string,
+    delete?: string,
+  } = {}): void {
+    if (index < 0 || index >= this.#items.length) {
+      this.appendItem(newItem, editable, focusable, controlLabels);
+      return;
+    }
+
+    this.#items[index] = newItem;
+    this.editable[index] = editable;
+    const element = this.elements[index];
+    const [content, controls] = element.children;
+    if (controls) {
+      element.removeChild(controls);
+    }
+    this.delegate.updateItem?.(content, newItem, editable, index);
+    element.classList.toggle('editable', editable);
+    if (editable) {
+      if (focusable) {
+        element.tabIndex = 0;
+      }
+      element.appendChild(this.createControls(newItem, element, controlLabels));
+    }
+  }
+
+  appendItem(item: T, editable: boolean, focusable = true, controlLabels: {edit?: string, delete?: string} = {}): void {
+    if (this.lastSeparator && this.#items.length) {
       const element = document.createElement('div');
       element.classList.add('list-separator');
       if (this.isTable) {
@@ -111,22 +141,24 @@ export class ListWidget<T> extends VBox {
     }
     this.lastSeparator = false;
 
-    this.items.push(item);
+    this.#items.push(item);
     this.editable.push(editable);
 
     const element = this.list.createChild('div', 'list-item');
     if (this.isTable) {
       element.role = 'rowgroup';
     }
-    const content = this.delegate.renderItem(item, editable, this.items.length - 1);
+    const content = this.delegate.renderItem(item, editable, this.#items.length - 1);
     if (!content.hasAttribute('jslog')) {
       element.setAttribute('jslog', `${VisualLogging.item()}`);
     }
     element.appendChild(content);
     if (editable) {
       element.classList.add('editable');
-      element.tabIndex = 0;
-      element.appendChild(this.createControls(item, element));
+      if (focusable) {
+        element.tabIndex = 0;
+      }
+      element.appendChild(this.createControls(item, element, controlLabels));
     }
     this.elements.push(element);
     this.updatePlaceholder();
@@ -137,7 +169,7 @@ export class ListWidget<T> extends VBox {
   }
 
   removeItem(index: number): void {
-    if (this.editItem === this.items[index]) {
+    if (this.editItem === this.#items[index]) {
       this.stopEditing();
     }
 
@@ -158,7 +190,7 @@ export class ListWidget<T> extends VBox {
     element.remove();
 
     this.elements.splice(index, 1);
-    this.items.splice(index, 1);
+    this.#items.splice(index, 1);
     this.editable.splice(index, 1);
     this.updatePlaceholder();
   }
@@ -172,7 +204,7 @@ export class ListWidget<T> extends VBox {
     this.updatePlaceholder();
   }
 
-  private createControls(item: T, element: Element): Element {
+  private createControls(item: T, element: HTMLElement, controlLabels: {edit?: string, delete?: string}): Element {
     const controls = document.createElement('div');
     controls.classList.add('controls-container');
     controls.classList.add('fill');
@@ -185,13 +217,13 @@ export class ListWidget<T> extends VBox {
           <devtools-button class=toolbar-button
                            .iconName=${'edit'}
                            .jslogContext=${'edit-item'}
-                           .title=${i18nString(UIStrings.editString)}
+                           .title=${controlLabels?.edit ?? i18nString(UIStrings.editString)}
                            .variant=${Buttons.Button.Variant.ICON}
                            @click=${onEditClicked}></devtools-button>
           <devtools-button class=toolbar-button
                            .iconName=${'bin'}
                            .jslogContext=${'remove-item'}
-                           .title=${i18nString(UIStrings.removeString)}
+                           .title=${controlLabels?.delete ?? i18nString(UIStrings.removeString)}
                            .variant=${Buttons.Button.Variant.ICON}
                            @click=${onRemoveClicked}></devtools-button>
         </devtools-toolbar>
@@ -209,7 +241,7 @@ export class ListWidget<T> extends VBox {
     function onRemoveClicked(this: ListWidget<T>): void {
       const index = this.elements.indexOf(element);
       this.element.focus();
-      this.delegate.removeItemRequested(this.items[index], index);
+      this.delegate.removeItemRequested(this.#items[index], index);
       ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.removedItem));
       if (this.elements.length >= 1) {
         // focus on the next item in the list, or the last item if we're removing the last item
@@ -235,7 +267,7 @@ export class ListWidget<T> extends VBox {
     }
   }
 
-  private startEditing(item: T, element: Element|null, insertionPoint: Element|null): void {
+  private startEditing(item: T, element: HTMLElement|null, insertionPoint: Element|null): void {
     if (element && this.editElement === element) {
       return;
     }
@@ -297,6 +329,7 @@ export class ListWidget<T> extends VBox {
 }
 
 export interface Delegate<T> {
+  updateItem?(content: Element, newItem: T, editable: boolean, index: number): void;
   renderItem(item: T, editable: boolean, index: number): Element;
   removeItemRequested(item: T, index: number): void;
   beginEdit(item: T): Editor<T>;

package/front_end/ui/legacy/ReportView.ts

@@ -50,7 +50,7 @@ export class ReportView extends VBox {
   }
 
   setSubtitle(subtitle: string): void {
-    if (this.subtitleElement && this.subtitleElement.textContent === subtitle) {
+    if (this.subtitleElement?.textContent === subtitle) {
       return;
     }
     if (!this.subtitleElement) {

package/front_end/ui/legacy/SoftDropDown.ts

@@ -5,12 +5,12 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {appendStyle} from './DOMUtilities.js';
 import {AnchorBehavior, GlassPane, MarginBehavior, PointerEventsBehavior} from './GlassPane.js';
 import {ListControl, type ListDelegate, ListMode} from './ListControl.js';
 import {Events as ListModelEvents, type ItemsReplacedEvent, type ListModel} from './ListModel.js';
@@ -54,7 +54,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
       );
     }
     this.element.classList.add('soft-dropdown');
-    Platform.DOMUtilities.appendStyle(this.element, softDropDownButtonStyles);
+    appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
     const dropdownArrowIcon = IconButton.Icon.create('triangle-down');
     this.element.appendChild(dropdownArrowIcon);

package/front_end/ui/legacy/TabbedPane.ts

@@ -261,7 +261,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     if (userGesture && !tab.closeable) {
       return;
     }
-    if (this.currentTab && this.currentTab.id === id) {
+    if (this.currentTab?.id === id) {
       this.hideCurrentTab();
     }
 
@@ -335,7 +335,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       isUserGesture: userGesture,
     };
     this.dispatchEventToListeners(Events.TabInvoked, eventData);
-    if (this.currentTab && this.currentTab.id === id) {
+    if (this.currentTab?.id === id) {
       return true;
     }
 
@@ -474,7 +474,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
 
     this.suspendInvalidations();
-    const isSelected = this.currentTab && this.currentTab.id === id;
+    const isSelected = this.currentTab?.id === id;
     const shouldFocus = tab.view.hasFocus();
     if (isSelected) {
       this.hideTab(tab);

package/front_end/ui/legacy/TextPrompt.ts

@@ -38,6 +38,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {appendStyle, rangeOfWord} from './DOMUtilities.js';
 import {SuggestBox, type SuggestBoxDelegate, type Suggestion} from './SuggestBox.js';
 import textPromptStyles from './textPrompt.css.js';
 import {Tooltip} from './Tooltip.js';
@@ -344,7 +345,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.boundClearAutocomplete = this.clearAutocomplete.bind(this);
     this.boundOnBlur = this.onBlur.bind(this);
     this.proxyElement = element.ownerDocument.createElement('span');
-    Platform.DOMUtilities.appendStyle(this.proxyElement, textPromptStyles);
+    appendStyle(this.proxyElement, textPromptStyles);
     this.contentElement = this.proxyElement.createChild('div', 'text-prompt-root');
     this.proxyElement.style.display = this.proxyElementDisplay;
     if (element.parentElement) {
@@ -740,7 +741,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
       return;
     }
 
-    const wordQueryRange = Platform.DOMUtilities.rangeOfWord(
+    const wordQueryRange = rangeOfWord(
         selectionRange.startContainer, selectionRange.startOffset, this.completionStopCharacters, this.element(),
         'backward');
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -45,6 +45,7 @@ import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
+import {appendStyle} from './DOMUtilities.js';
 import {type Config, InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
 import type {SearchableView} from './SearchableView.js';
@@ -428,7 +429,7 @@ export class TreeOutlineInShadow extends TreeOutline {
 
   registerRequiredCSS(...cssFiles: Array<string&{_tag: 'CSS-in-JS'}>): void {
     for (const cssFile of cssFiles) {
-      Platform.DOMUtilities.appendStyle(this.shadowRoot, cssFile);
+      appendStyle(this.shadowRoot, cssFile);
     }
   }
 
@@ -1253,7 +1254,7 @@ export class TreeElement {
     ARIAUtils.clearSelected(this.listItemNode);
     this.setFocusable(false);
 
-    if (this.treeOutline && this.treeOutline.selectedTreeElement === this) {
+    if (this.treeOutline?.selectedTreeElement === this) {
       this.treeOutline.selectedTreeElement = null;
       this.treeOutline.updateFocusable();
       if (hadFocus) {

package/front_end/ui/legacy/UIUtils.ts

@@ -53,6 +53,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
 import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
+import {appendStyle, deepActiveElement, rangeOfWord} from './DOMUtilities.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
 import {InspectorView} from './InspectorView.js';
@@ -358,7 +359,7 @@ export function isEditing(): boolean {
     return true;
   }
 
-  const focused = Platform.DOMUtilities.deepActiveElement(document);
+  const focused = deepActiveElement(document);
   if (!focused) {
     return false;
   }
@@ -580,8 +581,8 @@ export function handleElementValueModifications(
   }
 
   const originalValue = element.textContent;
-  const wordRange = Platform.DOMUtilities.rangeOfWord(
-      selectionRange.startContainer, selectionRange.startOffset, StyleValueDelimiters, element);
+  const wordRange =
+      rangeOfWord(selectionRange.startContainer, selectionRange.startOffset, StyleValueDelimiters, element);
   const wordString = wordRange.toString();
 
   if (suggestionHandler?.(wordString)) {
@@ -655,8 +656,8 @@ export function addPlatformClass(element: HTMLElement): void {
 }
 
 export function installComponentRootStyles(element: HTMLElement): void {
-  Platform.DOMUtilities.appendStyle(element, inspectorCommonStyles);
-  Platform.DOMUtilities.appendStyle(element, Buttons.textButtonStyles);
+  appendStyle(element, inspectorCommonStyles);
+  appendStyle(element, Buttons.textButtonStyles);
 
   // Detect overlay scrollbar enable by checking for nonzero scrollbar width.
   if (!Host.Platform.isMac() && measuredScrollbarWidth(element.ownerDocument) === 0) {
@@ -681,7 +682,7 @@ export class ElementFocusRestorer {
   private previous: HTMLElement|null;
   constructor(element: Element) {
     this.element = (element as HTMLElement | null);
-    this.previous = (Platform.DOMUtilities.deepActiveElement(element.ownerDocument) as HTMLElement | null);
+    this.previous = (deepActiveElement(element.ownerDocument) as HTMLElement | null);
     (element as HTMLElement).focus();
   }
 
@@ -1930,7 +1931,7 @@ function updateWidgetfocusWidgetForNode(node: Node|null): void {
 function focusChanged(event: Event): void {
   const target = event.target as HTMLElement;
   const document = target ? target.ownerDocument : null;
-  const element = document ? Platform.DOMUtilities.deepActiveElement(document) : null;
+  const element = document ? deepActiveElement(document) : null;
   updateWidgetfocusWidgetForNode(element);
 }
 
@@ -1953,11 +1954,11 @@ export function createShadowRootWithCoreStyles(element: Element, options: {
   const {cssFile, delegatesFocus} = options;
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
-  Platform.DOMUtilities.appendStyle(shadowRoot, inspectorCommonStyles, Buttons.textButtonStyles);
+  appendStyle(shadowRoot, inspectorCommonStyles, Buttons.textButtonStyles);
   if (Array.isArray(cssFile)) {
-    Platform.DOMUtilities.appendStyle(shadowRoot, ...cssFile);
+    appendStyle(shadowRoot, ...cssFile);
   } else if (cssFile) {
-    Platform.DOMUtilities.appendStyle(shadowRoot, cssFile);
+    appendStyle(shadowRoot, cssFile);
   }
   shadowRoot.addEventListener('focus', focusChanged, true);
   return shadowRoot;

package/front_end/ui/legacy/Widget.ts

@@ -35,6 +35,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
+import {appendStyle, deepActiveElement} from './DOMUtilities.js';
 import {cloneCustomElement, createShadowRootWithCoreStyles} from './UIUtils.js';
 
 // Remember the original DOM mutation methods here, since we
@@ -766,7 +767,7 @@ export class Widget {
 
   registerRequiredCSS(...cssFiles: Array<string&{_tag: 'CSS-in-JS'}>): void {
     for (const cssFile of cssFiles) {
-      Platform.DOMUtilities.appendStyle(this.#shadowRoot ?? this.element, cssFile);
+      appendStyle(this.#shadowRoot ?? this.element, cssFile);
     }
   }
 
@@ -1106,7 +1107,7 @@ export class WidgetFocusRestorer {
   private previous: HTMLElement|null;
   constructor(widget: Widget) {
     this.widget = widget;
-    this.previous = (Platform.DOMUtilities.deepActiveElement(widget.element.ownerDocument) as HTMLElement | null);
+    this.previous = (deepActiveElement(widget.element.ownerDocument) as HTMLElement | null);
     widget.focus();
   }
 

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

@@ -37,7 +37,7 @@ export class ContrastInfo extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#contrastRatioAPCAThreshold =
         Common.ColorUtils.getAPCAThreshold(contrastInfo.computedFontSize, contrastInfo.computedFontWeight);
 
-    if (!contrastInfo.backgroundColors || contrastInfo.backgroundColors.length !== 1) {
+    if (contrastInfo.backgroundColors?.length !== 1) {
       return;
     }
     const bgColorText = contrastInfo.backgroundColors[0];

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

@@ -368,7 +368,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   announceSelectedGridNode(): void {
     // Only alert if the datagrid has focus
-    if (this.element === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument) &&
+    if (this.element === UI.DOMUtilities.deepActiveElement(this.element.ownerDocument) &&
         this.selectedNode?.existingElement()) {
       // Update the expand/collapse state for the current selected node
       let expandText;
@@ -466,7 +466,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       cell.createChild('div', 'sort-order-icon-container').appendChild(icon);
 
       if (column.title) {
-        UI.ARIAUtils.setLabel(cell, i18nString(UIStrings.sortableColumn));
+        const columnLabel = `${column.title} - ${i18nString(UIStrings.sortableColumn)}`;
+        UI.ARIAUtils.setLabel(cell, columnLabel);
       }
     }
   }
@@ -1237,7 +1238,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       nextSelectedNode.select();
     }
 
-    const activeElement = (Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument) as HTMLElement | null);
+    const activeElement = (UI.DOMUtilities.deepActiveElement(this.element.ownerDocument) as HTMLElement | null);
     if (handled && this.element !== activeElement && !this.element.contains(activeElement)) {
       // crbug.com/1005449, crbug.com/1329956
       // navigational or delete keys pressed but current DataGrid panel has lost focus;
@@ -2341,7 +2342,7 @@ export class DataGridNode<T> {
   }
 
   deselect(supressDeselectedEvent?: boolean): void {
-    if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selected) {
+    if (this.dataGrid?.selectedNode !== this || !this.selected) {
       return;
     }