chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/ui/components/tree_outline/treeOutline.css

@@ -99,3 +99,23 @@ ul[role="tree"]:focus-within [role="treeitem"].selected > .arrow-and-key-wrapper
   /* stylelint-disable-next-line color-named */
   background-color: var(--legacy-item-selection-bg-color);
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline-icon {
+  vertical-align: sub;
+}
+
+@media (forced-colors: active) {
+  .arrow-icon {
+    background-color: ButtonText;
+  }
+
+  ul[role="tree"]:focus-within [role="treeitem"].selected {
+    outline: solid 1px ButtonText;
+  }
+}

package/front_end/ui/components/two_states_counter/TwoStatesCounter.ts

@@ -0,0 +1,103 @@
+// Copyright (c) 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
+import twoStatesCounterStyles from './twoStatesCounter.css.js';
+const isString = (value: string|undefined): value is string => value !== undefined;
+
+export interface TwoStatesCounterData {
+  active: number;
+  inactive: number;
+  width?: string;
+  height?: string;
+  activeTitle?: string;
+  inactiveTitle?: string;
+}
+
+export class TwoStatesCounter extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-two-states-counter`;
+  readonly #boundRender = this.#render.bind(this);
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #numActive: number = 0;
+  #numInactive: number = 0;
+
+  #width = '14px';
+  #height = '14px';
+
+  #activeTitle?: string;
+  #inactiveTitle?: string;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [twoStatesCounterStyles];
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set data(data: TwoStatesCounterData) {
+    if (data.active < 0 || data.inactive < 0) {
+      throw new Error('Values need to be greater or equal to zero.');
+    }
+    this.#numActive = data.active;
+    this.#numInactive = data.inactive;
+    this.#width = isString(data.width) ? data.width : this.#width;
+    this.#height = isString(data.height) ? data.height : this.#height;
+    this.#activeTitle = data.activeTitle;
+    this.#inactiveTitle = data.inactiveTitle;
+
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    if (this.#numActive === 0 && this.#numInactive === 0) {
+      return;
+    }
+    const showBothNumbers = this.#numActive > 0 && this.#numInactive > 0;
+    const commonClasses = {
+      part: true,
+      split: showBothNumbers,
+    };
+    const activeClassMap = {
+      ...commonClasses,
+      active: true,
+    };
+    const inactiveClassMap = {
+      ...commonClasses,
+      inactive: true,
+    };
+
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+    <div class='counter'>
+      ${this.#renderPart(this.#numActive, activeClassMap, this.#activeTitle)}
+      ${this.#renderPart(this.#numInactive, inactiveClassMap, this.#inactiveTitle)}
+    </div>
+    `
+    , this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #renderPart(count: number, classInfo: {[name: string]: string|boolean|number}, title?: string): unknown {
+    const styles = {
+      width: this.#width,
+      height: this.#height,
+    };
+
+    // clang-format off
+    return count > 0 ? LitHtml.html`
+       <span class=${LitHtml.Directives.classMap(classInfo)} style=${LitHtml.Directives.styleMap(styles)} title=${title}>
+          ${count}
+       </span>
+      ` : LitHtml.nothing;
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-two-states-counter', TwoStatesCounter);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-two-states-counter': TwoStatesCounter;
+  }
+}

package/front_end/ui/components/two_states_counter/twoStatesCounter.css

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.active.split {
+  border-radius: 50% 0% 0% 50%;
+}
+
+.inactive.split {
+  border-radius: 0% 50% 50% 0%;
+}
+
+.counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.part {
+  display: flex;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.active {
+  color: var(--color-button-primary-text);
+  background-color: var(--color-primary);
+}
+
+.inactive {
+  color: var(--color-text-disabled);
+  background-color: var(--color-background-elevation-2);
+}

package/front_end/ui/components/two_states_counter/two_states_counter.ts

@@ -0,0 +1,9 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TwoStatesCounter from './TwoStatesCounter.js';
+
+export {
+  TwoStatesCounter,
+};

package/front_end/ui/legacy/ARIAUtils.ts

@@ -366,7 +366,10 @@ export function setActiveDescendant(element: Element, activedescendant: Element|
   }
 
   if (activedescendant.isConnected && element.isConnected) {
-    console.assert(element.hasSameShadowRoot(activedescendant), 'elements are not in the same shadow dom');
+    console.assert(
+        Platform.DOMUtilities.getEnclosingShadowRootForNode(activedescendant) ===
+            Platform.DOMUtilities.getEnclosingShadowRootForNode(element),
+        'elements are not in the same shadow dom');
   }
 
   ensureId(activedescendant);

package/front_end/ui/legacy/Context.ts

@@ -7,7 +7,7 @@ import * as Root from '../../core/root/root.js';  // eslint-disable-line @typesc
 
 import {type ContextFlavorListener} from './ContextFlavorListener.js';
 
-let contextInstance: Context;
+let contextInstance: Context|undefined;
 
 interface ConstructorFn<T> {
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -35,6 +35,10 @@ export class Context {
     return contextInstance;
   }
 
+  static removeInstance(): void {
+    contextInstance = undefined;
+  }
+
   setFlavor<T>(flavorType: ConstructorFn<T>, flavorValue: T|null): void {
     const value = this.flavorsInternal.get(flavorType) || null;
     if (value === flavorValue) {

package/front_end/ui/legacy/DockController.ts

@@ -37,6 +37,7 @@ import {type ActionDelegate} from './ActionRegistration.js';
 import {type Context} from './Context.js';
 
 import {ToolbarButton, type Provider, type ToolbarItem} from './Toolbar.js';
+import {alert} from './ARIAUtils.js';
 
 const UIStrings = {
   /**
@@ -59,6 +60,15 @@ const UIStrings = {
   *@description Text to undock the DevTools
   */
   undockIntoSeparateWindow: 'Undock into separate window',
+  /**
+  *@description Text announced when the DevTools are undocked
+  */
+  devtoolsUndocked: 'DevTools is undocked',
+  /**
+  *@description Text announced when the DevTools are docked to the left, right, or bottom of the browser tab
+  *@example {bottom} PH1
+  */
+  devToolsDockedTo: 'DevTools is docked to {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/DockController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -130,6 +140,7 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   private dockSideChanged(): void {
     this.setDockSide(this.currentDockStateSetting.get());
+    setTimeout(this.announceDockLocation.bind(this), 2000);
   }
 
   dockSide(): DockState|undefined {
@@ -190,6 +201,14 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
     }
     this.setDockSide(this.lastDockStateSetting.get());
   }
+
+  announceDockLocation(): void {
+    if (this.dockSideInternal === DockState.UNDOCKED) {
+      alert(i18nString(UIStrings.devtoolsUndocked));
+    } else {
+      alert(i18nString(UIStrings.devToolsDockedTo, {PH1: this.dockSideInternal || ''}));
+    }
+  }
 }
 
 export const enum DockState {

package/front_end/ui/legacy/FilterBar.ts

@@ -31,11 +31,13 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
+
 import {type Suggestions} from './SuggestBox.js';
 import {Events, TextPrompt} from './TextPrompt.js';
 
@@ -402,7 +404,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
       if (this.keyFocusNextBit(element, false /* selectPrevious */)) {
         event.consume(true);
       }
-    } else if (isEnterOrSpaceKey(event)) {
+    } else if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
       this.onTypeFilterClicked(event);
     }
   }

package/front_end/ui/legacy/InspectorView.ts

@@ -127,7 +127,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-let inspectorViewInstance: InspectorView;
+let inspectorViewInstance: InspectorView|null = null;
 
 export class InspectorView extends VBox implements ViewLocationResolver {
   private readonly drawerSplitWidget: SplitWidget;
@@ -235,10 +235,14 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return inspectorViewInstance;
   }
 
