chrome-devtools-frontend 1.0.1583146 → 1.0.1585664

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

@@ -10,9 +10,6 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
-import * as GreenDev from '../../../models/greendev/greendev.js';
-import * as Trace from '../../../models/trace/trace.js';
-import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -39,14 +36,6 @@ const UIStrings = {
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
-  /**
-   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
-   */
-  removeContext: 'Remove from context',
-  /**
-   * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
-   */
-  addContext: 'Add selected item as context',
 } as const;
 
 /*
@@ -93,6 +82,30 @@ const UIStringsNotTranslate = {
    * @description Message displayed in toast in case of any failures while uploading an image file as input.
    */
   uploadImageFailureMessage: 'Failed to upload image. Please try again.',
+  /**
+   * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
+   */
+  addContext: 'Add item for context',
+  /**
+   * @description Label added to the button that remove the currently selected element in AI Assistance panel.
+   */
+  removeContextElement: 'Remove element from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextRequest: 'Remove request from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextFile: 'Remove file from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextPerfInsight: 'Remove performance insight from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContext: 'Remove from context',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatInput.ts', UIStrings);
@@ -123,7 +136,6 @@ export interface ViewInput {
   inputPlaceholder: Platform.UIString.LocalizedString;
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
   inspectElementToggled: boolean;
-  additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
   disclaimerText: string;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
   multimodalInputEnabled: boolean;
@@ -151,22 +163,36 @@ export interface ViewInput {
 
 export type ViewOutput = undefined;
 
-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,
-                disabled: input.isTextInputDisabled,
-              });
-
-              const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
-                const classes = Lit.Directives.classMap({
-                  'chat-input-disclaimer': true,
-                  'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
-                });
-                // clang-format off
+function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationContext<unknown>):
+    Platform.UIString.LocalizedString {
+  if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
+    return lockedString(UIStringsNotTranslate.removeContextFile);
+  }
+  if (context instanceof AiAssistanceModel.StylingAgent.NodeContext) {
+    return lockedString(UIStringsNotTranslate.removeContextElement);
+  }
+  if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+    return lockedString(UIStringsNotTranslate.removeContextRequest);
+  }
+  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
+  }
+  return lockedString(UIStringsNotTranslate.removeContext);
+}
+
+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,
+    disabled: input.isTextInputDisabled,
+  });
+
+  const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
+    const classes = Lit.Directives.classMap({
+      'chat-input-disclaimer': true,
+      'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
+    });
+    // clang-format off
     return html`
       <div class=${classes}>
         <button
@@ -198,10 +224,10 @@ export const
         </div></devtools-tooltip>
       </div>
     `;
-                // clang-format on
-              };
+    // clang-format on
+  };
 
-              // clang-format off
+  // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatInputStyles}</style>
@@ -226,52 +252,6 @@ export const
       :
       html`
         <form class="input-form" @submit=${input.onSubmit}>
-          ${GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty') ?
-            html`
-              <ul class="floaty">
-                ${input.additionalFloatyContext.map(c => {
-                  return html`
-                    <li>
-                      <span class="context-item">
-                        ${c instanceof SDK.NetworkRequest.NetworkRequest ? html`${c.url()}` :
-                          c instanceof SDK.DOMModel.DOMNode ? html`
-                            <devtools-widget .widgetConfig=${
-                              UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: c})}
-                            ></devtools-widget>` :
-                          'insight' in c ? html`${c.insight.title}` :
-                          'event' in c && 'traceStartTime' in c ? html`
-                            ${c.event.name} @ ${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(Trace.Types.Timing.Micro(c.event.ts - c.traceStartTime))}` :
-                          Lit.nothing}
-                      </span>
-                      <devtools-button
-                        class="floaty-delete-button"
-                        @click=${(e: MouseEvent) => {
-                          e.preventDefault();
-                          UI.Floaty.onFloatyContextDelete(c);
-                        }}
-                        .data=${{
-                          variant: Buttons.Button.Variant.ICON,
-                          iconName: 'cross',
-                          title: 'Delete',
-                          size: Buttons.Button.Size.SMALL,
-                        } as Buttons.Button.ButtonData}
-                      ></devtools-button>
-                    </li>`;
-                })}
-                <li class="open-floaty">
-                  <devtools-button
-                    class="floaty-add-button"
-                    @click=${UI.Floaty.onFloatyOpen}
-                    .data=${{
-                      variant: Buttons.Button.Variant.ICON,
-                      iconName: 'select-element',
-                      title: 'Open context picker',
-                      size: Buttons.Button.Size.SMALL,
-                    } as Buttons.Button.ButtonData}
-                  ></devtools-button>
-                </li>
-              </ul>`
-            : Lit.nothing}
           <div class=${chatInputContainerCls}>
             ${(input.multimodalInputEnabled && input.imageInput && !input.isTextInputDisabled) ?
               html`
