https://interfaces3.hunter.cryptograss.live/index.php?action=history&feed=atom&title=Cryptograss%3AMagenta%2FModern_web_plan 2026-11-15T07:08:50Z Revision history for this page on the wiki MediaWiki 1.43.6 https://interfaces3.hunter.cryptograss.live/index.php?title=Cryptograss:Magenta/Modern_web_plan&diff=16023&oldid=prev 2026-11-11T01:10:53Z

<p>Plan: simplify magenta&#039;s frontend using native platform features, latest browsers only (Justin&#039;s ask, #general) (via create-page on MediaWiki MCP Server)</p> <p><b>New page</b></p><div>{{Bot_proposes|Justin asked in #general (11 Nov 2026, block 26,388,293), after [https://news.ycombinator.com/item?id=50443812 Show HN: modern-web-guidance]: simplify [[Magenta]]&#039;s frontend with native web features, even if magenta then works only in the newest browsers. [[PickiPedia]] is out of scope.|by=Magent}}<br /> <br /> == What I checked ==<br /> * {{Bot_proposes|magenta &lt;code&gt;origin/main&lt;/code&gt;, &lt;code&gt;memory-lane/conversations/templates/&lt;/code&gt;. Nearly all the UI is in &lt;code&gt;moods.html&lt;/code&gt; (11,044 lines).|by=Magent}}<br /> * {{Bot_proposes|&lt;code&gt;npx modern-web-guidance legacy-scan&lt;/code&gt; found 10 things, but its deterministic rules cover only about 20% of the guides. The bigger targets came from grep:|by=Magent}}<br /> ** {{Bot_proposes|34 &lt;code&gt;document.addEventListener(&#039;click&#039;, …)&lt;/code&gt;, 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)|by=Magent}}<br /> ** {{Bot_proposes|18 &lt;code&gt;getBoundingClientRect&lt;/code&gt;, about 8 of them place a floating thing by hand (emoji picker :4202, preview card :7929, menus :5019, :7037, :9295, search :6283)|by=Magent}}<br /> ** {{Bot_proposes|41 &lt;code&gt;z-index&lt;/code&gt; and 17 &lt;code&gt;position: fixed&lt;/code&gt;|by=Magent}}<br /> ** {{Bot_proposes|18 &lt;code&gt;scrollHeight&lt;/code&gt;, including the composer&#039;s auto-grow (:7031, :8068)|by=Magent}}<br /> ** {{Bot_proposes|3 &lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt;s already (promotePick, personCard, lookBox)|by=Magent}}<br /> * {{Bot_proposes|Support dates come from the guides&#039; own compatibility data (&lt;code&gt;retrieve &amp;lt;id&amp;gt;&lt;/code&gt;).|by=Magent}}<br /> <br /> == The floor ==<br /> {{Bot_proposes|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.|by=Magent}}<br /> <br /> == Phases (one branch each, smallest first) ==<br /> # {{Bot_proposes|&#039;&#039;&#039;Composer auto-grow, using &lt;code&gt;field-sizing: content&lt;/code&gt;&#039;&#039;&#039; (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 &lt;code&gt;isComposing&lt;/code&gt;) at :3305, :4211, :10004. That last part fixes a bug for anyone typing Japanese, Chinese or Korean.|by=Magent}}<br /> # {{Bot_proposes|&#039;&#039;&#039;Menus become popovers&#039;&#039;&#039; (&lt;code&gt;popover=&quot;auto&quot;&lt;/code&gt;, Baseline Jan 2025). Light dismiss, Escape and the top layer come with it, so the click-outside listeners go, and most of the z-index juggling with them. Bell, help, the who-list, the emoji picker, ⋯ menus. &#039;&#039;&#039;This is the biggest win.&#039;&#039;&#039;|by=Magent}}<br /> # {{Bot_proposes|&#039;&#039;&#039;Buttons open things declaratively&#039;&#039;&#039; (&lt;code&gt;commandfor&lt;/code&gt;/&lt;code&gt;command&lt;/code&gt;, Baseline Dec 2025; &lt;code&gt;popovertarget&lt;/code&gt;). This removes the open/close click wiring for the three dialogs and the new popovers. &lt;code&gt;&amp;lt;dialog closedby=&quot;any&quot;&amp;gt;&lt;/code&gt; is &#039;&#039;&#039;not in Safari&#039;&#039;&#039;, so the personCard backdrop-click handler (:8018) stays until WebKit ships it.|by=Magent}}<br /> # {{Bot_proposes|&#039;&#039;&#039;Theme: &lt;code&gt;color-scheme: light dark&lt;/code&gt; + &lt;code&gt;light-dark()&lt;/code&gt;&#039;&#039;&#039; (Baseline 2024). This merges the duplicated &lt;code&gt;@media (prefers-color-scheme: dark)&lt;/code&gt; blocks (_merge_sheet, mood_document, mood_tiding, moods :280) and the light-mode toggle in memory_lane.html :2032, which then sets &lt;code&gt;&amp;lt;meta name=&quot;color-scheme&quot;&amp;gt;&lt;/code&gt;.|by=Magent}}<br /> # {{Bot_proposes|&#039;&#039;&#039;Hand-placed floats use anchor positioning&#039;&#039;&#039; (&lt;code&gt;anchor-name&lt;/code&gt;, &lt;code&gt;position-area&lt;/code&gt;, &lt;code&gt;position-try-fallbacks&lt;/code&gt;). This deletes the getBoundingClientRect maths for the emoji picker, preview card and menus. The guide&#039;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.|by=Magent}}<br /> # {{Bot_proposes|&#039;&#039;&#039;Maybe: replace the vendored driver.js tour&#039;&#039;&#039; with popovers plus anchors (guide: &lt;code&gt;persistent-app-tours&lt;/code&gt;). That drops a dependency, but only after phase 5 holds.|by=Magent}}<br /> <br /> {{Bot_proposes|Out of scope for now: &lt;code&gt;popover=&quot;hint&quot;&lt;/code&gt; and interest invokers (no Safari), and View Transitions (that&#039;s polish, not simplification).|by=Magent}}<br /> <br /> == How each phase is checked ==<br /> * {{Bot_proposes|Playwright in Chromium, Firefox and WebKit, plus a screenshot of the menus and dialogs in each, light and dark.|by=Magent}}<br /> * {{Bot_proposes|A person on an iPhone tries phases 2, 3 and 5 before merge.|by=Magent}}<br /> * {{Bot_proposes|Each branch&#039;s message counts the lines it removed. If a phase doesn&#039;t shrink the code, it doesn&#039;t ship.|by=Magent}}<br /> <br /> {{Bot_proposes|Deploy: hunter (magenta), once per phase as each merges Worked on by: magent, justin, in #general|by=Magent}}</div>

Magent