chrome-devtools-frontend 1.0.1582745 → 1.0.1583146

package/front_end/core/root/Runtime.ts

@@ -582,10 +582,6 @@ interface AiPromptApi {
   allowWithoutGpu: boolean;
 }
 
-interface DevToolsIndividualRequestThrottling {
-  enabled: boolean;
-}
-
 export interface DevToolsEnableDurableMessages {
   enabled: boolean;
 }
@@ -631,7 +627,6 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiCodeGeneration: HostConfigAiCodeGeneration,
   devToolsVeLogging: HostConfigVeLogging,
   devToolsWellKnown: HostConfigWellKnown,
-  devToolsIndividualRequestThrottling: DevToolsIndividualRequestThrottling,
   /**
    * OffTheRecord here indicates that the user's profile is either incognito,
    * or guest mode, rather than a "normal" profile.

package/front_end/core/sdk/NetworkManager.ts

@@ -1687,19 +1687,8 @@ export class RequestCondition extends Common.ObjectWrapper.ObjectWrapper<Request
         (this.#pattern.upgradedPattern?.constructorString ?? this.#pattern.wildcardURL);
   }
 
-  set pattern(pattern: RequestURLPattern|string) {
-    if (typeof pattern === 'string') {
-      // TODO(pfaffe) Remove once the feature flag is no longer required
-      if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-        throw new Error('Should not use wildcard urls');
-      }
-      this.#pattern = {
-        wildcardURL: pattern,
-        upgradedPattern: RequestURLPattern.upgradeFromWildcard(pattern) ?? undefined
-      };
-    } else {
-      this.#pattern = pattern;
-    }
+  set pattern(pattern: RequestURLPattern) {
+    this.#pattern = pattern;
     this.dispatchEventToListeners(RequestCondition.Events.REQUEST_CONDITION_CHANGED);
   }
 
@@ -1792,10 +1781,7 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
   }
 
   findCondition(pattern: string): RequestCondition|undefined {
-    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      return this.#conditions.find(condition => condition.constructorString === pattern);
-    }
-    return this.#conditions.find(condition => condition.wildcardURL === pattern);
+    return this.#conditions.find(condition => condition.constructorString === pattern);
   }
 
   has(url: string): boolean {
@@ -1862,84 +1848,72 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper<Reques
     function isNonBlockingCondition(condition: ThrottlingConditions): condition is Conditions {
       return !('block' in condition);
     }
-    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      const urlPatterns: Protocol.Network.BlockPattern[] = [];
-      // We store all this info out-of-band to prevent races with changing conditions while the promise is still pending
-      const matchedNetworkConditions: Array<{conditions: Conditions, ruleIds?: Set<string>, urlPattern?: string}> = [];
-      if (this.conditionsEnabled) {
-        for (const condition of this.#conditions) {
-          const urlPattern = condition.constructorString;
-          const conditions = condition.conditions;
-          if (!condition.enabled || !urlPattern || conditions === NoThrottlingConditions) {
-            continue;
-          }
-          const block = !isNonBlockingCondition(conditions);
-          urlPatterns.push({urlPattern, block});
-          if (!block) {
-            const {ruleIds} = condition;
-            matchedNetworkConditions.push({ruleIds, urlPattern, conditions});
-          }
+    const urlPatterns: Protocol.Network.BlockPattern[] = [];
+    // We store all this info out-of-band to prevent races with changing conditions while the promise is still pending
+    const matchedNetworkConditions: Array<{conditions: Conditions, ruleIds?: Set<string>, urlPattern?: string}> = [];
+    if (this.conditionsEnabled) {
+      for (const condition of this.#conditions) {
+        const urlPattern = condition.constructorString;
+        const conditions = condition.conditions;
+        if (!condition.enabled || !urlPattern || conditions === NoThrottlingConditions) {
+          continue;
+        }
+        const block = !isNonBlockingCondition(conditions);
+        urlPatterns.push({urlPattern, block});
+        if (!block) {
+          const {ruleIds} = condition;
+          matchedNetworkConditions.push({ruleIds, urlPattern, conditions});
         }
       }
+    }
 
-      if (globalConditions) {
-        matchedNetworkConditions.push({conditions: globalConditions});
-      }
-
-      const promises: Array<Promise<unknown>> = [];
-
-      for (const agent of agents) {
-        promises.push(agent.invoke_setBlockedURLs({urlPatterns}));
-        promises.push(agent
-                          .invoke_emulateNetworkConditionsByRule({
-                            offline,
-                            matchedNetworkConditions: matchedNetworkConditions.map(
-                                ({urlPattern, conditions}) => ({
-                                  urlPattern: urlPattern ?? '',
-                                  latency: conditions.latency,
-                                  downloadThroughput: conditions.download < 0 ? 0 : conditions.download,
-                                  uploadThroughput: conditions.upload < 0 ? 0 : conditions.upload,
-                                  packetLoss: (conditions.packetLoss ?? 0) < 0 ? 0 : conditions.packetLoss,
-                                  packetQueueLength: conditions.packetQueueLength,
-                                  packetReordering: conditions.packetReordering,
-                                  connectionType: NetworkManager.connectionType(conditions),
-                                }))
-                          })
-                          .then(response => {
-                            if (!response.getError()) {
-                              for (let i = 0; i < response.ruleIds.length; ++i) {
-                                const ruleId = response.ruleIds[i];
-                                const {ruleIds, conditions, urlPattern} = matchedNetworkConditions[i];
-                                if (ruleIds) {
-                                  this.#requestConditionsById.set(ruleId, {urlPattern, conditions});
-                                  matchedNetworkConditions[i].ruleIds?.add(ruleId);
-                                }
-                              }
-                            }
-                          }));
-        promises.push(agent.invoke_overrideNetworkState({
-          offline,
-          latency: globalConditions?.latency ?? 0,
-          downloadThroughput: globalConditions?.download ?? -1,
-          uploadThroughput: globalConditions?.upload ?? -1,
-          connectionType: globalConditions ? NetworkManager.connectionType(globalConditions) :
-                                             Protocol.Network.ConnectionType.None,
-        }));
-      }
-
-      this.#conditionsAppliedForTestPromise = this.#conditionsAppliedForTestPromise.then(() => Promise.all(promises));
-      return urlPatterns.length > 0;
+    if (globalConditions) {
+      matchedNetworkConditions.push({conditions: globalConditions});
     }
 
-    const urls = this.conditionsEnabled ?
-        this.#conditions.filter(condition => condition.enabled && condition.wildcardURL)
-            .map(condition => condition.wildcardURL as string) :
-        [];
+    const promises: Array<Promise<unknown>> = [];
 
     for (const agent of agents) {
-      void agent.invoke_setBlockedURLs({urls});
+      promises.push(agent.invoke_setBlockedURLs({urlPatterns}));
+      promises.push(agent
+                        .invoke_emulateNetworkConditionsByRule({
+                          offline,
+                          matchedNetworkConditions: matchedNetworkConditions.map(
+                              ({urlPattern, conditions}) => ({
+                                urlPattern: urlPattern ?? '',
+                                latency: conditions.latency,
+                                downloadThroughput: conditions.download < 0 ? 0 : conditions.download,
+                                uploadThroughput: conditions.upload < 0 ? 0 : conditions.upload,
+                                packetLoss: (conditions.packetLoss ?? 0) < 0 ? 0 : conditions.packetLoss,
+                                packetQueueLength: conditions.packetQueueLength,
+                                packetReordering: conditions.packetReordering,
+                                connectionType: NetworkManager.connectionType(conditions),
+                              }))
+                        })
+                        .then(response => {
+                          if (!response.getError()) {
+                            for (let i = 0; i < response.ruleIds.length; ++i) {
+                              const ruleId = response.ruleIds[i];
+                              const {ruleIds, conditions, urlPattern} = matchedNetworkConditions[i];
+                              if (ruleIds) {
+                                this.#requestConditionsById.set(ruleId, {urlPattern, conditions});
+                                matchedNetworkConditions[i].ruleIds?.add(ruleId);
+                              }
+                            }
+                          }
+                        }));
+      promises.push(agent.invoke_overrideNetworkState({
+        offline,
+        latency: globalConditions?.latency ?? 0,
+        downloadThroughput: globalConditions?.download ?? -1,
+        uploadThroughput: globalConditions?.upload ?? -1,
+        connectionType: globalConditions ? NetworkManager.connectionType(globalConditions) :
+                                           Protocol.Network.ConnectionType.None,
+      }));
     }
-    return urls.length > 0;
+
+    this.#conditionsAppliedForTestPromise = this.#conditionsAppliedForTestPromise.then(() => Promise.all(promises));
+    return urlPatterns.length > 0;
   }
 
   conditionsAppliedForTest(): Promise<unknown> {
@@ -2082,9 +2056,6 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
     }
     this.#networkAgents.add(networkAgent);
     this.#fetchAgents.add(fetchAgent);
-    if (this.isThrottling() && !Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      this.updateNetworkConditions(networkAgent);
-    }
   }
 
   modelRemoved(networkManager: NetworkManager): void {
@@ -2110,14 +2081,8 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
 
   setNetworkConditions(conditions: Conditions): void {
     this.#networkConditions = conditions;
-    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      this.#requestConditions.applyConditions(
-          this.isOffline(), this.isThrottling() ? this.#networkConditions : null, ...this.#networkAgents);
-    } else {
-      for (const agent of this.#networkAgents) {
-        this.updateNetworkConditions(agent);
-      }
-    }
+    this.#requestConditions.applyConditions(
+        this.isOffline(), this.isThrottling() ? this.#networkConditions : null, ...this.#networkAgents);
     this.dispatchEventToListeners(MultitargetNetworkManager.Events.CONDITIONS_CHANGED);
   }
 
@@ -2224,23 +2189,6 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
     return this.#isBlocking && this.requestConditions.conditionsEnabled;
   }
 
-  /**
-   * @deprecated Kept for layout tests
-   * TODO(pfaffe) remove
-   */
-  private setBlockingEnabled(enabled: boolean): void {
-    this.requestConditions.conditionsEnabled = enabled;
-  }
-
-  /**
-   * @deprecated Kept for layout tests
-   * TODO(pfaffe) remove
-   */
-  private setBlockedPatterns(patterns: Array<{url: string, enabled: boolean}>): void {
-    this.requestConditions.clear();
-    this.requestConditions.add(...patterns.map(pattern => RequestCondition.createFromSetting(pattern)));
-  }
-
   private updateBlockedPatterns(): void {
     this.#isBlocking = this.#requestConditions.applyConditions(
         this.isOffline(), this.isThrottling() ? this.#networkConditions : null, ...this.#networkAgents);

package/front_end/entrypoint_template.html

@@ -14,11 +14,7 @@
     }
   }
 </style>