@@ -355,20 +335,20 @@ export const
                         }}
                         aria-description=${i18nString(UIStrings.revealContextDescription)}
                       >
-                        ${input.selectedContext.getItem() instanceof SDK.NetworkRequest.NetworkRequest ?
-                          PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem() as SDK.NetworkRequest.NetworkRequest) :
-                          input.selectedContext.getItem() instanceof Workspace.UISourceCode.UISourceCode ?
-                          PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem() as Workspace.UISourceCode.UISourceCode) :
-                          input.selectedContext.getItem() instanceof AiAssistanceModel.AIContext.AgentFocus ?
+                        ${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>` :
                           Lit.nothing}
                         <span class="title">
-                          ${input.selectedContext.getItem() instanceof SDK.DOMModel.DOMNode ?
+                          ${input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
                             html`
                               <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-                                node: input.selectedContext.getItem() as SDK.DOMModel.DOMNode,
+                                node: input.selectedContext.getItem(),
                                 options: {
-                                  hiddenClassList: (input.selectedContext.getItem() as SDK.DOMModel.DOMNode).classNames().filter(
+                                  hiddenClassList: input.selectedContext.getItem().classNames().filter(
                                     className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
                                   disabled: input.isTextInputDisabled,
                                 },
@@ -378,8 +358,8 @@ export const
                         </span>
                         ${input.onContextRemoved ? html`
                                   <devtools-button
-                                    title=${i18nString(UIStrings.removeContext)}
-                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    title=${getContextRemoveLabel(input.selectedContext)}
+                                    aria-label=${getContextRemoveLabel(input.selectedContext)}
                                     class="remove-context"
                                     .iconName=${'cross'}
                                     .size=${Buttons.Button.Size.MICRO}
@@ -391,8 +371,8 @@ export const
                   :
                     input.onContextAdd ? html`
                                   <devtools-button
-                                    title=${i18nString(UIStrings.addContext)}
-                                    aria-label=${i18nString(UIStrings.addContext)}
+                                    title=${lockedString(UIStringsNotTranslate.addContext)}
+                                    aria-label=${lockedString(UIStringsNotTranslate.addContext)}
                                     class="add-context"
                                     .iconName=${'plus'}
                                     .size=${Buttons.Button.Size.SMALL}
@@ -494,9 +474,9 @@ export const
     >
       ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
-  `, target);
-              // clang-format on
-            };
+  `, target,);
+  // clang-format on
+};
 
 /**
  * ChatInput is a presenter for the input area in the AI Assistance panel.
@@ -506,9 +486,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   blockedByCrossOrigin = false;
   isTextInputDisabled = false;
   inputPlaceholder = '' as Platform.UIString.LocalizedString;
-  selectedContext = null as AiAssistanceModel.AiAgent.ConversationContext<unknown>| null;
+  selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
   inspectElementToggled = false;
-  additionalFloatyContext = [] as UI.Floaty.FloatyContextSelection[];
   disclaimerText = '';
   conversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
   multimodalInputEnabled = false;
@@ -697,7 +676,6 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           selectedContext: this.selectedContext,
           inspectElementToggled: this.inspectElementToggled,
           isTextInputEmpty: this.#isTextInputEmpty(),
-          additionalFloatyContext: this.additionalFloatyContext,
           disclaimerText: this.disclaimerText,
           conversationType: this.conversationType,
           multimodalInputEnabled: this.multimodalInputEnabled,

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

@@ -76,7 +76,6 @@ export interface Props {
   disclaimerText: Platform.UIString.LocalizedString;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
-  additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
 }
 
 interface ChatWidgetInput extends Props {
@@ -171,7 +170,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             conversationType: input.conversationType,
             uploadImageInputEnabled: input.uploadImageInputEnabled ?? false,
             isReadOnly: input.isReadOnly,
-            additionalFloatyContext: input.additionalFloatyContext,
             onContextClick: input.onContextClick,
             onInspectElementClick: input.onInspectElementClick,
             onTextSubmit: input.onTextSubmit,
@@ -185,6 +183,19 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     `, target);
   // clang-format on
 };
+
+/**
+ * ChatView is a web component for historical reasons and generally should not
+ * exist because it barely has any presenter logic and it is definitely not
+ * re-usable as a custom element. Instead, the template from ChatView should be
+ * embdedded into the AiAssistancePanel (the sole host of chat interfaces) and
+ * the scroll handling logic should be implemented in view functions using refs
+ * or re-usable custom elements. Currently, the ChatView just combines the
+ * interfaces of ChatMessage and ChatInput presenters and passes most of the
+ * properties down to those presenters as-is.
+ *
+ * @deprecated
+ */
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #scrollTop?: number;

package/front_end/panels/application/FrameDetailsView.ts

@@ -272,7 +272,6 @@ interface FrameDetailsViewInput {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target: SDK.Target.Target|null;
   creationStackTrace: StackTrace.StackTrace.StackTrace|null;
-  creationTarget: SDK.Target.Target|null;
   adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
   linkTargetDOMNode: SDK.DOMModel.DOMNode|null;
   permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null;
@@ -354,7 +353,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
       ${maybeRenderOrigin(input.frame?.securityOrigin)}
       ${renderOwnerElement(input.linkTargetDOMNode)}
-      ${maybeRenderCreationStacktrace(input.creationStackTrace, input.creationTarget)}
+      ${maybeRenderCreationStacktrace(input.creationStackTrace)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
       ${maybeRenderCreatorAdScriptAncestry(input.frame?.adFrameType(), input.target, input.adScriptAncestry)}
       <devtools-report-divider></devtools-report-divider>`;
@@ -447,9 +446,8 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
   return nothing;
 }
 
-function maybeRenderCreationStacktrace(
-    stackTrace: StackTrace.StackTrace.StackTrace|null, target: SDK.Target.Target|null): LitTemplate {
-  if (stackTrace && target) {
+function maybeRenderCreationStacktrace(stackTrace: StackTrace.StackTrace.StackTrace|null): LitTemplate {
+  if (stackTrace) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       return html`
@@ -457,7 +455,7 @@ function maybeRenderCreationStacktrace(
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
         <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
           <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
-              Components.JSPresentationUtils.StackTracePreviewContent, {target, stackTrace, options: {expandable: true}})}>
+              Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace, options: {expandable: true}})}>
           </devtools-widget>
         </devtools-report-value>
       `;
@@ -844,7 +842,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
   #creationStackTrace: StackTrace.StackTrace.StackTrace|null = null;
-  #creationTarget: SDK.Target.Target|null = null;
   #securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null = null;
   #linkTargetDOMNode: SDK.DOMModel.DOMNode|null = null;
   #trials: Protocol.Page.OriginTrial[]|null = null;
@@ -869,7 +866,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
     });
     const {creationStackTrace: rawCreationStackTrace, creationStackTraceTarget: creationTarget} =
         frame.getCreationStackTraceData();
-    this.#creationTarget = creationTarget;
     if (rawCreationStackTrace) {
       void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
           .createStackTraceFromProtocolRuntime(rawCreationStackTrace, creationTarget)
@@ -924,7 +920,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
       frame,
       target: this.#target,
       creationStackTrace: this.#creationStackTrace,
-      creationTarget: this.#creationTarget,
       protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
       permissionsPolicies: this.#permissionsPolicies,
       adScriptAncestry: this.#adScriptAncestry,

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -55,6 +55,14 @@ const UIStringsNotTranslate = {
    * @description Text for teaser when suggestion has been generated.
    */
   tab: 'tab',
+  /**
+   * @description Text for teaser when suggestion has been generated.
+   */
+  or: 'or',
+  /**
+   * @description Text for teaser when suggestion has been generated.
+   */
+  enter: 'enter',
   /**
    * @description Text for teaser when suggestion has been generated.
    */
@@ -234,6 +242,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-generated">
           <span>${lockedString(UIStringsNotTranslate.tab)}</span>
+          &nbsp;${lockedString(UIStringsNotTranslate.or)}&nbsp;
+          <span>${lockedString(UIStringsNotTranslate.enter)}</span>
           &nbsp;${lockedString(UIStringsNotTranslate.toAccept)}
         </div>`;
       // clang-format on

