reduce cost of style calc+layout in --dialog-scrollgutter

[keithamus]

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

In our mob pairing session called "Making Dotcom Fast" we ran into an issue where the Primer Dialog component is causing an expensive recalc operation on every page load; this is due to it setting the --dialog-scrollgutter css property, which is a property derived from the innerWidth & body.clientWidth properties.

In order to prevent this cost on page load, we decided to move the operation to the first click event that can be handled by the dialogInvokerButtonHandler. This moves the cost of the recalc away from document load to document click:

However this change alone still leaves the recalc cost during the first click event which is still costly and could impact INP.

So we added some CSS - inspired by this article on the @property rule and how it can lower recalc costs by disabling inheritance - which is perfect for this use case. This reduced recalc cost from ~70-90ms on my machine to under 2ms:

We've not moved the code away from the hot-path, and into the click event listener, due to compat risk with the Dialog element and its use in dotcom. This can come at a later date, perhaps.

Screenshots

(See above perf traces)

Integration

List the issues that this change affects.

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Anything you want to highlight for special attention from reviewers?

Accessibility

• Fixes axe scan violation - This change fixes an existing axe scan violation.
• No new axe scan violation - This change does not introduce any new axe scan violations.
• New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

/cc the commit co-authors:
@ansballard, @AdamShwert, @arelia, @arielvalentin, @chrisgavin, @Cbodfield, @composerinteralia, @garman, @dgreif, @erinnachen, @georgebrock, @jibrang, @jfuchs, @khiga8, @manuelpuyol, @mattcosta7, @another-mattr, @MelissaPastore, @theinterned, @phillmv, @Raffo, @cheshire137, @srt32

[changeset-bot]

🦋 Changeset detected

Latest commit: fa39d1e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[langermank]

This is cool! 😄