Skip to content

v2026.10.03 fix(theme-list): restore copy buttons on redesigned themes page - #101

Merged
junaidkbr merged 4 commits into
mainfrom
fix/theme-list-redesign
Oct 3, 2026
Merged

junaidkbr merged 4 commits into
mainfrom
fix/theme-list-redesign

Conversation

@junaidkbr

Copy link
Copy Markdown
Member

Summary

Shopify's themes page redesign broke the theme list utilities: the ID and Preview URL copy buttons stopped appearing, on page refresh and after client-side navigation.

Theme list copy buttons (654a126)

  • The redesign removed the ThemeListItem class and s-internal-context-provider the script relied on, and Canvas themes link to /themes/:id/canvas instead of /editor. Items are now found via ul[class*="ThemeList"] > li, and the theme ID is parsed from any /themes/:id link.
  • The buttons are tertiary s-internal-buttons with clipboard icons, on their own row below the theme's actions. The actions row already wraps, so a full-width row drops below it without moving React's nodes. contain: inline-size keeps the row from widening the actions container, and a hidden, inert clone of the more-actions button lines the copy buttons up under "Edit theme". At 831px and below, where Shopify stacks the actions under the theme, the row aligns left and drops the spacer.
  • The themes page is a client-side-routed iframe, so setup now re-checks the path on wxt:locationchange and starts or stops its observer to match.
  • If React re-renders an item and drops the buttons, the next scan adds them back.

Dev script (50c1be5)

  • bun run dev started the changelog watcher in the background with nothing to stop it, so every wxt exit (failed Chrome launches included) left one running. A trap now kills it on exit, and the script still exits with wxt's exit code. watch:changelog is inlined, since nothing else used it.

Docs (639c2e3)

  • AGENTS.md trimmed to project-specific facts, with new notes on the Online Store iframe and on the Chrome for Testing profile version. CLAUDE.md (a one-line @AGENTS.md import) removed.

Test plan

  • bun test (748 pass), typecheck, lint, format:check, svelte-check
  • New entrypoints/theme-customizer.content/tests/theme-list.test.ts, built on markup captured from the live themes page (Canvas and editor themes, re-injection, spacer)
  • Manually verified on the themes page in the dev build: buttons render below the actions, aligned under "Edit theme", and at ≤831px
  • bun run dev then Ctrl+C: the watcher, wxt and Chrome all exit

Shopify's themes page redesign removed the ThemeListItem class and
s-internal-context-provider, and Canvas themes link to /canvas
instead of /editor, so no buttons were injected.

- Find items via ul[class*="ThemeList"] > li and parse the theme ID
  from any /themes/:id link
- Put tertiary s-internal-button copy buttons on their own row below
  the theme actions; a hidden clone of the more-actions button keeps
  them under "Edit theme", dropped at 831px and below
- Re-check the path on wxt:locationchange so client-side navigation
  to /themes injects too
The watcher ran in the background with nothing to stop it, so every
wxt exit, failed Chrome launches included, left one running.
@junaidkbr junaidkbr changed the title fix(theme-list): restore copy buttons on redesigned themes page v2026.10.03 fix(theme-list): restore copy buttons on redesigned themes page Oct 3, 2026
@junaidkbr
junaidkbr merged commit ba23242 into main Oct 3, 2026
2 checks passed
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.

1 participant