chrome-devtools-frontend 1.0.1587572 → 1.0.1588580

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

@@ -202,7 +202,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           jslog=${VisualLogging.link('open-ai-settings').track({
             click: true,
           })}
-          @click=${() => {
+          @click=${(ev: Event) => {
+            ev.preventDefault();
             void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
           }}
         >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
@@ -320,42 +321,46 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                           ></devtools-button>`
                         : Lit.nothing}
                       <div
-                        role=button
                         class=${Lit.Directives.classMap({
                           'resource-link': true,
                           'has-picker-behavior': input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
-                          disabled: input.isTextInputDisabled,
                         })}
-                        tabindex=${(input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING || input.isTextInputDisabled) ? '-1' : '0'}
-                        @click=${input.onContextClick}
-                        @keydown=${(ev: KeyboardEvent) => {
-                          if (ev.key === 'Enter' || ev.key === ' ') {
-                            void input.onContextClick();
-                          }
-                        }}
-                        aria-description=${i18nString(UIStrings.revealContextDescription)}
                       >
-                        ${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 instanceof AiAssistanceModel.StylingAgent.NodeContext ?
+                        ${
+                          input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
                             html`
-                              <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-                                node: input.selectedContext.getItem(),
-                                options: {
-                                  hiddenClassList: input.selectedContext.getItem().classNames().filter(
-                                    className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
-                                  disabled: input.isTextInputDisabled,
-                                },
-                              })}></devtools-widget>`
-                            :
-                            input.selectedContext.getTitle()}
-                        </span>
+                              <devtools-widget
+                                class="title"
+                                .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+                                  node: input.selectedContext.getItem(),
+                                  options: {
+                                    hiddenClassList: input.selectedContext.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>` :
+                            Lit.nothing}
+                            <span 
+                              role="button"
+                              class="title"
+                              tabindex="0"
+                              @click=${input.onContextClick}
+                              @keydown=${(ev: KeyboardEvent) => {
+                                if (ev.key === 'Enter' || ev.key === ' ') {
+                                  void input.onContextClick();
+                                }
+                              }}
+                              aria-description=${i18nString(UIStrings.revealContextDescription)}
+                            >${input.selectedContext.getTitle()}</span>`
+                        }
                         ${input.onContextRemoved ? html`
                                   <devtools-button
                                     title=${getContextRemoveLabel(input.selectedContext)}

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

@@ -218,9 +218,9 @@
   gap: var(--sys-size-3);
   align-items: center;
 
-  .resource-link,
-  .resource-task {
+  .resource-link {
     display: flex;
+    background-color: var(--sys-color-cdt-base-container);
     align-items: center;
     cursor: pointer;
     padding: var(--sys-size-2) var(--sys-size-3);
@@ -250,6 +250,10 @@
 
     &.has-picker-behavior {
       overflow: visible;
+
+      .title {
+        overflow: visible;
+      }
     }
 
     &:focus-visible {
@@ -301,13 +305,6 @@
       }
     }
   }
-
-  .resource-link.disabled,
-  .resource-task.disabled {
-    color: var(--sys-color-state-disabled);
-    border-color: var(--sys-color-neutral-outline);
-    pointer-events: none;
-  }
 }
 
 .link {

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -11,7 +11,6 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -541,10 +540,9 @@ export class RequestView extends UI.Widget.VBox {
     this.resourceViewTabSetting =
         Common.Settings.Settings.instance().createSetting('cache-storage-view-tab', 'preview');
 
-    this.tabbedPane.appendTab(
-        'headers', i18nString(UIStrings.headers),
-        LegacyWrapper.LegacyWrapper.legacyWrapper(
-            UI.Widget.VBox, new Network.RequestHeadersView.RequestHeadersView(request)));
+    const requestHeadersView = new Network.RequestHeadersView.RequestHeadersView();
+    requestHeadersView.request = request;
+    this.tabbedPane.appendTab('headers', i18nString(UIStrings.headers), requestHeadersView);
     this.tabbedPane.appendTab(
         'preview', i18nString(UIStrings.preview), new Network.RequestPreviewView.RequestPreviewView(request));
     this.tabbedPane.show(this.element);

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

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

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

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

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

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

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -150,12 +150,20 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   const shouldExpandCategory = (breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[]): boolean =>
       Boolean(input.filterText) || (input.highlightedItem && breakpoints.includes(input.highlightedItem)) ||
       breakpoints.some(breakpoint => breakpoint.enabled());
-  const filter = (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): boolean => !input.filterText ||
-      Boolean(Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name).match(input.filterText)) ||
+  const filterRegex =
+      input.filterText ? new RegExp(Platform.StringUtilities.escapeForRegExp(input.filterText), 'i') : null;
+  const filter = (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): boolean => !filterRegex ||
+      Boolean(Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name).match(filterRegex)) ||
       breakpoint === input.highlightedItem;
   const filteredCategories =
       input.sortedCategoryNames.values()
-          .map(category => [category, input.categories.get(category)?.filter(filter)])
+          .map(category => {
+            const breakpoints = input.categories.get(category);
+            if (filterRegex && getLocalizedCategory(category).match(filterRegex)) {
+              return [category, breakpoints];
+            }
+            return [category, breakpoints?.filter(filter)];
+          })
           .filter(
               (filteredCategory): filteredCategory is
                   [SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]] =>

package/front_end/panels/common/DOMLinkifier.ts

@@ -12,7 +12,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import domLinkifierStyles from './domLinkifier.css.js';
 
-const {classMap} = Directives;
+const {classMap, ifDefined} = Directives;
 
 const UIStrings = {
   /**
@@ -33,6 +33,7 @@ export interface Options {
   isDynamicLink?: boolean;
   hiddenClassList?: string[];
   disabled?: boolean;
+  ariaDescription?: string;
 }
 
 interface ViewInput {
@@ -43,6 +44,7 @@ interface ViewInput {
   id?: string;
   classes: string[];
   pseudo?: string;
+  ariaDescription?: string;
   onClick: () => void;
   onMouseOver: () => void;
   onMouseLeave: () => void;
@@ -59,6 +61,7 @@ const DEFAULT_VIEW: View = (input, _output, target: HTMLElement) => {
             'dynamic-link': Boolean(input.dynamic),
             disabled: Boolean(input.disabled)
           })}"
+          aria-description=${ifDefined(input.ariaDescription)}
           jslog=${VisualLogging.link('node').track({click: true, keydown: 'Enter'})}
           tabindex=${input.preventKeyboardFocus ? -1 : 0}
           @click=${input.onClick}
@@ -112,6 +115,7 @@ export class DOMNodeLink extends UI.Widget.Widget {
       textContent: undefined,
       isDynamicLink: false,
       disabled: false,
+      ariaDescription: undefined,
     };
     const viewInput: ViewInput = {
       dynamic: options.isDynamicLink,
@@ -129,6 +133,7 @@ export class DOMNodeLink extends UI.Widget.Widget {
       onMouseLeave: () => {
         SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
       },
+      ariaDescription: options.ariaDescription,
     };
     if (!this.#node) {
       this.#view(viewInput, {}, this.contentElement);

package/front_end/panels/console/ConsoleViewMessage.ts

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

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

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

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -48,7 +48,6 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as ElementsComponents from './components/components.js';
 import computedStyleWidgetStyles from './computedStyleWidget.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
-import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import {categorizePropertyName, type Category, DefaultCategoryOrder} from './PropertyNameCategories.js';
 import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
@@ -208,8 +207,8 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
     }
 
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
-    swatch.readonly = true;
-    swatch.color = color;
+    swatch.setReadonly(true);
+    swatch.renderColor(color);
     const valueElement = document.createElement('span');
     valueElement.textContent = match.text;
 
@@ -265,11 +264,11 @@ type ComputedStyleData = {
 interface ComputedStyleWidgetInput {
   computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
   hasMatches: boolean;
-  computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   onFilterChanged: (event: CustomEvent<string>) => void;
   filterText: string;
+  onRegexToggled: () => void;
 }
 
 type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
@@ -283,8 +282,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         <devtools-toolbar-input
           type="filter"
           autofocus
+          ?regex=${true}
           value=${input.filterText}
           @change=${input.onFilterChanged}
+          @regextoggle=${input.onRegexToggled}
         ></devtools-toolbar-input>
         <devtools-checkbox
           title=${i18nString(UIStrings.showAll)}
@@ -298,7 +299,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     </div>
     ${input.computedStylesTree}
     ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
-    ${input.computedStyleModel ? html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>` : ''}
   `, target);
   // clang-format on
 };
@@ -317,6 +317,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
   readonly #view: View;
   #filterText = '';
+  #isRegex = false;
 
   constructor() {
     super({useShadowDom: true});
@@ -351,16 +352,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
-  override wasShown(): void {
-    UI.Context.Context.instance().setFlavor(ComputedStyleWidget, this);
-    super.wasShown();
-  }
-
-  override willHide(): void {
-    super.willHide();
-    UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
-  }
-
   /**
    * @param input.hasMatches Whether any properties matched the current filter (or if any properties exist at all).
    */
@@ -369,11 +360,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         {
           computedStylesTree: this.#computedStylesTree,
           hasMatches,
-          computedStyleModel: this.#computedStyleModel,
           showInheritedComputedStylePropertiesSetting: this.showInheritedComputedStylePropertiesSetting,
           groupComputedStylesSetting: this.groupComputedStylesSetting,
           onFilterChanged: this.onFilterChanged.bind(this),
           filterText: this.#filterText,
+          onRegexToggled: this.onRegexToggled.bind(this),
         },
         null, this.contentElement);
   }
@@ -654,10 +645,28 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return result;
   }
 
+  #buildFilterRegex(text: string): RegExp|null {
+    if (!text) {
+      return null;
+    }
+    if (this.#isRegex) {
+      try {
+        return new RegExp(text, 'i');
+      } catch {
+        // Invalid regex: fall through to plain-text matching.
+      }
+    }
+    return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+  }
+
+  private async onRegexToggled(): Promise<void> {
+    this.#isRegex = !this.#isRegex;
+    await this.filterComputedStyles(this.#buildFilterRegex(this.#filterText));
+  }
+
   private async onFilterChanged(event: CustomEvent<string>): Promise<void> {
     this.#filterText = event.detail;
-    await this.filterComputedStyles(
-        event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null);
+    await this.filterComputedStyles(this.#buildFilterRegex(event.detail));
 
     if (event.detail && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(

package/front_end/panels/elements/ElementsPanel.ts

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