chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/ui/components/markdown_view/markdownView.css

@@ -8,6 +8,21 @@
   --code-background-color: var(--sys-color-surface4);
 }
 
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+.animating {
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typing 0.3s steps(40, end);
+}
+
+.pending {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .message {
   line-height: 18px;
   font-size: 12px;

package/front_end/ui/components/menus/Menu.ts

@@ -66,7 +66,6 @@ export interface MenuData {
 const selectedItemCheckmark = new URL('../../../Images/checkmark.svg', import.meta.url).toString();
 
 export class Menu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #dialog: Dialogs.Dialog.Dialog|null = null;
@@ -430,7 +429,6 @@ interface MenuItemData {
 }
 
 export class MenuItem extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu-item`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   connectedCallback(): void {
@@ -496,7 +494,6 @@ interface MenuGroupData {
 }
 
 export class MenuGroup extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu-group`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   connectedCallback(): void {

package/front_end/ui/components/menus/SelectMenu.ts

@@ -87,7 +87,6 @@ type TitleCallback = () => LitHtml.TemplateResult;
 const deployMenuArrow = new URL('../../../Images/triangle-down.svg', import.meta.url).toString();
 
 export class SelectMenu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-menu`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #button: SelectMenuButton|null = null;
@@ -325,7 +324,6 @@ export interface SelectMenuButtonData {
   jslogContext: string;
 }
 export class SelectMenuButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-menu-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #showButton: HTMLButtonElement|null = null;

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,27 @@ 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>`;
+    if (learnMore && learnMore.url) {
+      const url = learnMore.url;
+      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(url);
+        event.consume();
+      };
+      return html`<devtools-button
+                    class=learn-more
+                    @click=${handleClick}
+                    .data=${data}></devtools-button>`;
     }
 
     return undefined;
@@ -79,6 +97,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 +108,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;