chrome-devtools-frontend 1.0.1593959 → 1.0.1595925

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -693,7 +693,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           blockedByCrossOrigin: this.#conversation.isBlockedByOrigin,
           isLoading: this.#isLoading,
           messages: this.#messages,
-          selectedContext: this.#conversation.selectedContext ?? null,
+          /**
+           * We pass either the selected context with isContextSelected=true
+           * to make sure the pill is show with normal styling and a remove button.
+           * Or we pass the panels default context with isContextSelected=false
+           * to display a placeholder pill with neutral styling and an add button.
+           */
+          context:
+              this.#conversation.selectedContext ?? this.#getConversationContext(this.#getDefaultConversationType()),
+          isContextSelected: Boolean(this.#conversation.selectedContext),
           conversationType: this.#conversation.type,
           isReadOnly: this.#conversation.isReadOnly ?? false,
           changeSummary: this.#getChangeSummary(),
@@ -857,17 +865,20 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectDefaultAgentIfNeeded(): void {
     // We don't change the current agent when there is a message in flight.
     if (this.#isLoading) {
+      this.requestUpdate();
       return;
     }
 
     // If there already is an agent and if it is not empty,
     // we don't automatically change the agent.
     if (this.#conversation && !this.#conversation.isEmpty) {
+      this.requestUpdate();
       return;
     }
 
     const targetConversationType = this.#getDefaultConversationType();
     if (this.#conversation?.type === targetConversationType) {
+      this.requestUpdate();
       // The above if makes sure even if we have an active agent it's empty
       // So we can just reuse it
       return;

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

@@ -134,7 +134,8 @@ export interface ViewInput {
   blockedByCrossOrigin: boolean;
   isTextInputDisabled: boolean;
   inputPlaceholder: Platform.UIString.LocalizedString;
-  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  isContextSelected: boolean;
   inspectElementToggled: boolean;
   disclaimerText: string;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
@@ -183,7 +184,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
 export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
   const chatInputContainerCls = Lit.Directives.classMap({
     'chat-input-container': true,
-    'single-line-layout': !input.selectedContext && !input.onContextAdd,
+    'single-line-layout': !input.context,
     disabled: input.isTextInputDisabled,
   });
 
@@ -300,7 +301,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
             ></textarea>
             <div class="chat-input-actions">
               <div class="chat-input-actions-left">
-                ${input.selectedContext ?
+                ${input.context ?
                   html`
                     <div class="select-element">
                       ${input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING ?
@@ -321,29 +322,33 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                           ></devtools-button>`
                         : Lit.nothing}
                       <div
-                        class="resource-link"
+                        class=${Lit.Directives.classMap({
+                          'resource-link': true,
+                          disabled: !input.isContextSelected,
+                        })}
                       >
                         ${
-                          input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
+                          input.context instanceof AiAssistanceModel.StylingAgent.NodeContext ?
                             html`
                               <devtools-widget
                                 class="title"
                                 .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-                                  node: input.selectedContext.getItem(),
+                                  node: input.context.getItem(),
                                   options: {
-                                    hiddenClassList: input.selectedContext.getItem().classNames().filter(
+                                    disabled: !input.isContextSelected,
+                                    hiddenClassList: input.context.getItem().classNames().filter(
                                       className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
                                     ariaDescription: i18nString(UIStrings.revealContextDescription),
                                   },
                                 })}
                               ></devtools-widget>` :
                             html`
-                          ${input.selectedContext instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
-                            PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem()) :
-                            input.selectedContext instanceof AiAssistanceModel.FileAgent.FileContext ?
-                            PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem()) :
-                            input.selectedContext instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
-                            html`<devtools-icon name="performance" title="Performance"></devtools-icon>` :
+                          ${input.context instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
+                            PanelUtils.PanelUtils.getIconForNetworkRequest(input.context.getItem()) :
+                            input.context instanceof AiAssistanceModel.FileAgent.FileContext ?
+                            PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
+                            input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
+                            html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
                             Lit.nothing}
                             <span 
                               role="button"
@@ -356,31 +361,31 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                                 }
                               }}
                               aria-description=${i18nString(UIStrings.revealContextDescription)}
-                            >${input.selectedContext.getTitle()}</span>`
+                            >${input.context.getTitle()}</span>`
                         }
-                        ${input.onContextRemoved ? html`
+                        ${input.isContextSelected && input.onContextRemoved ? html`
                                   <devtools-button
-                                    title=${getContextRemoveLabel(input.selectedContext)}
-                                    aria-label=${getContextRemoveLabel(input.selectedContext)}
+                                    title=${getContextRemoveLabel(input.context)}
+                                    aria-label=${getContextRemoveLabel(input.context)}
                                     class="remove-context"
                                     .iconName=${'cross'}
                                     .size=${Buttons.Button.Size.MICRO}
                                     .jslogContext=${'context-removed'}
                                     .variant=${Buttons.Button.Variant.ICON}
                                     @click=${input.onContextRemoved}></devtools-button>` : Lit.nothing}
+                      ${!input.isContextSelected && input.onContextAdd ? html`
+                                    <devtools-button
+                                      title=${lockedString(UIStringsNotTranslate.addContext)}
+                                      aria-label=${lockedString(UIStringsNotTranslate.addContext)}
+                                      class="add-context"
+                                      .iconName=${'plus'}
+                                      .size=${Buttons.Button.Size.MICRO}
+                                      .jslogContext=${'context-added'}
+                                      .variant=${Buttons.Button.Variant.ICON}
+                                      @click=${input.onContextAdd}></devtools-button>` : Lit.nothing}
                       </div>
                     </div>`
-                  :
-                    input.onContextAdd ? html`
-                                  <devtools-button
-                                    title=${lockedString(UIStringsNotTranslate.addContext)}
-                                    aria-label=${lockedString(UIStringsNotTranslate.addContext)}
-                                    class="add-context"
-                                    .iconName=${'plus'}
-                                    .size=${Buttons.Button.Size.SMALL}
-                                    .jslogContext=${'context-added'}
-                                    .variant=${Buttons.Button.Variant.ICON}
-                                    @click=${input.onContextAdd}></devtools-button>` : Lit.nothing}
+                  : Lit.nothing}
               </div>
               <div class="chat-input-actions-right">
                 <div class="chat-input-disclaimer-container">
@@ -488,7 +493,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   blockedByCrossOrigin = false;
   isTextInputDisabled = false;
   inputPlaceholder = '' as Platform.UIString.LocalizedString;
-  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
+  context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
+  isContextSelected = false;
   inspectElementToggled = false;
   disclaimerText = '';
   conversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
@@ -675,7 +681,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           isLoading: this.isLoading,
           blockedByCrossOrigin: this.blockedByCrossOrigin,
           isTextInputDisabled: this.isTextInputDisabled,
-          selectedContext: this.selectedContext,
+          context: this.context,
+          isContextSelected: this.isContextSelected,
           inspectElementToggled: this.inspectElementToggled,
           isTextInputEmpty: this.#isTextInputEmpty(),
           disclaimerText: this.disclaimerText,

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

@@ -65,7 +65,8 @@ export interface Props {
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
-  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
+  isContextSelected: boolean;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountGivenName'>;
@@ -178,7 +179,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             isTextInputDisabled: input.isTextInputDisabled,
             inputPlaceholder: input.inputPlaceholder,
             disclaimerText: input.disclaimerText,
-            selectedContext: input.selectedContext,
+            context: input.context,
+            isContextSelected: input.isContextSelected,
             inspectElementToggled: input.inspectElementToggled,
             multimodalInputEnabled: input.multimodalInputEnabled ?? false,
             conversationType: input.conversationType,

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

@@ -117,13 +117,16 @@ export const DEFAULT_VIEW = (
   const stepsOutput = steps.length > 0 ? html`
     <div class="steps-container">
       ${steps.map((step, index) => html`
-        <div class="step-wrapper">
-          ${renderStep({
-            step,
-            isLoading: input.isLoading,
-            markdownRenderer: input.markdownRenderer,
-            isLast: index === steps.length - 1
-          })}
+        <div class="walkthrough-step">
+          <span class="step-number">${index+1}</span>
+          <div class="step-wrapper">
+            ${renderStep({
+              step,
+              isLoading: input.isLoading,
+              markdownRenderer: input.markdownRenderer,
+              isLast: index === steps.length - 1
+            })}
+          </div>
         </div>
       `)}
     </div>

package/front_end/panels/ai_assistance/components/chatInput.css

@@ -239,12 +239,15 @@
 
     & .title {
       vertical-align: middle;
+      /* Fixed italic text getting cut off */
+      padding-right: var(--sys-size-2);
       font: var(--sys-typescale-body5-regular);
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
-    & .remove-context {
+    & .remove-context,
+    & .add-context {
       vertical-align: middle;
     }
 
@@ -260,6 +263,28 @@
       min-height: var(--sys-size-7);
     }
 
+    &.disabled {
+      border-style: dashed;
+      border-color: var(--sys-color-neutral-outline);
+      color: var(--sys-color-on-surface-light);
+
+      devtools-icon,
+      devtools-file-source-icon {
+        /* Override devtools-file-source-icon */
+        --override-file-source-icon-color: var(
+          --sys-color-on-surface-light-graphics
+        );
+        /* Some icons set their style attribute and we need to override it */
+        /* stylelint-disable-next-line declaration-no-important */
+        color: var(--sys-color-on-surface-light-graphics) !important;
+      }
+
+      .title {
+        color: var(--sys-color-on-surface-light);
+        font-style: italic;
+      }
+    }
+
     /*
       CSS styling for `network-override-marker` is similar to
       https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/network/networkLogView.css;l=379.

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -38,6 +38,21 @@
     gap: var(--sys-size-6);
   }
 
+  .walkthrough-step {
+    display: flex;
+    gap: var(--sys-size-6);
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .step-number {
+      font: var(--sys-typescale-body4-regular);
+      color: var(--sys-color-on-surface-subtle);
+      padding-top:var(--sys-size-4);
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
   .step-wrapper {
     display: flex;
     flex-direction: column;

package/front_end/panels/application/StorageView.ts

@@ -510,8 +510,14 @@ export class StorageView extends UI.Widget.VBox {
     const quotaAsString = i18n.ByteUtilities.bytesToString(response.quota);
     const usageAsString = i18n.ByteUtilities.bytesToString(response.usage);
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
-    const quota =
-        quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
+
+    let quota: string|HTMLElement = quotaAsString;
+    if (quotaOverridden) {
+      const element = document.createElement('b');
+      element.textContent = formattedQuotaAsString;
+      quota = element;
+    }
+
     const element = uiI18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
     this.quotaRow.appendChild(element);
     UI.Tooltip.Tooltip.install(

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

@@ -13,6 +13,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
+import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
@@ -21,7 +22,7 @@ import {Directives, html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
-import {ruleSetTagOrLocationShort} from './components/PreloadingString.js';
+import {capitalizedAction, ruleSetTagOrLocationShort} from './components/PreloadingString.js';
 import * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
@@ -362,6 +363,78 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
   }
 }
 
+/**
+ * Pure filtering function for preloading grid rows.
+ * Exported for testability.
+ */
+export function applyFilterText(filterText: string, rows: PreloadingComponents.PreloadingGrid.PreloadingGridRow[]):
+    PreloadingComponents.PreloadingGrid.PreloadingGridRow[] {
+  const trimmedFilter = filterText.trim();
+  if (trimmedFilter === '') {
+    return rows;
+  }
+
+  const FILTER_KEYS = ['url', 'action', 'status'] as const;
+  const parser = new TextUtils.TextUtils.FilterParser([...FILTER_KEYS]);
+  // The match is case-insensitive. We handle the matching with everything lower cased,
+  // both keywords and values.
+  const query = parser.parse(filterText.toLowerCase());
+
+  // Drop the last term if it is an incomplete filter key (e.g., "action:" with no value).
+  // FilterParser parses "action:" as plain text since KEY_VALUE_FILTER_REGEXP requires a value.
+  // This lets users type "url:foo action:" and still see results for "url:foo".
+  const lastTerm = query.at(-1);
+
+  // If the parse result is empty, the query only contains spaces.
+  if (!lastTerm) {
+    return rows;
+  }
+
+  const isKeyWithNoValue =
+      (lastTerm.key === undefined || lastTerm.key === null) && FILTER_KEYS.some(key => lastTerm.text === `${key}:`);
+  if (isKeyWithNoValue) {
+    query.pop();
+  }
+
+  if (query.length === 0) {
+    return rows;
+  }
+
+  return rows.filter(row => {
+    const attempt = row.pipeline.getOriginallyTriggered();
+    const url = attempt.key.url.toLowerCase();
+    const action = capitalizedAction(attempt.action).toLowerCase();
+    const status = PreloadingUIUtils.status(attempt.status).toLowerCase();
+
+    // Each term must match (AND logic between terms)
+    return query.every(term => {
+      if (term.text === undefined || term.text === null || term.text === '') {
+        return true;
+      }
+      const searchText = term.text.toLowerCase();
+
+      // The query is lowercased before parsing, so keys are already normalized.
+      const key = term.key;
+      switch (key) {
+        case 'url':
+          return url.includes(searchText);
+        case 'action':
+          return action.includes(searchText);
+        case 'status': {
+          // Support multiple status values separated by comma (e.g., "status:ready,success")
+          const statusValues = searchText.split(',');
+          return statusValues.some(v => status.includes(v));
+        }
+        case undefined:
+          // No key specified: search across all columns (URL, action, status)
+          return url.includes(searchText) || action.includes(searchText) || status.includes(searchText);
+        default:
+          return false;
+      }
+    });
+  });
+}
+
 export class PreloadingAttemptView extends UI.Widget.VBox {
   private model: SDK.PreloadingModel.PreloadingModel;
   // Note that we use id of (representative) preloading attempt while we show pipelines in grid.
@@ -374,6 +447,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
   private readonly preloadingDetails =
       new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
   private readonly ruleSetSelector: PreloadingRuleSetSelector;
+  private readonly textFilterUI: UI.Toolbar.ToolbarFilter;
   private clearButton: UI.Toolbar.ToolbarButton;
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
@@ -417,7 +491,19 @@ 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)
+    // Rule set dropdown first
+    this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
+    toolbar.appendToolbarItem(this.ruleSetSelector.item());
+
+    // Text filter second
+    this.textFilterUI = new UI.Toolbar.ToolbarFilter(undefined, 1, 1);
+    this.textFilterUI.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onTextFilterChanged, this);
+    toolbar.appendToolbarItem(this.textFilterUI);
+
+    // Separator between text filter and clear button
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSeparator());
+
+    // Clear button last (rightmost)
     this.clearButton =
         new UI.Toolbar.ToolbarButton('Clear speculative loads', 'clear', undefined, 'clear-speculative-loads');
     this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
@@ -428,14 +514,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
       }
 
       model.reset();
+      // Reset UI state
+      this.textFilterUI.setValue('');
       this.ruleSetSelector.select(null);
+      this.render();
     });
     toolbar.appendToolbarItem(this.clearButton);
 
-    // Rule set dropdown
-    this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
-    toolbar.appendToolbarItem(this.ruleSetSelector.item());
-
     this.preloadingGrid.onSelect = this.onPreloadingGridCellFocused.bind(this);
 
     const preloadingGridContainer = document.createElement('div');
@@ -491,6 +576,14 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     }
 
     this.ruleSetSelector.select(id);
+
+    // Reset text filter when navigating from Rules view to clear any existing filter
+    this.textFilterUI.setValue('');
+    this.render();
+  }
+
+  private onTextFilterChanged(): void {
+    this.render();
   }
 
   private updatePreloadingDetails(): void {
@@ -532,8 +625,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         statusCode,
       };
     });
-    this.preloadingGrid.rows = rows;
+
+    // Apply text filter
+    const filteredRows = applyFilterText(this.textFilterUI.valueWithoutSuggestion(), rows);
+
+    this.preloadingGrid.rows = filteredRows;
     this.preloadingGrid.pageURL = pageURL();
+    // Only show empty state when there are truly no speculations (not when filter has no matches)
     this.contentElement.classList.toggle('empty', rows.length === 0);
 
     this.updatePreloadingDetails();

package/front_end/panels/application/preloading/preloadingView.css

@@ -25,6 +25,10 @@
   button.toolbar-has-dropdown {
     margin: var(--sys-size-2) 0;
   }
+
+  .toolbar-filter {
+    max-width: var(--sys-size-29);
+  }
 }
 
 devtools-split-view {

package/front_end/panels/console/ConsoleView.ts

@@ -107,11 +107,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  groupSimilarMessagesInConsole: 'Group similar messages in console',
+  groupSimilarMessagesInConsole: 'Group similar messages',
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  showCorsErrorsInConsole: 'CORS errors in console',
   /**
    * @description Tooltip for the the console sidebar toggle in the Console panel. Command to
    * open/show the sidebar.

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

@@ -62,11 +62,11 @@ const UIStrings = {
    */
   timestamps: 'Timestamps',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
   showTimestamps: 'Show timestamps',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
   hideTimestamps: 'Hide timestamps',
   /**
@@ -88,19 +88,23 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  groupSimilarMessagesInConsole: 'Group similar messages in console',
+  groupSimilarMessages: 'Group similar messages',
   /**
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
-  doNotGroupSimilarMessagesIn: 'Do not group similar messages in console',
+  doNotGroupSimilarMessages: 'Don\'t group similar messages',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of a setting under the Console category in Settings
    */
-  showCorsErrorsInConsole: 'Show `CORS` errors in console',
+  corsErrorsInConsole: 'CORS errors in console',
   /**
-   * @description Title of a setting under the Console category that can be invoked through the Command Menu
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
+   */
+  showCorsErrorsInConsole: 'Show CORS errors in console',
+  /**
+   * @description Title of an option under the Console category that can be invoked through the Command Menu
    */
-  doNotShowCorsErrorsIn: 'Do not show `CORS` errors in console',
+  doNotShowCorsErrorsIn: 'Don\'t show CORS errors in console',
   /**
    * @description Title of a setting under the Console category in Settings
    */
@@ -137,7 +141,7 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
    * be shown for console warnings/errors.
    */
-  showConsoleInsightTeasers: 'Show AI summaries for console messages',
+  consoleInsightTeasers: 'AI summaries for console messages',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/console-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -342,25 +346,25 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
+  title: i18nLazyString(UIStrings.groupSimilarMessages),
   settingName: 'console-group-similar',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
   options: [
     {
       value: true,
-      title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
+      title: i18nLazyString(UIStrings.groupSimilarMessages),
     },
     {
       value: false,
-      title: i18nLazyString(UIStrings.doNotGroupSimilarMessagesIn),
+      title: i18nLazyString(UIStrings.doNotGroupSimilarMessages),
     },
   ],
 });
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
-  title: i18nLazyString(UIStrings.showCorsErrorsInConsole),
+  title: i18nLazyString(UIStrings.corsErrorsInConsole),
   settingName: 'console-shows-cors-errors',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