-<meta
-  http-equiv="Content-Security-Policy"
-  content="default-src 'self' devtools: data:; style-src 'self' 'unsafe-inline' devtools:; object-src 'none'; script-src
-  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data:; frame-src * data:; connect-src data:
-  https://chromeuxreport.googleapis.com 'self' devtools:;">
+<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' https://chrome-devtools-frontend.appspot.com">
 <meta name="referrer" content="no-referrer">
 <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
 <link href="./application_tokens.css" rel="stylesheet">

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -707,12 +707,24 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // We select the default agent based on the open panels if
   // there isn't any active conversation.
   #selectDefaultAgentIfNeeded(): void {
+    // We don't change the current agent when there is a message in flight.
+    if (this.#isLoading) {
+      return;
+    }
+
     // If there already is an agent and if it is not empty,
-    // we don't automatically change the agent. In addition to this,
-    // we don't change the current agent when there is a message in flight.
-    if ((this.#conversation && !this.#conversation.isEmpty) || this.#isLoading) {
+    // we don't automatically change the agent.
+    if (this.#conversation && !this.#conversation.isEmpty) {
+      // If the context selection agent is enabled,
+      // we update the context of the current agent.
+      const context = this.#getConversationContext(this.#getDefaultConversationType());
+      if (context && isAiAssistanceContextSelectionAgentEnabled()) {
+        this.#conversation?.setContext(context);
+        this.requestUpdate();
+      }
       return;
     }
+
     const targetConversationType = this.#getDefaultConversationType();
     if (this.#conversation?.type === targetConversationType) {
       // The above if makes sure even if we have an active agent it's empty

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -221,6 +221,7 @@ export interface RatingViewInput {
 export interface ActionViewInput {
   onReportClick: () => void;
   onCopyResponseClick: () => void;
+  showActions: boolean;
 }
 
 export interface SuggestionViewInput {
@@ -330,7 +331,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
         },
       )}
       ${renderError(message)}
-      ${input.isLastMessage && !input.isLoading ? renderActions(input, output) : Lit.nothing}
+      ${input.showActions ? renderActions(input, output) : Lit.nothing}
     </section>
   `, target);
   // clang-format on
@@ -812,8 +813,9 @@ export class ChatMessage extends UI.Widget.Widget {
           onInputChange: this.#handleInputChange.bind(this),
           isSubmitButtonDisabled: this.#isSubmitButtonDisabled,
           // Props for actions logic
+          showActions: !(this.isLastMessage && this.isLoading),
           showRateButtons: this.message.entity === ChatMessageEntity.MODEL && !!this.message.rpcId,
-          suggestions: (this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
+          suggestions: (this.isLastMessage && this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
                         this.message.parts.at(-1)?.type === 'answer') ?
               (this.message.parts.at(-1) as AnswerPart).suggestions :
               undefined,

package/front_end/panels/autofill/AutofillView.ts

@@ -228,14 +228,12 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
           <div class="top-left-corner">
             <devtools-checkbox
                 ${bindToSetting(input.showTestAddressesInAutofillMenuSetting)}
-                title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
-                jslog=${VisualLogging.toggle(input.showTestAddressesInAutofillMenuSetting.name).track({ change: true })}>
+                title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
               ${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
             </devtools-checkbox>
             <devtools-checkbox
                 ${bindToSetting(input.autoOpenViewSetting)}
-                title=${i18nString(UIStrings.autoShowTooltip)}
-                jslog=${VisualLogging.toggle(input.autoOpenViewSetting.name).track({ change: true })}>
+                title=${i18nString(UIStrings.autoShowTooltip)}>
               ${i18nString(UIStrings.autoShow)}
             </devtools-checkbox>
             <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
@@ -267,16 +265,14 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
               <div class="label-container">
                 <devtools-checkbox
                     ${bindToSetting(input.showTestAddressesInAutofillMenuSetting)}
-                    title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
-                    jslog=${VisualLogging.toggle(input.showTestAddressesInAutofillMenuSetting.name).track({ change: true })}>
+                    title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
                   ${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
                 </devtools-checkbox>
               </div>
               <div class="label-container">
                 <devtools-checkbox
                     ${bindToSetting(input.autoOpenViewSetting)}
-                    title=${i18nString(UIStrings.autoShowTooltip)}
-                    jslog=${VisualLogging.toggle(input.autoOpenViewSetting.name).track({ change: true })}>
+                    title=${i18nString(UIStrings.autoShowTooltip)}>
                   ${i18nString(UIStrings.autoShow)}
                 </devtools-checkbox>
               </div>

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -23,6 +23,14 @@ const UIStringsNotTranslate = {
    * @description Text for teaser to generate code in Mac.
    */
   cmdItoGenerateCode: 'cmd+i to generate code',
+  /**
+   * @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.',
   /**
    * @description Aria label for teaser to generate code.
    */
@@ -109,6 +117,7 @@ export interface ViewInput {
   disclaimerTooltipId?: string;
   noLogging: boolean;
   onManageInSettingsTooltipClick: (event: Event) => void;
+  showDataUsageTeaser: boolean;
   // TODO(b/472268298): Remove ContextFlavor explicitly and pass required values
   panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
@@ -136,18 +145,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       }
       const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
                                                      lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
-      const toLearnHowYourDataIsBeingUsed = Host.Platform.isMac() ?
+      const toLearnHowYourDataIsBeingUsedScreenReaderOnly = Host.Platform.isMac() ?
           lockedString(UIStringsNotTranslate.pressCmdPeriodToLearnHowYourDataIsBeingUsed) :
           lockedString(UIStringsNotTranslate.pressCtrlPeriodToLearnHowYourDataIsBeingUsed);
+      const toLearnHowYourDataIsBeingUsedVisible = Host.Platform.isMac() ?
+          lockedString(UIStringsNotTranslate.cmdOneTimeDisclaimerToLearnHowYourDataIsBeingUsed) :
+          lockedString(UIStringsNotTranslate.ctrlOneTimeDisclaimerToLearnHowYourDataIsBeingUsed);
       const tooltipDisclaimerText = getTooltipDisclaimerText(input.noLogging, input.panel);
-      // TODO(b/472291834): Disclaimer icon should match the placeholder's color
+
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-trigger">
-        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}&nbsp;</span>
-        <div class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
-          ${toLearnHowYourDataIsBeingUsed}
-        </div>
-        <devtools-button
+        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}</span>
+        ${input.showDataUsageTeaser ?
+            html`<span aria-hidden="true">${'. ' + toLearnHowYourDataIsBeingUsedVisible}</span>` : nothing}
+        <span class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
+          ${toLearnHowYourDataIsBeingUsedScreenReaderOnly}
+        </span>
+        &nbsp;<devtools-button
           .data=${{
               title: lockedString(UIStringsNotTranslate.learnMoreAboutHowYourDataIsBeingUsed),
               size: Buttons.Button.Size.MICRO,
@@ -245,12 +259,13 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   readonly #view: View;
   #viewOutput: ViewOutput = {};
 
-  #displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
+  #displayState = AiCodeGenerationTeaserDisplayState.DISCOVERY;
   #disclaimerTooltipId?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
   #timerIntervalId?: number;
   #loadStartTime?: number;
+  static #showDataUsageTeaser = true;
 
   constructor(view?: View) {
     super();
@@ -268,6 +283,7 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),
           disclaimerTooltipId: this.#disclaimerTooltipId,
           noLogging: this.#noLogging,
+          showDataUsageTeaser: AiCodeGenerationTeaser.#showDataUsageTeaser,
           panel: this.#panel,
         },
         this.#viewOutput, this.contentElement);
@@ -286,6 +302,9 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     if (displayState === this.#displayState) {
       return;
     }
+    if (this.#displayState === AiCodeGenerationTeaserDisplayState.TRIGGER) {
+      AiCodeGenerationTeaser.#showDataUsageTeaser = false;
+    }
     this.#displayState = displayState;
     this.requestUpdate();
     if (this.#displayState === AiCodeGenerationTeaserDisplayState.LOADING) {

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -46,7 +46,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import * as ElementsComponents from './components/components.js';
-import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.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';
@@ -54,6 +54,7 @@ import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRender
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
 const {html, render} = Lit;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
@@ -263,9 +264,12 @@ type ComputedStyleData = {
 
 interface ComputedStyleWidgetInput {
   computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
-  toolbar: HTMLElement;
   hasMatches: boolean;
   computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
+  groupComputedStylesSetting: Common.Settings.Setting<boolean>;
+  onFilterChanged: (event: CustomEvent<string>) => void;
+  filterText: string;
 }
 
 type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
@@ -273,14 +277,30 @@ type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement)
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-    <div class="styles-sidebar-pane-toolbar">${input.toolbar}</div>
+    <style>${computedStyleWidgetStyles}</style>
+    <div class="styles-sidebar-pane-toolbar">
+      <devtools-toolbar class="styles-pane-toolbar" role="presentation">
+        <devtools-toolbar-input
+          type="filter"
+          autofocus
+          value=${input.filterText}
+          @change=${input.onFilterChanged}
+        ></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>
     <div class="computed-style-tree-outline-container">
       ${input.computedStylesTree}
     </div>
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
-    <div class="platform-fonts-widget-container">
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
-    </div>
+    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
   `, target);
   // clang-format on
 };
