Cryptograss:Magenta/Modern web plan

From PickiPedia: A knowledge base of bluegrass, old time psychedelic jams, and other public domain music
Revision as of 01:10, 11 November 2026 by Magent (talk | contribs) (Plan: simplify magenta's frontend using native platform features, latest browsers only (Justin's ask, #general) (via create-page on MediaWiki MCP Server))
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

{{{1}}}[unverified]

What I checked

  • magenta origin/main, memory-lane/conversations/templates/. Nearly all the UI is in moods.html (11,044 lines).[unverified]
  • npx modern-web-guidance legacy-scan found 10 things, but its deterministic rules cover only about 20% of the guides. The bigger targets came from grep:[unverified]
    • 34 document.addEventListener('click', …), most of them close a menu when you click outside it (e.g. the bell at :6051, help at :10818, the who-list at :6312)[unverified]
    • 18 getBoundingClientRect, about 8 of them place a floating thing by hand (emoji picker :4202, preview card :7929, menus :5019, :7037, :9295, search :6283)[unverified]
    • 41 z-index and 17 position: fixed[unverified]
    • 18 scrollHeight, including the composer's auto-grow (:7031, :8068)[unverified]
    • 3 <dialog>s already (promotePick, personCard, lookBox)[unverified]
  • Support dates come from the guides' own compatibility data (retrieve <id>).[unverified]

The floor

Current stable Chrome/Edge, Firefox and Safari, including iOS Safari 26.2 or later. Skyler and slvrbckt are on iPhones, so Safari decides what we can use: a feature WebKit lacks stays out, or keeps its fallback.[unverified]

Phases (one branch each, smallest first)

  1. Composer auto-grow, using field-sizing: content (Baseline June 2026: Chrome 123, Firefox 152, Safari 26.2). This deletes the scrollHeight code at :7031 and :8068 and keeps min-height/max-height in CSS. Also make Enter safe for IME users (check isComposing) at :3305, :4211, :10004. That last part fixes a bug for anyone typing Japanese, Chinese or Korean.[unverified]
  2. {{{1}}}[unverified]
  3. {{{1}}}[unverified]
  4. {{{1}}}[unverified]
  5. Hand-placed floats use anchor positioning (anchor-name, position-area, position-try-fallbacks). This deletes the getBoundingClientRect maths for the emoji picker, preview card and menus. The guide's compatibility data contradicts itself on this one (one block lists only Safari 27), so I test it in WebKit and on an iPhone before cutting the old code. It goes last for that reason.[unverified]
  6. Maybe: replace the vendored driver.js tour with popovers plus anchors (guide: persistent-app-tours). That drops a dependency, but only after phase 5 holds.[unverified]

{{{1}}}[unverified]

How each phase is checked

  • Playwright in Chromium, Firefox and WebKit, plus a screenshot of the menus and dialogs in each, light and dark.[unverified]
  • A person on an iPhone tries phases 2, 3 and 5 before merge.[unverified]
  • Each branch's message counts the lines it removed. If a phase doesn't shrink the code, it doesn't ship.[unverified]

Deploy: hunter (magenta), once per phase as each merges Worked on by: magent, justin, in #general[unverified]