chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/ui/components/menus/selectMenu.css

@@ -6,15 +6,18 @@
 
 :host {
   border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 3px;
+  border-radius: var(--sys-shape-corner-extra-small);
   width: fit-content;
   display: flex;
   align-items: center;
-  background-color: var(--override-select-menu-background-color, var(--sys-color-cdt-base-container));
+  background-color: var(--sys-color-cdt-base-container);
 }
 
 :host([has-open-dialog]) {
-  background-color: var(--override-select-menu-active-background-color, var(--sys-color-neutral-container));
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  background:
+    linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+    linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
 }
 
 button {
@@ -22,7 +25,7 @@ button {
 }
 
 #side-button {
-  border: 1px solid var(--override-select-menu-border, var(--sys-color-neutral-outline));
+  border: 1px solid var(--sys-color-neutral-outline);
   border-radius: 3px 0 0 3px;
   border-right: none;
   height: 100%;
@@ -31,7 +34,7 @@ button {
 }
 
 button:disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 
 @keyframes slideIn {

package/front_end/ui/components/menus/selectMenuButton.css

@@ -5,7 +5,7 @@
  */
 
 :host {
-  height: 100%;
+  height: var(--sys-size-9);
   width: 100%;
   display: block;
 }
@@ -17,13 +17,27 @@
   height: 100%;
   width: 100%;
   border: none;
-  border-radius: var(--override-select-menu-show-button-border-radius);
-  padding: var(--override-select-menu-show-button-padding, 1px 6px);
-}
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: 0 var(--sys-size-4) 0 var(--sys-size-5);
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
 
-.show:focus-visible {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  &:hover:active {
+    background:
+      linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+      linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+  }
+
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: -1px;
+  }
 }
 
 #button-label-wrapper {
@@ -45,7 +59,7 @@
 }
 
 #label[witharrow] {
-  padding: var(--override-select-menu-label-with-arrow-padding, 0 10px 0 0);
+  padding: 0 10px 0 0;
   text-align: left;
 }
 
@@ -62,15 +76,12 @@
   height: 14px;
   display: inline-block;
   mask-repeat: no-repeat;
-  background-color: var(--override-throttling-icon-and-text-color, var(--override-select-menu-arrow-color, var(--sys-color-on-surface)));
-  transform: rotate(var(--arrow-angle));
-  transform-origin: center;
-  transition: 200ms;
+  background-color: var(--sys-color-on-surface-subtle);
 }
 
 .single-arrow {
   border-radius: 0 3px 3px 0;
-  border: 1px solid var(--override-select-menu-border, var(--sys-color-neutral-outline));
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   height: 100%;
   aspect-ratio: 1 / 1;
   padding: 0;
@@ -79,14 +90,15 @@
   align-items: center;
 }
 
-button[aria-expanded="true"] #arrow {
-  transform: rotate(calc(var(--arrow-angle) + 180deg));
-}
-
 button {
   background: none;
 }
 
 button[disabled] {
   color: var(--sys-color-state-disabled);
+  background-color: var(--sys-color-state-disabled-container);
+
+  #arrow {
+    background-color: var(--sys-color-state-disabled);
+  }
 }

package/front_end/ui/components/node_text/NodeText.ts

@@ -15,7 +15,6 @@ export interface NodeTextData {
 }
 
 export class NodeText extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-node-text`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #nodeTitle: string = '';

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -27,7 +27,6 @@ export interface FeedbackButtonData {
   feedbackUrl: Platform.DevToolsPath.UrlString;
 }
 export class FeedbackButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-feedback-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -9,7 +9,6 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 
 import panelFeedbackStyles from './panelFeedback.css.js';
 
@@ -46,7 +45,6 @@ export interface PanelFeedbackData {
   quickStartLinkText: string;
 }
 export class PanelFeedback extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -79,7 +77,7 @@ export class PanelFeedback extends HTMLElement {
             width: '20px',
             height: '20px',
             color: 'var(--icon-primary)',
-          } as IconButton.Icon.IconData}></devtools-icon> ${i18nString(UIStrings.previewFeature)}
+          }}></devtools-icon> ${i18nString(UIStrings.previewFeature)}
         </h2>
         <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl} jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
         <div class="video">

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -7,7 +7,6 @@ import '../../../ui/legacy/legacy.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 import * as Input from '../input/input.js';
 
 import previewToggleStyles from './previewToggle.css.js';
@@ -42,7 +41,6 @@ const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PreviewTo
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class PreviewToggle extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-preview-toggle`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #name = '';
@@ -80,7 +78,7 @@ export class PreviewToggle extends HTMLElement {
             width: '16px',
             height: '16px',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}>
+          }}>
           </devtools-icon>${this.#name}
         </label>
         <div class="spacer"></div>

package/front_end/ui/components/panel_introduction_steps/PanelIntroductionSteps.ts

@@ -9,7 +9,6 @@ import panelIntroductionStepsStyles from './panelIntroductionSteps.css.js';
 const {html} = LitHtml;
 
 export class PanelIntroductionSteps extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-panel-introduction-steps`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 

package/front_end/ui/components/report_view/ReportView.ts

@@ -21,7 +21,7 @@ const {html} = LitHtml;
  *
  * Example:
  * ```
- *   <devtools-report .data=${{reportTitle: 'Optional Title'} as Components.ReportView.ReportData}>
+ *   <devtools-report .data=${{reportTitle: 'Optional Title'}}>
  *     <devtools-report-section-header>Some Header</devtools-report-section-header>
  *     <devtools-report-key>Key (rendered in the left column)</devtools-report-key>
  *     <devtools-report-value>Value (rendered in the right column)</devtools-report-value>
@@ -36,7 +36,6 @@ export interface ReportData {
   reportTitle: string;
 }
 export class Report extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #reportTitle: string = '';
@@ -69,7 +68,6 @@ export interface ReportSectionData {
 }
 
 export class ReportSection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-section`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportSectionStyles];
@@ -88,7 +86,6 @@ export class ReportSection extends HTMLElement {
 }
 
 export class ReportSectionHeader extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-section-header`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -109,7 +106,6 @@ export class ReportSectionHeader extends HTMLElement {
 }
 
 export class ReportSectionDivider extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-divider`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -129,7 +125,6 @@ export class ReportSectionDivider extends HTMLElement {
 }
 
 export class ReportKey extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-key`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -148,7 +143,6 @@ export class ReportKey extends HTMLElement {
 }
 
 export class ReportValue extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-value`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -61,7 +61,6 @@ export const extractShortPath = (path: Platform.DevToolsPath.UrlString): string
 };
 
 export class RequestLinkIcon extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-request-link-icon`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #linkToPreflight?: boolean;
   // The value `null` indicates that the request is not available,

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -6,6 +6,7 @@ import './SettingDeprecationWarning.js';
 
 import type * 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 LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as Buttons from '../buttons/buttons.js';
@@ -15,6 +16,15 @@ import settingCheckboxStyles from './settingCheckbox.css.js';
 
 const {html, Directives: {ifDefined}} = LitHtml;
 
+const UIStrings = {
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/settings/SettingCheckbox.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export interface SettingCheckboxData {
   setting: Common.Settings.Setting<boolean>;
   textOverride?: string;
@@ -24,7 +34,6 @@ export interface SettingCheckboxData {
  * A simple checkbox that is backed by a boolean setting.
  */
 export class SettingCheckbox extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`setting-checkbox`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #setting?: Common.Settings.Setting<boolean>;
@@ -56,18 +65,26 @@ export class SettingCheckbox extends HTMLElement {
 
     if (this.#setting.deprecation) {
       return html`<devtools-setting-deprecation-warning .data=${
-          this.#setting.deprecation as Common.Settings.Deprecation}></devtools-setting-deprecation-warning>`;
+          this.#setting.deprecation}></devtools-setting-deprecation-warning>`;
     }
 
     const learnMore = this.#setting.learnMore();
     if (learnMore) {
-      const jslog = VisualLogging.link()
-                        .track({click: true, keydown: 'Enter|Space'})
-                        .context(this.#setting.name + '-documentation');
-      return html`<devtools-button .iconName=${'help'} .size=${Buttons.Button.Size.SMALL} .variant=${
-          Buttons.Button.Variant.ICON} .title=${learnMore.tooltip()} jslog=${jslog} @click=${
-          () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-              learnMore.url)} class="learn-more"></devtools-button>`;
+      const data: Buttons.Button.ButtonData = {
+        iconName: 'help',
+        variant: Buttons.Button.Variant.ICON,
+        size: Buttons.Button.Size.SMALL,
+        jslogContext: `${this.#setting.name}-documentation`,
+        title: i18nString(UIStrings.learnMore),
+      };
+      const handleClick = (event: MouseEvent): void => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(learnMore.url);
+        event.consume();
+      };
+      return html`<devtools-button
+                    class=learn-more
+                    @click=${handleClick}
+                    .data=${data}></devtools-button>`;
     }
 
     return undefined;
@@ -79,6 +96,7 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const icon = this.icon();
+    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
     const reason = this.#setting.disabledReason() ?
         html`
       <devtools-button class="disabled-reason" .iconName=${'info'} .variant=${Buttons.Button.Variant.ICON} .size=${
@@ -89,7 +107,7 @@ export class SettingCheckbox extends HTMLElement {
     LitHtml.render(
         html`
       <p>
-        <label>
+        <label title=${title}>
           <input
             type="checkbox"
             .checked=${this.#setting.disabledReason() ? false : this.#setting.get()}

package/front_end/ui/components/settings/SettingDeprecationWarning.ts

@@ -6,14 +6,12 @@ import '../icon_button/icon_button.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 
 import settingDeprecationWarning from './settingDeprecationWarning.css.js';
 
 const {html} = LitHtml;
 
 export class SettingDeprecationWarning extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-setting-deprecation-warning`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -37,8 +35,8 @@ export class SettingDeprecationWarning extends HTMLElement {
     }
 
     LitHtml.render(
-        html`<devtools-icon class=${LitHtml.Directives.classMap(classes)} .data=${
-            iconData as IconButton.Icon.IconData} title=${warning} @click=${onclick}></devtools-icon>`,
+        html`<devtools-icon class=${LitHtml.Directives.classMap(classes)} .data=${iconData} title=${warning} @click=${
+            onclick}></devtools-icon>`,
         this.#shadow, {host: this});
   }
 }

package/front_end/ui/components/settings/settingCheckbox.css

@@ -36,6 +36,7 @@ p {
 }
 
 .learn-more {
+  cursor: pointer;
   position: relative;
   margin-left: var(--sys-size-2);
   top: var(--sys-size-2);

package/front_end/ui/components/spinners/Spinner.ts

@@ -9,7 +9,6 @@ import spinnerStyles from './spinner.css.js';
 const {html} = LitHtml;
 
 export class Spinner extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-spinner`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {

package/front_end/ui/components/spinners/spinner.css

@@ -5,6 +5,7 @@
  */
 
 :host {
+  overflow: hidden;
   width: var(--sys-size-7);
   height: var(--sys-size-7);
   display: inline-block;

package/front_end/ui/components/split_view/SplitView.ts

@@ -113,7 +113,6 @@ const splitViewStyles = new CSSStyleSheet();
 splitViewStyles.replaceSync(styles);
 
 export class SplitView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-split-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #mousePos = [0, 0];
   #mainAxisIdx = 0;

package/front_end/ui/components/srgb_overlay/SrgbOverlay.ts

@@ -33,7 +33,6 @@ function isColorInSrgbGamut(hsv: Common.ColorUtils.Color3D): boolean {
 }
 
 export class SrgbOverlay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-spectrum-srgb-overlay`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor() {

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -8,7 +8,6 @@ import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 
 import surveyLinkStyles from './surveyLink.css.js';
 
@@ -53,7 +52,6 @@ const enum State {
 // A link to a survey. The link is rendered aysnchronously because we need to first check if
 // canShowSurvey succeeds.
 export class SurveyLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-survey-link`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #trigger = '';
@@ -128,7 +126,7 @@ export class SurveyLink extends HTMLElement {
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
     const output = html`
       <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.#sendSurvey}>
-        <devtools-icon class="link-icon" .data=${{iconName: 'review', color: 'var(--sys-color-primary)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></devtools-icon><!--
+        <devtools-icon class="link-icon" .data=${{iconName: 'review', color: 'var(--sys-color-primary)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'}}></devtools-icon><!--
       -->${linkText}
       </button>
     `;

package/front_end/ui/components/switch/SwitchImpl.ts

@@ -18,7 +18,6 @@ export class SwitchChangeEvent extends Event {
 }
 
 export class Switch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-switch`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #checked = false;
   #disabled = false;

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

@@ -6,7 +6,6 @@ import * as Common from '../../../core/common/common.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
-import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
 import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
@@ -19,7 +18,6 @@ declare global {
 }
 
 export class TextEditor extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-text-editor`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #activeEditor: CodeMirror.EditorView|undefined = undefined;

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -26,7 +26,6 @@ export class PromptInputEvent extends Event {
 }
 
 export class TextPrompt extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-text-prompt`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #ariaLabelText = '';
   #prefixText = '';

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -92,7 +92,6 @@ export const enum FilterOption {
 }
 
 export class TreeOutline<TreeNodeDataType> extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-tree-outline`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #treeData: readonly TreeNode<TreeNodeDataType>[] = [];
   #nodeExpandedMap: Map<string, boolean> = new Map();

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

@@ -20,7 +20,6 @@ export interface TwoStatesCounterData {
 }
 
 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;

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,