@@ -289,7 +309,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
-  input: UI.Toolbar.ToolbarInput;
   private filterRegex: RegExp|null;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
@@ -297,12 +316,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
   readonly #view: View;
-  private readonly toolbarElement: HTMLElement;
+  #filterText = '';
 
   constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
     super({useShadowDom: true});
     this.#view = DEFAULT_VIEW;
-    this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
@@ -321,23 +339,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.requestUpdate();
     });
 
-    this.toolbarElement = document.createElement('div');
-    this.toolbarElement.classList.add('hbox', 'styles-sidebar-pane-toolbar');
-    const toolbar = document.createElement('devtools-toolbar');
-    toolbar.classList.add('styles-pane-toolbar');
-    this.toolbarElement.appendChild(toolbar);
-
-    const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
-    filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
-    toolbar.appendToolbarItem(filterInput);
-    this.input = filterInput;
     this.filterRegex = null;
 
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        this.showInheritedComputedStylePropertiesSetting, undefined, i18nString(UIStrings.showAll)));
-    toolbar.appendToolbarItem(
-        new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting, undefined, i18nString(UIStrings.group)));
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
 
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -373,9 +376,12 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#view(
         {
           computedStylesTree: this.#computedStylesTree,
-          toolbar: this.toolbarElement,
           hasMatches,
           computedStyleModel: this.computedStyleModel,
+          showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
+          groupComputedStylesSetting: this.groupComputedStylesSetting,
+          onFilterChanged: this.onFilterChanged.bind(this),
+          filterText: this.#filterText,
         },
         null, this.contentElement);
   }
