chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

package/front_end/models/persistence/IsolatedFileSystemManager.ts

@@ -35,6 +35,7 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
   private readonly fileSystemsLoadedPromise: Promise<IsolatedFileSystem[]>;
   readonly #settings: Common.Settings.Settings;
   readonly #console: Common.Console.Console;
+  readonly #eventDescriptors: Common.EventTarget.EventDescriptor[];
   constructor(settings: Common.Settings.Settings, console: Common.Console.Console) {
     super();
     this.#settings = settings;
@@ -44,20 +45,22 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     this.callbacks = new Map();
     this.progresses = new Map();
 
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this);
+    this.#eventDescriptors = [
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this),
+    ];
 
     // Initialize exclude pattern settings
     const defaultCommonExcludedFolders = [
@@ -101,20 +104,7 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
 
   // TODO(crbug.com/542394587): Should be `Symbol.dispsoe`
   dispose(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemRemoved, this.onFileSystemRemoved, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemAdded, this.onFileSystemAdded, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.FileSystemFilesChangedAddedRemoved, this.onFileSystemFilesChanged, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingTotalWorkCalculated, this.onIndexingTotalWorkCalculated, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingWorked, this.onIndexingWorked, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.IndexingDone, this.onIndexingDone, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.SearchCompleted, this.onSearchCompleted, this);
+    Common.EventTarget.removeEventListeners(this.#eventDescriptors);
   }
 
   static instance(opts: {
@@ -141,8 +131,9 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
 
   private requestFileSystems(): Promise<IsolatedFileSystem[]> {
     const {resolve, promise} = Promise.withResolvers<IsolatedFileSystem[]>();
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+    const descriptor = Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.FileSystemsLoaded, onFileSystemsLoaded, this);
+    this.#eventDescriptors.push(descriptor);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.requestFileSystems();
     return promise;
 

package/front_end/models/trace/ModelImpl.ts

@@ -51,6 +51,11 @@ export class Model extends EventTarget {
     this.#processor = new TraceProcessor(handlers, this.#config);
   }
 
+  updateConfiguration(config: Types.Configuration.Configuration): void {
+    this.#config = config;
+    this.#processor.updateConfiguration(config);
+  }
+
   /**
    * Parses an array of trace events into a structured object containing all the
    * information parsed by the trace handlers.

package/front_end/models/trace/Processor.ts

@@ -94,6 +94,11 @@ export class TraceProcessor extends EventTarget {
     }
   }
 
+  updateConfiguration(config: Types.Configuration.Configuration): void {
+    this.#modelConfiguration = config;
+    this.#passConfigToHandlers();
+  }
+
   /**
    * When the user passes in a set of handlers, we want to ensure that we have all
    * the required handlers. Handlers can depend on other handlers, so if the user

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -141,6 +141,11 @@ export function reset(): void {
   clsWindowID = -1;
 }
 
+let enableSoftNavigation = true;
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  enableSoftNavigation = userConfig.enableSoftNavigation;
+}
+
 export function handleEvent(event: Types.Events.Event): void {
   if (Types.Events.isLayoutShift(event) && !event.args.data?.had_recent_input) {
     layoutShiftEvents.push(event);
@@ -290,8 +295,9 @@ export async function finalize(): Promise<void> {
 
 async function buildLayoutShiftsClusters(): Promise<void> {
   const {navigationsByFrameId, mainFrameId, traceBounds, softNavigationsById} = metaHandlerData();
+  const softNavigations = enableSoftNavigation ? Array.from(softNavigationsById.values()) : [];
   const navigations: Types.Events.Event[] =
-      [...(navigationsByFrameId.get(mainFrameId) || []), ...softNavigationsById.values()].sort((a, b) => a.ts - b.ts);
+      [...(navigationsByFrameId.get(mainFrameId) || []), ...softNavigations].sort((a, b) => a.ts - b.ts);
   if (layoutShiftEvents.length === 0) {
     return;
   }

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -8,7 +8,11 @@ import * as Types from '../types/types.js';
 
 import type {FinalizeOptions} from './types.js';
 
-let config: {showAllEvents: boolean};
+let config: Types.Configuration.Configuration = Types.Configuration.defaults();
+
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  config = userConfig;
+}
 
 // We track the renderer processes we see in each frame on the way through the trace.
 let rendererProcessesByFrameId: FrameProcessData = new Map();
@@ -328,7 +332,7 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
-  if (Types.Events.isSoftNavigationStart(event)) {
+  if (config.enableSoftNavigation && Types.Events.isSoftNavigationStart(event)) {
     softNavigationsById.set(event.args.context.performanceTimelineNavigationId, event);
   }
 
@@ -359,7 +363,7 @@ export function handleEvent(event: Types.Events.Event): void {
 }
 
 export async function finalize(options?: FinalizeOptions): Promise<void> {
-  config = {showAllEvents: Boolean(options?.showAllEvents)};
+  config.showAllEvents = Boolean(options?.showAllEvents);
 
   // We try to set the minimum time by finding the event with the smallest
   // timestamp. However, if we also got a timestamp from the
@@ -476,7 +480,7 @@ export async function finalize(options?: FinalizeOptions): Promise<void> {
 }
 
 export interface MetaHandlerData {
-  config: {showAllEvents: boolean};
+  config: Types.Configuration.Configuration;
   traceIsGeneric: boolean;
   traceBounds: Types.Timing.TraceWindowMicro;
   browserProcessId: Types.Events.ProcessID;

package/front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -53,6 +53,11 @@ export function reset(): void {
   metaCharsetCheckEventsArray = [];
 }
 
+let enableSoftNavigation = true;
+export function handleUserConfig(userConfig: Types.Configuration.Configuration): void {
+  enableSoftNavigation = userConfig.enableSoftNavigation;
+}
+
 let pageLoadEventsArray: Types.Events.PageLoadEvent[] = [];
 
 // Once we've found the LCP events in the trace we want to fetch their DOM Node
@@ -74,6 +79,12 @@ export function handleEvent(event: Types.Events.Event): void {
   if (!Types.Events.eventIsPageLoadEvent(event)) {
     return;
   }
+  if (!enableSoftNavigation &&
+      (Types.Events.isSoftNavigationStart(event) ||
+       event.name === Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION ||
+       Types.Events.isSoftFirstContentfulPaint(event))) {
+    return;
+  }
   pageLoadEventsArray.push(event);
 
   // A soft nav entry includes the Soft FCP details but we want to process both

package/front_end/models/workspace/FileManager.ts

@@ -15,14 +15,21 @@ export interface SaveCallbackParam {
 export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #saveCallbacks = new Map<
       Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, (arg0: SaveCallbackParam|null) => void>();
+  readonly #eventDescriptors: Common.EventTarget.EventDescriptor[];
   constructor() {
     super();
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.SavedURL, this.savedURL, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.CanceledSaveURL, this.#canceledSavedURL, this);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.AppendedToURL, this.appendedToURL, this);
+    this.#eventDescriptors = [
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.SavedURL, this.savedURL, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.CanceledSaveURL, this.#canceledSavedURL, this),
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+          Host.InspectorFrontendHostAPI.Events.AppendedToURL, this.appendedToURL, this),
+    ];
+  }
+
+  dispose(): void {
+    Common.EventTarget.removeEventListeners(this.#eventDescriptors);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): FileManager {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -594,7 +594,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #conversationSummary?: AiAssistanceModel.ConversationSummary.ConversationSummary;
   #viewOutput: PanelViewOutput = {};
   #serverSideLoggingEnabled = isAiAssistanceServerSideLoggingEnabled();
-  #aiAssistanceEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #aiAssistanceEnabledSetting: AiAssistanceModel.AiSetting.AiSetting<boolean>;
   #changeManager = new AiAssistanceModel.ChangeManager.ChangeManager();
   #mutex = new Common.Mutex.Mutex();
 
@@ -860,13 +860,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
-  #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
-    try {
-      return Common.Settings.Settings.instance().moduleSetting('ai-assistance-enabled') as
-          Common.Settings.Setting<boolean>;
-    } catch {
-      return;
-    }
+  #getAiAssistanceEnabledSetting(): AiAssistanceModel.AiSetting.AiSetting<boolean> {
+    return new AiAssistanceModel.AiSetting.AiSetting(
+        AiAssistanceModel.AiUtils.aiAssistanceEnabledSettingDescriptor,
+        Host.AidaClient.HostConfigTracker.instance(),
+        Common.Settings.Settings.instance(),
+    );
   }
 
   static async instance(opts: {
@@ -1061,7 +1060,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().addEventListener(
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
-    this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
+    this.#aiAssistanceEnabledSetting.addEventListener(AiAssistanceModel.AiSetting.Events.CHANGED, this.requestUpdate,
+                                                      this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
     const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
@@ -1107,7 +1107,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     super.willHide();
     AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().removeEventListener(
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
-    this.#aiAssistanceEnabledSetting?.removeChangeListener(this.requestUpdate, this);
+    this.#aiAssistanceEnabledSetting.removeEventListener(AiAssistanceModel.AiSetting.Events.CHANGED, this.requestUpdate,
+                                                         this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
     this.#toggleSearchElementAction?.removeEventListener(

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -4,9 +4,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 
 import type * as AiAssistance from './ai_assistance.js';
 
@@ -50,21 +51,6 @@ const UIStrings = {
    * @description Text of a context menu item to redirect to the Gemini panel with the current context.
    */
   debugWithGemini: 'Debug with Gemini',
-  /**
-   * @description Message shown to the user if the DevTools locale is not
-   * supported.
-   */
-  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
-  /**
-   * @description Message shown to the user if the user's region is not
-   * supported.
-   */
-  geoRestricted: 'This feature is unavailable in your region.',
-  /**
-   * @description Message shown to the user if the enterprise policy does
-   * not allow this feature.
-   */
-  policyRestricted: 'This setting is managed by your administrator.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/ai_assistance-meta.ts', UIStrings);
@@ -76,13 +62,6 @@ function i18nAiBrandedString(gemini: string, assistance: string) {
   return () => Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled ? i18nString(gemini) : i18nString(assistance);
 }
 
-const setting = 'ai-assistance-enabled';
-
-function isLocaleRestricted(): boolean {
-  const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-  return !devtoolsLocale.locale.startsWith('en-');
-}
-
 function isGeoRestricted(config?: Root.Runtime.HostConfig): boolean {
   return config?.aidaAvailability?.blockedByGeo === true;
 }
@@ -140,30 +119,9 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
-Common.Settings.registerSettingExtension({
+SettingUIRegistration.SettingUIRegistration.register(AiAssistanceModel.AiUtils.aiAssistanceEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.AI,
-  settingName: setting,
-  settingType: Common.Settings.SettingType.BOOLEAN,
   title: i18nAiBrandedString(UIStrings.enableGemini, UIStrings.enableAiAssistance),
-  defaultValue: false,
-  reloadRequired: false,
-  condition: isAnyFeatureAvailable,
-  disabledCondition: config => {
-    const reasons: Platform.UIString.LocalizedString[] = [];
-    if (isGeoRestricted(config)) {
-      reasons.push(i18nString(UIStrings.geoRestricted));
-    }
-    if (isPolicyRestricted(config)) {
-      reasons.push(i18nString(UIStrings.policyRestricted));
-    }
-    if (isLocaleRestricted()) {
-      reasons.push(i18nString(UIStrings.wrongLocale));
-    }
-    if (reasons.length > 0) {
-      return {disabled: true, reasons};
-    }
-    return {disabled: false};
-  },
 });
 
 UI.ActionRegistration.registerActionExtension({

package/front_end/panels/application/BackgroundServiceView.ts

@@ -156,7 +156,8 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   private readonly splitWidget: UI.SplitWidget.SplitWidget;
   private readonly dataGrid: DataGrid.DataGrid.DataGridImpl<EventData>;
   private readonly previewPanel: UI.Widget.VBox;
-  private selectedEventNode: EventDataNode|null;
+  #isRecording = false;
+  #selectedEventNode: EventDataNode|null = null;
   private preview: UI.Widget.Widget|null;
 
   static getUIString(serviceName: string): string {
@@ -214,7 +215,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
 
     this.toolbar = this.contentElement.createChild('devtools-toolbar', 'background-service-toolbar');
     this.toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    void this.setupToolbar();
+    this.setupToolbar();
 
     /**
      * This will contain the DataGrid for displaying events, and a panel at the bottom for showing
@@ -228,15 +229,13 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     this.previewPanel = new UI.Widget.VBox();
     this.previewPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
 
-    this.selectedEventNode = null;
-
     this.preview = null;
 
     this.splitWidget.setMainWidget(this.dataGrid.asWidget());
     this.splitWidget.setSidebarWidget(this.previewPanel);
     this.splitWidget.hideMain();
 
-    this.showPreview(null);
+    this.performUpdate();
   }
 
   getDataGrid(): DataGrid.DataGrid.DataGridImpl<EventData> {
@@ -246,7 +245,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   /**
    * Creates the toolbar UI element.
    */
-  private async setupToolbar(): Promise<void> {
+  private setupToolbar(): void {
     this.toolbar.wrappable = true;
     this.recordButton = (UI.Toolbar.Toolbar.createActionButton(this.recordAction) as UI.Toolbar.ToolbarToggle);
     this.recordButton.toggleOnClick(false);
@@ -264,7 +263,6 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     this.saveButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
       void this.saveToFile();
     });
-    this.saveButton.setEnabled(false);
     this.toolbar.appendToolbarItem(this.saveButton);
 
     this.toolbar.appendSeparator();
@@ -295,18 +293,17 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Clears the grid and panel.
    */
   private clearView(): void {
-    this.selectedEventNode = null;
+    this.#selectedEventNode = null;
     this.dataGrid.rootNode().removeChildren();
     this.splitWidget.hideMain();
-    this.saveButton.setEnabled(false);
-    this.showPreview(null);
+    this.performUpdate();
   }
 
   /**
    * Called when the `Toggle Record` button is clicked.
    */
   toggleRecording(): void {
-    const isRecording = !this.recordButton.isToggled();
+    const isRecording = !this.#isRecording;
     this.model.setRecording(isRecording, this.serviceName);
     const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
 
@@ -331,19 +328,12 @@ export class BackgroundServiceView extends UI.Widget.VBox {
       return;
     }
 
-    if (state.isRecording === this.recordButton.isToggled()) {
+    if (state.isRecording === this.#isRecording) {
       return;
     }
 
-    this.recordButton.setToggled(state.isRecording);
-    this.updateRecordButtonTooltip();
-    this.showPreview(this.selectedEventNode);
-  }
-
-  private updateRecordButtonTooltip(): void {
-    const buttonTooltip = this.recordButton.isToggled() ? i18nString(UIStrings.stopRecordingEvents) :
-                                                          i18nString(UIStrings.startRecordingEvents);
-    this.recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
+    this.#isRecording = state.isRecording;
+    this.performUpdate();
   }
 
   private onEventReceived({
@@ -380,8 +370,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     }
 
     if (this.dataGrid.rootNode().children.length === 1) {
-      this.saveButton.setEnabled(true);
-      this.showPreview(this.selectedEventNode);
+      this.performUpdate();
     }
   }
 
@@ -401,12 +390,31 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     });
     dataGrid.setStriped(true);
 
-    dataGrid.addEventListener(
-        DataGrid.DataGrid.Events.SELECTED_NODE, event => this.showPreview((event.data as EventDataNode)));
+    dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, event => {
+      this.#selectedEventNode = event.data as EventDataNode;
+      this.performUpdate();
+    });
 
     return dataGrid;
   }
 
+  override performUpdate(): void {
+    this.#updateToolbar();
+    this.#updatePreview();
+  }
+
+  #updateToolbar(): void {
+    if (this.recordButton) {
+      this.recordButton.setToggled(this.#isRecording);
+      const buttonTooltip =
+          this.#isRecording ? i18nString(UIStrings.stopRecordingEvents) : i18nString(UIStrings.startRecordingEvents);
+      this.recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
+    }
+    if (this.saveButton) {
+      this.saveButton.setEnabled(this.dataGrid.rootNode().children.length > 0);
+    }
+  }
+
   /**
    * Creates the data object to pass to the DataGrid Node.
    */
@@ -475,19 +483,13 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     return url as Platform.DevToolsPath.UrlString;
   }
 
-  private showPreview(dataNode: EventDataNode|null): void {
-    if (this.selectedEventNode && this.selectedEventNode === dataNode) {
-      return;
-    }
-
-    this.selectedEventNode = dataNode;
-
+  #updatePreview(): void {
     if (this.preview) {
       this.preview.detach();
     }
 
-    if (this.selectedEventNode) {
-      this.preview = this.selectedEventNode.createPreview();
+    if (this.#selectedEventNode) {
+      this.preview = this.#selectedEventNode.createPreview();
       this.preview.show(this.previewPanel.contentElement);
       return;
     }
@@ -496,7 +498,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     if (this.dataGrid.rootNode().children.length) {
       emptyWidget = new UI.EmptyWidget.EmptyWidget(
           i18nString(UIStrings.noEventSelected), i18nString(UIStrings.selectAnEventToViewMetadata));
-    } else if (this.recordButton.isToggled()) {
+    } else if (this.#isRecording) {
       // Inform users that we are recording/waiting for events.
       const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
       emptyWidget = new UI.EmptyWidget.EmptyWidget(
@@ -505,11 +507,11 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     } else {
       const recordShortcuts =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
-      emptyWidget = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.noRecording), i18nString(UIStrings.startRecordingToDebug, {
-            PH1: i18nString(UIStrings.startRecordingEvents),
-            PH2: recordShortcuts.title(),
-          }));
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noRecording),
+                                                   i18nString(UIStrings.startRecordingToDebug, {
+                                                     PH1: i18nString(UIStrings.startRecordingEvents),
+                                                     PH2: recordShortcuts ? recordShortcuts.title() : '',
+                                                   }));
       emptyWidget.link = this.createLearnMoreLink();
 
       const button = UI.UIUtils.createTextButton(

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -280,6 +280,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       },
     };
     this.#view(viewInput, viewOutput, this.contentElement);
+    this.doResize();
   }
 
   protected isAiButtonEnabled(): boolean {

package/front_end/panels/application/WebMCPView.ts

@@ -198,6 +198,14 @@ const UIStrings = {
    * @description Label for a list of tool flags or attributes
    */
   flags: 'Flags',
+  /**
+   * @description Text for the label of the tool description
+   */
+  description: 'Description',
+  /**
+   * @description Text for the label of the tool origin
+   */
+  origin: 'Origin',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -714,7 +722,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     } as ProtocolMonitor.JSONEditor.Command,
                   });
                 }
