chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

package/front_end/ui/components/list/List.ts

@@ -0,0 +1,184 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../lit/lit.js';
+import * as Buttons from '../buttons/buttons.js';
+
+import listStyles from './list.css.js';
+
+const UIStrings = {
+  /**
+   * @description Title of the edit button for the list items.
+   */
+  edit: 'Edit',
+  /**
+   * @description Title of the remove button for the list items.
+   */
+  remove: 'Remove',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/list/List.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ListItemEventDetail {
+  index: number;
+}
+
+export class ItemEditEvent extends CustomEvent<ListItemEventDetail> {
+  constructor(detail: ListItemEventDetail) {
+    super('edit', {
+      bubbles: true,
+      composed: true,
+      detail,
+    });
+  }
+}
+
+export class ItemRemoveEvent extends CustomEvent<ListItemEventDetail> {
+  constructor(detail: ListItemEventDetail) {
+    super('delete', {
+      bubbles: true,
+      composed: true,
+      detail,
+    });
+  }
+}
+
+export class List extends HTMLElement {
+  static observedAttributes: string[] = ['editable', 'deletable', 'disable-li-focus'];
+  #observer: MutationObserver;
+  #editable = false;
+  #deletable = false;
+  #disableListItemFocus?: boolean;
+
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'});
+    this.#observer = new MutationObserver(this.#render.bind(this));
+  }
+
+  set editable(isEditable: boolean) {
+    if (this.#editable === isEditable) {
+      return;
+    }
+    this.#editable = isEditable;
+    this.#render();
+  }
+
+  set deletable(isDeletable: boolean) {
+    if (this.#deletable === isDeletable) {
+      return;
+    }
+    this.#deletable = isDeletable;
+    this.#render();
+  }
+
+  set disableListItemFocus(disableFocus: boolean) {
+    if (this.#disableListItemFocus === disableFocus) {
+      return;
+    }
+    this.#disableListItemFocus = disableFocus;
+    this.#render();
+  }
+
+  attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
+    const isSet = newValue !== null;
+    if (name === 'editable') {
+      this.editable = isSet;
+    } else if (name === 'deletable') {
+      this.deletable = isSet;
+    } else if (name === 'disable-li-focus') {
+      this.disableListItemFocus = isSet;
+    }
+  }
+
+  connectedCallback(): void {
+    this.#observer.observe(this, {childList: true});
+    this.#render();
+  }
+
+  disconnectedCallback(): void {
+    this.#observer.disconnect();
+  }
+
+  createSlottedListItem(index: number): TemplateResult {
+    return html`
+    <li role='listitem' tabindex=${this.#disableListItemFocus ? '-1' : '0'}>
+    <slot name='slot-${index}'></slot>
+    <div class='controls-container'>
+              <div class='controls-gradient'></div>
+              <div class='controls-buttons'>
+                ${
+        this.#editable ? html`
+            <devtools-button
+              title=${i18nString(UIStrings.edit)}
+              aria-label=${i18nString(UIStrings.edit)}
+              .iconName=${'edit'}
+              .jslogContext=${'edit-item'}
+              .variant=${Buttons.Button.Variant.ICON}
+              @click=${this.#dispatchEdit.bind(this, index)}
+            ></devtools-button>
+          ` :
+                         nothing}
+                ${
+        this.#deletable ? html`
+            <devtools-button
+              title=${i18nString(UIStrings.remove)}
+              aria-label=${i18nString(UIStrings.remove)}
+              .iconName=${'bin'}
+              .jslogContext=${'remove-item'}
+              .variant=${Buttons.Button.Variant.ICON}
+              @click=${this.#dispatchRemove.bind(this, index)}
+            ></devtools-button>
+          ` :
+                          nothing}
+              </div>
+            </div>
+            </li>`;
+  }
+
+  #render(): void {
+    if (this.shadowRoot) {
+      const items = [...this.children] as HTMLElement[];
+      const listData = items.map((item, index) => {
+        const slotName = `slot-${index}`;
+        if (item.getAttribute('slot') !== slotName) {
+          item.setAttribute('slot', slotName);
+        }
+        return {index, item};
+      });
+      render(
+          html`
+    <style>${listStyles}</style>
+    <ul role='list'>
+    ${Directives.repeat(listData, data => data.item, data => this.createSlottedListItem(data.index))}
+    </ul>
+  `,
+          this.shadowRoot);
+    }
+  }
+
+  #dispatchRemove(index: number): void {
+    this.dispatchEvent(new ItemRemoveEvent({index}));
+  }
+
+  #dispatchEdit(index: number): void {
+    this.dispatchEvent(new ItemEditEvent({index}));
+  }
+}
+
+customElements.define('devtools-list', List);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-list': List;
+  }
+}
+
+declare global {
+  interface HTMLElementEventMap extends Record<'delete', ItemRemoveEvent>, Record<'edit', ItemEditEvent> {}
+}

