From 6679cd999e5ba21771c942d80b48d9a84481a604 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Sat, 14 Jun 2025 01:19:37 +0200 Subject: [PATCH 01/10] [devtools] panel ui footer --- .../devtools-panel/devtools-panel.tsx | 197 +++++++++++++----- .../dev-overlay/components/dialog/dialog.tsx | 1 + .../next-devtools/dev-overlay/icons/bug.tsx | 17 ++ .../dev-overlay/icons/question.tsx | 17 ++ 4 files changed, 179 insertions(+), 53 deletions(-) create mode 100644 packages/next/src/next-devtools/dev-overlay/icons/bug.tsx create mode 100644 packages/next/src/next-devtools/dev-overlay/icons/question.tsx diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx index 576d501b640f0..a610631b68d1f 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx @@ -15,6 +15,8 @@ import { Draggable } from '../errors/dev-tools-indicator/draggable' import { INDICATOR_PADDING } from '../devtools-indicator/devtools-indicator' import { FullScreenIcon } from '../../icons/fullscreen' import { Cross } from '../../icons/cross' +import { QuestionIcon } from '../../icons/question' +import { BugIcon } from '../../icons/bug' export function DevToolsPanel({ state, @@ -61,61 +63,85 @@ export function DevToolsPanel({ }) }} > - - - -
-
- - - -
-
- {/* TODO: Currently no-op, will add fullscreen toggle. */} - - + <> + + + +
+
+ + + +
+
+ {/* TODO: Currently no-op, will add fullscreen toggle. */} + + +
+ + + + +
+
+
+ Next.js + v15.0.0 +
+
+ Next.js + v15.0.0
- - - -
+ +
+ {/* TODO: Add help feature, details TBD */} + + {/* TODO: Add debugging/report GitHub issue feature, details TBD */} + +
+ + ) @@ -234,4 +260,69 @@ export const DEVTOOLS_PANEL_STYLES = css` background-color: var(--color-gray-300); } } + + [data-nextjs-devtools-panel-footer] { + background-color: var(--color-background-200); + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + border-top: 1px solid var(--color-gray-400); + } + + [data-nextjs-devtools-panel-footer-tab-group] { + display: flex; + align-items: center; + } + + [data-nextjs-devtools-panel-footer-tab] { + display: flex; + align-items: center; + padding: 12px; + gap: 8px; + align-self: stretch; + border-right: 1px solid var(--color-gray-400); + + color: var(--color-gray-900); + font-size: 12px; + font-family: var(--font-stack-monospace); + } + + [data-nextjs-devtools-panel-footer-action-button-group] { + display: flex; + align-items: center; + gap: 8px; + padding-right: 8px; + } + + [data-nextjs-devtools-panel-footer-action-button] { + display: flex; + justify-content: center; + align-items: center; + + padding: 4px; + background: var(--color-background-100); + background-clip: padding-box; + border: 1px solid var(--color-gray-alpha-400); + box-shadow: var(--shadow-small); + border-radius: var(--rounded-full); + color: var(--color-gray-800); + + &:focus { + outline: var(--focus-ring); + } + + &:not(:disabled):hover { + background: var(--color-gray-alpha-100); + } + + &:not(:disabled):active { + background: var(--color-gray-alpha-200); + } + + &:disabled { + background-color: var(--color-gray-100); + cursor: not-allowed; + } + } ` diff --git a/packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx b/packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx index 13d0968a544be..1df46f9264c7c 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx @@ -17,6 +17,7 @@ const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [ '[data-nextjs-error-overlay-nav]', '[data-info-popover]', '[data-nextjs-devtools-panel-overlay]', + '[data-nextjs-devtools-panel-footer]', ] const Dialog: React.FC = function Dialog({ diff --git a/packages/next/src/next-devtools/dev-overlay/icons/bug.tsx b/packages/next/src/next-devtools/dev-overlay/icons/bug.tsx new file mode 100644 index 0000000000000..c949d666cb543 --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/icons/bug.tsx @@ -0,0 +1,17 @@ +export function BugIcon(props: React.SVGProps) { + return ( + + + + ) +} diff --git a/packages/next/src/next-devtools/dev-overlay/icons/question.tsx b/packages/next/src/next-devtools/dev-overlay/icons/question.tsx new file mode 100644 index 0000000000000..7520406f7f99c --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/icons/question.tsx @@ -0,0 +1,17 @@ +export function QuestionIcon(props: React.SVGProps) { + return ( + + + + ) +} From beeee3f0b9e18c1bb0cc9299ec3c03948e3d8d44 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Sat, 14 Jun 2025 01:25:21 +0200 Subject: [PATCH 02/10] add turbopack indicator --- .../devtools-panel/devtools-panel.stories.tsx | 16 ++++++++++++++++ .../components/devtools-panel/devtools-panel.tsx | 4 ++++ 2 files changed, 20 insertions(+) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx index d25c91afe7bae..e9c841372d79f 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx @@ -39,3 +39,19 @@ export const WithIssues: Story = { issueCount: 3, }, } + +export const Turbopack: Story = { + beforeEach: () => { + process.env.TURBOPACK = 'true' + + // clean up callback function + return () => { + delete process.env.TURBOPACK + } + }, + args: { + state, + dispatch: () => {}, + issueCount: 0, + }, +} diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx index a610631b68d1f..b8b335e72eb7f 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx @@ -139,6 +139,10 @@ export function DevToolsPanel({ +
+ TURBOPACK + {process.env.TURBOPACK ? 'Enabled' : 'Disabled'} +
From 9c12a03c209b23b3ba1b6fbb642c8531056eea79 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Sat, 14 Jun 2025 01:54:45 +0200 Subject: [PATCH 03/10] port footer out --- .../devtools-panel/devtools-panel-footer.tsx | 101 ++++++++++++++++++ .../devtools-panel/devtools-panel.tsx | 95 +--------------- 2 files changed, 103 insertions(+), 93 deletions(-) create mode 100644 packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx new file mode 100644 index 0000000000000..cbcf619475a0e --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx @@ -0,0 +1,101 @@ +import type { OverlayState } from '../../shared' + +import { DevToolsPanelVersionInfo } from './devtools-panel-version-info' +import { QuestionIcon } from '../../icons/question' +import { BugIcon } from '../../icons/bug' +import { css } from '../../utils/css' + +export function DevToolsPanelFooter({ + versionInfo, +}: { + versionInfo: OverlayState['versionInfo'] +}) { + return ( +
+
+ +
+ TURBOPACK + {process.env.TURBOPACK ? 'Enabled' : 'Disabled'} +
+
+
+ {/* TODO: Add help feature, details TBD */} + + {/* TODO: Add debugging/report GitHub issue feature, details TBD */} + +
+
+ ) +} + +export const DEVTOOLS_PANEL_FOOTER_STYLES = css` + [data-nextjs-devtools-panel-footer] { + background-color: var(--color-background-200); + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + border-top: 1px solid var(--color-gray-400); + } + + [data-nextjs-devtools-panel-footer-tab-group] { + display: flex; + align-items: center; + } + + [data-nextjs-devtools-panel-footer-tab] { + display: flex; + align-items: center; + padding: 12px; + gap: 8px; + align-self: stretch; + border-right: 1px solid var(--color-gray-400); + + color: var(--color-gray-900); + font-size: 12px; + font-family: var(--font-stack-monospace); + } + + [data-nextjs-devtools-panel-footer-action-button-group] { + display: flex; + align-items: center; + gap: 8px; + padding-right: 8px; + } + + [data-nextjs-devtools-panel-footer-action-button] { + display: flex; + justify-content: center; + align-items: center; + + padding: 4px; + background: var(--color-background-100); + background-clip: padding-box; + border: 1px solid var(--color-gray-alpha-400); + box-shadow: var(--shadow-small); + border-radius: var(--rounded-full); + color: var(--color-gray-800); + + &:focus { + outline: var(--focus-ring); + } + + &:not(:disabled):hover { + background: var(--color-gray-alpha-100); + } + + &:not(:disabled):active { + background: var(--color-gray-alpha-200); + } + + &:disabled { + background-color: var(--color-gray-100); + cursor: not-allowed; + } + } +` diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx index b8b335e72eb7f..6ff3baefed24f 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx @@ -2,6 +2,7 @@ import type { OverlayDispatch, OverlayState } from '../../shared' import { useState } from 'react' +import { DevToolsPanelFooter } from './devtools-panel-footer' import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog' import { Overlay } from '../overlay/overlay' import { @@ -15,8 +16,6 @@ import { Draggable } from '../errors/dev-tools-indicator/draggable' import { INDICATOR_PADDING } from '../devtools-indicator/devtools-indicator' import { FullScreenIcon } from '../../icons/fullscreen' import { Cross } from '../../icons/cross' -import { QuestionIcon } from '../../icons/question' -import { BugIcon } from '../../icons/bug' export function DevToolsPanel({ state, @@ -119,32 +118,7 @@ export function DevToolsPanel({ -
-
-
- Next.js - v15.0.0 -
-
- Next.js - v15.0.0 -
-
-
- {/* TODO: Add help feature, details TBD */} - - {/* TODO: Add debugging/report GitHub issue feature, details TBD */} - -
- TURBOPACK - {process.env.TURBOPACK ? 'Enabled' : 'Disabled'} -
-
-
+ @@ -264,69 +238,4 @@ export const DEVTOOLS_PANEL_STYLES = css` background-color: var(--color-gray-300); } } - - [data-nextjs-devtools-panel-footer] { - background-color: var(--color-background-200); - display: flex; - justify-content: space-between; - align-items: center; - margin-top: auto; - border-top: 1px solid var(--color-gray-400); - } - - [data-nextjs-devtools-panel-footer-tab-group] { - display: flex; - align-items: center; - } - - [data-nextjs-devtools-panel-footer-tab] { - display: flex; - align-items: center; - padding: 12px; - gap: 8px; - align-self: stretch; - border-right: 1px solid var(--color-gray-400); - - color: var(--color-gray-900); - font-size: 12px; - font-family: var(--font-stack-monospace); - } - - [data-nextjs-devtools-panel-footer-action-button-group] { - display: flex; - align-items: center; - gap: 8px; - padding-right: 8px; - } - - [data-nextjs-devtools-panel-footer-action-button] { - display: flex; - justify-content: center; - align-items: center; - - padding: 4px; - background: var(--color-background-100); - background-clip: padding-box; - border: 1px solid var(--color-gray-alpha-400); - box-shadow: var(--shadow-small); - border-radius: var(--rounded-full); - color: var(--color-gray-800); - - &:focus { - outline: var(--focus-ring); - } - - &:not(:disabled):hover { - background: var(--color-gray-alpha-100); - } - - &:not(:disabled):active { - background: var(--color-gray-alpha-200); - } - - &:disabled { - background-color: var(--color-gray-100); - cursor: not-allowed; - } - } ` From 8f5b1911aefc02587fa1cead0e9cc72650673b10 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Sat, 14 Jun 2025 01:55:03 +0200 Subject: [PATCH 04/10] version info --- .../devtools-panel-version-info.stories.tsx | 95 +++++++++++++++++++ .../devtools-panel-version-info.tsx | 56 +++++++++++ .../devtools-panel/devtools-panel.stories.tsx | 5 + .../version-staleness-info.tsx | 15 +-- .../dev-overlay/icons/eclipse.tsx | 14 +++ .../dev-overlay/styles/component-styles.tsx | 4 + 6 files changed, 175 insertions(+), 14 deletions(-) create mode 100644 packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.stories.tsx create mode 100644 packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx create mode 100644 packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.stories.tsx new file mode 100644 index 0000000000000..60a8f861dd27c --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.stories.tsx @@ -0,0 +1,95 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { DevToolsPanelVersionInfo } from './devtools-panel-version-info' +import { withShadowPortal } from '../../storybook/with-shadow-portal' + +const meta: Meta = { + component: DevToolsPanelVersionInfo, + parameters: { + layout: 'centered', + }, + decorators: [withShadowPortal], +} + +export default meta +type Story = StoryObj + +// Mock version info for different scenarios +const mockVersionInfo = { + fresh: { + installed: '15.0.0', + expected: '15.0.0', + staleness: 'fresh' as const, + }, + stalePatch: { + installed: '15.0.0', + expected: '15.0.1', + staleness: 'stale-patch' as const, + }, + staleMinor: { + installed: '15.0.0', + expected: '15.1.0', + staleness: 'stale-minor' as const, + }, + staleMajor: { + installed: '14.0.0', + expected: '15.0.0', + staleness: 'stale-major' as const, + }, + stalePrerelease: { + installed: '15.0.0-canary.0', + expected: '15.0.0-canary.1', + staleness: 'stale-prerelease' as const, + }, + newerThanNpm: { + installed: '15.0.0-canary.1', + expected: '15.0.0-canary.0', + staleness: 'newer-than-npm' as const, + }, + unknown: { + installed: '15.0.0', + expected: '15.0.0', + staleness: 'unknown' as const, + }, +} + +export const Fresh: Story = { + args: { + versionInfo: mockVersionInfo.fresh, + }, +} + +export const StalePatch: Story = { + args: { + versionInfo: mockVersionInfo.stalePatch, + }, +} + +export const StaleMinor: Story = { + args: { + versionInfo: mockVersionInfo.staleMinor, + }, +} + +export const StaleMajor: Story = { + args: { + versionInfo: mockVersionInfo.staleMajor, + }, +} + +export const StalePrerelease: Story = { + args: { + versionInfo: mockVersionInfo.stalePrerelease, + }, +} + +export const NewerThanNpm: Story = { + args: { + versionInfo: mockVersionInfo.newerThanNpm, + }, +} + +export const Unknown: Story = { + args: { + versionInfo: mockVersionInfo.unknown, + }, +} diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx new file mode 100644 index 0000000000000..4f754059d148a --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx @@ -0,0 +1,56 @@ +import type { OverlayState } from '../../shared' + +import { Eclipse } from '../../icons/eclipse' +import { getStaleness } from '../../../shared/version-staleness' +import { css } from '../../utils/css' + +export function DevToolsPanelVersionInfo({ + versionInfo, +}: { + versionInfo: OverlayState['versionInfo'] +}) { + const { staleness } = versionInfo + const { text, indicatorClass, title } = getStaleness(versionInfo) + const shouldBeLink = staleness.startsWith('stale') + + if (shouldBeLink) { + return ( + + + {text} + + ) + } + + return ( +
+ + {text} +
+ ) +} + +export const DEVTOOLS_PANEL_VERSION_INFO_STYLES = css` + [data-nextjs-version-staleness-indicator='fresh'] { + fill: var(--color-green-800); + stroke: var(--color-green-300); + } + [data-nextjs-version-staleness-indicator='stale'] { + fill: var(--color-amber-800); + stroke: var(--color-amber-300); + } + [data-nextjs-version-staleness-indicator='outdated'] { + fill: var(--color-red-800); + stroke: var(--color-red-300); + } + [data-nextjs-version-staleness-indicator='unknown'] { + fill: var(--color-gray-800); + stroke: var(--color-gray-300); + } +` diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx index e9c841372d79f..1fa48a3aba87d 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx @@ -22,6 +22,11 @@ const state: OverlayState = { routerType: 'app', isErrorOverlayOpen: false, isDevToolsPanelOpen: true, + versionInfo: { + installed: '15.0.0', + expected: '15.0.0', + staleness: 'fresh', + }, } export const Default: Story = { diff --git a/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx b/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx index 6b8869dd08d9d..c375edce31e1c 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx @@ -1,6 +1,7 @@ import type { VersionInfo } from '../../../../server/dev/parse-version-info' import { getStaleness } from '../../../shared/version-staleness' import { cx } from '../../utils/cx' +import { Eclipse } from '../../icons/eclipse' export function VersionStalenessInfo({ versionInfo, @@ -110,17 +111,3 @@ export const styles = ` -webkit-text-fill-color: transparent; } ` - -function Eclipse({ className }: { className: string }) { - return ( - - - - ) -} diff --git a/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx b/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx new file mode 100644 index 0000000000000..d3d75e3256e5a --- /dev/null +++ b/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx @@ -0,0 +1,14 @@ +export function Eclipse(props: React.SVGProps) { + return ( + + + + ) +} diff --git a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx index 29a7d148c51eb..7b584f11306ab 100644 --- a/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx +++ b/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx @@ -25,6 +25,8 @@ import { DEV_TOOLS_INFO_RENDER_FILES_STYLES } from '../components/overview/segme import { FADER_STYLES } from '../components/fader' import { RESTART_SERVER_BUTTON_STYLES } from '../components/errors/error-overlay-toolbar/restart-server-button' import { DEVTOOLS_PANEL_STYLES } from '../components/devtools-panel/devtools-panel' +import { DEVTOOLS_PANEL_FOOTER_STYLES } from '../components/devtools-panel/devtools-panel-footer' +import { DEVTOOLS_PANEL_VERSION_INFO_STYLES } from '../components/devtools-panel/devtools-panel-version-info' export function ComponentStyles() { return ( @@ -56,6 +58,8 @@ export function ComponentStyles() { ${DEV_TOOLS_INFO_RENDER_FILES_STYLES} ${FADER_STYLES} ${DEVTOOLS_PANEL_STYLES} + ${DEVTOOLS_PANEL_FOOTER_STYLES} + ${DEVTOOLS_PANEL_VERSION_INFO_STYLES} `} ) From bf4d0d392809b86af5ad8a8037605fcf5b14c362 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Sat, 14 Jun 2025 21:52:46 +0200 Subject: [PATCH 05/10] bottom border radius --- .../components/devtools-panel/devtools-panel-footer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx index cbcf619475a0e..b23096f790c1f 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx @@ -41,6 +41,7 @@ export const DEVTOOLS_PANEL_FOOTER_STYLES = css` align-items: center; margin-top: auto; border-top: 1px solid var(--color-gray-400); + border-radius: 0 0 var(--rounded-xl) var(--rounded-xl); } [data-nextjs-devtools-panel-footer-tab-group] { From a87320240f6c87283a71ccebd9893dae0f170c21 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Thu, 19 Jun 2025 13:47:35 +0200 Subject: [PATCH 06/10] move footer inside dialog --- .../dev-overlay/components/devtools-panel/devtools-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx index 6ff3baefed24f..d95d188593115 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx @@ -117,8 +117,8 @@ export function DevToolsPanel({ + - From d7c037b48412bb80e52df9f14446e9e874e7f33e Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Thu, 19 Jun 2025 14:06:38 +0200 Subject: [PATCH 07/10] add comment for tooltip --- .../components/devtools-panel/devtools-panel-version-info.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx index 4f754059d148a..e994108db1c16 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx @@ -15,6 +15,7 @@ export function DevToolsPanelVersionInfo({ if (shouldBeLink) { return ( + // TODO: Make it button-like and display radix-ui Tooltip on hover. Date: Thu, 19 Jun 2025 14:34:37 +0200 Subject: [PATCH 08/10] use bundler name --- .../devtools-panel/devtools-panel-footer.tsx | 25 +++++++++++++++++-- .../devtools-panel/devtools-panel.stories.tsx | 4 +-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx index b23096f790c1f..7812924af4661 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx @@ -10,13 +10,23 @@ export function DevToolsPanelFooter({ }: { versionInfo: OverlayState['versionInfo'] }) { + const bundlerName = ( + process.env.__NEXT_BUNDLER || 'WEBPACK' + ).toUpperCase() as 'WEBPACK' | 'TURBOPACK' | 'RSPACK' return (
- TURBOPACK - {process.env.TURBOPACK ? 'Enabled' : 'Disabled'} + {/* TODO: The details may change, follow up. */} + + {bundlerName} + + + enabled +
@@ -62,6 +72,17 @@ export const DEVTOOLS_PANEL_FOOTER_STYLES = css` font-family: var(--font-stack-monospace); } + [data-nextjs-devtools-panel-footer-tab-bundler-name='TURBOPACK'] { + background: linear-gradient( + to right, + var(--color-turbopack-text-red) 0%, + var(--color-turbopack-text-blue) 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + [data-nextjs-devtools-panel-footer-action-button-group] { display: flex; align-items: center; diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx index 1fa48a3aba87d..4f2647c912734 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx @@ -47,11 +47,11 @@ export const WithIssues: Story = { export const Turbopack: Story = { beforeEach: () => { - process.env.TURBOPACK = 'true' + process.env.__NEXT_BUNDLER = 'Turbopack' // clean up callback function return () => { - delete process.env.TURBOPACK + delete process.env.__NEXT_BUNDLER } }, args: { From e37d7f546eb1369f850765a450cd68e92b0b530e Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Thu, 19 Jun 2025 14:38:11 +0200 Subject: [PATCH 09/10] add rspack story --- .../devtools-panel/devtools-panel.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx index 4f2647c912734..9578637b3b7c0 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.stories.tsx @@ -60,3 +60,19 @@ export const Turbopack: Story = { issueCount: 0, }, } + +export const Rspack: Story = { + beforeEach: () => { + process.env.__NEXT_BUNDLER = 'Rspack' + + // clean up callback function + return () => { + delete process.env.__NEXT_BUNDLER + } + }, + args: { + state, + dispatch: () => {}, + issueCount: 0, + }, +} From 75ea482a48fec4054b01c73e6d85442e1d64a00c Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Thu, 19 Jun 2025 14:38:30 +0200 Subject: [PATCH 10/10] eclipse icon --- .../devtools-panel/devtools-panel-version-info.tsx | 6 +++--- .../version-staleness-info/version-staleness-info.tsx | 8 +++++--- .../next/src/next-devtools/dev-overlay/icons/eclipse.tsx | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx index e994108db1c16..c4cdadc323b11 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-version-info.tsx @@ -1,6 +1,6 @@ import type { OverlayState } from '../../shared' -import { Eclipse } from '../../icons/eclipse' +import { EclipseIcon } from '../../icons/eclipse' import { getStaleness } from '../../../shared/version-staleness' import { css } from '../../utils/css' @@ -23,7 +23,7 @@ export function DevToolsPanelVersionInfo({ href="https://nextjs.org/docs/messages/version-staleness" title={title} > - + {text} ) @@ -31,7 +31,7 @@ export function DevToolsPanelVersionInfo({ return (
- + {text}
) diff --git a/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx b/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx index c375edce31e1c..f5bff6e9eb0f6 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx @@ -1,7 +1,7 @@ import type { VersionInfo } from '../../../../server/dev/parse-version-info' import { getStaleness } from '../../../shared/version-staleness' import { cx } from '../../utils/cx' -import { Eclipse } from '../../icons/eclipse' +import { EclipseIcon } from '../../icons/eclipse' export function VersionStalenessInfo({ versionInfo, @@ -24,7 +24,7 @@ export function VersionStalenessInfo({ rel="noopener noreferrer" href="https://nextjs.org/docs/messages/version-staleness" > - @@ -39,7 +39,9 @@ export function VersionStalenessInfo({ return ( - + {text} diff --git a/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx b/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx index d3d75e3256e5a..60f34ca0757cb 100644 --- a/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx +++ b/packages/next/src/next-devtools/dev-overlay/icons/eclipse.tsx @@ -1,4 +1,4 @@ -export function Eclipse(props: React.SVGProps) { +export function EclipseIcon(props: React.SVGProps) { return (