-              }}>Run tool</devtools-button>
+              }}>${i18nString(UIStrings.runTool)}</devtools-button>
           ` : nothing}
         </div>
       </devtools-split-view>
@@ -1124,9 +1132,9 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
   render(html`
     <style>${webMCPViewStyles}</style>
     <div class="tool-details-grid">
-      <div class="label">Name</div>
+      <div class="label">${i18nString(UIStrings.name)}</div>
       <div class="value source-code">${tool.name}</div>
-      <div class="label">Description</div>
+      <div class="label">${i18nString(UIStrings.description)}</div>
       <div class="value">${tool.description}</div>
       ${flags.length > 0 ? html`
       <div class="label">${i18nString(UIStrings.flags)}</div>
@@ -1137,7 +1145,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
       <div class="value">${Components.Linkifier.Linkifier.linkifyRevealable(tool.frame, tool.frame.displayName())}</div>
       ` : nothing}
       ${origin instanceof SDK.DOMModel.DOMNode ? html`
-      <div class="label">Origin</div>
+      <div class="label">${i18nString(UIStrings.origin)}</div>
       <div class="value tool-origin-container">
         <span
             class="node-text-container source-code tool-origin-node"
@@ -1161,7 +1169,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
            @click=${() => input.revealNode(origin)}
            ></devtools-button>
       </div>` : origin ? html`
-      <div class="label">Origin</div>
+      <div class="label">${i18nString(UIStrings.origin)}</div>
       <div class="value stack-trace">
         ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
                  {stackTrace: origin, options: { expandable: true}})}