-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Polish dev-overlay text styling #63721
Conversation
Failing test suitesCommit: 03c43a0
Expand output● i18n Support › with localeDetection disabled › production mode › should have localeDetection in routes-manifest
● i18n Support › with localeDetection disabled › production mode › should not detect locale from accept-language
● i18n Support › with localeDetection disabled › production mode › should ignore the invalid accept-language header
● i18n Support › with localeDetection disabled › production mode › should set locale from detected path
● i18n Support › with trailingSlash: false › production mode › should redirect correctly
Read more about building and testing Next.js in contributing.md. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think current colors are almost already too weak in terms of contrast, not sure if we should make the text even lighter in terms of making it less prominent.
Perhaps reorganizing would be better? I.e. put the code frame above the text, if we want people to focus on that more.
We can also make the font-weight lighter, it feels like the whole text is bold already.
I don't think the grey link stands out well, it blends in with the rest of the text too much. Instead of the red color, what do you think about something like:
Given that the link has a lot of useful context about possible issues besides the user's code (ie. chrome extensions), I think we should keep the link prominent.
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
buildDuration | 14.6s | 14.7s | N/A |
buildDurationCached | 8.1s | 6.9s | N/A |
nodeModulesSize | 198 MB | 198 MB | |
nextStartRea..uration (ms) | 412ms | 410ms | N/A |
Client Bundles (main, webpack)
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
2453-HASH.js gzip | 30.8 kB | 30.8 kB | N/A |
3304.HASH.js gzip | 181 B | 181 B | ✓ |
3f784ff6-HASH.js gzip | 53.7 kB | 53.7 kB | ✓ |
8299-HASH.js gzip | 5.04 kB | 5.04 kB | N/A |
framework-HASH.js gzip | 45.2 kB | 45.2 kB | ✓ |
main-app-HASH.js gzip | 242 B | 242 B | ✓ |
main-HASH.js gzip | 32.2 kB | 32.2 kB | N/A |
webpack-HASH.js gzip | 1.68 kB | 1.68 kB | N/A |
Overall change | 99.3 kB | 99.3 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
_app-HASH.js gzip | 196 B | 197 B | N/A |
_error-HASH.js gzip | 184 B | 184 B | ✓ |
amp-HASH.js gzip | 505 B | 505 B | ✓ |
css-HASH.js gzip | 324 B | 325 B | N/A |
dynamic-HASH.js gzip | 2.5 kB | 2.5 kB | N/A |
edge-ssr-HASH.js gzip | 258 B | 258 B | ✓ |
head-HASH.js gzip | 352 B | 352 B | ✓ |
hooks-HASH.js gzip | 370 B | 371 B | N/A |
image-HASH.js gzip | 4.21 kB | 4.21 kB | ✓ |
index-HASH.js gzip | 259 B | 259 B | ✓ |
link-HASH.js gzip | 2.67 kB | 2.67 kB | N/A |
routerDirect..HASH.js gzip | 314 B | 312 B | N/A |
script-HASH.js gzip | 386 B | 386 B | ✓ |
withRouter-HASH.js gzip | 309 B | 309 B | ✓ |
1afbb74e6ecf..834.css gzip | 106 B | 106 B | ✓ |
Overall change | 6.57 kB | 6.57 kB | ✓ |
Client Build Manifests
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
_buildManifest.js gzip | 481 B | 484 B | N/A |
Overall change | 0 B | 0 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
index.html gzip | 529 B | 529 B | ✓ |
link.html gzip | 541 B | 541 B | ✓ |
withRouter.html gzip | 524 B | 523 B | N/A |
Overall change | 1.07 kB | 1.07 kB | ✓ |
Edge SSR bundle Size
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
edge-ssr.js gzip | 95.3 kB | 95.3 kB | N/A |
page.js gzip | 3.04 kB | 3.04 kB | N/A |
Overall change | 0 B | 0 B | ✓ |
Middleware size
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
middleware-b..fest.js gzip | 624 B | 628 B | N/A |
middleware-r..fest.js gzip | 151 B | 151 B | ✓ |
middleware.js gzip | 25.5 kB | 25.5 kB | N/A |
edge-runtime..pack.js gzip | 839 B | 839 B | ✓ |
Overall change | 990 B | 990 B | ✓ |
Next Runtimes
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
app-page-exp...dev.js gzip | 170 kB | 170 kB | ✓ |
app-page-exp..prod.js gzip | 96.8 kB | 96.8 kB | ✓ |
app-page-tur..prod.js gzip | 98.5 kB | 98.5 kB | ✓ |
app-page-tur..prod.js gzip | 92.8 kB | 92.8 kB | ✓ |
app-page.run...dev.js gzip | 144 kB | 144 kB | ✓ |
app-page.run..prod.js gzip | 91.3 kB | 91.3 kB | ✓ |
app-route-ex...dev.js gzip | 21.3 kB | 21.3 kB | ✓ |
app-route-ex..prod.js gzip | 15 kB | 15 kB | ✓ |
app-route-tu..prod.js gzip | 15 kB | 15 kB | ✓ |
app-route-tu..prod.js gzip | 14.8 kB | 14.8 kB | ✓ |
app-route.ru...dev.js gzip | 21 kB | 21 kB | ✓ |
app-route.ru..prod.js gzip | 14.8 kB | 14.8 kB | ✓ |
pages-api-tu..prod.js gzip | 9.55 kB | 9.55 kB | ✓ |
pages-api.ru...dev.js gzip | 9.82 kB | 9.82 kB | ✓ |
pages-api.ru..prod.js gzip | 9.55 kB | 9.55 kB | ✓ |
pages-turbo...prod.js gzip | 22.5 kB | 22.5 kB | ✓ |
pages.runtim...dev.js gzip | 23.1 kB | 23.1 kB | ✓ |
pages.runtim..prod.js gzip | 22.4 kB | 22.4 kB | ✓ |
server.runti..prod.js gzip | 50.9 kB | 50.9 kB | ✓ |
Overall change | 943 kB | 943 kB | ✓ |
build cache Overall increase ⚠️
vercel/next.js canary | vercel/next.js style/not-highlight-the-link | Change | |
---|---|---|---|
0.pack gzip | 1.57 MB | 1.56 MB | N/A |
index.pack gzip | 105 kB | 106 kB | |
Overall change | 105 kB | 106 kB |
Diff details
Diff for middleware.js
Diff too large to display
Follow up for #63522
Adding more polish details for the dev overlay header
Closes NEXT-2935