package/front_end/panels/console/ConsoleView.ts

@@ -72,7 +72,6 @@ import {
   ConsoleTableMessageView,
   ConsoleViewMessage,
   getMessageForElement,
-  MaxLengthForLinks,
 } from './ConsoleViewMessage.js';
 import {ConsoleViewport, type ConsoleViewportElement, type ConsoleViewportProvider} from './ConsoleViewport.js';
 
@@ -549,7 +548,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     // the linkifiers live location change event.
     const throttler = new Common.Throttler.Throttler(100);
     const refilterMessages = (): Promise<void> => throttler.schedule(async () => this.onFilterChanged());
-    this.linkifier = new Components.Linkifier.Linkifier(MaxLengthForLinks);
+    this.linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
     this.linkifier.addEventListener(Components.Linkifier.Events.LIVE_LOCATION_UPDATED, refilterMessages);
 
     this.consoleMessages = [];

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -702,15 +702,27 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       clickableElement.tabIndex = -1;
     }
     clickableElement.appendChild(messageElement);
-    const stackTraceElement = contentElement.createChild('div');
-    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target ?? undefined, this.linkifier, {runtimeStackTrace: stackTrace, widthConstrained: true});
+    const stackTraceElement = contentElement.createChild('div', 'hidden-stack-trace');
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const stackTraceTarget = target ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
+    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent();
+    stackTracePreview.options = {widthConstrained: true};
+    if (stackTraceTarget && stackTrace) {
+      const selectableChildIndex = this.selectableChildren.length;
+      void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+          .createStackTraceFromProtocolRuntime(stackTrace, stackTraceTarget)
+          .then(stackTrace => {
+            stackTracePreview.stackTrace = stackTrace;
+            return stackTracePreview.updateComplete;
+          })
+          .then(() => {
+            const selectableLinks =
+                stackTracePreview.linkElements.map(element => ({element, forceSelect: () => element.focus()}));
+            this.selectableChildren.splice(selectableChildIndex, 0, ...selectableLinks);
+          });
+    }
     stackTracePreview.markAsRoot();
     stackTracePreview.show(stackTraceElement);