-  static maybeGetInspectorViewInstance(): InspectorView|undefined {
+  static maybeGetInspectorViewInstance(): InspectorView|null {
     return inspectorViewInstance;
   }
 
+  static removeInstance(): void {
+    inspectorViewInstance = null;
+  }
+
   wasShown(): void {
     this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
   }

package/front_end/ui/legacy/ListWidget.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import listWidgetStyles from './listWidget.css.legacy.js';
@@ -200,6 +201,7 @@ export class ListWidget<T> extends VBox {
     this.focusRestorer = new ElementFocusRestorer(this.element);
 
     this.list.classList.add('list-editing');
+    this.element.classList.add('list-editing');
     this.editItem = item;
     this.editElement = element;
     if (element) {
@@ -227,6 +229,7 @@ export class ListWidget<T> extends VBox {
 
   private stopEditing(): void {
     this.list.classList.remove('list-editing');
+    this.element.classList.remove('list-editing');
     if (this.focusRestorer) {
       this.focusRestorer.restore();
     }
@@ -275,7 +278,8 @@ export class Editor<T> {
   constructor() {
     this.element = document.createElement('div');
     this.element.classList.add('editor-container');
-    this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this.cancelClicked.bind(this)), false);
+    this.element.addEventListener(
+        'keydown', onKeyDown.bind(null, Platform.KeyboardUtilities.isEscKey, this.cancelClicked.bind(this)), false);
 
     this.contentElementInternal = this.element.createChild('div', 'editor-content');
     this.contentElementInternal.addEventListener(

package/front_end/ui/legacy/SearchableView.ts

@@ -425,7 +425,7 @@ export class SearchableView extends VBox {
 
   private onSearchKeyDown(ev: Event): void {
     const event = (ev as KeyboardEvent);
-    if (isEscKey(event)) {
+    if (Platform.KeyboardUtilities.isEscKey(event)) {
       this.closeSearch();
       event.consume(true);
       return;
@@ -475,24 +475,6 @@ export class SearchableView extends VBox {
     this.searchInputElement.focus();
   }
 
-  private onFindClick(_event: Event): void {
-    if (!this.currentQuery) {
-      this.performSearch(true, true);
-    } else {
-      this.jumpToNextSearchResult();
-    }
-    this.searchInputElement.focus();
-  }
-
-  private onPreviousClick(_event: Event): void {
-    if (!this.currentQuery) {
-      this.performSearch(true, true, true);
-    } else {
-      this.jumpToNextSearchResult(true);
-    }
-    this.searchInputElement.focus();
-  }
-
   private clearSearch(): void {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -562,6 +544,7 @@ export class SearchableView extends VBox {
 
   private onInput(_event: Event): void {
     if (!Common.Settings.Settings.instance().moduleSetting('searchAsYouType').get()) {
+      this.clearSearch();
       return;
     }
 

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -150,8 +150,8 @@ export class SoftContextMenu {
         let firedOnce = false;
         const observer = new ResizeObserver(() => {
           if (firedOnce) {
-            // observer.disconnect();
-            // this.discard();
+            observer.disconnect();
+            this.discard();
             return;
           }
           firedOnce = true;
@@ -223,6 +223,11 @@ export class SoftContextMenu {
     if (item.element && !item.label) {
       const wrapper = menuItemElement.createChild('div', 'soft-context-menu-custom-item');
       wrapper.appendChild(item.element);
+      if (item.element?.classList.contains('location-menu')) {
+        const label = item.element.ariaLabel || '';
+        item.element.ariaLabel = '';
+        ARIAUtils.setAccessibleName(menuItemElement, label);
+      }
       detailsForElement.customElement = (item.element as HTMLElement);
       this.detailsForElementMap.set(menuItemElement, detailsForElement);
       return menuItemElement;
@@ -422,7 +427,8 @@ export class SoftContextMenu {
       this.highlightedMenuItemElement.classList.add('force-white-icons');
       this.highlightedMenuItemElement.classList.add('soft-context-menu-item-mouse-over');
       const detailsForElement = this.detailsForElementMap.get(this.highlightedMenuItemElement);
-      if (detailsForElement && detailsForElement.customElement) {
+      if (detailsForElement && detailsForElement.customElement &&
+          !detailsForElement.customElement.classList.contains('location-menu')) {
         detailsForElement.customElement.focus();
       } else {
         this.highlightedMenuItemElement.focus();
@@ -437,7 +443,8 @@ export class SoftContextMenu {
   private highlightPrevious(): void {
     let menuItemElement: (ChildNode|null) = this.highlightedMenuItemElement ?
         this.highlightedMenuItemElement.previousSibling :
-        this.contextMenuElement ? this.contextMenuElement.lastChild : null;
+        this.contextMenuElement ? this.contextMenuElement.lastChild :
+                                  null;
     let menuItemDetails: (ElementMenuDetails|undefined) =
         menuItemElement ? this.detailsForElementMap.get((menuItemElement as HTMLElement)) : undefined;
     while (menuItemElement && menuItemDetails &&
@@ -454,7 +461,8 @@ export class SoftContextMenu {
   private highlightNext(): void {
     let menuItemElement: (ChildNode|null) = this.highlightedMenuItemElement ?
         this.highlightedMenuItemElement.nextSibling :
-        this.contextMenuElement ? this.contextMenuElement.firstChild : null;
+        this.contextMenuElement ? this.contextMenuElement.firstChild :
+                                  null;
     let menuItemDetails: (ElementMenuDetails|undefined) =
         menuItemElement ? this.detailsForElementMap.get((menuItemElement as HTMLElement)) : undefined;
     while (menuItemElement &&
@@ -513,6 +521,10 @@ export class SoftContextMenu {
             this.subMenu.highlightNext();
           }
         }
+        if (detailsForElement?.customElement?.classList.contains('location-menu')) {
+          detailsForElement.customElement.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight'}));
+          this.highlightMenuItem(null, true);
+        }
         keyboardEvent.consume(true);
         break;
       }
@@ -544,7 +556,9 @@ export class SoftContextMenu {
       return;
     }
     for (const child of this.contextMenuElement.children) {
-      ARIAUtils.markAsMenuItemCheckBox(child);
+      if (child.className !== 'soft-context-menu-separator') {
+        ARIAUtils.markAsMenuItemCheckBox(child);
+      }
     }
   }
 }

package/front_end/ui/legacy/TabbedPane.ts

@@ -591,14 +591,16 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const dropDownContainer = document.createElement('div');
     dropDownContainer.classList.add('tabbed-pane-header-tabs-drop-down-container');
     const chevronIcon = Icon.create('largeicon-chevron', 'chevron-icon');
+    const moreTabsString = i18nString(UIStrings.moreTabs);
+    dropDownContainer.title = moreTabsString;
     ARIAUtils.markAsMenuButton(dropDownContainer);
-    ARIAUtils.setAccessibleName(dropDownContainer, i18nString(UIStrings.moreTabs));
+    ARIAUtils.setAccessibleName(dropDownContainer, moreTabsString);
     dropDownContainer.tabIndex = 0;
     dropDownContainer.appendChild(chevronIcon);
     dropDownContainer.addEventListener('click', this.dropDownClicked.bind(this));
     dropDownContainer.addEventListener('keydown', this.dropDownKeydown.bind(this));
     dropDownContainer.addEventListener('mousedown', event => {
-      if (event.which !== 1 || this.triggerDropDownTimeout) {
+      if (event.button !== 0 || this.triggerDropDownTimeout) {
         return;
       }
       this.triggerDropDownTimeout = window.setTimeout(this.dropDownClicked.bind(this, event), 200);
@@ -608,7 +610,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   private dropDownClicked(ev: Event): void {
     const event = (ev as MouseEvent);
-    if (event.which !== 1) {
+    if (event.button !== 0) {
       return;
     }
     if (this.triggerDropDownTimeout) {
@@ -635,8 +637,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     void menu.show();
   }
 
-  private dropDownKeydown(event: Event): void {
-    if (isEnterOrSpaceKey(event)) {
+  private dropDownKeydown(event: KeyboardEvent): void {
+    if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
       this.dropDownButton.click();
       event.consume(true);
     }

package/front_end/ui/legacy/TextPrompt.ts

@@ -32,7 +32,6 @@
  */
 
 import * as Common from '../../core/common/common.js';
-import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 
@@ -512,7 +511,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
       return;
     }
 
-    const wordQueryRange = DOMExtension.DOMExtension.rangeOfWord(
+    const wordQueryRange = Platform.DOMUtilities.rangeOfWord(
         selectionRange.startContainer, selectionRange.startOffset, this.completionStopCharacters, this.element(),
         'backward');
 

package/front_end/ui/legacy/Toolbar.ts

@@ -31,7 +31,9 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+
 import * as Utils from './utils/utils.js';
 
 import {Events as ActionEvents, type Action} from './ActionRegistration.js';
@@ -688,7 +690,7 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     this.prompt = new TextPrompt();
     this.proxyElement = this.prompt.attach(internalPromptElement);
     this.proxyElement.classList.add('toolbar-prompt-proxy');
-    this.proxyElement.addEventListener('keydown', (event: Event) => this.onKeydownCallback(event));
+    this.proxyElement.addEventListener('keydown', (event: Event) => this.onKeydownCallback(event as KeyboardEvent));
     this.prompt.initialize(completions || ((): Promise<never[]> => Promise.resolve([])), ' ', dynamicCompletions);
     if (tooltip) {
       this.prompt.setTitle(tooltip);
@@ -730,11 +732,11 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     return this.prompt.textWithCurrentSuggestion();
   }
 
-  private onKeydownCallback(event: Event): void {
-    if ((event as KeyboardEvent).key === 'Enter' && this.prompt.text()) {
+  private onKeydownCallback(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && this.prompt.text()) {
       this.dispatchEventToListeners(ToolbarInput.Event.EnterPressed, this.prompt.text());
     }
-    if (!isEscKey(event) || !this.prompt.text()) {
+    if (!Platform.KeyboardUtilities.isEscKey(event) || !this.prompt.text()) {
       return;
     }
     this.setValue('', true);

package/front_end/ui/legacy/UIUtils.ts

@@ -33,7 +33,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -545,7 +544,7 @@ export function handleElementValueModifications(
   }
 
   const originalValue = element.textContent;
-  const wordRange = DOMExtension.DOMExtension.rangeOfWord(
+  const wordRange = Platform.DOMUtilities.rangeOfWord(
       selectionRange.startContainer, selectionRange.startOffset, StyleValueDelimiters, element);
   const wordString = wordRange.toString();
 
@@ -954,7 +953,7 @@ export function animateFunction(
 export class LongClickController {
   private readonly element: Element;
   private readonly callback: (arg0: Event) => void;
-  private readonly editKey: (arg0: Event) => boolean;
+  private readonly editKey: (arg0: KeyboardEvent) => boolean;
   private longClickData!: {
     mouseUp: (arg0: Event) => void,
     mouseDown: (arg0: Event) => void,
@@ -964,7 +963,8 @@ export class LongClickController {
 
   constructor(
       element: Element, callback: (arg0: Event) => void,
-      isEditKeyFunc: (arg0: Event) => boolean = (event): boolean => isEnterOrSpaceKey(event)) {
+      isEditKeyFunc: (arg0: KeyboardEvent) => boolean = (event):
+          boolean => Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
     this.element = element;
     this.callback = callback;
     this.editKey = isEditKeyFunc;
@@ -998,14 +998,14 @@ export class LongClickController {
     this.longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
 
     function keyDown(this: LongClickController, e: Event): void {
-      if (this.editKey(e)) {
+      if (this.editKey(e as KeyboardEvent)) {
         const callback = this.callback;
         this.longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
       }
     }
 
     function keyUp(this: LongClickController, e: Event): void {
-      if (this.editKey(e)) {
+      if (this.editKey(e as KeyboardEvent)) {
         this.reset();
       }
     }
@@ -1544,7 +1544,7 @@ export function createFileSelectorElement(callback: (arg0: File) => void): HTMLI
 export const MaxLengthForDisplayedURLs = 150;
 
 export class MessageDialog {
-  static async show(message: string, where?: Element | Document): Promise<void> {
+  static async show(message: string, where?: Element|Document): Promise<void> {
     const dialog = new Dialog();
     dialog.setSizeBehavior(SizeBehavior.MeasureContent);
     dialog.setDimmed(true);
@@ -1567,7 +1567,7 @@ export class MessageDialog {
 }
 
 export class ConfirmDialog {
-  static async show(message: string, where?: Element | Document): Promise<boolean> {
+  static async show(message: string, where?: Element|Document): Promise<boolean> {
     const dialog = new Dialog();
     dialog.setSizeBehavior(SizeBehavior.MeasureContent);
     dialog.setDimmed(true);

package/front_end/ui/legacy/XLink.ts

@@ -23,7 +23,7 @@ export class XLink extends XElement {
   hrefInternal: Platform.DevToolsPath.UrlString|null;
   private clickable: boolean;
   private readonly onClick: (arg0: Event) => void;
-  private readonly onKeyDown: (arg0: Event) => void;
+  private readonly onKeyDown: (arg0: KeyboardEvent) => void;
   static create(url: string, linkText?: string, className?: string, preventClick?: boolean): HTMLElement {
     if (!linkText) {
       linkText = url;
@@ -57,8 +57,8 @@ export class XLink extends XElement {
       }
       this.dispatchEvent(new Event('x-link-invoke'));
     };
-    this.onKeyDown = (event: Event): void => {
-      if (isEnterOrSpaceKey(event)) {
+    this.onKeyDown = (event: KeyboardEvent): void => {
+      if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
         event.consume(true);
         if (this.hrefInternal) {
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.hrefInternal);