chrome-devtools-frontend 1.0.1568864 → 1.0.1569477

package/front_end/core/common/ParsedURL.ts

@@ -320,6 +320,9 @@ export class ParsedURL {
   }
 
   static extractName(url: string): string {
+    if (url.endsWith('/')) {
+      url = url.slice(0, -1);
+    }
     let index = url.lastIndexOf('/');
     const pathAndQuery = index !== -1 ? url.substr(index + 1) : url;
     index = pathAndQuery.indexOf('?');

package/front_end/core/host/AidaClient.ts

@@ -79,6 +79,7 @@ export interface FunctionObjectParam<T extends string|number|symbol = string> ex
   type: ParametersTypes.OBJECT;
   // TODO: this can be also be ObjectParams
   properties: Record<T, FunctionPrimitiveParams|FunctionArrayParam>;
+  required: string[];
 }
 
 /**

package/front_end/core/root/Runtime.ts

@@ -167,15 +167,13 @@ export class ExperimentsSupport {
     return result;
   }
 
-  register(
-      experimentName: string, experimentTitle: string, unstable?: boolean, docLink?: string,
-      feedbackLink?: string): void {
+  register(experimentName: string, experimentTitle: string, docLink?: string, feedbackLink?: string): void {
     if (this.#experimentNames.has(experimentName)) {
       throw new Error(`Duplicate registration of experiment '${experimentName}'`);
     }
     this.#experimentNames.add(experimentName);
     this.#experiments.push(new Experiment(
-        this, experimentName, experimentTitle, Boolean(unstable),
+        this, experimentName, experimentTitle,
         docLink as Platform.DevToolsPath.UrlString ?? Platform.DevToolsPath.EmptyUrlString,
         feedbackLink as Platform.DevToolsPath.UrlString ?? Platform.DevToolsPath.EmptyUrlString));
   }
@@ -299,16 +297,14 @@ class ExperimentStorage {
 export class Experiment {
   name: string;
   title: string;
-  unstable: boolean;
   docLink?: Platform.DevToolsPath.UrlString;
   readonly feedbackLink?: Platform.DevToolsPath.UrlString;
   readonly #experiments: ExperimentsSupport;
   constructor(
-      experiments: ExperimentsSupport, name: string, title: string, unstable: boolean,
-      docLink: Platform.DevToolsPath.UrlString, feedbackLink: Platform.DevToolsPath.UrlString) {
+      experiments: ExperimentsSupport, name: string, title: string, docLink: Platform.DevToolsPath.UrlString,
+      feedbackLink: Platform.DevToolsPath.UrlString) {
     this.name = name;
     this.title = title;
-    this.unstable = unstable;
     this.docLink = docLink;
     this.feedbackLink = feedbackLink;
     this.#experiments = experiments;

package/front_end/entrypoints/main/MainImpl.ts

@@ -325,57 +325,53 @@ export class MainImpl {
 
   #initializeExperiments(): void {
     Root.Runtime.experiments.register('capture-node-creation-stacks', 'Capture node creation stacks');
-    Root.Runtime.experiments.register('live-heap-profile', 'Live heap profile', true);
+    Root.Runtime.experiments.register('live-heap-profile', 'Live heap profile');
     Root.Runtime.experiments.register(
-        'protocol-monitor', 'Protocol Monitor', undefined,
+        'protocol-monitor', 'Protocol Monitor',
         'https://developer.chrome.com/blog/new-in-devtools-92/#protocol-monitor');
-    Root.Runtime.experiments.register('sampling-heap-profiler-timeline', 'Sampling heap profiler timeline', true);
+    Root.Runtime.experiments.register('sampling-heap-profiler-timeline', 'Sampling heap profiler timeline');
     Root.Runtime.experiments.register(
         'show-option-tp-expose-internals-in-heap-snapshot', 'Show option to expose internals in heap snapshots');
 
     // Timeline
+    Root.Runtime.experiments.register('timeline-invalidation-tracking', 'Performance panel: invalidation tracking');
+    Root.Runtime.experiments.register('timeline-show-all-events', 'Performance panel: show all events');
+    Root.Runtime.experiments.register('timeline-v8-runtime-call-stats', 'Performance panel: V8 runtime call stats');
     Root.Runtime.experiments.register(
-        'timeline-invalidation-tracking', 'Performance panel: invalidation tracking', true);
-    Root.Runtime.experiments.register('timeline-show-all-events', 'Performance panel: show all events', true);
-    Root.Runtime.experiments.register(
-        'timeline-v8-runtime-call-stats', 'Performance panel: V8 runtime call stats', true);
-    Root.Runtime.experiments.register(
-        Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE,
-        'Performance panel: Enable debug mode (trace event details, etc)', true);
+        Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE, 'Performance panel: debug mode (trace event details, etc)');
 
     // Debugging
-    Root.Runtime.experiments.register('instrumentation-breakpoints', 'Enable instrumentation breakpoints', true);
-    Root.Runtime.experiments.register('use-source-map-scopes', 'Use scope information from source maps', true);
+    Root.Runtime.experiments.register('instrumentation-breakpoints', 'Instrumentation breakpoints');
+    Root.Runtime.experiments.register('use-source-map-scopes', 'Use scope information from source maps');
 
     // Advanced Perceptual Contrast Algorithm.
     Root.Runtime.experiments.register(
-        'apca',
-        'Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
-        undefined, 'https://developer.chrome.com/blog/new-in-devtools-89/#apca');
+        'apca', 'Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
+        'https://developer.chrome.com/blog/new-in-devtools-89/#apca');
 
     // Full Accessibility Tree
     Root.Runtime.experiments.register(
-        'full-accessibility-tree', 'Enable full accessibility tree view in the Elements panel', undefined,
+        'full-accessibility-tree', 'Full accessibility tree view in the Elements panel',
         'https://developer.chrome.com/blog/new-in-devtools-90/#accessibility-tree',
         'https://g.co/devtools/a11y-tree-feedback');
 
     // Font Editor
     Root.Runtime.experiments.register(
-        'font-editor', 'Enable new font editor within the Styles tab', undefined,
+        'font-editor', 'New font editor in the Styles tab',
         'https://developer.chrome.com/blog/new-in-devtools-89/#font');
 
     // Contrast issues reported via the Issues panel.
     Root.Runtime.experiments.register(
-        'contrast-issues', 'Enable automatic contrast issue reporting via the Issues panel', undefined,
+        'contrast-issues', 'Automatic contrast issue reporting via the Issues panel',
         'https://developer.chrome.com/blog/new-in-devtools-90/#low-contrast');
 
     // New cookie features.
-    Root.Runtime.experiments.register('experimental-cookie-features', 'Enable experimental cookie features');
+    Root.Runtime.experiments.register('experimental-cookie-features', 'Experimental cookie features');
 
     // Change grouping of sources panel to use Authored/Deployed trees
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, 'Group sources into authored and deployed trees',
-        undefined, 'https://goo.gle/authored-deployed', 'https://goo.gle/authored-deployed-feedback');
+        'https://goo.gle/authored-deployed', 'https://goo.gle/authored-deployed-feedback');
 
     // Hide third party code (as determined by ignore lists or source maps)
     Root.Runtime.experiments.register(
@@ -413,6 +409,7 @@ export class MainImpl {
       }
     }
   }
+
   async #createAppUI(): Promise<void> {
     MainImpl.time('Main._createAppUI');
 

package/front_end/generated/SupportedCSSProperties.js

@@ -474,6 +474,7 @@ export const generatedProperties = [
    "float",
    "flood-color",
    "flood-opacity",
+   "flow-tolerance",
    "font-display",
    "font-family",
    "font-feature-settings",
@@ -532,7 +533,6 @@ export const generatedProperties = [
    "interest-delay-start",
    "interpolate-size",
    "isolation",
-   "item-tolerance",
    "justify-content",
    "justify-items",
    "justify-self",
@@ -2308,6 +2308,13 @@ export const generatedProperties = [
  {
   "name": "flood-opacity"
  },
+ {
+  "keywords": [
+   "normal",
+   "infinite"
+  ],
+  "name": "flow-tolerance"
+ },
  {
   "inherited": true,
   "longhands": [
@@ -2881,13 +2888,6 @@ export const generatedProperties = [
   ],
   "name": "isolation"
  },
- {
-  "keywords": [
-   "normal",
-   "infinite"
-  ],
-  "name": "item-tolerance"
- },
  {
   "name": "justify-content"
  },
@@ -5835,6 +5835,12 @@ export const generatedPropertyValues = {
    "currentcolor"
   ]
  },
+ "flow-tolerance": {
+  "values": [
+   "normal",
+   "infinite"
+  ]
+ },
  "font-feature-settings": {
   "values": [
    "normal"
@@ -6156,12 +6162,6 @@ export const generatedPropertyValues = {
    "isolate"
   ]
  },
- "item-tolerance": {
-  "values": [
-   "normal",
-   "infinite"
-  ]
- },
  "left": {
   "values": [
    "auto"

package/front_end/models/ai_assistance/agents/PatchAgent.ts

@@ -97,6 +97,7 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
         description: '',
         nullable: true,
         properties: {},
+        required: [],
       },
       handler: async () => {
         const files = this.#project.getFiles();
@@ -143,9 +144,10 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
           isRegex: {
             type: Host.AidaClient.ParametersTypes.BOOLEAN,
             description: 'Whether the query is a regular expression or not',
-            nullable: true,
+            nullable: false,
           }
         },
+        required: ['query']
       },
       handler: async (args, options) => {
         return {
@@ -182,6 +184,7 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
             }
           }
         },
+        required: ['files']
       },
       handler: async (args, options) => {
         debugLog('updateFiles', args.files);

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -782,6 +782,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           }
         },
+        required: ['insightSetId', 'insightName']
       },
       displayInfoFromArgs: params => {
         return {
@@ -829,6 +830,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           }
         },
+        required: ['eventKey']
       },
       displayInfoFromArgs: params => {
         return {title: lockedString('Looking at trace event…'), action: `getEventByKey('${params.eventKey}')`};
@@ -886,6 +888,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           },
         },
+        required: ['min', 'max']
       },
       displayInfoFromArgs: args => {
         return {
@@ -943,6 +946,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           },
         },
+        required: ['min', 'max']
       },
       displayInfoFromArgs: args => {
         return {
@@ -993,6 +997,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           },
         },
+        required: ['eventKey']
       },
       displayInfoFromArgs: args => {
         return {title: lockedString('Looking at call tree…'), action: `getDetailedCallTree('${args.eventKey}')`};
@@ -1046,7 +1051,9 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               description: 'The message the annotation should show to the user.',
               nullable: false,
             },
+
           },
+          required: ['elementId', 'annotationMessage']
         },
         handler: async params => {
           return await this.addElementAnnotation(params.elementId, params.annotationMessage);
@@ -1077,6 +1084,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               nullable: false,
             },
           },
+          required: ['eventKey', 'annotationMessage']
         },
         handler: async params => {
           return await this.addNetworkRequestAnnotation(params.eventKey, params.annotationMessage);
@@ -1108,6 +1116,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           },
         },
+        required: ['scriptUrl', 'line', 'column']
       },
       displayInfoFromArgs: args => {
         return {
@@ -1166,6 +1175,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             nullable: false,
           },
         },
+        required: ['url']
       },
       displayInfoFromArgs: args => {
         return {title: lockedString('Looking at resource content…'), action: `getResourceContent('${args.url}')`};
@@ -1220,6 +1230,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               nullable: false,
             }
           },
+          required: ['eventKey']
         },
         displayInfoFromArgs: params => {
           return {title: lockedString('Selecting event…'), action: `selectEventByKey('${params.eventKey}')`};
@@ -1281,6 +1292,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               nullable: true,
             },
           },
+          required: ['type']
         },
         handler: async params => {
           switch (params.type) {

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -86,7 +86,12 @@ Content:
               "description": "A CSS style property name to retrieve. For example, 'background-color'."
             }
           }
-        }
+        },
+        "required": [
+          "explanation",
+          "elements",
+          "styleProperties"
+        ]
       }
     },
     {
@@ -109,7 +114,12 @@ Content:
             "type": 1,
             "description": "Provide a summary of what the code does. For example, \"Checking related element styles\"."
           }
-        }
+        },
+        "required": [
+          "code",
+          "thought",
+          "title"
+        ]
       }
     }
   ],

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -313,7 +313,8 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
               description: 'A CSS style property name to retrieve. For example, \'background-color\'.'
             }
           },
-        }
+        },
+        required: ['explanation', 'elements', 'styleProperties']
       },
       displayInfoFromArgs: params => {
         return {
@@ -396,6 +397,7 @@ const data = {
             description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
           },
         },
+        required: ['code', 'thought', 'title']
       },
       displayInfoFromArgs: params => {
         return {
@@ -436,6 +438,7 @@ const data = {
               nullable: false,
             },
           },
+          required: ['elementId', 'annotationMessage']
         },
         handler: async params => {
           return await this.addElementAnnotation(params.elementId, params.annotationMessage);

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -31,7 +31,9 @@ export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmen
 }
 
 export class FragmentImpl implements StackTrace.StackTrace.Fragment {
-  readonly node: FrameNode;
+  static readonly EMPTY_FRAGMENT = new FragmentImpl();
+
+  readonly node?: FrameNode;
   readonly stackTraces = new Set<AnyStackTraceImpl>();
 
   /**
@@ -46,11 +48,15 @@ export class FragmentImpl implements StackTrace.StackTrace.Fragment {
     return node.fragment;
   }
 
-  private constructor(node: FrameNode) {
+  private constructor(node?: FrameNode) {
     this.node = node;
   }
 
   get frames(): FrameImpl[] {
+    if (!this.node) {
+      return [];
+    }
+
     const frames: FrameImpl[] = [];
 
     for (const node of this.node.getCallStack()) {
@@ -101,6 +107,10 @@ export class DebuggableFragmentImpl implements StackTrace.StackTrace.DebuggableF
   }
 
   get frames(): DebuggableFrameImpl[] {
+    if (!this.fragment.node) {
+      return [];
+    }
+
     const frames: DebuggableFrameImpl[] = [];
 
     let index = 0;

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -77,7 +77,7 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
         // is re-translated as a side-effect.
         // We just need to remember the stack traces of the skipped over fragments, so we can send the
         // UPDATED event also to them.
-        if (fragment.node.children.length === 0) {
+        if (fragment.node?.children.length === 0) {
           translatePromises.push(this.#translateFragment(fragment, translateRawFrames));
         }
         stackTracesToUpdate = stackTracesToUpdate.union(fragment.stackTraces);
@@ -133,6 +133,10 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
   }
 
   async #createFragment(frames: RawFrame[], rawFramesToUIFrames: TranslateRawFrames): Promise<FragmentImpl> {
+    if (frames.length === 0) {
+      return FragmentImpl.EMPTY_FRAGMENT;
+    }
+
     const release = await this.#mutex.acquire();
     try {
       const node = this.#trie.insert(frames);
@@ -150,6 +154,10 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
   }
 
   async #translateFragment(fragment: FragmentImpl, rawFramesToUIFrames: TranslateRawFrames): Promise<void> {
+    if (!fragment.node) {
+      return;
+    }
+
     const rawFrames = fragment.node.getCallStack().map(node => node.rawFrame).toArray();
     const uiFrames = await rawFramesToUIFrames(rawFrames, this.target());
     console.assert(rawFrames.length === uiFrames.length, 'Broken rawFramesToUIFrames implementation');

package/front_end/models/trace/Styles.ts

@@ -311,6 +311,10 @@ const UIStrings = {
    * @description Text in Timeline UIUtils of the Performance panel
    */
   largestContentfulPaint: 'Largest Contentful Paint',
