fix(client-devtools): stop table columns collapsing, deprecate the lean view - #105
Merged
Merged
Conversation
…an view
Every column in a devtools table was one character wide. The header read
downwards, one letter per line, and a query key came out as a single column of
characters running off the bottom.
`word-break: break-word` is the cause. It is a deprecated alias that computes
to `word-break: normal; overflow-wrap: anywhere`, and `anywhere`, unlike
`break-word`, shrinks an element's min-content size. In a table that makes every
column's minimum one character, so the auto layout hands the key column 1ch and
gives the slack to whichever column has an unbreakable header.
`overflow-wrap: break-word` still wraps a long key and leaves min-content at the
longest word. Both UIs had the rule; both are fixed.
The regression test asserts the declaration rather than a width, because jsdom
has no layout engine and cannot measure the thing that was wrong. That is a
weaker test than it looks and the comment says so.
`mountMini` is deprecated. The case for a second, smaller UI was bytes, and it
does not survive the fact that this package is dev-only: the React adapter is
behind a `development` export condition and a `NODE_ENV` guard, so none of it
reaches a production bundle and the ten kilobytes come off a development build.
The real cost was drift. The lean view still has a `log` tab where the panel has
a causal trace, and none of the network, overlay-stack or explain work reached
it. A second UI nobody updates is a second UI that lies about what the cache can
tell you.
So `ForgeDevtools` mounts the panel whatever you pass. `panel={false}` warns
once per page and mounts it anyway: honouring it would hand you a worse UI than
passing nothing at all, and silently ignoring a prop would be worse than either.
Once per page and not per render, because a deprecation that fires on every
render is noise you learn to scroll past.
Both stay working until the next major.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Conventional Commits ValidationPR Title: valid |
The panel had every view the design called for and none of its look. Tabs were still grey pills with an indigo selection, everything was monospace including the labels, tables had no state colour, and the selected row was a purple wash. That is the 2023 stylesheet with new components bolted on top, and calling it finished was wrong. The stylesheet is now the design's own token set: graphite ground, ember as the only accent and only for things you caused, and the semantic five kept for data. Chrome speaks sans and data speaks mono, which is the whole reason the old sheet read as one flat texture: labels and values were the same 12px monospace, so nothing separated a column header from a query key. Concretely, a selected tab carries an inset ember underline instead of an indigo fill, table headers are uppercase sans at 9.5px and do not wrap, cells are mono with tabular figures, a selected row gets an ember edge rather than a purple background, and rows, pills, chips and the vitals strip all read from the same tokens. The launcher no longer moves itself. It guessed a framework dev badge from an element name and lifted 62px off the bottom edge, so a page where that badge exists but is not in the corner, or is not rendered at all, still pushed the button away from where it belongs. Only an explicit `offset` moves it now. Sitting where you put it beats a clever guess.
Contributor
Conventional Commits ValidationPR Title: valid |
The panel had the views and none of the frame around them. No title bar, so nothing said which session you were looking at. No status bar, so the numbers that are true of the whole session were either missing or crammed into the row of tabs. Tabs carried no counts. The trace had no timestamps, its effects were undifferentiated grey, and the tags it raised were an inline label rather than a row. The vitals had no sparkline, so nothing on screen answered "is this cache busy right now". All of that is in now. The title bar carries the mark, the session and the event count, with the dock modes, density and close on the right. Tabs sit in their own row with a count each and the ember underline on the selected one. Every cause shows its wall clock to the millisecond, because two causes four milliseconds apart are a different story from two a second apart, and its effects are coloured by what they did: green reached and settled, coral failed, faint for a placement that meant no request. The status bar along the bottom holds the buckets, the event and request counts, the pending writes, the orphan tags and the two clear buttons, which is where session-wide things belong. The trace has facet chips like every other tab: mutations, frames, yours, errors, near misses, each with a count, and the n of n on the right. Near misses are capped at the closest one per cause. `nearMisses` sorts most-suspicious first and three banners under one mutation is a wall you skim rather than a warning you read. The tab bar is tabs and the filter box now. Everything else that was wedged in there moved to the bar it belongs to.
Contributor
Conventional Commits ValidationPR Title: valid |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Every column in a devtools table was one character wide. The header read
downwards, one letter per line, and a query key came out as a single column of
characters running off the bottom.
word-break: break-wordis the cause. It is a deprecated alias that computesto
word-break: normal; overflow-wrap: anywhere, andanywhere, unlikebreak-word, shrinks an element's min-content size. In a table that makes everycolumn's minimum one character, so the auto layout hands the key column 1ch and
gives the slack to whichever column has an unbreakable header.
overflow-wrap: break-wordstill wraps a long key and leaves min-content at thelongest word. Both UIs had the rule; both are fixed.
The regression test asserts the declaration rather than a width, because jsdom
has no layout engine and cannot measure the thing that was wrong. That is a
weaker test than it looks and the comment says so.
mountMiniis deprecated. The case for a second, smaller UI was bytes, and itdoes not survive the fact that this package is dev-only: the React adapter is
behind a
developmentexport condition and aNODE_ENVguard, so none of itreaches a production bundle and the ten kilobytes come off a development build.
The real cost was drift. The lean view still has a
logtab where the panel hasa causal trace, and none of the network, overlay-stack or explain work reached
it. A second UI nobody updates is a second UI that lies about what the cache can
tell you.
So
ForgeDevtoolsmounts the panel whatever you pass.panel={false}warnsonce per page and mounts it anyway: honouring it would hand you a worse UI than
passing nothing at all, and silently ignoring a prop would be worse than either.
Once per page and not per render, because a deprecation that fires on every
render is noise you learn to scroll past.
Both stay working until the next major.