-    for (const linkElement of stackTracePreview.linkElements) {
-      this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
-    }
-    stackTraceElement.classList.add('hidden-stack-trace');
     UI.ARIAUtils.setLabel(
         contentElement, `${messageElement.textContent} ${i18nString(UIStrings.stackMessageCollapsed)}`);
     UI.ARIAUtils.markAsGroup(stackTraceElement);
@@ -2351,11 +2363,6 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
  */
 const MaxLengthToIgnoreHighlighter = 10000;
 
-/**
- * @constant
- */
-export const MaxLengthForLinks = 40;
-
 let maxTokenizableStringLength = 10000;
 let longStringVisibleLength = 5000;
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -38,7 +38,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
+import type * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -265,7 +265,7 @@ type ComputedStyleData = {
 interface ComputedStyleWidgetInput {
   computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
   hasMatches: boolean;
-  computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   onFilterChanged: (event: CustomEvent<string>) => void;
@@ -296,17 +296,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         >${i18nString(UIStrings.group)}</devtools-checkbox>
       </devtools-toolbar>
     </div>
-    <div class="computed-style-tree-outline-container">
-      ${input.computedStylesTree}
-    </div>
+    ${input.computedStylesTree}
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
-    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
+    ${input.computedStyleModel ? html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>` : ''}
   `, target);
   // clang-format on
 };
 
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  #computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
+  #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   private filterRegex: RegExp|null;
@@ -318,18 +318,12 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   readonly #view: View;
   #filterText = '';
 
-  constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
+  constructor() {
     super({useShadowDom: true});
     this.#view = DEFAULT_VIEW;
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
-    this.computedStyleModel = computedStyleModel;
-    this.computedStyleModel.addEventListener(
-        ComputedStyleModule.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.computedStyleModel.addEventListener(
-        ComputedStyleModule.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
-
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
     this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.requestUpdate.bind(this));
@@ -340,16 +334,14 @@ 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.node);
+    }, () => this.#computedStyleModel ? this.#computedStyleModel.node : null);
 
     this.#updateView({hasMatches: true});
   }
@@ -377,7 +369,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         {
           computedStylesTree: this.#computedStylesTree,
           hasMatches,
-          computedStyleModel: this.computedStyleModel,
+          computedStyleModel: this.#computedStyleModel,
           showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
           groupComputedStylesSetting: this.groupComputedStylesSetting,
           onFilterChanged: this.onFilterChanged.bind(this),
@@ -386,8 +378,36 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         null, this.contentElement);
   }
 
