Repository navigation
Settings tabs' cards fill the pane, and thin scrollbars - #75
Merged
Merged
Conversation
The Update tab's cards no longer stop at 36rem: they fill the pane, edge to edge, as the tab bar above them does. The docs say a tab's cards fill the pane, and a readable width, where one is wanted, is the text inside a card. Every element that scrolls has a thin scrollbar: 6px, no arrow buttons, the thumb the theme's text colour at half on a track that isn't drawn, 3:1 or more against the page in both themes, and stronger while hovered. It's drawn through ::-webkit-scrollbar: the standard scrollbar-width: thin still draws an arrow button at each end on Windows and Linux, and setting it would switch the pseudo-elements off, so kit.css sets neither standard property. The thumb's tokens are set on each theme's root.
The Queue scrolls in its four states (its cards, three selected, the form over it, the dot on the collapsed rail), so its 26 images show the thin bar and the cards take the width the old one held. The rest are unchanged.
Merged
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
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.
Closes #68. Closes #70.
Cards fill the pane (#68)
.update-tabloses itsmax-width: 36rem, so the Update tab's two cards fill the pane edge to edge, as the tab bar above them does. The channel's select keeps its 16rem.docs/shell.mdnow says a tab's cards fill the pane (an app's own tabs too), and that a readable width, where one is wanted, is the text inside a card. No other Settings tab had a cap: Credits and an app's own tab already fill the pane.Thin scrollbars (#70)
Every element that scrolls gets a thin scrollbar: 6px, no arrow buttons, and the thumb is the theme's text colour at half on a track that isn't drawn. It's stronger while hovered.
scrollbar-width: thin: measured in the demo's Electron 44, Chromium's thin bar (10px) still draws an arrow button at each end, on Windows and on Linux. So the bar is drawn through::-webkit-scrollbarinstead. Chromium ignores those pseudo-elements on any element that setsscrollbar-widthorscrollbar-color, sokit.csssets neither. An app that sets one on an element gets Chromium's own bar there, asdocs/theming.md(Scrollbars) says.--scrollbar-widthstays 6px.--scrollbar-thumband--scrollbar-thumb-hoverare nowrgba(var(--bs-body-color-rgb), 0.5)and0.7, set on each theme's root (:root, [data-bs-theme]), so a part of the page in the other theme gets its own.Tests
test/kit-css.test.js: the tokens, the theme rule, the four::-webkit-scrollbarrules, no arrow-button rule, no standard scrollbar property anywhere, and no cap on a Settings tab except the channel's select (321 unit tests).e2e/scrollbars.spec.jschecks the Settings pane, a card grid and the bottom bar's panel in both themes. It checks the computed values: the standard propertiesauto, the bar 6px each way, its track transparent, its thumb the text colour at half. It also checks what the window draws down the bar's middle: the thumb from the very top and nothing under it (a run withthinforced fails here), and 3:1 or more throughtesting/contrast. A last test proves that an element settingscrollbar-widthgets Chromium's bar.e2e/update-tab.spec.js: the Update cards are as wide as the pane at 760px and at 1400px.e2e/shell.spec.js: every Settings tab's content (General, Update, Credits) fills the pane at 1400px.Visual baselines
26 images changed, the Queue's four states in each accent and theme where they're pictured: its cards, three selected, the form over it, and the dot on the collapsed rail. The Queue scrolls, so these images show the thin bar, and the cards take the width the old bar held. They came from the hand-run job (run 40365482901). That job also redrew 5 images that still match locally, and those are put back, so 60 of the 86 are unchanged. The Update tab's images don't change: at the spec's 760px the pane is already narrower than the old cap.