chrome-devtools-frontend 1.0.1587905 → 1.0.1589336

package/front_end/panels/application/IndexedDBViews.ts

@@ -7,6 +7,7 @@ import '../../ui/components/report_view/report_view.js';
 import '../../ui/legacy/legacy.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
@@ -322,42 +323,37 @@ export class IDBDataView extends UI.View.SimpleView {
     const columns = ([] as DataGrid.DataGrid.ColumnDescriptor[]);
 
     // Create column defaults so that we avoid repetition below.
-    const columnDefaults = {
-      title: undefined,
-      titleDOMFragment: undefined,
+    const columnDefaults: Partial<DataGrid.DataGrid.ColumnDescriptor> = {
       sortable: false,
-      sort: undefined,
-      align: undefined,
-      width: undefined,
-      fixedWidth: undefined,
-      editable: undefined,
-      nonSelectable: undefined,
-      longText: undefined,
-      disclosure: undefined,
-      weight: undefined,
-      allowInSortByEvenWhenHidden: undefined,
-      dataType: undefined,
-      defaultWeight: undefined,
     };
-    columns.push(
-        ({...columnDefaults, id: 'number', title: '#', sortable: false, width: '50px'} as
-         DataGrid.DataGrid.ColumnDescriptor));
-    columns.push(({
+    columns.push({
+      ...columnDefaults,
+      id: 'number',
+      title: '#' as Platform.UIString.LocalizedString,
+      sortable: false,
+      width: '50px',
+    });
+    columns.push({
       ...columnDefaults,
       id: 'key',
       titleDOMFragment: this.keyColumnHeaderFragment(i18nString(UIStrings.keyString), keyPath),
       sortable: false,
-    } as DataGrid.DataGrid.ColumnDescriptor));
+    });
     if (this.isIndex) {
-      columns.push(({
+      columns.push({
         ...columnDefaults,
         id: 'primary-key',
         titleDOMFragment: this.keyColumnHeaderFragment(i18nString(UIStrings.primaryKey), this.objectStore.keyPath),
         sortable: false,
-      } as DataGrid.DataGrid.ColumnDescriptor));
+      });
     }
     const title = i18nString(UIStrings.valueString);
-    columns.push(({...columnDefaults, id: 'value', title, sortable: false} as DataGrid.DataGrid.ColumnDescriptor));
+    columns.push({
+      ...columnDefaults,
+      id: 'value',
+      title,
+      sortable: false,
+    });
 
     const dataGrid = new DataGrid.DataGrid.DataGridImpl({
       displayName: i18nString(UIStrings.indexedDb),

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -98,7 +98,7 @@ function renderOriginTrialTree(originTrial: Protocol.Page.OriginTrial): LitTempl
           ${i18nString(UIStrings.tokens, {PH1: originTrial.tokensWithStatus.length})}
         </devtools-adorner>`
         : nothing}
-      <ul role="group" hidden>
+      <ul role="group">
         ${originTrial.tokensWithStatus.length > 1 ?
           originTrial.tokensWithStatus.map(renderTokenNode) :
           renderTokenDetailsNodes(originTrial.tokensWithStatus[0])}
@@ -117,7 +117,7 @@ function renderTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): LitTe
       <devtools-adorner class="token-status-badge badge-${success ? 'success' : 'error'}">
         ${token.status}
       </devtools-adorner>
-      <ul role="group" hidden>
+      <ul role="group">
         ${renderTokenDetailsNodes(token)}
       </ul>
     </li>`;
@@ -151,7 +151,7 @@ function renderRawTokenTextNode(tokenText: string): LitTemplate {
   return html`
     <li role="treeitem">
       ${i18nString(UIStrings.rawTokenText)}
-      <ul role="group" hidden>
+      <ul role="group">
         <li role="treeitem">
           <div style="overflow-wrap: break-word;">
             ${tokenText}

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -223,7 +223,7 @@ function maybeRenderFrameTree(
         ` : nothing}
         ${node.text}
         ${node.children?.length ? html`
-          <ul role="group" hidden>
+          <ul role="group">
             ${node.children.map(child => renderFrameTreeNode(child))}
           </ul>` : nothing}
       </li>`;

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -374,6 +374,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private readonly preloadingDetails =
       new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
   private readonly ruleSetSelector: PreloadingRuleSetSelector;
+  private clearButton: UI.Toolbar.ToolbarButton;
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
     super({
@@ -415,6 +416,23 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
 
     const toolbar = vbox.contentElement.createChild('devtools-toolbar', 'preloading-toolbar');
     toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
+
+    // Clear button first (leftmost)
+    this.clearButton =
+        new UI.Toolbar.ToolbarButton('Clear speculative loads', 'clear', undefined, 'clear-speculative-loads');
+    this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+      const model =
+          SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(SDK.PreloadingModel.PreloadingModel);
+      if (!model) {
+        return;
+      }
+
+      model.reset();
+      this.ruleSetSelector.select(null);
+    });
+    toolbar.appendToolbarItem(this.clearButton);
+
+    // Rule set dropdown
     this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
     toolbar.appendToolbarItem(this.ruleSetSelector.item());
 

package/front_end/panels/application/preloading/components/RuleSetDetailsView.css

@@ -4,11 +4,19 @@
  * found in the LICENSE file.
  */
 
+:host {
+  height: 100%;
+}
+
 .placeholder {
   display: flex;
   height: 100%;
 }
 
+.ruleset-header-container {
+  flex-shrink: 0;
+}
+
 .ruleset-header {
   padding: 4px 8px;
   white-space: nowrap;
@@ -20,3 +28,7 @@
 .ruleset-header devtools-icon {
   vertical-align: sub;
 }
+
+.text-editor-container {
+  overflow: auto;
+}

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -49,7 +49,7 @@ export const DEFAULT_VIEW = (input: ViewInput|null, _output: object, target: HTM
     <style>${UI.inspectorCommonStyles}</style>
     ${input
       ? html`
-        <div class="content">
+        <div class="ruleset-header-container">
           <div class="ruleset-header" id="ruleset-url">${input.url}</div>
           ${input.errorMessage ? html`
             <div class="ruleset-header">
@@ -59,8 +59,8 @@ export const DEFAULT_VIEW = (input: ViewInput|null, _output: object, target: HTM
             </div>
           ` : nothing}
         </div>
-        <div class="text-ellipsis">
-          <devtools-text-editor .style.flexGrow=${'1'} .state=${input.editorState}></devtools-text-editor>
+        <div class="text-editor-container">
+          <devtools-text-editor .state=${input.editorState}></devtools-text-editor>
         </div>`
       : html`
           <div class="placeholder">

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -237,7 +237,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               jslog-context=${category}
               aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
                 ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
-                : false}>
+                : false}
+              ?open=${shouldExpandCategory(breakpoints) || input.userExpandedCategories.has(category)}>
             <style>${categorizedBreakpointsSidebarPaneStyles}</style>
             <devtools-checkbox
               class="small"
@@ -248,9 +249,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
               @change=${(e: Event) => onCheckboxClicked(e, category)}
             >${getLocalizedCategory(category)}</devtools-checkbox>
-            <ul
-                role="group"
-                ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
+            <ul role="group">
               ${breakpoints.map(breakpoint => html`
               <li @select=${() => input.onItemSelected(breakpoint)}
                   role="treeitem"

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import '../../ui/components/tooltips/tooltips.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 Root from '../../core/root/root.js';
@@ -15,6 +16,10 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import styles from './aiCodeGenerationTeaser.css.js';
 
 const UIStringsNotTranslate = {
+  /**
+   * @description Text for teaser to generate code.
+   */
+  toGenerateCode: 'to generate code',
   /**
    * @description Text for teaser to generate code.
    */
@@ -26,11 +31,7 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for teaser to learn how data is being used.
    */
-  ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed: 'ctrl+. to learn how your data is being used.',
-  /**
-   * @description Text for teaser to learn how data is being used in Mac.
-   */
-  cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed: 'cmd+. to learn how your data is being used.',
+  toLearnHowYourDataIsBeingUsed: 'to learn how your data is being used.',
   /**
    * @description Aria label for teaser to generate code.
    */
@@ -42,9 +43,13 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for teaser when generating suggestion.
    */
-  generating: 'Generating... (esc to cancel)',
+  generating: 'Generating... (',
+  /**
+   * @description Text for teaser when generating suggestion.
+   */
+  toCancel: ' to cancel)',
   /**
-   * @description Aria label for teaser when generating suggestion.
+   * @description Text for teaser when generating suggestion.
    */
   generatingAriaLabel: 'Generating. Press escape to cancel.',
   /**
@@ -67,6 +72,26 @@ const UIStringsNotTranslate = {
    * @description Text for teaser when suggestion has been generated.
    */
   toAccept: 'to accept',
+  /**
+   * @description Text for teaser keys.
+   */
+  ctrl: 'ctrl',
+  /**
+   * @description Text for teaser keys.
+   */
+  cmd: 'cmd',
+  /**
+   * @description Text for teaser keys.
+   */
+  i: 'i',
+  /**
+   * @description Text for teaser keys.
+   */
+  period: '.',
+  /**
+   * @description Text for teaser keys.
+   */
+  esc: 'esc',
   /**
    * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code generation in Console panel.
    */
@@ -126,6 +151,7 @@ export interface ViewInput {
   noLogging: boolean;
   onManageInSettingsTooltipClick: (event: Event) => void;
   showDataUsageTeaser: boolean;
+  showDiscoveryTeaser: boolean;
   // TODO(b/472268298): Remove ContextFlavor explicitly and pass required values
   panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
@@ -151,23 +177,35 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         render(nothing, target);
         return;
       }
-      const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
-                                                     lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+
       const toLearnHowYourDataIsBeingUsedScreenReaderOnly = Host.Platform.isMac() ?
-          lockedString(UIStringsNotTranslate.pressCmdPeriodToLearnHowYourDataIsBeingUsed) :
-          lockedString(UIStringsNotTranslate.pressCtrlPeriodToLearnHowYourDataIsBeingUsed);
-      const toLearnHowYourDataIsBeingUsedVisible = Host.Platform.isMac() ?
-          lockedString(UIStringsNotTranslate.cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed) :
-          lockedString(UIStringsNotTranslate.ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed);
+          UIStringsNotTranslate.pressCmdPeriodToLearnHowYourDataIsBeingUsed :
+          UIStringsNotTranslate.pressCtrlPeriodToLearnHowYourDataIsBeingUsed;
+      const screenReaderText = (Host.Platform.isMac() ? UIStringsNotTranslate.cmdItoGenerateCode :
+                                                        UIStringsNotTranslate.ctrlItoGenerateCode) +
+          ' ' + toLearnHowYourDataIsBeingUsedScreenReaderOnly;
+
+      const cmdOrCtrl =
+          Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmd) : lockedString(UIStringsNotTranslate.ctrl);
+      const toGenerateCode = html`<span class="ai-code-generation-keyboard-action">
+          <span>${cmdOrCtrl}</span>
+          <span>${lockedString(UIStringsNotTranslate.i)}</span>
+        </span>&nbsp;${lockedString(UIStringsNotTranslate.toGenerateCode)}`;
+      const toLearnHowYourDataIsBeingUsedVisible = html`<span class="ai-code-generation-keyboard-action">
+          <span>${cmdOrCtrl}</span>
+          <span>${lockedString(UIStringsNotTranslate.period)}</span>
+        </span>&nbsp;${lockedString(UIStringsNotTranslate.toLearnHowYourDataIsBeingUsed)}`;
+      const teaserText = input.showDataUsageTeaser ?
+          html`${toGenerateCode}.&nbsp;${toLearnHowYourDataIsBeingUsedVisible}` :
+          toGenerateCode;
+
       const tooltipDisclaimerText = getTooltipDisclaimerText(input.noLogging, input.panel);
 
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-trigger">
-        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}</span>
-        ${input.showDataUsageTeaser ?
-            html`<span aria-hidden="true">${'. ' + toLearnHowYourDataIsBeingUsedVisible}</span>` : nothing}
+        <span aria-hidden="true">${teaserText}</span>
         <span class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
-          ${toLearnHowYourDataIsBeingUsedScreenReaderOnly}
+          ${lockedString(screenReaderText)}
         </span>
         &nbsp;<devtools-button
           .data=${{
@@ -214,6 +252,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
 
     case AiCodeGenerationTeaserDisplayState.DISCOVERY: {
+      if (!input.showDiscoveryTeaser) {
+        teaserLabel = nothing;
+        break;
+      }
       const newBadge = UI.UIUtils.maybeCreateNewBadge(PROMOTION_ID);
       teaserLabel = newBadge ?
           html`${lockedString(UIStringsNotTranslate.writeACommentToGenerateCode)}&nbsp;${newBadge}` :
@@ -226,7 +268,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       // clang-format off
       teaserLabel = html`
         <div class="ai-code-generation-teaser-screen-reader-only">${teaserAriaLabel}</div>
-        <span class="ai-code-generation-spinner" aria-hidden="true"></span>&nbsp;${lockedString(UIStringsNotTranslate.generating)}&nbsp;
+        <span class="ai-code-generation-spinner" aria-hidden="true">
+          &nbsp;${lockedString(UIStringsNotTranslate.generating)}
+          <span class="ai-code-generation-keyboard-action"><span>${lockedString(UIStringsNotTranslate.esc)}</span></span>
+          ${lockedString(UIStringsNotTranslate.toCancel)}&nbsp;
+        </span>
         <span class="ai-code-generation-timer" aria-hidden="true" ${Directives.ref(el => {
           if (el) {
             output.setTimerText = (text: string) => {
@@ -275,7 +321,9 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
   #timerIntervalId?: number;
   #loadStartTime?: number;
+  #aiCodeGenerationUsedSetting = Common.Settings.Settings.instance().createSetting('ai-code-generation-used', false);
   static #showDataUsageTeaser = true;
+  static #discoveryTeaserShownInSession = false;
 
   constructor(view?: View) {
     super();
@@ -294,6 +342,8 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
           disclaimerTooltipId: this.#disclaimerTooltipId,
           noLogging: this.#noLogging,
           showDataUsageTeaser: AiCodeGenerationTeaser.#showDataUsageTeaser,
+          showDiscoveryTeaser:
+              !this.#aiCodeGenerationUsedSetting.get() && !AiCodeGenerationTeaser.#discoveryTeaserShownInSession,
           panel: this.#panel,
         },
         this.#viewOutput, this.contentElement);
@@ -315,6 +365,9 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     if (this.#displayState === AiCodeGenerationTeaserDisplayState.TRIGGER) {
       AiCodeGenerationTeaser.#showDataUsageTeaser = false;
     }
+    if (this.#displayState === AiCodeGenerationTeaserDisplayState.DISCOVERY) {
+      AiCodeGenerationTeaser.#discoveryTeaserShownInSession = true;
+    }
     this.#displayState = displayState;
     this.requestUpdate();
     if (this.#displayState === AiCodeGenerationTeaserDisplayState.LOADING) {
@@ -369,4 +422,8 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   showTooltip(): void {
     this.#viewOutput.showTooltip?.();
   }
+
+  static setDiscoveryTeaserShownInSessionForTest(value: boolean): void {
+    AiCodeGenerationTeaser.#discoveryTeaserShownInSession = value;
+  }
 }

package/front_end/panels/common/aiCodeGenerationTeaser.css

@@ -30,6 +30,17 @@
             }
         }
 
+        .ai-code-generation-keyboard-action {
+            display: inline-flex;
+            gap: var(--sys-size-2);
+
+            span {
+                border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+                border-radius: var(--sys-shape-corner-extra-small);
+                padding: 0 var(--sys-size-3);
+            }
+        }
+
         .ai-code-generation-teaser-generated {
             display: inline-flex;
             gap: var(--sys-size-2);

package/front_end/panels/console/ConsoleSidebar.ts

@@ -101,7 +101,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         n: group.messageCount
                       })}
                   ${group.messageCount === 0 ? nothing : html`
-                  <ul role="group" hidden>
+                  <ul role="group">
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
                         @select=${() => input.onSelectionChanged(urlGroup.filter)}

package/front_end/panels/console/ConsoleView.ts

@@ -42,6 +42,7 @@ 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 AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -566,6 +567,9 @@ export class ConsoleView extends UI.Widget.VBox implements
             }],
             stopSequences: ['\n\n'],
           },
+          generationContext: {
+            additionalPreambleContext: AiCodeGeneration.AiCodeGeneration.additionalContextForConsole,
+          },
           onFeatureEnabled: () => {
             this.setupAiCodeCompletion();
           },

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -252,9 +252,9 @@ export const concatErrorDescriptionAndIssueSummary = (description: string, issue
   return description;
 };
 
-// This value reflects the 18px min-height of .console-message, plus the
-// 1px border of .console-message-wrapper. Keep in sync with consoleView.css.
-const defaultConsoleRowHeight = 19;
+// This value reflects the 18px min-height of .console-message.
+// Keep in sync with consoleView.css.
+const defaultConsoleRowHeight = 18;
 
 const parameterToRemoteObject = (runtimeModel: SDK.RuntimeModel.RuntimeModel|null):
     (parameter?: SDK.RemoteObject.RemoteObject|Protocol.Runtime.RemoteObject|string) => SDK.RemoteObject.RemoteObject =>

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -277,7 +277,7 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
       return;
     }
 
-    this.swatch.color = color;
+    this.swatch.renderColor(color);
     this.dispatchEventToListeners(ColorSwatchPopoverIconEvents.COLOR_CHANGED, color);
   }
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -48,7 +48,6 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as ElementsComponents from './components/components.js';
 import computedStyleWidgetStyles from './computedStyleWidget.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
-import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import {categorizePropertyName, type Category, DefaultCategoryOrder} from './PropertyNameCategories.js';
 import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
@@ -208,8 +207,8 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
     }
 
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
-    swatch.readonly = true;
-    swatch.color = color;
+    swatch.setReadonly(true);
+    swatch.renderColor(color);
     const valueElement = document.createElement('span');
     valueElement.textContent = match.text;
 
@@ -265,12 +264,12 @@ type ComputedStyleData = {
 interface ComputedStyleWidgetInput {
   computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
   hasMatches: boolean;
-  computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   onFilterChanged: (event: CustomEvent<string>) => void;
   filterText: string;
   onRegexToggled: () => void;
+  includeToolbar: boolean;
 }
 
 type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
@@ -279,29 +278,30 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
     <style>${computedStyleWidgetStyles}</style>
-    <div class="styles-sidebar-pane-toolbar">
-      <devtools-toolbar class="styles-pane-toolbar" role="presentation">
-        <devtools-toolbar-input
-          type="filter"
-          autofocus
-          ?regex=${true}
-          value=${input.filterText}
-          @change=${input.onFilterChanged}
-          @regextoggle=${input.onRegexToggled}
-        ></devtools-toolbar-input>
-        <devtools-checkbox
-          title=${i18nString(UIStrings.showAll)}
-          ${bindToSetting(input.showInheritedComputedStylePropertiesSetting)}
-        >${i18nString(UIStrings.showAll)}</devtools-checkbox>
-        <devtools-checkbox
-          title=${i18nString(UIStrings.group)}
-          ${bindToSetting(input.groupComputedStylesSetting)}
-        >${i18nString(UIStrings.group)}</devtools-checkbox>
-      </devtools-toolbar>
-    </div>
+    ${input.includeToolbar ? html`
+      <div class="styles-sidebar-pane-toolbar">
+        <devtools-toolbar class="styles-pane-toolbar" role="presentation">
+          <devtools-toolbar-input
+            type="filter"
+            autofocus
+            ?regex=${true}
+            value=${input.filterText}
+            @change=${input.onFilterChanged}
+            @regextoggle=${input.onRegexToggled}
+          ></devtools-toolbar-input>
+          <devtools-checkbox
+            title=${i18nString(UIStrings.showAll)}
+            ${bindToSetting(input.showInheritedComputedStylePropertiesSetting)}
+          >${i18nString(UIStrings.showAll)}</devtools-checkbox>
+          <devtools-checkbox
+            title=${i18nString(UIStrings.group)}
+            ${bindToSetting(input.groupComputedStylesSetting)}
+          >${i18nString(UIStrings.group)}</devtools-checkbox>
+        </devtools-toolbar>
+      </div>
+      ` : Lit.nothing}
     ${input.computedStylesTree}
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
-    ${input.computedStyleModel ? html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>` : ''}
   `, target);
   // clang-format on
 };
@@ -321,6 +321,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   readonly #view: View;
   #filterText = '';
   #isRegex = false;
+  #includeToolbar = true;
 
   constructor() {
     super({useShadowDom: true});
@@ -355,14 +356,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
-  override wasShown(): void {
-    UI.Context.Context.instance().setFlavor(ComputedStyleWidget, this);
-    super.wasShown();
+  get includeToolbar(): boolean {
+    return this.#includeToolbar;
   }
 
-  override willHide(): void {
-    super.willHide();
-    UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
+  set includeToolbar(x: boolean) {
+    this.#includeToolbar = x;
+    this.requestUpdate();
   }
 
   /**
@@ -372,8 +372,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#view(
         {
           computedStylesTree: this.#computedStylesTree,
+          includeToolbar: this.#includeToolbar,
           hasMatches,
-          computedStyleModel: this.#computedStyleModel,
           showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
           groupComputedStylesSetting: this.groupComputedStylesSetting,
           onFilterChanged: this.onFilterChanged.bind(this),

package/front_end/panels/elements/ElementsPanel.ts

@@ -59,6 +59,7 @@ import {DOMTreeWidget, type ElementsTreeOutline} from './ElementsTreeOutline.js'
 import {LayoutPane} from './LayoutPane.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
+import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import {
   Events as StylesSidebarPaneEvents,
   StylesSidebarPane,
@@ -312,8 +313,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     UI.Context.Context.instance().addFlavorChangeListener(
         StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
     this.#computedStyleWidget = new ComputedStyleWidget();
@@ -372,7 +371,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }
 
-    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
+    const isComputedStyleWidgetVisible = this.#computedStyleWidget.isShowing();
     const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
     const shouldTrackComputedStyleUpdates = isComputedStyleWidgetVisible ||
         (isStylesTabVisible && Root.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled);
@@ -550,6 +549,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     super.wasShown();
     UI.Context.Context.instance().setFlavor(ElementsPanel, this);
     this.#domTreeWidget.show(this.domTreeContainer);
+    this.evaluateTrackingComputedStyleUpdatesForNode();
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
@@ -558,6 +558,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   override willHide(): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    this.evaluateTrackingComputedStyleUpdatesForNode();
     this.#domTreeWidget.detach();
     super.willHide();
     UI.Context.Context.instance().setFlavor(ElementsPanel, null);
@@ -1116,10 +1117,16 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.setupTextSelectionHack(matchedStylePanesWrapper.element);
 
     const computedStylePanesWrapper = new UI.Widget.VBox();
-    computedStylePanesWrapper.element.classList.add('style-panes-wrapper');
+    computedStylePanesWrapper.element.classList.add('style-panes-wrapper', 'computed-styles-pane-wrapper');
     computedStylePanesWrapper.element.setAttribute('jslog', `${VisualLogging.pane('computed').track({resize: true})}`);
+    this.#computedStyleWidget.element.classList.add('computed-styles-wrapper');
     this.#computedStyleWidget.show(computedStylePanesWrapper.element);
 
+    const platformFontsWidget = new PlatformFontsWidget();
+    platformFontsWidget.element.classList.add('platform-fonts-wrapper');
+    platformFontsWidget.sharedModel = this.#computedStyleModel;
+    platformFontsWidget.show(computedStylePanesWrapper.element);
+
     const stylesSplitWidget = new UI.SplitWidget.SplitWidget(
         true /* isVertical */, true /* secondIsSidebar */, 'elements.styles.sidebar.width', 100);
     stylesSplitWidget.setMainWidget(matchedStylePanesWrapper);
@@ -1162,6 +1169,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     const tabSelected = (event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void => {
       const {tabId} = event.data;
+      this.evaluateTrackingComputedStyleUpdatesForNode();
       if (tabId === SidebarPaneTabId.COMPUTED) {
         computedStylePanesWrapper.show(computedView.element);
         showMetricsWidgetInComputedPane();