@@ -436,7 +440,7 @@ Common.Settings.registerSettingExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.showConsoleInsightTeasers),
+  title: i18nLazyString(UIStrings.consoleInsightTeasers),
   settingName: 'console-insight-teasers-enabled',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -353,13 +353,18 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     this.filterRegex = null;
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-    this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
-      const link = event.composedPath()[0];
-      if (link instanceof Element) {
-        return link;
-      }
-      return null;
-    }, () => this.#computedStyleModel ? this.#computedStyleModel.node : null);
+    this.imagePreviewPopover = new ImagePreviewPopover(
+        this.contentElement,
+        event => {
+          const link = event.composedPath()[0];
+          if (link instanceof Element) {
+            return link;
+          }
+          return null;
+        },
+        async () => {
+          return await Components.ImagePreview.loadPrecomputedFeatures(this.#computedStyleModel?.node);
+        });
 
     this.#updateView({hasMatches: true});
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -1556,7 +1556,7 @@ export class DOMNodeRevealer implements
         }
 
         if (resolvedNode) {
-          const opts: RevealAndSelectNodeOpts = {showPanel: true, focusNode: !omitFocus};
+          const opts: RevealAndSelectNodeOpts = omitFocus ? {showPanel: false} : {showPanel: true, focusNode: true};
           const promise = resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ?
               panel.revealAndSelectAdoptedStyleSheet(resolvedNode, opts) :
               panel.revealAndSelectNode(resolvedNode, opts);