+  get nodeStyle(): ComputedStyleModule.ComputedStyleModel.ComputedStyle|null {
+    return this.#nodeStyle;
+  }
+
+  set nodeStyle(nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null) {
+    this.#nodeStyle = nodeStyle;
+    this.requestUpdate();
+  }
+
+  get matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles|null {
+    return this.#matchedStyles;
+  }
+
+  set matchedStyles(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null) {
+    this.#matchedStyles = matchedStyles;
+    this.requestUpdate();
+  }
+
+  get computedStyleModel(): ComputedStyleModule.ComputedStyleModel.ComputedStyleModel|undefined {
+    return this.#computedStyleModel;
+  }
+
+  set computedStyleModel(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
+    this.#computedStyleModel = computedStyleModel;
+    this.requestUpdate();
+  }
+
   override async performUpdate(): Promise<void> {
-    const {computedStyle: nodeStyles, matchedStyles} = await this.computedStyleModel.fetchAllComputedStyleInfo();
+    const nodeStyles = this.#nodeStyle;
+    const matchedStyles = this.#matchedStyles;
     if (!nodeStyles || !matchedStyles) {
       this.#updateView({hasMatches: false});
       return;
@@ -405,7 +425,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.computedStyleModel.cssModel();
+    const cssModel = this.#computedStyleModel?.cssModel();
     if (!cssModel) {
       return;
     }
@@ -448,7 +468,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.computedStyleModel.cssModel();
+    const cssModel = this.#computedStyleModel?.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
       this.#updateView({hasMatches: false});
       return;

package/front_end/panels/elements/ElementsPanel.ts

@@ -212,7 +212,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private readonly accessibilityTreeView: AccessibilityTreeView|undefined;
   private breadcrumbs: ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs;
   stylesWidget: StylesSidebarPane;
-  private readonly computedStyleWidget: ComputedStyleWidget;
+  readonly #computedStyleWidget: ComputedStyleWidget;
   private readonly metricsWidget: MetricsSidebarPane;
   private searchResults!: Array<{
     domModel: SDK.DOMModel.DOMModel,
@@ -315,7 +315,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
-    this.computedStyleWidget = new ComputedStyleWidget(this.#computedStyleModel);
+    this.#computedStyleWidget = new ComputedStyleWidget();
+    this.#computedStyleWidget.computedStyleModel = this.#computedStyleModel;
+    this.#computedStyleModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#updateComputedStyles, this);
+    this.#computedStyleModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#updateComputedStyles, this);
+
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
     Common.Settings.Settings.instance()
@@ -374,6 +380,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         shouldTrackComputedStyleUpdates ? selectedNode.id : undefined);
   }, 100);
 
+  async #updateComputedStyles(): Promise<void> {
+    const computedStyle = await this.#computedStyleModel.fetchComputedStyle();
+    const matchedCascade = await this.#computedStyleModel.fetchMatchedCascade();
+    this.#computedStyleWidget.nodeStyle = computedStyle;
+    this.#computedStyleWidget.matchedStyles = matchedCascade;
+  }
+
   private handleElementExpanded(): void {
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
@@ -1007,7 +1020,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const computedStylePanesWrapper = new UI.Widget.VBox();
     computedStylePanesWrapper.element.classList.add('style-panes-wrapper');
     computedStylePanesWrapper.element.setAttribute('jslog', `${VisualLogging.pane('computed').track({resize: true})}`);
-    this.computedStyleWidget.show(computedStylePanesWrapper.element);
+    this.#computedStyleWidget.show(computedStylePanesWrapper.element);
 
     const stylesSplitWidget = new UI.SplitWidget.SplitWidget(
         true /* isVertical */, true /* secondIsSidebar */, 'elements.styles.sidebar.width', 100);
@@ -1024,7 +1037,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
 
     const showMetricsWidgetInComputedPane = (): void => {
-      this.metricsWidget.show(computedStylePanesWrapper.element, this.computedStyleWidget.element);
+      this.metricsWidget.show(computedStylePanesWrapper.element, this.#computedStyleWidget.element);
       this.stylesWidget.removeEventListener(StylesSidebarPaneEvents.STYLES_UPDATE_COMPLETED, toggleMetricsWidget);
     };
 
@@ -1147,7 +1160,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   getComputedStyleWidget(): ComputedStyleWidget {
-    return this.computedStyleWidget;
+    return this.#computedStyleWidget;
   }
 
   private setupStyleTracking(cssModel: SDK.CSSModel.CSSModel): void {