chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -7,7 +7,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../../kit/kit.js';
 import * as UI from '../../legacy.js';
 
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
@@ -33,7 +33,7 @@ export class CustomPreviewSection {
   private expanded: boolean;
   private cachedContent: Node|null;
   private readonly header: Node|undefined;
-  private readonly expandIcon: IconButton.Icon.Icon|undefined;
+  private readonly expandIcon: Icon|undefined;
   constructor(object: SDK.RemoteObject.RemoteObject) {
     this.sectionElement = document.createElement('span');
     this.sectionElement.classList.add('custom-expandable-section');
@@ -64,7 +64,7 @@ export class CustomPreviewSection {
         this.header.classList.add('custom-expandable-section-header');
       }
       this.header.addEventListener('click', this.onClick.bind(this), false);
-      this.expandIcon = IconButton.Icon.create('triangle-right', 'custom-expand-icon');
+      this.expandIcon = createIcon('triangle-right', 'custom-expand-icon');
       this.header.insertBefore(this.expandIcon, this.header.firstChild);
     }
 

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -7,7 +7,7 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -137,7 +137,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private breadcrumbButtonContainerElement: HTMLElement;
   private createBreadcrumbButton: HTMLElement;
   private curtainsRange?: HTMLElement;
-  private breadcrumbZoomIcon?: IconButton.Icon.Icon;
+  private breadcrumbZoomIcon?: Icon;
 
   private overviewWindowSelector!: WindowSelector|undefined;
   private offsetLeft!: number;
@@ -213,7 +213,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   enableCreateBreadcrumbsButton(): HTMLElement {
     this.curtainsRange = this.createBreadcrumbButton.createChild('div');
-    this.breadcrumbZoomIcon = IconButton.Icon.create('zoom-in');
+    this.breadcrumbZoomIcon = createIcon('zoom-in');
     this.createBreadcrumbButton.appendChild(this.breadcrumbZoomIcon);
     this.createBreadcrumbButton.addEventListener('click', () => {
       this.#createBreadcrumb();

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../kit/kit.js';
+import '../../../components/highlighting/highlighting.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
-import * as IconButton from '../../../components/icon_button/icon_button.js';
+import {html, nothing, type TemplateResult} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {FilteredListWidget, Provider, registerProvider} from './FilteredListWidget.js';
@@ -340,36 +343,26 @@ export class CommandMenuProvider extends Provider {
     return score;
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const command = this.commands[itemIndex];
-
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-
-    titleElement.removeChildren();
-    const icon = IconButton.Icon.create(categoryIcons[command.category]);
-    wrapperElement.insertBefore(icon, itemElement);
-    UI.UIUtils.createTextChild(titleElement, command.title);
-    FilteredListWidget.highlightRanges(titleElement, query, true);
-
-    const subtitleElement = itemElement.createChild('div');
-    if (command.featurePromotionId) {
-      const badge = UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId);
-      if (badge) {
-        itemElement.insertBefore(badge, subtitleElement);
-      }
-    }
-
-    subtitleElement.textContent = command.shortcut;
-
+    const badge = command.featurePromotionId ? UI.UIUtils.maybeCreateNewBadge(command.featurePromotionId) : undefined;
     const deprecationWarning = command.deprecationWarning;
-    if (deprecationWarning) {
-      const deprecatedTagElement = itemElement.createChild('span', 'deprecated-tag');
-      deprecatedTagElement.textContent = i18nString(UIStrings.deprecated);
-      deprecatedTagElement.title = deprecationWarning;
-    }
-    const tagElement = wrapperElement.createChild('span', 'tag');
-    tagElement.textContent = command.category;
+    // clang-format off
+    return html`
+      <devtools-icon name=${categoryIcons[command.category]}></devtools-icon>
+      <div>
+        <devtools-highlight type="markup" ranges=${FilteredListWidget.getHighlightRanges(command.title, query, true)}>
+          ${command.title}
+        </devtools-highlight>
+        ${badge ?? nothing}
+        <div>${command.shortcut}</div>
+        ${deprecationWarning ? html`
+          <span class="deprecated-tag" title=${deprecationWarning}>
+            ${i18nString(UIStrings.deprecated)}
+          </span>` : nothing}
+      </div>
+      <span class="tag">${command.category}</span>`;
+    // clang-format on
   }
 
   override jslogContextAt(itemIndex: number): string {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -1,7 +1,7 @@
 // Copyright 2012 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-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -9,8 +9,8 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
-import * as Highlighting from '../../../../ui/components/highlighting/highlighting.js';
 import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
+import {type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -118,9 +118,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.queryChangedCallback = queryChangedCallback;
   }
 
-  static highlightRanges(element: Element, query: string, caseInsensitive?: boolean): boolean {
+  static getHighlightRanges(text: string, query: string, caseInsensitive?: boolean): string {
     if (!query) {
-      return false;
+      return '';
     }
 
     function rangesForMatch(text: string, query: string): TextUtils.TextRange.SourceRange[]|null {
@@ -139,19 +139,11 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
       return ranges;
     }
 
-    if (element.textContent === null) {
-      return false;
-    }
-    const text = element.textContent;
     let ranges = rangesForMatch(text, query);
     if (!ranges || caseInsensitive) {
       ranges = rangesForMatch(text.toUpperCase(), query.toUpperCase());
     }
-    if (ranges) {
-      Highlighting.highlightRangesWithStyleClass(element, ranges, 'highlight');
-      return true;
-    }
-    return false;
+    return ranges?.map(range => `${range.offset},${range.length}`).join(' ') || '';
   }
 
   setCommandPrefix(commandPrefix: string): void {
@@ -286,7 +278,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     wrapperElement.className = 'filtered-list-widget-item';
 
     if (this.provider) {
-      this.provider.renderItem(item, this.cleanValue(), wrapperElement);
+      render(this.provider.renderItem(item, this.cleanValue()), wrapperElement);
       wrapperElement.setAttribute(
           'jslog', `${VisualLogging.item(this.provider.jslogContextAt(item)).track({click: true})}`);
     }
@@ -622,7 +614,8 @@ export class Provider {
     return 1;
   }
 
-  renderItem(_itemIndex: number, _query: string, _wrapperElement: Element): void {
+  renderItem(_itemIndex: number, _query: string): LitTemplate {
+    return nothing;
   }
 
   jslogContextAt(_itemIndex: number): string {

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -1,10 +1,10 @@
 // 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-imperative-dom-api */
 
-import * as IconButton from '../../../components/icon_button/icon_button.js';
-import * as UI from '../../legacy.js';
+import '../../../kit/kit.js';
+
+import {html, type TemplateResult} from '../../../lit/lit.js';
 
 import {getRegisteredProviders, Provider, type ProviderRegistration, registerProvider} from './FilteredListWidget.js';
 import {QuickOpenImpl} from './QuickOpen.js';
@@ -44,18 +44,15 @@ export class HelpQuickOpen extends Provider {
     return -this.providers[itemIndex].prefix.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
+  override renderItem(itemIndex: number, _query: string): TemplateResult {
     const provider = this.providers[itemIndex];
-
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-
-    const iconElement = new IconButton.Icon.Icon();
-    iconElement.name = provider.iconName;
-    iconElement.classList.add('large');
-    wrapperElement.insertBefore(iconElement, itemElement);
-
-    UI.UIUtils.createTextChild(titleElement, provider.title);
+    // clang-format off
+    return html`
+      <devtools-icon class="large" name=${provider.iconName}></devtools-icon>
+      <div>
+        <div>${provider.title}</div>
+      </div>`;
+    // clang-format on
   }
 
   override jslogContextAt(itemIndex: number): string {

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -16,8 +16,8 @@ import type * as StackTrace from '../../../../models/stack_trace/stack_trace.js'
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
-import type * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
+import type {Icon} from '../../../kit/kit.js';
 import {html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -946,7 +946,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 }
 
 export interface LinkDecorator extends Common.EventTarget.EventTarget<LinkDecorator.EventTypes> {
-  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null;
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null;
 }
 
 export namespace LinkDecorator {
@@ -1106,7 +1106,7 @@ export class ContentProviderContextMenuProvider implements
 }
 
 interface LinkInfo {
-  icon: IconButton.Icon.Icon|null;
+  icon: Icon|null;
   enableDecorator: boolean;
   uiLocation: Workspace.UISourceCode.UILocation|null;
   liveLocation: Bindings.LiveLocation.LiveLocation|null;

package/mcp/mcp.ts

@@ -47,6 +47,7 @@ export {
   IssuesManager
 } from '../front_end/models/issues_manager/IssuesManager.js';
 export * as MarkdownIssueDescription from '../front_end/models/issues_manager/MarkdownIssueDescription.js';
+export * as StackTrace from '../front_end/models/stack_trace/stack_trace.js';
 export * as TraceEngine from '../front_end/models/trace/trace.js';
 export * as Marked from '../front_end/third_party/marked/marked.js';
 

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1549484"
+  "version": "1.0.1550444"
 }