timescale.info#216 · One event dialog: the duration form is a panel beside the moment's (#215)
- timeline-app
- pull request
Closes #215. Since #211, choosing **Duration** on a new event closed the moment ` ` and called `showModal()` on the duration ` `. Each of those makes the browser restyle the whole page, and closing the moment dialog also redrew the timeline. CI's browser UI benchmark (`new-duration`, 1,000 moments) went from about 19 ms to 43–58 ms unthrottled, and from about 50 ms to 105–153 ms at 4× throttling. That last figure failed #214's gate. ## Change The event dialog is now one ` ` with two panels: `#moment-panel` (the moment's details, or a group's) and `#duration-dialog` (the duration form). Switching tabs shows one panel and hides the other, so nothing modal changes. - **Callers unchanged:** a small stand-in, `durationDialog`, keeps the old dialog's `open`, `showModal()` and `close()`, so the ten callers stay as they were. - **Stacking replaced:** a duration opened from a moment's or group's details used to stack a second dialog on top. Its panel now replaces the moment's, and **Save**, **Cancel**, **×** or **Escape** return to the moment. A duration opened by itself closes the dialog. A backdrop click closes the whole dialog. - **Removed:** `switchDialog` and the `data-dialog-switched` animation override from #211 are no longer needed. ## Measured locally Playwright Docker image, `bench/ui.mjs`, 1,000 moments, 7 samples: | | before | after | open-moment, for reference | | --- | --- | --- | --- | | new-duration | 123 ms | **23 ms** | 29 ms | | new-duration, 4× throttled | 523 ms | **93 ms** | 92 ms | A CPU profile of the switch no longer shows `close`, `showModal` or a timeline redraw. ## Tests - `test/issues-browser.mjs` checks the new behaviour: a new duration started from a moment's details returns to the moment on Save, and one opened from the moment's list returns to it on Escape. - Updated for the single dialog: the moment-dialog test (the moment panel hides on switching) and the test helpers (closing the dialog while a duration shows uses the duration's ×). - `npm test` (299). `test/browser.mjs` and `test/offline-browser.mjs` pass in Chromium, Firefox and WebKit. After this merges, #214's UI benchmark gate can be rerun.