chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

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

@@ -18,6 +18,7 @@ const render = LitHtml.render;
 export interface MarkdownViewData {
   tokens: Marked.Marked.Token[];
   renderer?: MarkdownLitRenderer;
+  animationEnabled?: boolean;
 }
 
 export class MarkdownView extends HTMLElement {
@@ -25,6 +26,8 @@ export class MarkdownView extends HTMLElement {
 
   #tokenData: readonly Marked.Marked.Token[] = [];
   #renderer = new MarkdownLitRenderer();
+  #animationEnabled = false;
+  #isAnimating = false;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [markdownViewStyles];
@@ -35,11 +38,53 @@ export class MarkdownView extends HTMLElement {
     if (data.renderer) {
       this.#renderer = data.renderer;
     }
+
+    if (data.animationEnabled) {
+      this.#animationEnabled = true;
+      this.#renderer.setCustomClasses({
+        paragraph: 'pending',
+        heading: 'pending',
+        list_item: 'pending',
+      });
+    } else {
+      this.#animationEnabled = false;
+      this.#renderer.setCustomClasses({});
+    }
+
     this.#update();
   }
 
+  #animate(): void {
+    if (this.#isAnimating) {
+      return;
+    }
+
+    this.#isAnimating = true;
+    const reveal = (): void => {
+      const pendingElement = this.#shadow.querySelector('.pending');
+      if (!pendingElement) {
+        this.#isAnimating = false;
+        return;
+      }
+
+      pendingElement.addEventListener('animationend', () => {
+        pendingElement.classList.remove('animating');
+        reveal();
+      }, {once: true});
+
+      pendingElement.classList.remove('pending');
+      pendingElement.classList.add('animating');
+    };
+
+    reveal();
+  }
+
   #update(): void {
     this.#render();
+
+    if (this.#animationEnabled) {
+      this.#animate();
+    }
   }
 
   #render(): void {
