Pause performance work while the panel is hidden

[mattcosta7]

Summary

Reduce addon background overhead by tying browser collection and live updates to Performance panel visibility.

• add a manager-to-preview visibility protocol that reports current state even after Storybook freezes inactive panel children
• start browser collectors, DOM observation, metric transport, and sparkline sampling when the panel becomes visible
• stop that work when the panel is hidden while preserving metrics already gathered for the story
• keep React Profiler callbacks attached so mount and render history is not lost before the panel opens
• resume collection automatically when the panel reopens
• document the automatic collection lifecycle

Stack

1. Scope buffered performance metrics to each story #156: story-scoped buffered metrics
2. Pause frame metrics while previews are hidden #157: frame lifecycle and hidden-preview handling
3. This PR: visibility-driven collection and live-update lifecycle

Validation

• 60 test files / 840 tests across Chromium, Firefox, WebKit, and Node
• npm run tsc
• npm run build
• publint and Are The Types Wrong: no issues
• npm run lint -- --no-cache (one pre-existing unused suppression warning)

[Copilot]

Pull request overview

Limits live metric emission and sparkline sampling to periods when the performance panel is visible.

Changes:

• Adds panel visibility signaling between manager and preview.
• Starts/stops live updates based on panel visibility.
• Adds lifecycle tests and release notes.

Show a summary per file

File	Description
performance-panel.tsx	Emits panel visibility changes.
core/preview-core.ts	Controls live update intervals.
core/performance-types.ts	Defines the visibility event.
performance-decorator-universal.browser.test.ts	Tests visibility-driven updates.
.changeset/visible-panel-updates.md	Documents the patch.

Review details

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

• Files reviewed: 5/5 changed files
• Comments generated: 2
• Review effort level: Balanced

[Copilot]

Review details

Suppressed comments (2)

packages/storybook-addon-performance-panel/core/preview-core.ts:162

• Hiding the panel does not stop React live-update transport. ReactProfilerCollector.stop() is intentionally a no-op, and every subsequent reportRender still invokes the core callback at lines 120–123, which emits PROFILER_UPDATE on the channel while hidden. Keep recording locally, but gate that channel emission on panelVisible and replay current profiler metrics when visibility returns.

        this.#stopLiveUpdates()
        this.#stopContainerObservation()
        this.manager.stop()

packages/storybook-addon-performance-panel/core/preview-core.ts:155

• CollectorManager.start() is not fully resume-safe: MemoryCollector.start() overwrites the existing baseline, peak, and last-memory values every time it runs. After a visible → hidden → visible cycle, the previously gathered peak and story-relative memory delta are therefore lost even though this lifecycle promises to preserve metrics. Preserve initialized memory state on resume (leaving reset() responsible for a new baseline), and add a same-story reopen regression.

        this.manager.start()

• Files reviewed: 9/9 changed files
• Comments generated: 0 new
• Review effort level: Balanced