chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/ui/legacy/ContextMenu.ts

@@ -35,6 +35,7 @@ import * as Root from '../../core/root/root.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import {ActionRegistry} from './ActionRegistry.js';
+import type {Key, Modifier} from './KeyboardShortcut.js';
 import {ShortcutRegistry} from './ShortcutRegistry.js';
 import {SoftContextMenu, type SoftContextMenuDescriptor} from './SoftContextMenu.js';
 import {deepElementFromEvent} from './UIUtils.js';
@@ -42,8 +43,11 @@ import {deepElementFromEvent} from './UIUtils.js';
 export class Item {
   private readonly typeInternal: string;
   protected readonly label: string|undefined;
+  protected accelerator?: Host.InspectorFrontendHostAPI.AcceleratorDescriptor;
+  protected readonly previewFeature: boolean;
   protected disabled: boolean|undefined;
   private readonly checked: boolean|undefined;
+  protected isDevToolsPerformanceMenuItem: boolean;
   protected contextMenu: ContextMenu|null;
   protected idInternal: number|undefined;
   customElement?: Element;
@@ -52,12 +56,17 @@ export class Item {
   protected jslogContext: string|undefined;
 
   constructor(
-      contextMenu: ContextMenu|null, type: 'checkbox'|'item'|'separator'|'subMenu', label?: string, disabled?: boolean,
-      checked?: boolean, tooltip?: Platform.UIString.LocalizedString, jslogContext?: string) {
+      contextMenu: ContextMenu|null, type: 'checkbox'|'item'|'separator'|'subMenu', label?: string,
+      isPreviewFeature?: boolean, disabled?: boolean, checked?: boolean,
+      accelerator?: Host.InspectorFrontendHostAPI.AcceleratorDescriptor, tooltip?: Platform.UIString.LocalizedString,
+      jslogContext?: string) {
     this.typeInternal = type;
     this.label = label;
+    this.previewFeature = Boolean(isPreviewFeature);
+    this.accelerator = accelerator;
     this.disabled = disabled;
     this.checked = checked;
+    this.isDevToolsPerformanceMenuItem = false;
     this.contextMenu = contextMenu;
     this.idInternal = undefined;
     this.#tooltip = tooltip;
@@ -78,6 +87,10 @@ export class Item {
     return this.typeInternal;
   }
 
+  isPreviewFeature(): boolean {
+    return this.previewFeature;
+  }
+
   isEnabled(): boolean {
     return !this.disabled;
   }
@@ -93,6 +106,7 @@ export class Item {
           type: 'item',
           id: this.idInternal,
           label: this.label,
+          isExperimentalFeature: this.previewFeature,
           enabled: !this.disabled,
           checked: undefined,
           subItems: undefined,
@@ -105,6 +119,12 @@ export class Item {
         if (this.shortcut) {
           result.shortcut = this.shortcut;
         }
+        if (this.accelerator) {
+          result.accelerator = this.accelerator;
+          if (this.isDevToolsPerformanceMenuItem) {
+            result.isDevToolsPerformanceMenuItem = true;
+          }
+        }
         return result;
       }
       case 'separator': {
@@ -137,6 +157,18 @@ export class Item {
     throw new Error('Invalid item type:' + this.typeInternal);
   }
 
+  setAccelerator(key: Key, modifiers: Modifier[]): void {
+    const modifierSum = modifiers.reduce((result, modifier) => result + modifier.value, 0);
+    this.accelerator = {keyCode: key.code, modifiers: modifierSum};
+  }
+
+  // This influences whether accelerators will be shown for native menus on Mac.
+  // Use this ONLY for performance menus and ONLY where accelerators are critical
+  // for a smooth user journey and heavily context dependent.
+  setIsDevToolsPerformanceMenuItem(isDevToolsPerformanceMenuItem: boolean): void {
+    this.isDevToolsPerformanceMenuItem = isDevToolsPerformanceMenuItem;
+  }
+
   setShortcut(shortcut: string): void {
     this.shortcut = shortcut;
   }
@@ -151,13 +183,16 @@ export class Section {
   }
 
   appendItem(label: string, handler: () => void, options?: {
+    accelerator?: Host.InspectorFrontendHostAPI.AcceleratorDescriptor,
+    isPreviewFeature?: boolean,
     disabled?: boolean,
     additionalElement?: Element,
     tooltip?: Platform.UIString.LocalizedString,
     jslogContext?: string,
   }): Item {
     const item = new Item(
-        this.contextMenu, 'item', label, options?.disabled, undefined, options?.tooltip, options?.jslogContext);
+        this.contextMenu, 'item', label, options?.isPreviewFeature, options?.disabled, undefined, options?.accelerator,
+        options?.tooltip, options?.jslogContext);
     if (options?.additionalElement) {
       item.customElement = options?.additionalElement;
     }
@@ -169,7 +204,8 @@ export class Section {
   }
 
   appendCustomItem(element: Element, jslogContext?: string): Item {
-    const item = new Item(this.contextMenu, 'item', undefined, undefined, undefined, undefined, jslogContext);
+    const item = new Item(
+        this.contextMenu, 'item', undefined, undefined, undefined, undefined, undefined, undefined, jslogContext);
     item.customElement = element;
     this.items.push(item);
     return item;
@@ -214,8 +250,8 @@ export class Section {
     jslogContext?: string,
   }): Item {
     const item = new Item(
-        this.contextMenu, 'checkbox', label, options?.disabled, options?.checked, options?.tooltip,
-        options?.jslogContext);
+        this.contextMenu, 'checkbox', label, undefined, options?.disabled, options?.checked, undefined,
+        options?.tooltip, options?.jslogContext);
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
@@ -232,7 +268,7 @@ export class SubMenu extends Item {
   private readonly sectionList: Section[];
 
   constructor(contextMenu: ContextMenu|null, label?: string, disabled?: boolean, jslogContext?: string) {
-    super(contextMenu, 'subMenu', label, disabled, undefined, undefined, jslogContext);
+    super(contextMenu, 'subMenu', label, undefined, disabled, undefined, undefined, undefined, jslogContext);
     this.sections = new Map();
     this.sectionList = [];
   }
@@ -306,6 +342,9 @@ export class SubMenu extends Item {
     const result: Host.InspectorFrontendHostAPI.ContextMenuDescriptor|SoftContextMenuDescriptor = {
       type: 'subMenu',
       label: this.label,
+      accelerator: this.accelerator,
+      isDevToolsPerformanceMenuItem: this.accelerator ? this.isDevToolsPerformanceMenuItem : undefined,
+      isExperimentalFeature: this.previewFeature,
       enabled: !this.disabled,
       subItems: [],
       id: undefined,
@@ -514,11 +553,11 @@ export class ContextMenu extends SubMenu {
   }
 
   private innerShow(): void {
-    const menuObject = this.buildMenuDescriptors();
-
     if (!this.eventTarget) {
       return;
     }
+
+    const menuObject = this.buildMenuDescriptors();
     const ownerDocument = (this.eventTarget as HTMLElement).ownerDocument;
     if (this.useSoftMenu || ContextMenu.useSoftMenu ||
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {

package/front_end/ui/legacy/FilterBar.test.ts

@@ -0,0 +1,52 @@
+// Copyright 2024 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 {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
+
+import * as UI from './legacy.js';
+
+const {render, html} = LitHtml;
+
+describeWithEnvironment('NamedBitSetFilterUI', () => {
+  it('is functional from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let namedBitSetFilterUI!: UI.FilterBar.NamedBitSetFilterUI;
+
+    const filterItems: UI.FilterBar.Item[] = [
+      {
+        name: 'filter',
+        label: () => 'filter',
+        title: 'filter',
+        jslogContext: 'filter',
+      },
+    ];
+
+    // clang-format off
+        render(
+            html`
+            <devtools-named-bit-set-filter
+              .options=${{items: filterItems}}
+              ${LitHtml.Directives.ref((el: Element|undefined) => {
+                  if(!el || !(el instanceof UI.FilterBar.NamedBitSetFilterUIElement)){
+                      return;
+                  }
+                  namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+              })}
+            ></devtools-named-bit-set-filter>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    assert.isTrue(namedBitSetFilterUI.accept('test'));
+
+    const filter = namedBitSetFilterUI.element().querySelector('.filter') as HTMLElement;
+    filter.click();
+
+    assert.isFalse(namedBitSetFilterUI.accept('test'));
+  });
+});

package/front_end/ui/legacy/FilterBar.ts

@@ -39,6 +39,7 @@ import filterStyles from './filter.css.legacy.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
 import type {Suggestions} from './SuggestBox.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 import {Toolbar, type ToolbarButton, ToolbarFilter, ToolbarInput, ToolbarSettingToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, createTextChild} from './UIUtils.js';
@@ -267,6 +268,50 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEve
   }
 }
 
+interface NamedBitSetFilterUIOptions {
+  items: Item[];
+  setting?: Common.Settings.Setting<{[key: string]: boolean}>;
+}
+export class NamedBitSetFilterUIElement extends HTMLElement {
+  #options: NamedBitSetFilterUIOptions = {items: []};
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #namedBitSetFilterUI?: NamedBitSetFilterUI;
+
+  set options(options: NamedBitSetFilterUIOptions) {
+    this.#options = options;
+  }
+
+  getOrCreateNamedBitSetFilterUI(): NamedBitSetFilterUI {
+    if (this.#namedBitSetFilterUI) {
+      return this.#namedBitSetFilterUI;
+    }
+
+    const namedBitSetFilterUI = new NamedBitSetFilterUI(this.#options.items, this.#options.setting);
+    namedBitSetFilterUI.element().classList.add('named-bitset-filter');
+
+    const disclosureElement = this.#shadow.createChild('div', 'named-bit-set-filter-disclosure');
+    disclosureElement.appendChild(namedBitSetFilterUI.element());
+
+    // Translate existing filter ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    namedBitSetFilterUI.addEventListener(FilterUIEvents.FILTER_CHANGED, this.#filterChanged.bind(this));
+
+    this.#namedBitSetFilterUI = namedBitSetFilterUI;
+    return this.#namedBitSetFilterUI;
+  }
+
+  connectedCallback(): void {
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.#shadow, filterStyles);
+  }
+
+  #filterChanged(): void {
+    const domEvent = new CustomEvent('filterChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-named-bit-set-filter', NamedBitSetFilterUIElement);
+
 export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEventTypes> implements FilterUI {
   private readonly filtersElement: HTMLDivElement;
   private readonly typeFilterElementTypeNames: WeakMap<HTMLElement, string>;
@@ -282,7 +327,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
     ARIAUtils.markAsListBox(this.filtersElement);
     ARIAUtils.markAsMultiSelectable(this.filtersElement);
     Tooltip.install(this.filtersElement, i18nString(UIStrings.sclickToSelectMultipleTypes, {
-                      PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta),
+                      PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta.value),
                     }));
 
     this.typeFilterElementTypeNames = new WeakMap();

package/front_end/ui/legacy/InplaceEditor.ts

@@ -12,7 +12,7 @@ let inplaceEditorInstance: InplaceEditor<unknown>|null = null;
 
 export class InplaceEditor<T> {
   private focusRestorer?: ElementFocusRestorer;
-  static startEditing<T>(element: Element, config?: Config<T>): Controller|null {
+  static startEditing<T>(element: Element, config: Config<T>): Controller|null {
     if (!inplaceEditorInstance) {
       inplaceEditorInstance = new InplaceEditor();
     }
@@ -76,12 +76,11 @@ export class InplaceEditor<T> {
     }
   }
 
-  startEditing(element: Element, inputConfig?: Config<T>): Controller|null {
+  startEditing(element: Element, config: Config<T>): Controller|null {
     if (!markBeingEdited(element, true)) {
       return null;
     }
 
-    const config = inputConfig || new Config(function() {}, function() {});
     const editingContext: EditingContext<T> = {element, config, oldRole: null, oldTabIndex: null, oldText: null};
     const committedCallback = config.commitHandler;
     const cancelledCallback = config.cancelHandler;
@@ -95,7 +94,7 @@ export class InplaceEditor<T> {
     editingContext.oldText = this.editorContent(editingContext);
 
     function blurEventListener(e?: Event): void {
-      if (config.blurHandler && !config.blurHandler(element, e)) {
+      if (!config.blurHandler(element, e)) {
         return;
       }
       editingCommitted.call(element);
@@ -125,7 +124,7 @@ export class InplaceEditor<T> {
     function editingCommitted(this: Element): void {
       cleanUpAfterEditing();
 
-      committedCallback(this, self.editorContent(editingContext), editingContext.oldText || '', context, moveDirection);
+      committedCallback(this, self.editorContent(editingContext), editingContext.oldText, context, moveDirection);
       element.dispatchEvent(new Event('change'));
     }
 
@@ -188,23 +187,28 @@ export class InplaceEditor<T> {
   }
 }
 
-export type CommitHandler<T> = (arg0: Element, arg1: string, arg2: string, arg3: T, arg4: string) => void;
-export type CancelHandler<T> = (arg0: Element, arg1: T) => void;
-export type BlurHandler = (arg0: Element, arg1?: Event|undefined) => boolean;
+export type CommitHandler<T> =
+    (element: Element, newText: string, oldText: string|null, context: T, moveDirection: string) => void;
+export type CancelHandler<T> = (element: Element, context: T) => void;
+export type BlurHandler = (element: Element, event?: Event) => boolean;
 
-export class Config<T = undefined> {
+export class Config<T> {
   commitHandler: CommitHandler<T>;
   cancelHandler: CancelHandler<T>;
   context: T;
-  blurHandler: BlurHandler|undefined;
-  pasteHandler!: EventHandler|null;
-  postKeydownFinishHandler!: EventHandler|null;
+  blurHandler: BlurHandler;
+  pasteHandler?: EventHandler;
+  postKeydownFinishHandler?: EventHandler;
 
   constructor(
-      commitHandler: CommitHandler<T>, cancelHandler: CancelHandler<T>, context?: T, blurHandler?: BlurHandler) {
+      commitHandler: CommitHandler<T>,
+      cancelHandler: CancelHandler<T>,
+      context: T,
+      blurHandler: BlurHandler = () => true,
+  ) {
     this.commitHandler = commitHandler;
     this.cancelHandler = cancelHandler;
-    this.context = context as T;
+    this.context = context;
     this.blurHandler = blurHandler;
   }
 

package/front_end/ui/legacy/KeyboardShortcut.ts

@@ -98,23 +98,23 @@ export class KeyboardShortcut {
     if (typeof keyCode === 'string') {
       keyCode = keyCode.charCodeAt(0) - (/^[a-z]/.test(keyCode) ? 32 : 0);
     }
-    modifiers = modifiers || Modifiers.None;
+    modifiers = modifiers || Modifiers.None.value;
     return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, modifiers);
   }
 
   static makeKeyFromEvent(keyboardEvent: KeyboardEvent): number {
-    let modifiers = Modifiers.None;
+    let modifiers = Modifiers.None.value;
     if (keyboardEvent.shiftKey) {
-      modifiers |= Modifiers.Shift;
+      modifiers |= Modifiers.Shift.value;
     }
     if (keyboardEvent.ctrlKey) {
-      modifiers |= Modifiers.Ctrl;
+      modifiers |= Modifiers.Ctrl.value;
     }
     if (keyboardEvent.altKey) {
-      modifiers |= Modifiers.Alt;
+      modifiers |= Modifiers.Alt.value;
     }
     if (keyboardEvent.metaKey) {
-      modifiers |= Modifiers.Meta;
+      modifiers |= Modifiers.Meta.value;
     }
 
     // Use either a real or a synthetic keyCode (for events originating from extensions).
@@ -126,7 +126,7 @@ export class KeyboardShortcut {
   static makeKeyFromEventIgnoringModifiers(keyboardEvent: KeyboardEvent): number {
     // @ts-ignore ExtensionServer.js installs '__keyCode' on some events.
     const keyCode = keyboardEvent.keyCode || keyboardEvent['__keyCode'];
-    return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None);
+    return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None.value);
   }
 
   // This checks if a "control equivalent" key is pressed. For non-mac platforms this means checking
@@ -159,7 +159,7 @@ export class KeyboardShortcut {
     const [keyString, ...modifierStrings] = shortcut.split(/\+(?!$)/).reverse();
     let modifiers = 0;
     for (const modifierString of modifierStrings) {
-      const modifier = Modifiers[modifierString];
+      const modifier = Modifiers[modifierString].value;
       console.assert(
           typeof modifier !== 'undefined', `Only one key other than modifier is allowed in shortcut <${shortcut}>`);
       modifiers |= modifier;
@@ -168,7 +168,7 @@ export class KeyboardShortcut {
 
     const key = Keys[keyString] || KeyBindings[keyString];
     if (key && 'shiftKey' in key && key.shiftKey) {
-      modifiers |= Modifiers.Shift;
+      modifiers |= Modifiers.Shift.value;
     }
     return KeyboardShortcut.makeDescriptor(key ? key : keyString, modifiers);
   }
@@ -218,28 +218,37 @@ export class KeyboardShortcut {
     ]);
     return [m.Meta, m.Ctrl, m.Alt, m.Shift].map(mapModifiers).join('');
 
-    function mapModifiers(m: number): string {
-      return (modifiers || 0) & m ? /** @type {string} */ modifierNames.get(m) as string : '';
+    function mapModifiers(m: Modifier): string {
+      return (modifiers || 0) & m.value ? /** @type {string} */ modifierNames.get(m) as string : '';
     }
   }
 }
 
+export interface Modifier {
+  value: number;
+  name: string;
+}
+
 /**
  * Constants for encoding modifier key set as a bit mask.
  * see #makeKeyFromCodeAndModifiers
  */
 export const Modifiers: {
-  [x: string]: number,
+  [x: string]: Modifier,
 } = {
-  None: 0,
-  Shift: 1,
-  Ctrl: 2,
-  Alt: 4,
-  Meta: 8,
-  // "default" command/ctrl key for platform, Command on Mac, Ctrl on other platforms
-  CtrlOrMeta: Host.Platform.isMac() ? 8 /* Meta */ : 2 /* Ctrl */,
-  // Option on Mac, Shift on other platforms
-  ShiftOrOption: Host.Platform.isMac() ? 4 /* Alt */ : 1 /* Shift */,
+  None: {value: 0, name: 'None'},
+  Shift: {value: 1, name: 'Shift'},
+  Ctrl: {value: 2, name: 'Ctrl'},
+  Alt: {value: 4, name: 'Alt'},
+  Meta: {value: 8, name: 'Meta'},
+  CtrlOrMeta: {
+    value: Host.Platform.isMac() ? 8 /* Meta */ : 2 /* Ctrl */,
+    name: Host.Platform.isMac() ? 'Meta' : 'Ctrl',
+  },
+  ShiftOrOption: {
+    value: Host.Platform.isMac() ? 4 /* Alt */ : 1 /* Shift */,
+    name: Host.Platform.isMac() ? 'Alt' : 'Shift',
+  },
 };
 
 const leftKey = {
@@ -315,9 +324,14 @@ export const Keys: {
   ArrowDown: downKey,
   Delete: {code: 46, name: 'Del'},
   Zero: {code: 48, name: '0'},
+  C: {code: 67, name: 'C'},
   H: {code: 72, name: 'H'},
   N: {code: 78, name: 'N'},
   P: {code: 80, name: 'P'},
+  R: {code: 82, name: 'R'},
+  U: {code: 85, name: 'U'},
+  V: {code: 86, name: 'V'},
+  X: {code: 88, name: 'X'},
   Meta: metaKey,
   F1: {code: 112, name: 'F1'},
   F2: {code: 113, name: 'F2'},

package/front_end/ui/legacy/Panel.ts

@@ -39,8 +39,8 @@ import {VBox} from './Widget.js';
 export class Panel extends VBox {
   protected panelName: string;
 
-  constructor(name: string) {
-    super();
+  constructor(name: string, useShadowDom?: boolean) {
+    super(useShadowDom);
 
     this.element.setAttribute('jslog', `${VisualLogging.panel().context(name).track({resize: true})}`);
     this.element.classList.add('panel');

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -227,29 +227,32 @@ export class ShortcutRegistry {
       const modifiers = Modifiers;
       // Undo/Redo will also cause input, so textual undo should take precedence over DevTools undo when editing.
       if (Host.Platform.isMac()) {
-        if (KeyboardShortcut.makeKey('z', modifiers.Meta) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Meta.value) === key) {
           return true;
         }
-        if (KeyboardShortcut.makeKey('z', modifiers.Meta | modifiers.Shift) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Meta.value | modifiers.Shift.value) === key) {
           return true;
         }
       } else {
-        if (KeyboardShortcut.makeKey('z', modifiers.Ctrl) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Ctrl.value) === key) {
           return true;
         }
-        if (KeyboardShortcut.makeKey('y', modifiers.Ctrl) === key) {
+        if (KeyboardShortcut.makeKey('y', modifiers.Ctrl.value) === key) {
           return true;
         }
-        if (!Host.Platform.isWin() && KeyboardShortcut.makeKey('z', modifiers.Ctrl | modifiers.Shift) === key) {
+        if (!Host.Platform.isWin() &&
+            KeyboardShortcut.makeKey('z', modifiers.Ctrl.value | modifiers.Shift.value) === key) {
           return true;
         }
       }
 
-      if ((keyModifiers & (modifiers.Ctrl | modifiers.Alt)) === (modifiers.Ctrl | modifiers.Alt)) {
+      if ((keyModifiers & (modifiers.Ctrl.value | modifiers.Alt.value)) ===
+          (modifiers.Ctrl.value | modifiers.Alt.value)) {
         return Host.Platform.isWin();
       }
 
-      return !hasModifier(modifiers.Ctrl) && !hasModifier(modifiers.Alt) && !hasModifier(modifiers.Meta);
+      return !hasModifier(modifiers.Ctrl.value) && !hasModifier(modifiers.Alt.value) &&
+          !hasModifier(modifiers.Meta.value);
     }
 
     function hasModifier(mod: number): boolean {

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -640,8 +640,11 @@ export interface SoftContextMenuDescriptor {
   type: 'checkbox'|'item'|'separator'|'subMenu';
   id?: number;
   label?: string;
+  accelerator?: {keyCode: number, modifiers: number};
+  isExperimentalFeature?: boolean;
   enabled?: boolean;
   checked?: boolean;
+  isDevToolsPerformanceMenuItem?: boolean;
   subItems?: SoftContextMenuDescriptor[];
   element?: Element;
   shortcut?: string;

package/front_end/ui/legacy/TabbedPane.ts

@@ -1214,7 +1214,6 @@ export class TabbedPaneTab {
       tabElement.classList.add('measuring');
     } else {
       tabElement.addEventListener('click', this.tabClicked.bind(this), false);
-      tabElement.addEventListener('keydown', this.tabKeyDown.bind(this), false);
       tabElement.addEventListener('auxclick', this.tabClicked.bind(this), false);
       tabElement.addEventListener('mousedown', this.tabMouseDown.bind(this), false);
       tabElement.addEventListener('mouseup', this.tabMouseUp.bind(this), false);
@@ -1265,19 +1264,6 @@ export class TabbedPaneTab {
         element?.parentElement?.classList.contains('tabbed-pane-close-button') || false;
   }
 
-  private tabKeyDown(ev: Event): void {
-    const event = ev as KeyboardEvent;
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-        if (this.isCloseIconClicked(event.target as HTMLElement)) {
-          this.closeTabs([this.id]);
-          ev.consume(true);
-          return;
-        }
-    }
-  }
-
   private tabClicked(ev: Event): void {
     const event = (ev as MouseEvent);
     const middleButton = event.button === 1;

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -10,8 +10,8 @@ export class ThrottledWidget extends VBox {
   private updateWhenVisible: boolean;
   protected lastUpdatePromise: Promise<void> = Promise.resolve();
 
-  constructor(isWebComponent?: boolean, timeout?: number) {
-    super(isWebComponent);
+  constructor(useShadowDom?: boolean, timeout?: number) {
+    super(useShadowDom);
     this.updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
     this.updateWhenVisible = false;
   }

package/front_end/ui/legacy/Toolbar.ts

@@ -923,6 +923,7 @@ export class ToolbarFilter extends ToolbarInput {
 
     const filterIcon = IconButton.Icon.create('filter');
     this.element.prepend(filterIcon);
+    this.element.classList.add('toolbar-filter');
   }
 }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -349,9 +349,12 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
       // Usually, this.element is the tree container that scrolls. But sometimes
       // (i.e. in the Elements panel), its parent is.
-      let scrollParentElement: HTMLElement = this.element;
-      while (getComputedStyle(scrollParentElement).overflow === 'visible' && scrollParentElement.parentElement) {
-        scrollParentElement = scrollParentElement.parentElement;
+      let scrollParentElement: Element = this.element;
+      while (getComputedStyle(scrollParentElement).overflow === 'visible' &&
+             scrollParentElement.parentElementOrShadowHost()) {
+        const parent = scrollParentElement.parentElementOrShadowHost();
+        Platform.assertNotNullOrUndefined(parent);
+        scrollParentElement = parent;
       }
 
       const viewRect = scrollParentElement.getBoundingClientRect();
@@ -801,7 +804,7 @@ export class TreeElement {
     }
   }
 
-  setLeadingIcons(icons: IconButton.Icon.Icon[]): void {
+  setLeadingIcons(icons: IconButton.Icon.Icon[]|IconButton.FileSourceIcon.FileSourceIcon[]): void {
     if (!this.leadingIconsElement && !icons.length) {
       return;
     }

package/front_end/ui/legacy/UIUtils.ts

@@ -690,6 +690,7 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
     element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
+    element.removeEventListener('animationcancel', animationEndCallback, false);
   }
 
   if (element.classList.contains(className)) {
@@ -697,6 +698,7 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   }
 
   element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
+  element.addEventListener('animationcancel', animationEndCallback, false);
   element.classList.add(className);
 }
 

package/front_end/ui/legacy/View.ts

@@ -33,8 +33,8 @@ export class SimpleView extends VBox implements View {
   readonly #title: Platform.UIString.LocalizedString;
   readonly #viewId: Lowercase<string>;
 
-  constructor(title: Platform.UIString.LocalizedString, isWebComponent?: boolean, viewId?: Lowercase<string>) {
-    super(isWebComponent);
+  constructor(title: Platform.UIString.LocalizedString, useShadowDom?: boolean, viewId?: Lowercase<string>) {
+    super(useShadowDom);
     this.#title = title;
     if (viewId) {
       if (!Platform.StringUtilities.isExtendedKebabCase(viewId)) {

package/front_end/ui/legacy/ViewManager.ts

@@ -710,8 +710,9 @@ class TabbedLocation extends Location implements TabbedViewLocation {
         continue;
       }
 
+      const isPreviewFeature = view.isPreviewFeature();
       contextMenu.defaultSection().appendItem(
-          title, this.showView.bind(this, view, undefined, true), {jslogContext: view.viewId()});
+          title, this.showView.bind(this, view, undefined, true), {isPreviewFeature, jslogContext: view.viewId()});
     }
   }