@@ -66,6 +111,18 @@ declare global {
  * Default renderer is used for the IssuesPanel and allows only well-known images and links to be embedded.
  */
 export class MarkdownLitRenderer {
+  #customClasses: Record<string, string> = {};
+
+  setCustomClasses(customClasses: Record<Marked.Marked.Token['type'], string>): void {
+    this.#customClasses = customClasses;
+  }
+
+  #customClassMapForToken(type: Marked.Marked.Token['type']): LitHtml.Directive.DirectiveResult {
+    return LitHtml.Directives.classMap({
+      [this.#customClasses[type]]: this.#customClasses[type],
+    });
+  }
+
   renderChildTokens(token: Marked.Marked.Token): LitHtml.TemplateResult[] {
     if ('tokens' in token && token.tokens) {
       return token.tokens.map(token => this.renderToken(token));
@@ -102,25 +159,27 @@ export class MarkdownLitRenderer {
   }
 
   renderHeading(heading: Marked.Marked.Tokens.Heading): LitHtml.TemplateResult {
+    const customClass = this.#customClassMapForToken('heading');
     switch (heading.depth) {
       case 1:
-        return html`<h1>${this.renderText(heading)}</h1>`;
+        return html`<h1 class=${customClass}>${this.renderText(heading)}</h1>`;
       case 2:
-        return html`<h2>${this.renderText(heading)}</h2>`;
+        return html`<h2 class=${customClass}>${this.renderText(heading)}</h2>`;
       case 3:
-        return html`<h3>${this.renderText(heading)}</h3>`;
+        return html`<h3 class=${customClass}>${this.renderText(heading)}</h3>`;
       case 4:
-        return html`<h4>${this.renderText(heading)}</h4>`;
+        return html`<h4 class=${customClass}>${this.renderText(heading)}</h4>`;
       case 5:
-        return html`<h5>${this.renderText(heading)}</h5>`;
+        return html`<h5 class=${customClass}>${this.renderText(heading)}</h5>`;
       default:
-        return html`<h6>${this.renderText(heading)}</h6>`;
+        return html`<h6 class=${customClass}>${this.renderText(heading)}</h6>`;
     }
   }
 
   renderCodeBlock(token: Marked.Marked.Tokens.Code): LitHtml.TemplateResult {
     // clang-format off
     return html`<devtools-code-block
+      class=${this.#customClassMapForToken('code')}
       .code=${this.unescape(token.text)}
       .codeLang=${token.lang || ''}>
     </devtools-code-block>`;
@@ -130,29 +189,33 @@ export class MarkdownLitRenderer {
   templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     switch (token.type) {
       case 'paragraph':
-        return html`<p>${this.renderChildTokens(token)}</p>`;
+        return html`<p class=${this.#customClassMapForToken('paragraph')}>${this.renderChildTokens(token)}</p>`;
       case 'list':
-        return html`<ul>${token.items.map(token => {
+        return html`<ul class=${this.#customClassMapForToken('list')}>${token.items.map(token => {
           return this.renderToken(token);
         })}</ul>`;
       case 'list_item':
-        return html`<li>${this.renderChildTokens(token)}</li>`;
+        return html`<li class=${this.#customClassMapForToken('list_item')}>${this.renderChildTokens(token)}</li>`;
       case 'text':
         return this.renderText(token);
       case 'codespan':
-        return html`<code>${this.unescape(token.text)}</code>`;
+        return html`<code class=${this.#customClassMapForToken('codespan')}>${this.unescape(token.text)}</code>`;
       case 'code':
         return this.renderCodeBlock(token);
       case 'space':
         return html``;
       case 'link':
-        return html`<devtools-markdown-link .data=${{
+        return html`<devtools-markdown-link
+        class=${this.#customClassMapForToken('link')}
+        .data=${{
         key:
           token.href, title: token.text,
         }
         }></devtools-markdown-link>`;
       case 'image':
-        return html`<devtools-markdown-image .data=${{
+        return html`<devtools-markdown-image
+        class=${this.#customClassMapForToken('image')}
+        .data=${{
         key:
           token.href, title: token.text,
         }
@@ -160,9 +223,9 @@ export class MarkdownLitRenderer {
       case 'heading':
         return this.renderHeading(token);
       case 'strong':
-        return html`<strong>${this.renderText(token)}</strong>`;
+        return html`<strong class=${this.#customClassMapForToken('strong')}>${this.renderText(token)}</strong>`;
       case 'em':
-        return html`<em>${this.renderText(token)}</em>`;
+        return html`<em class=${this.#customClassMapForToken('em')}>${this.renderText(token)}</em>`;
       default:
         return null;
     }

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/settings/SettingCheckbox.ts

@@ -69,7 +69,8 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const learnMore = this.#setting.learnMore();
-    if (learnMore) {
+    if (learnMore && learnMore.url) {
+      const url = learnMore.url;
       const data: Buttons.Button.ButtonData = {
         iconName: 'help',
         variant: Buttons.Button.Variant.ICON,
@@ -78,7 +79,7 @@ export class SettingCheckbox extends HTMLElement {
         title: i18nString(UIStrings.learnMore),
       };
       const handleClick = (event: MouseEvent): void => {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(learnMore.url);
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
         event.consume();
       };
       return html`<devtools-button

package/front_end/ui/legacy/ContextMenu.ts

@@ -553,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/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/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/UIUtils.ts

@@ -1100,13 +1100,6 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
   if (clickHandler) {
     button.addEventListener('click', clickHandler);
-    button.addEventListener('keydown', (event: KeyboardEvent): void => {
-      if (event.key === 'Enter' || event.key === 'Space') {
-        // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
-        // so that these get turned into 'click' events properly.
-        event.stopImmediatePropagation();
-      }
-    });
   }
   if (opts?.jslogContext) {
     button.setAttribute('jslog', `${VisualLogging.action().track({click: true}).context(opts.jslogContext)}`);

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -35,7 +35,6 @@
 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 * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
@@ -237,7 +236,8 @@ export class CookiesTable extends UI.Widget.VBox {
       },
     ] as DataGrid.DataGrid.ColumnDescriptor[];
 
-    if (Root.Runtime.experiments.isEnabled('experimental-cookie-features')) {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config.devToolsEnableOriginBoundCookies?.schemeBindingEnabled) {
       const additionalColumns = [
         {
           id: SDK.Cookie.Attribute.SOURCE_SCHEME,
@@ -247,6 +247,11 @@ export class CookiesTable extends UI.Widget.VBox {
           weight: 7,
           editable,
         },
+      ] as DataGrid.DataGrid.ColumnDescriptor[];
+      columns.push(...additionalColumns);
+    }
+    if (config.devToolsEnableOriginBoundCookies?.portBindingEnabled) {
+      const additionalColumns = [
         {
           id: SDK.Cookie.Attribute.SOURCE_PORT,
           title: 'SourcePort',

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -666,11 +666,16 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private startEditingConfig(_element: Element): UI.InplaceEditor.Config<any> {
-    return new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this));
+    return new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this), undefined);
   }
 
   private editingCommitted(
-      element: Element, newText: any, oldText: any, context: string|undefined, moveDirection: string): void {
+      element: Element,
+      newText: any,
+      _oldText: string|boolean|null,
+      _context: string|undefined,
+      moveDirection: string,
+      ): void {
     const columnId = this.columnIdFromNode(element);
     if (!columnId) {
       this.editingCancelled(element);
@@ -681,8 +686,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!this.editingNode) {
       return;
     }
-    const valueBeforeEditing =
-        (this.editingNode.data[columnId] === null ? '' : this.editingNode.data[columnId] as string | boolean);
+    const valueBeforeEditing = this.editingNode.data[columnId];
     const currentEditingNode = this.editingNode;
 
     function moveToNextIfNeeded(this: DataGridImpl<T>, wasChange: boolean): void {

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -14,7 +14,15 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     DataGridImpl)<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
   private visibleNodes: ViewportDataGridNode<T>[];
-  stickToBottom: boolean;
+  /** A datagrid preference to express that the grid represents an updating log of rows (eg Network panel request log, websocket messages).
+   * If `true`, the datagrid will mostly keep the scroll at the bottom, so new items are visible.
+   * If the data is sorted descending (eg Performance Call Tree, heap snapshot), keep the default of `false`.
+   */
+  enableAutoScrollToBottom: boolean = false;
+  /** When true, the datagrid will manipulate the scrollTop to focus on the bottom, mostly so new additions are visible.
+   * Some actions will unset this, like revealing or expanding a particular node.
+   * Only matters if enableAutoScrollToBottom is true. */
+  keepScrollingToBottom: boolean = false;
   private updateIsFromUser: boolean;
   private lastScrollTop: number;
   private firstVisibleIsStriped: boolean;
@@ -29,7 +37,6 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     this.visibleNodes = [];
     this.inline = false;
 
-    this.stickToBottom = false;
     this.updateIsFromUser = false;
     this.lastScrollTop = 0;
     this.firstVisibleIsStriped = false;
@@ -60,15 +67,15 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
   }
 
   override onResize(): void {
-    if (this.stickToBottom) {
+    if (this.keepScrollingToBottom) {
       this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
     }
     this.scheduleUpdate();
     super.onResize();
   }
 
-  setStickToBottom(stick: boolean): void {
-    this.stickToBottom = stick;
+  setEnableAutoScrollToBottom(stick: boolean): void {
+    this.keepScrollingToBottom = this.enableAutoScrollToBottom = stick;
   }
 
   private onScroll(_event: Event|null): void {
@@ -131,8 +138,10 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       bottomPadding += nodes[i].nodeSelfHeight();
     }
 
-    // enable stick-to-bottom if the last item is visible
-    this.stickToBottom = end === nodes.length;
+    if (this.enableAutoScrollToBottom) {
+      // If we're scrolled to the very end, keep the scroll viewport focused to the end (as new items arrive)
+      this.keepScrollingToBottom = end === nodes.length;
+    }
 
     return {
       topPadding,
@@ -157,7 +166,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     let scrollTop: number = this.scrollContainer.scrollTop;
     const currentScrollTop = scrollTop;
     const maxScrollTop = Math.max(0, this.contentHeight() - clientHeight);
-    if (!this.updateIsFromUser && this.stickToBottom) {
+    if (!this.updateIsFromUser && this.keepScrollingToBottom) {
       scrollTop = maxScrollTop;
     }
     this.updateIsFromUser = false;
@@ -185,7 +194,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       const nodes = (this.rootNode() as ViewportDataGridNode<T>).flatChildren();
       const index = nodes.indexOf(visibleNodes[0]);
       this.updateStripesClass(Boolean(index % 2));
-      if (this.stickToBottom && index !== -1 && Boolean(index % 2) !== this.firstVisibleIsStriped) {
+      if (this.keepScrollingToBottom && index !== -1 && Boolean(index % 2) !== this.firstVisibleIsStriped) {
         offset += 1;
       }
     }
@@ -233,7 +242,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeightInScroller();
     if (scrollTop > fromY) {
       scrollTop = fromY;
-      this.stickToBottom = false;
+      this.keepScrollingToBottom = false;
     } else if (scrollTop + visibleHeight < toY) {
       scrollTop = toY - visibleHeight;
     }
@@ -410,7 +419,7 @@ export class ViewportDataGridNode<T> extends DataGridNode<ViewportDataGridNode<T
     if (this.expanded) {
       return;
     }
-    (this.dataGrid as ViewportDataGrid<T>).stickToBottom = false;
+    (this.dataGrid as ViewportDataGrid<T>).keepScrollingToBottom = false;
     this.clearFlatNodes();
     super.expand();
     (this.dataGrid as ViewportDataGrid<T>).scheduleUpdateStructure();

package/front_end/ui/legacy/components/inline_editor/LinkSwatch.test.ts

@@ -34,6 +34,25 @@ describeWithLocale('CSSVarSwatch', () => {
     assert.instanceOf(component, HTMLElement, 'The swatch is an instance of HTMLElement');
   });
 
+  it('renders a var function with empty computed value', () => {
+    const component = new InlineEditor.LinkSwatch.CSSVarSwatch();
+    renderElementIntoDOM(component);
+    component.data = {
+      variableName: '--test',
+      computedValue: '',
+      fromFallback: false,
+      fallbackText: null,
+      onLinkActivate: () => {},
+    };
+
+    assertVarSwatch(component, {
+      valueTooltip: '',
+      linkTooltip: '',
+      isDefined: true,
+      varText: '--test',
+    });
+  });
+
   it('renders a var function without fallback', () => {
     const component = new InlineEditor.LinkSwatch.CSSVarSwatch();
     renderElementIntoDOM(component);

package/front_end/ui/legacy/components/inline_editor/LinkSwatch.ts

@@ -118,7 +118,7 @@ export class CSSVarSwatch extends HTMLElement {
   protected render(data: CSSVarSwatchRenderData): void {
     const {variableName, fromFallback, computedValue, onLinkActivate} = data;
 
-    const isDefined = Boolean(computedValue) && !fromFallback;
+    const isDefined = computedValue !== null && !fromFallback;
     const title = isDefined ? computedValue ?? '' : i18nString(UIStrings.sIsNotDefined, {PH1: variableName});
 
     this.#link = new BaseLinkSwatch();

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

@@ -1715,7 +1715,7 @@ export class ExpandableTextPropertyValue extends ObjectPropertyValue {
     this.maxDisplayableTextLength = 10000000;
 
     const byteCount = Platform.StringUtilities.countWtf8Bytes(text);
-    const totalBytesText = Platform.NumberUtilities.bytesToString(byteCount);
+    const totalBytesText = i18n.ByteUtilities.bytesToString(byteCount);
     if (this.text.length < this.maxDisplayableTextLength) {
       this.expandElementText = i18nString(UIStrings.showMoreS, {PH1: totalBytesText});
       this.expandElement.setAttribute('data-text', this.expandElementText);

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

@@ -32,7 +32,6 @@ 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 * as Root from '../../../../core/root/root.js';
-import type * as TimelineModel from '../../../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
@@ -2174,16 +2173,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     const {markerIndices, colorBuckets, titleIndices} = this.getDrawableData(context, timelineData);
 
-    context.save();
-    this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
-      if (this.isGroupFocused(index)) {
-        context.fillStyle =
-            ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
-        context.fillRect(0, offset, canvasWidth, groupHeight - group.style.padding);
-      }
-    });
-    context.restore();
-
     const groups = this.rawTimelineData?.groups || [];
     const trackIndex = groups.findIndex(g => g.name.includes('Main'));
     const group = groups.at(trackIndex);
@@ -2678,14 +2667,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       if (this.isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
         // In edit mode, we draw an extra rectangle for the save icon.
         const labelBackgroundWidth = this.labelWidthForGroup(context, group);
-        if (this.isGroupFocused(index)) {
-          context.fillStyle =
-              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
-        } else {
-          const parsedColor = Common.Color.parse(group.style.backgroundColor);
-          if (parsedColor) {
-            context.fillStyle = (parsedColor.setAlpha(0.8).asString() as string);
-          }
+        const parsedColor = Common.Color.parse(group.style.backgroundColor);
+        if (parsedColor) {
+          context.fillStyle = (parsedColor.setAlpha(0.8).asString() as string);
         }
         context.fillRect(
             iconsWidth + HEADER_LEFT_PADDING, offset + HEADER_LABEL_Y_PADDING, labelBackgroundWidth,
@@ -4145,9 +4129,8 @@ export interface FlameChartDataProvider {
   customizedContextMenu?
       (event: MouseEvent, eventIndex: number, groupIndex: number): UI.ContextMenu.ContextMenu|undefined;
 
-  search?
-      (visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-       filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter): DataProviderSearchResult[];
+  search?(visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds, filter?: Trace.Extras.TraceFilter.TraceFilter):
+      DataProviderSearchResult[];
 
   // The following three functions are used for the flame chart entry customization.
   modifyTree?(action: FilterAction, entryIndex: number): void;