@@ -628,13 +634,14 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return result;
   }
 
-  private async onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): Promise<void> {
+  private async onFilterChanged(event: CustomEvent<string>): Promise<void> {
+    this.#filterText = event.detail;
     await this.filterComputedStyles(
-        event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null);
+        event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null);
 
-    if (event.data && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
+    if (event.detail && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(
-          UIStrings.filterUpdateAriaText, {PH1: event.data, PH2: this.#computedStylesTree.data.tree.length}));
+          UIStrings.filterUpdateAriaText, {PH1: event.detail, PH2: this.#computedStylesTree.data.tree.length}));
     }
   }
 
@@ -646,6 +653,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return this.filterAlphabeticalList();
   }
 
+  setFilterInput(text: string): void {
+    this.#filterText = text;
+    this.requestUpdate();
+  }
+
   private nodeFilter(node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>): boolean {
     const regex = this.filterRegex;
     const data = node.treeNodeData;

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -106,7 +106,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         jslog=${VisualLogging.pane('element-states')}>
       <div class="page-state-checkbox">
         <devtools-checkbox class="small" title=${i18nString(UIStrings.emulatesAFocusedPage)}
-            jslog=${VisualLogging.toggle('emulate-page-focus').track({change: true})} ${bindToSetting('emulate-page-focus')}>${
+            ${bindToSetting('emulate-page-focus')}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
             @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}