ntp: customizer drawer

[shakyShane]

Asana Task/Github Issue: https://app.asana.com/0/1201141132935289/1208879908085793/f

Description

• added the global setup for the customizer drawer
• everything is behind a flag, so this can be merged/released without affecting production 💪
• 100% focus on performance 🚀
  • uses Preact signals directly on DOM attributes to trigger the global grid animation - this prevents all VDOM diffing, making it instantaneous even on the lowest powered devices
  • Rendering of children inside the drawer is deferred, to further prevent main-thread work whilst the animation is playing

Testing Steps

• First, ensure the page operates as normal with the regular popover menu https://deploy-preview-1291--content-scope-scripts.netlify.app/build/pages/new-tab/
• Second, add ?customizerDrawer=enabled, and verify it switches to a drawer layout, like https://deploy-preview-1291--content-scope-scripts.netlify.app/build/pages/new-tab/?customizerDrawer=enabled

WITHOUT feature flag

WITH feature flag

NOTE: It's deliberately not including panel content, styles or anything else, this PR is designed to be small and just focus on the infrastructure changes needed.

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

[shakyShane]

• ntp: customizer drawer #1291 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	90d651f
🔍 Latest deploy log	https://app.netlify.com/sites/content-scope-scripts/deploys/674d9b93bd924400082be95e
😎 Deploy Preview	https://deploy-preview-1291--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1291
• Commit Hash: 42df6997137d3f55ba905508c1d79dcf88fed85c
• Install Command: npm i github:duckduckgo/content-scope-scripts#42df6997137d3f55ba905508c1d79dcf88fed85c

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Mon, 02 Dec 2024 11:36:45 GMT

Integration

    - integration/pages/new-tab/js/index.css

• integration/pages/new-tab/js/index.js

File has changed

Windows

    - windows/pages/new-tab/js/index.css

• windows/pages/new-tab/js/index.js

File has changed

Apple

    - dist/pages/new-tab/js/index.css

• dist/pages/new-tab/js/index.js

File has changed