+  /**
+   * @description Text in Timeline UIUtils of the Performance panel
+   */
+  softLargestContentfulPaint: 'Soft Largest Contentful Paint',
   /**
    * @description Text for timestamps of items
    */
@@ -880,7 +884,7 @@ export function maybeInitSylesMap(): EventStylesMap {
         true,
         ),
     [Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: new TimelineRecordStyle(
-        i18nString(UIStrings.largestContentfulPaint),
+        i18nString(UIStrings.softLargestContentfulPaint),
         defaultCategoryStyles.rendering,
         true,
         ),
@@ -1125,15 +1129,14 @@ export function markerDetailsForEvent(event: Types.Events.Event): {
   }
   if (Types.Events.isAnyLargestContentfulPaintCandidate(event)) {
     color = 'var(--sys-color-green)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
+    title = Types.Events.isSoftLargestContentfulPaintCandidate(event) ?
+        Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_LCP :
+        Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
   }
-  if (Types.Events.isNavigationStart(event)) {
+  if (Types.Events.isNavigationStart(event) || Types.Events.isSoftNavigationStart(event)) {
     color = 'var(--color-text-primary)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.NAV;
-  }
-  if (Types.Events.isSoftNavigationStart(event)) {
-    color = 'var(--sys-color-blue)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_NAV;
+    title = Types.Events.isSoftNavigationStart(event) ? Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_NAV :
+                                                        Handlers.ModelHandlers.PageLoadMetrics.MetricName.NAV;
   }
   if (Types.Events.isMarkDOMContent(event)) {
     color = 'var(--color-text-disabled)';

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

@@ -460,8 +460,9 @@ export const enum MetricName {
   CLS = 'CLS',
   // Navigation
   NAV = 'Nav',
-  // Soft Navigation (just "Nav" b/c space is limited in flame chart)
-  SOFT_NAV = 'Nav',
+  // Soft Navigation and Soft Metrics
+  SOFT_NAV = 'Nav*',
+  SOFT_LCP = 'LCP*',
   // Note: INP is handled in UserInteractionsHandler
 }
 

package/front_end/models/trace/types/TraceEvents.ts

@@ -678,7 +678,7 @@ export interface Mark extends Event {
 }
 
 export interface NavigationStart extends Mark {
-  name: 'navigationStart';
+  name: Name.NAVIGATION_START;
   args: Args&{
     frame: string,
     data?: ArgsData&{
@@ -738,7 +738,7 @@ export interface FirstContentfulPaint extends Mark {
 }
 
 export interface FirstPaint extends Mark {
-  name: 'firstPaint';
+  name: Name.MARK_FIRST_PAINT;
   args: Args&{
     frame: string,
     data?: ArgsData&{
@@ -761,8 +761,14 @@ const markerTypeGuards = [
 ];
 
 export const MarkerName = [
-  'MarkDOMContent', 'MarkLoad', 'firstPaint', 'firstContentfulPaint', 'largestContentfulPaint::Candidate',
-  'largestContentfulPaint::CandidateForSoftNavigation'
+  Name.MARK_DOM_CONTENT,
+  Name.MARK_LOAD,
+  Name.MARK_FIRST_PAINT,
+  Name.MARK_FCP,
+  Name.MARK_LCP_CANDIDATE,
+  Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION,
+  Name.NAVIGATION_START,
+  Name.SOFT_NAVIGATION_START,
 ] as const;
 
 export interface MarkerEvent extends Event {
@@ -968,7 +974,7 @@ export interface CommitLoad extends Instant {
 }
 
 export interface MarkDOMContent extends Instant {
-  name: 'MarkDOMContent';
+  name: Name.MARK_DOM_CONTENT;
   args: Args&{
     data?: ArgsData & {
       frame: string,
@@ -980,7 +986,7 @@ export interface MarkDOMContent extends Instant {
 }
 
 export interface MarkLoad extends Instant {
-  name: 'MarkLoad';
+  name: Name.MARK_LOAD;
   args: Args&{
     data?: ArgsData & {
       frame: string,
@@ -2256,12 +2262,15 @@ export function isLayoutInvalidationTracking(
 }
 
 export function isFirstContentfulPaint(event: Event): event is FirstContentfulPaint {
-  return event.name === 'firstContentfulPaint';
+  return event.name === Name.MARK_FCP;
 }
 
 export function isAnyLargestContentfulPaintCandidate(event: Event): event is AnyLargestContentfulPaintCandidate {
   return event.name === Name.MARK_LCP_CANDIDATE || event.name === Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION;
 }
+export function isSoftLargestContentfulPaintCandidate(event: Event): event is AnyLargestContentfulPaintCandidate {
+  return event.name === Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION;
+}
 export function isLargestImagePaintCandidate(event: Event): event is LargestImagePaintCandidate {
   return event.name === 'LargestImagePaint::Candidate';
 }
@@ -2270,15 +2279,15 @@ export function isLargestTextPaintCandidate(event: Event): event is LargestTextP
 }
 
 export function isMarkLoad(event: Event): event is MarkLoad {
-  return event.name === 'MarkLoad';
+  return event.name === Name.MARK_LOAD;
 }
 
 export function isFirstPaint(event: Event): event is FirstPaint {
-  return event.name === 'firstPaint';
+  return event.name === Name.MARK_FIRST_PAINT;
 }
 
 export function isMarkDOMContent(event: Event): event is MarkDOMContent {
-  return event.name === 'MarkDOMContent';
+  return event.name === Name.MARK_DOM_CONTENT;
 }
 
 export function isInteractiveTime(event: Event): event is InteractiveTime {

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -70,7 +70,7 @@ const UIStringsNotTranslate = {
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
-const PROMOTION_ID = 'ai-code-generation';
+export const PROMOTION_ID = 'ai-code-generation';
 
 export enum AiCodeGenerationTeaserDisplayState {
   TRIGGER = 'trigger',

package/front_end/panels/elements/ElementsPanel.ts

@@ -982,7 +982,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     const showMetricsWidgetInComputedPane = (): void => {
       this.metricsWidget.show(computedStylePanesWrapper.element, this.computedStyleWidget.element);
-      this.metricsWidget.toggleVisibility(true /* visible */);
       this.stylesWidget.removeEventListener(StylesSidebarPaneEvents.STYLES_UPDATE_COMPLETED, toggleMetricsWidget);
     };
 
@@ -993,14 +992,18 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       } else {
         this.metricsWidget.show(matchedStylePanesWrapper.element);
         if (!this.stylesWidget.hasMatchedStyles) {
-          this.metricsWidget.toggleVisibility(false /* invisible */);
+          this.metricsWidget.hideWidget();
         }
         this.stylesWidget.addEventListener(StylesSidebarPaneEvents.STYLES_UPDATE_COMPLETED, toggleMetricsWidget);
       }
     };
 
     const toggleMetricsWidget = (event: Common.EventTarget.EventTargetEvent<StylesUpdateCompletedEvent>): void => {
-      this.metricsWidget.toggleVisibility(event.data.hasMatchedStyles);
+      if (event.data.hasMatchedStyles) {
+        this.metricsWidget.showWidget();
+      } else {
+        this.metricsWidget.hideWidget();
+      }
     };
 
     const tabSelected = (event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void => {

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -10,8 +10,11 @@ import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './Comp
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
-  constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
-    super({useShadowDom: true, delegatesFocus, classes: ['flex-none']});
+  constructor(computedStyleModel: ComputedStyleModel, options: UI.Widget.WidgetOptions = {}) {
+    options.useShadowDom = options.useShadowDom ?? true;
+    options.classes = options.classes ?? [];
+    options.classes.push('flex-none');
+    super(options);
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
     this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);