package/front_end/ui/components/list/list.css

@@ -0,0 +1,90 @@
+/*
+* Copyright 2025 The Chromium Authors
+* Use of this source code is governed by a BSD-style license that can be
+* found in the LICENSE file.
+ */
+
+:host {
+  width: 100%;
+  flex: auto 0 1;
+  overflow-y: auto;
+  flex-direction: column;
+
+  --override-background-list-item-color: var(--sys-color-cdt-base-container);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  flex: none;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-left: var(--sys-size-11);
+  border-radius: var(--sys-shape-corner-extra-small);
+
+  &:hover {
+    .controls-gradient {
+      background-image: linear-gradient(90deg, transparent, var(--sys-color-cdt-base-container));
+    }
+
+    .controls-buttons {
+      visibility: visible;
+    }
+
+  }
+
+  &:focus-within:not(:active),
+  &:focus-visible {
+    background-color: var(--sys-color-state-hover-on-subtle);
+
+    --override-background-list-item-color: hsl(0deg 0% 96%);
+
+    outline: none;
+
+
+    .controls-gradient {
+      background-image: linear-gradient(90deg, transparent, var(--override-background-list-item-color));
+    }
+
+    .controls-buttons {
+      background-color: var(--override-background-list-item-color);
+      visibility: visible;
+    }
+
+  }
+}
+
+.controls-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: stretch;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+}
+
+.controls-gradient {
+  width: var(--sys-size-16);
+}
+
+.controls-buttons {
+  flex: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  pointer-events: auto;
+  visibility: hidden;
+  background-color: var(--sys-color-cdt-base-container);
+}

package/front_end/ui/components/{cards/cards.ts → list/lists.ts}

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

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

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../ui/legacy/legacy.js'; // for x-link
 

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../components/icon_button/icon_button.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../legacy/legacy.js'; // Required for <x-link>.
 

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import './CodeBlock.js';
 import './MarkdownImage.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Lit from '../../../ui/lit/lit.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../legacy/legacy.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../ui/legacy/legacy.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import {html, render} from '../../lit/lit.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import {html, nothing, render} from '../../lit/lit.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../../../ui/components/icon_button/icon_button.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../tooltips/tooltips.js';
 import './SettingDeprecationWarning.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../icon_button/icon_button.js';
 

package/front_end/ui/components/snackbars/Snackbar.ts

@@ -1,7 +1,7 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import {html, render} from '../../lit/lit.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2017 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Common from '../../../core/common/common.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -1,6 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable @devtools/enforce-custom-element-definitions-location */
 
 import * as CodeHighlighter from '../../../ui/components/code_highlighter/code_highlighter.js';
 import codeHighlighterStyles from '../../../ui/components/code_highlighter/codeHighlighter.css.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../icon_button/icon_button.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import {html, nothing, render} from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';

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

@@ -1,6 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable @devtools/enforce-custom-element-definitions-location */
 
 import * as Common from '../../../core/common/common.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Platform from '../../../core/platform/platform.js';
 import {html, render} from '../../lit/lit.js';

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -1,7 +1,7 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as UI from '../../legacy/legacy.js';
 import * as Lit from '../../lit/lit.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Platform from '../../../core/platform/platform.js';
 import * as UI from '../../legacy/legacy.js';

package/front_end/ui/kit/kit.ts

@@ -0,0 +1,5 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * from './cards/Card.js';