Refactor PageLayout drag/resize optimizations to use CSS attribute selectors (#7385)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: mattcosta7 <[email protected]>

Author: Copilot

packages/react/src/PageLayout/PageLayout.module.css

@@ -725,3 +725,15 @@
 .DraggableHandle:hover::before {
   opacity: 1;
 }
+
+/**
+ * OPTIMIZATION: CSS containment during drag/resize
+ * Direct attribute selectors are O(1) - only the attributed element is invalidated
+ * (Unlike descendant selectors which require O(n) traversal)
+ */
+.Pane[data-dragging='true'],
+.ContentWrapper[data-dragging='true'] {
+  contain: layout style paint;
+  pointer-events: none;
+  content-visibility: auto;
+}

packages/react/src/PageLayout/PageLayout.test.tsx

@@ -195,15 +195,15 @@ describe('PageLayout', async () => {
       const content = container.querySelector<HTMLElement>('[class*="PageLayoutContent"]')
       const divider = await screen.findByRole('slider')
 
-      // Before drag - no contain property
-      expect(content!.style.getPropertyValue('contain')).toBe('')
+      // Before drag - no data-dragging attribute
+      expect(content).not.toHaveAttribute('data-dragging')
 
-      // Start drag - optimization properties are set
+      // Start drag - optimization attribute is set
       fireEvent.pointerDown(divider, {clientX: 300, clientY: 200, pointerId: 1})
-      expect(content!.style.getPropertyValue('contain')).toBe('layout style paint')
-      // End drag - pointer capture lost ends the drag and removes optimization properties
+      expect(content).toHaveAttribute('data-dragging', 'true')
+      // End drag - pointer capture lost ends the drag and removes optimization attribute
       fireEvent.lostPointerCapture(divider, {pointerId: 1})
-      expect(content!.style.getPropertyValue('contain')).toBe('')
+      expect(content).not.toHaveAttribute('data-dragging')
     })
 
     it('should set optimization styles during keyboard resize', async () => {
@@ -221,17 +221,17 @@ describe('PageLayout', async () => {
       const content = container.querySelector<HTMLElement>('[class*="PageLayoutContent"]')
       const divider = await screen.findByRole('slider')
 
-      // Before interaction - no contain property
-      expect(content!.style.getPropertyValue('contain')).toBe('')
+      // Before interaction - no data-dragging attribute
+      expect(content).not.toHaveAttribute('data-dragging')
 
       // Start keyboard resize (focus first)
       fireEvent.focus(divider)
       fireEvent.keyDown(divider, {key: 'ArrowRight'})
-      expect(content!.style.getPropertyValue('contain')).toBe('layout style paint')
+      expect(content).toHaveAttribute('data-dragging', 'true')
 
-      // End keyboard resize - removes optimization properties
+      // End keyboard resize - removes optimization attribute
       fireEvent.keyUp(divider, {key: 'ArrowRight'})
-      expect(content!.style.getPropertyValue('contain')).toBe('')
+      expect(content).not.toHaveAttribute('data-dragging')
     })
 
     it('should not add will-change during drag', async () => {

packages/react/src/PageLayout/paneUtils.ts

@@ -1,50 +1,29 @@
-/**
- * Apply CSS containment optimizations to isolate an element during resize/drag.
- * - contain: limits layout/paint recalc to this subtree
- * - content-visibility: skip rendering off-screen content (valuable for large DOMs)
- * - contain-intrinsic-size: prevents layout thrashing from size estimation when using content-visibility
- * - pointer-events: skip hit-testing large child trees
- */
-export function setContainmentOptimizations(element: HTMLElement | null) {
-  if (!element) return
-  element.style.contain = 'layout style paint'
-  element.style.contentVisibility = 'auto'
-  element.style.containIntrinsicSize = `auto ${element.offsetHeight}px`
-  element.style.pointerEvents = 'none'
-}
-
-/**
- * Remove CSS containment optimizations after resize/drag completes.
- */
-export function removeContainmentOptimizations(element: HTMLElement | null) {
-  if (!element) return
-  element.style.contain = ''
-  element.style.contentVisibility = ''
-  element.style.containIntrinsicSize = ''
-  element.style.pointerEvents = ''
-}
-
 type DraggingStylesParams = {
   handle: HTMLElement | null
   pane: HTMLElement | null
   content: HTMLElement | null
 }
 
+const DATA_DRAGGING_ATTR = 'data-dragging'
+
 /** Apply visual feedback and performance optimizations during drag */
 export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) {
+  // Handle visual feedback (must be inline for instant response)
   handle?.style.setProperty('background-color', 'var(--bgColor-accent-emphasis)')
   handle?.style.setProperty('--draggable-handle--drag-opacity', '1')
-  // Disable transition for instant visual feedback during drag
   handle?.style.setProperty('--draggable-handle--transition', 'none')
-  setContainmentOptimizations(content)
-  setContainmentOptimizations(pane)
+
+  // Set attribute for CSS containment (O(1) direct selector, not descendant)
+  pane?.setAttribute(DATA_DRAGGING_ATTR, 'true')
+  content?.setAttribute(DATA_DRAGGING_ATTR, 'true')
 }
 
 /** Remove drag styles and restore normal state */
 export function removeDraggingStyles({handle, pane, content}: DraggingStylesParams) {
   handle?.style.removeProperty('background-color')
   handle?.style.removeProperty('--draggable-handle--drag-opacity')
   handle?.style.removeProperty('--draggable-handle--transition')
-  removeContainmentOptimizations(content)
-  removeContainmentOptimizations(pane)
+
+  pane?.removeAttribute(DATA_DRAGGING_ATTR)
+  content?.removeAttribute(DATA_DRAGGING_ATTR)
 }

packages/react/src/PageLayout/usePaneWidth.test.ts

@@ -612,7 +612,7 @@ describe('usePaneWidth', () => {
       addEventListenerSpy.mockRestore()
     })
 
-    it('should apply and remove containment styles during resize', async () => {
+    it('should apply and remove containment attributes during resize', async () => {
       vi.useFakeTimers()
       vi.stubGlobal('innerWidth', 1280)
       const refs = createMockRefs()
@@ -627,32 +627,30 @@ describe('usePaneWidth', () => {
         }),
       )
 
-      // Initially no containment
-      expect(refs.paneRef.current?.style.contain).toBe('')
-      expect(refs.contentRef.current?.style.contain).toBe('')
+      // Initially no data-dragging attribute
+      expect(refs.paneRef.current?.hasAttribute('data-dragging')).toBe(false)
+      expect(refs.contentRef.current?.hasAttribute('data-dragging')).toBe(false)
 
       // Fire resize
       vi.stubGlobal('innerWidth', 1000)
       window.dispatchEvent(new Event('resize'))
 
-      // At this point, containment is applied but timing depends on throttle behavior
+      // At this point, attribute is applied but timing depends on throttle behavior
       // The key is that it gets cleaned up after
 
       // Wait for throttle to complete via rAF
       await act(async () => {
         await vi.runAllTimersAsync()
       })
 
-      // Containment should be removed after throttle completes
-      expect(refs.paneRef.current?.style.contain).toBe('')
-      expect(refs.paneRef.current?.style.contentVisibility).toBe('')
-      expect(refs.contentRef.current?.style.contain).toBe('')
-      expect(refs.contentRef.current?.style.contentVisibility).toBe('')
+      // Attribute should be removed after throttle completes
+      expect(refs.paneRef.current?.hasAttribute('data-dragging')).toBe(false)
+      expect(refs.contentRef.current?.hasAttribute('data-dragging')).toBe(false)
 
       vi.useRealTimers()
     })
 
-    it('should cleanup containment styles on unmount during resize', async () => {
+    it('should cleanup containment attributes on unmount during resize', async () => {
       vi.useFakeTimers()
       vi.stubGlobal('innerWidth', 1280)
       const refs = createMockRefs()
@@ -671,14 +669,12 @@ describe('usePaneWidth', () => {
       vi.stubGlobal('innerWidth', 1000)
       window.dispatchEvent(new Event('resize'))
 
-      // Unmount immediately (may or may not have styles depending on throttle timing)
+      // Unmount immediately (may or may not have attributes depending on throttle timing)
       unmount()
 
-      // Containment should be cleaned up on unmount regardless of timing
-      expect(refs.paneRef.current?.style.contain).toBe('')
-      expect(refs.paneRef.current?.style.contentVisibility).toBe('')
-      expect(refs.contentRef.current?.style.contain).toBe('')
-      expect(refs.contentRef.current?.style.contentVisibility).toBe('')
+      // Attribute should be cleaned up on unmount regardless of timing
+      expect(refs.paneRef.current?.hasAttribute('data-dragging')).toBe(false)
+      expect(refs.contentRef.current?.hasAttribute('data-dragging')).toBe(false)
 
       vi.useRealTimers()
     })

packages/react/src/PageLayout/usePaneWidth.ts

@@ -2,7 +2,6 @@ import React, {startTransition} from 'react'
 import {canUseDOM} from '../utils/environment'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import cssExports from './PageLayout.module.css'
-import {setContainmentOptimizations, removeContainmentOptimizations} from './paneUtils'
 
 // ----------------------------------------------------------------------------
 // Types
@@ -280,15 +279,15 @@ export function usePaneWidth({
     const startResizeOptimizations = () => {
       if (isResizing) return
       isResizing = true
-      setContainmentOptimizations(paneRef.current)
-      setContainmentOptimizations(contentRef.current)
+      paneRef.current?.setAttribute('data-dragging', 'true')
+      contentRef.current?.setAttribute('data-dragging', 'true')
     }
 
     const endResizeOptimizations = () => {
       if (!isResizing) return
       isResizing = false
-      removeContainmentOptimizations(paneRef.current)
-      removeContainmentOptimizations(contentRef.current)
+      paneRef.current?.removeAttribute('data-dragging')
+      contentRef.current?.removeAttribute('data-dragging')
     }
 
     const handleResize = () => {