Stop injecting an !important background over the Studio - #6
Merged
Conversation
The Studio's grid background never rendered in the app, and the host was doing it.
On dom-ready the Studio window injected:
html, body { background: #141415 !important; }
`background` is a shorthand, so with !important it resets background-image and
background-size to their initial values. Nothing in a stylesheet can outrank it,
which is why the grid painted correctly in a browser and computed to
`background-image: none` in the app. And because it is injected on dom-ready it
lands after first paint — the grid appeared, then vanished, which reads as the page
overriding itself. A long time was spent looking for that override inside the
page, where it was not.
It was belt-and-braces against a white flash on a cold load. The window already
sets `backgroundColor: "#141415"`, which is painted before the page exists —
earlier than any injected rule can manage — so the injection bought nothing and
cost every future page texture.
The drag region stays. That one genuinely belongs to the host: it is about the
window frame, a served page has no reason to know about it, and the rules are
inert in a browser.
The editor window has the same shape (`html, body, #root { background: #09090b
!important }`) and is left alone: its wallpaper paints on .previewFrame, deeper in
the tree, so the shorthand does not reach it. Worth revisiting, not worth changing
blind.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
`matches the display name macOS reads out of Info.plist` still required CFBundleName to equal PRODUCT_NAME. I removed that override two PRs ago to stop Electron looking for "RoleModel Studio Helper.app", and did not run this suite — only the ai-edition tests, the typecheck and biome. It has been red since. Split rather than deleted, because the reason CFBundleName must stay unset is worth asserting: Electron resolves its helper apps from it, electron-builder names them after productName, and setting it aborted the app before it drew a window. The new test says so, and names the FATAL it caused. CFBundleDisplayName still has to equal PRODUCT_NAME — that is the one a person reads. electron suite: 588 passing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
The Studio's grid background never rendered in the app, and the host was doing it.
On
dom-readythe Studio window injected:backgroundis a shorthand, so with!importantit resetsbackground-imageandbackground-sizeto their initial values. Nothing in a stylesheet can outrank it — which is why the grid painted correctly in a plain browser and computed tobackground-image: nonein the app:And because it's injected on
dom-readyit lands after first paint: the grid appeared, then vanished. That reads as the page overriding itself, and a lot of time went into looking for that override inside the page, where it wasn't.It was belt-and-braces against a white flash on a cold load. The window already sets
backgroundColor: "#141415", painted before the page exists — earlier than any injected rule can manage. So the injection bought nothing and cost every future page texture.The drag region stays. That genuinely belongs to the host: it's about the window frame, a served page has no reason to know about it, and the rules are inert in a browser.
Also in here
A test I broke two PRs ago and shipped red. still required
CFBundleName === PRODUCT_NAME, which I removed to stop Electron hunting for "RoleModel Studio Helper.app". I'd only run the ai-edition tests, typecheck and biome on that PR.Split rather than deleted, because why CFBundleName must stay unset is worth asserting — the new test names the FATAL it caused.
Left alone
The editor window has the same shape (
html, body, #root { background: #09090b !important }). Its wallpaper paints on.previewFrame, deeper in the tree, so the shorthand doesn't reach it. Worth revisiting; not worth changing blind.electron suite: 588 passing.
🤖 Generated with Claude Code