Skip to content

Improve Modern UI resize and startup performance - #328462

Merged
Lee Murray (mrleemurray) merged 4 commits into
mainfrom
modern-ui-resize-perf
Aug 4, 2026
Merged

Improve Modern UI resize and startup performance#328462
Lee Murray (mrleemurray) merged 4 commits into
mainfrom
modern-ui-resize-perf

Conversation

@hawkticehurst

@hawkticehurst Hawk Ticehurst (hawkticehurst) commented Jul 31, 2026

Copy link
Copy Markdown
Member

Fixes #328394

Summary

This addresses two Modern UI performance concerns:

  1. Resizing the Explorer or terminal could spend nearly all renderer time recalculating styles.
  2. Stable 1.130 telemetry shows regressions during workbench restoration for the Modern UI experiment.

Root causes and motivation

Resize

Pane.layout() invalidated and re-read --pane-header-size with getComputedStyle on every layout pass. Split views therefore interleaved style reads and DOM writes across panes while a sash emitted synchronous changes for every pointer move.

The Modern UI padding overrides also used relational :has() selectors with .monaco-list-row as the subject for agent session rows. Those selectors were considered for every list/tree row during style matching.

Startup and runtime switching

The Modern UI class was available before initial layout, but StyleOverridesContribution did not apply the matching global scrollbar, notification, and pane dimensions until the Restored phase. By then many widgets existed, so changing those global dimensions fanned out updates while extension loading and other post-restore work were active.

Changing workbench.experimental.modernUI also triggered two layouts: an early layout from Layout, followed by the authoritative layout after the override values changed.

Moving this initialization earlier removes that late startup work and ensures restored widgets are created with the intended dimensions. The telemetry establishes the regression being addressed; a corrected local before/after startup benchmark is still needed to quantify how much of it this change recovers.

Changes

  • Replace pane computed-style reads with a pushed global pane-header size.
  • Apply the Modern UI pane-header size together with the other global override dimensions.
  • Instantiate StyleOverridesContribution during BlockRestore, before views, panels, and editors restore.
  • Avoid a Modern UI startup relayout.
  • Perform exactly one correctly ordered layout when Modern UI is toggled at runtime.
  • Add explicit modifier classes to agent session list rows.
  • Replace the agent-session subject-position :has() selectors with those modifier classes.
  • Add unit coverage for:
    • default and overridden pane constraints/layout;
    • no startup relayout;
    • the Modern UI pane size being applied before restoration;
    • auxiliary-container class application;
    • exactly one relayout when the setting changes.

Validation

Unit and static checks

  • 20 targeted unit tests passed:
    • Paneview
    • Splitview
    • StyleOverridesContribution
  • Targeted ESLint passed.
  • Targeted stylelint passed.
  • Hygiene passed.
  • git diff --check passed.
  • PR compile, browser, Electron, remote, smoke, Monaco, and component-fixture checks passed.

compile-client emitted the changed sources without related errors. The repository currently reports pre-existing Agent Host/Claude SDK type errors unrelated to this change.

Resize verification

Manual verification:

  1. Populate and expand the Explorer.
  2. Repeatedly resize the Explorer horizontally.
  3. Open and repeatedly resize the integrated terminal vertically.
  4. Confirm pane headers retain the correct expanded/collapsed sizes.
  5. Confirm agent session row hover, focus, and selection styling remains unchanged.

An automated probe with a 400-file Explorer performed five trials of 160 pointer moves in each Modern UI cohort. It observed:

  • zero reads of --pane-header-size during every resize trial;
  • one layout per pointer move;
  • preserved pane header sizing in the targeted tests.

This verifies removal of the specific pane-header style read from the resize hot path. A trace-based base-versus-PR comparison is still needed to quantify the total resize improvement.

Stable telemetry context

The experiment token represented approximately 8.1–9.8% of Stable 1.130 desktop starts/machines after ramp-up, broadly consistent with the intended 10% target.

For a cleaned post-ramp sample, each machine contributed its median duration. The analysis excluded machines with more than five starts that day and machines observed in both token states:

Metric Windows effect (95% CI) macOS effect (95% CI) Linux effect (95% CI)
Workbench +5.1% (+2.7, +7.5) +4.0% (-1.2, +9.5) +6.6% (-1.3, +15.1)
Editor restore +3.3% (-0.1, +6.8) +3.3% (-5.3, +12.5) +5.0% (-6.7, +18.2)
Sidebar restore +13.2% (+10.9, +15.6) +14.6% (+10.1, +19.4) +16.5% (+8.8, +24.8)
Panel restore +8.8% (+5.8, +11.8) +15.3% (+9.2, +21.6) +19.3% (+8.1, +31.6)
Extension loading +11.0% (+8.7, +13.4) +10.3% (+4.8, +16.1) +17.6% (+9.5, +26.4)

Windows provides the most precise evidence and the largest user population, although macOS and Linux often show larger relative effects. The token indicates experiment assignment rather than directly logging the applied CSS state, and the frequency filter is only a proxy for excluding automation.

Local startup benchmark status

The initial ten-pair local benchmark is not used as evidence for startup improvement:

  • its even-sample median calculation selected the upper-middle observation instead of averaging the two middle observations;
  • the results showed a strong launch-order effect;
  • the screenshots showed an empty editor group rather than a restored editor;
  • Agent Host, account, authentication, and extension-host activity introduced substantial noise.

A corrected interleaved base/off, base/on, PR/off, and PR/on benchmark will be run separately before making a quantitative local startup claim.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings July 31, 2026 17:53
@vs-code-engineering

Copy link
Copy Markdown
Contributor

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

Benjamin Christopher Simmonds (@benibenj)

Matched files:

  • src/vs/base/browser/ui/splitview/paneview.css
  • src/vs/base/browser/ui/splitview/paneview.ts

@hawkticehurst
Hawk Ticehurst (hawkticehurst) marked this pull request as draft July 31, 2026 17:56

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Not ready to approve

Runtime toggles leave existing pane headers with stale inline line-height values.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

Pull request overview

Improves Modern UI resize and startup performance by eliminating repeated style reads and applying layout metrics earlier.

Changes:

  • Push pane-header sizing globally and initialize overrides before restoration.
  • Replace expensive agent-session :has() selectors with row classes.
  • Add targeted startup, toggle, auxiliary-container, and pane-layout tests.
File summaries
File Description
src/vs/base/browser/ui/splitview/paneview.ts Replaces computed-style reads with global header sizing.
src/vs/base/browser/ui/splitview/paneview.css Documents the default CSS/TypeScript size coupling.
src/vs/base/test/browser/ui/splitview/paneview.test.ts Tests pane constraints and body layout.
src/vs/workbench/browser/layout.ts Removes the redundant Modern UI relayout.
src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts Adds agent-session row modifier classes.
src/vs/workbench/contrib/styleOverrides/browser/media/padding.css Replaces row-subject :has() selectors.
src/vs/workbench/contrib/styleOverrides/browser/media/paneHeaders.css Documents the Modern UI header-size coupling.
src/vs/workbench/contrib/styleOverrides/browser/styleOverrides.contribution.ts Applies dimensions before restoration and coordinates runtime layout.
src/vs/workbench/contrib/styleOverrides/test/browser/styleOverrides.contribution.test.ts Tests startup and runtime override behavior.
Review details
  • Files reviewed: 9/9 changed files
  • Comments generated: 1
  • Review effort level: Balanced

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

Comment thread src/vs/base/browser/ui/splitview/paneview.ts
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Ready to approve

The performance changes are consistently ordered, preserve styling behavior, and have focused regression coverage.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

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

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

@github-actions

github-actions Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Base: 106a3a45 Current: 3a9b3ef4

No screenshot changes.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Ready to approve

The changes are coherent, preserve styling and accessibility behavior, and include focused coverage for the affected layout paths.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

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

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

@mrleemurray
Lee Murray (mrleemurray) marked this pull request as ready for review August 4, 2026 15:09
@mrleemurray
Lee Murray (mrleemurray) merged commit 86c1d28 into main Aug 4, 2026
30 checks passed
@mrleemurray
Lee Murray (mrleemurray) deleted the modern-ui-resize-perf branch August 4, 2026 15:43
@vs-code-engineering vs-code-engineering Bot added this to the 1.133.0 milestone Aug 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bad perfomance in resize explorer and terminal

4 participants