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

Co-authored-by: Aaron Ballard <ansballard@github.com>
Co-authored-by: AdamShwert <adamshwert@github.com>
Co-authored-by: Arelia Jones <2359538+arelia@users.noreply.github.com>
Co-authored-by: Ariel Valentin <arielvalentin@users.noreply.github.com>
Co-authored-by: Chris Gavin <chris@chrisgavin.me>
Co-authored-by: Cody Bodfield <cbodfield@github.com>
Co-authored-by: Daniel Colson <composerinteralia@github.com>
Co-authored-by: Daniel Garman <garman@github.com>
Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com>
Co-authored-by: Erinna Chen <erinnachen@users.noreply.github.com>
Co-authored-by: George Brocklehurst <george@georgebrock.com>
Co-authored-by: Jibran Garcia <jibrang@github.com>
Co-authored-by: Jonathan Fuchs <21195+jfuchs@users.noreply.github.com>
Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com>
Co-authored-by: Manuel Puyol <manuelpuyol@github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Matthew Reyes <another-mattr@github.com>
Co-authored-by: Melissa Pastore <64283754+MelissaPastore@users.noreply.github.com>
Co-authored-by: Ned Schwartz <theinterned@github.com>
Co-authored-by: Phill MV <phillmv@github.com>
Co-authored-by: Raffaele Di Fazio <raffo@github.com>
Co-authored-by: Sarah Vessels <82317+cheshire137@users.noreply.github.com>
Co-authored-by: Simon Taranto <srt32@users.noreply.github.com>

app/components/primer/alpha/dialog.pcss

@@ -8,6 +8,12 @@
 
 /* Overlay */
 
+@property --dialog-scrollgutter {
+  initial-value: 0;
+  inherits: false;
+  syntax: "<length>";
+}
+
 /* TODO: One day this can be :has(:modal), when it is better supported */
 body.has-modal {
   padding-right: var(--dialog-scrollgutter) !important;

app/components/primer/dialog_helper.ts

@@ -1,4 +1,9 @@
+let dialogScrollGutterSet = false
 function dialogInvokerButtonHandler(event: Event) {
+  if (!dialogScrollGutterSet) {
+    document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`)
+    dialogScrollGutterSet = true
+  }
   const target = event.target as HTMLElement
   const button = target?.closest('button')
 
@@ -76,10 +81,6 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
-    this.ownerDocument.body.style.setProperty(
-      '--dialog-scrollgutter',
-      `${window.innerWidth - this.ownerDocument.body.clientWidth}px`,
-    )
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {