[devtool] unify the bundler field (#86514)

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx

@@ -128,5 +128,3 @@ export function RouteInfoBody({
     <DynamicRouteContent routerType={routerType} {...props} />
   )
 }
-
-export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = ``

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx

@@ -18,9 +18,9 @@ export function ErrorOverlayNav({
   setActiveIndex,
   versionInfo,
 }: ErrorOverlayNavProps) {
-  const bundlerName = (process.env.__NEXT_BUNDLER || 'Webpack') as
-    | 'Webpack'
+  const bundlerName = (process.env.__NEXT_BUNDLER || 'Turbopack') as
     | 'Turbopack'
+    | 'Webpack'
     | 'Rspack'
 
   return (

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx

@@ -10,7 +10,6 @@ export type PanelStateKind =
   | 'route-type'
   | 'segment-explorer'
   | 'panel-selector'
-  | 'turbo-info'
 
 export const PanelRouterContext = createContext<{
   panel: PanelStateKind | null

packages/next/src/next-devtools/dev-overlay/menu/context.tsx

@@ -17,3 +17,8 @@
   opacity: var(--panel-opacity);
   transition: var(--panel-transition);
 }
+
+.turbopack-upgrade-link {
+  text-decoration: underline;
+  font-weight: 500;
+}

packages/next/src/next-devtools/dev-overlay/menu/panel-router.css

@@ -6,7 +6,6 @@ import {
   RouteInfoBody,
 } from '../components/errors/dev-tools-indicator/dev-tools-info/route-info'
 import { PageSegmentTree } from '../components/overview/segment-explorer'
-import { TurbopackInfoBody } from '../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info'
 import { DevToolsHeader } from '../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-header'
 import { useDelayedRender } from '../hooks/use-delayed-render'
 import {
@@ -82,15 +81,23 @@ const MenuPanel = () => {
         !!process.env.TURBOPACK
           ? {
               title: 'Turbopack is enabled.',
-              label: 'Turbopack',
-              value: 'Enabled',
+              label: 'Bundler',
+              value: 'Turbopack',
             }
           : {
               title:
                 'Learn about Turbopack and how to enable it in your application.',
-              label: 'Try Turbopack',
-              value: <ChevronRight />,
-              onClick: () => setPanel('turbo-info'),
+              label: 'Bundler',
+              value: (
+                <a
+                  href="https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className="turbopack-upgrade-link"
+                >
+                  {process.env.__NEXT_BUNDLER || 'Turbopack'}
+                </a>
+              ),
             },
         !!process.env.__NEXT_CACHE_COMPONENTS && {
           title: 'Cache Components is enabled.',
@@ -236,24 +243,6 @@ export const PanelRouter = () => {
           </DynamicPanel>
         </PanelRoute>
       )}
-
-      <PanelRoute name="turbo-info">
-        <DynamicPanel
-          sharePanelSizeGlobally={false}
-          sizeConfig={{
-            kind: 'fixed',
-            height: 470 / state.scale,
-            width: 400 / state.scale,
-          }}
-          closeOnClickOutside
-          header={<DevToolsHeader title="Try Turbopack" />}
-        >
-          <div className="panel-content">
-            <TurbopackInfoBody />
-            <InfoFooter href="https://nextjs.org/docs/app/api-reference/turbopack" />
-          </div>
-        </DynamicPanel>
-      </PanelRoute>
     </>
   )
 }

packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx

@@ -15,8 +15,6 @@ import { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-sta
 import { css } from '../utils/css'
 import { EDITOR_LINK_STYLES } from '../components/terminal/editor-link'
 import { ENVIRONMENT_NAME_LABEL_STYLES } from '../components/errors/environment-name-label/environment-name-label'
-import { DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info'
-import { DEV_TOOLS_INFO_ROUTE_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/route-info'
 import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/user-preferences'
 import { FADER_STYLES } from '../components/fader'
 import { CALL_STACK_STYLES } from '../components/call-stack/call-stack'
@@ -43,8 +41,6 @@ export function ComponentStyles() {
         ${containerErrorStyles}
         ${containerRuntimeErrorStyles}
         ${versionStaleness}
-        ${DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES}
-        ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}
         ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}
         ${FADER_STYLES}
         ${SHORTCUT_RECORDER_STYLES}

packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx

@@ -140,8 +140,8 @@ describe('client-dev-overlay', () => {
        1
        Route
        Static
+       Bundler
        Turbopack
-       Enabled
        Preferences"
       `)
     } else {
@@ -150,7 +150,8 @@ describe('client-dev-overlay', () => {
        1
        Route
        Static
-       Try Turbopack
+       Bundler
+       Webpack
        Preferences"
       `)
     }
@@ -197,8 +198,8 @@ describe('client-dev-overlay with Cache Components', () => {
        1
        Route
        Static
+       Bundler
        Turbopack
-       Enabled
        Cache Components
        Enabled
        Preferences"
@@ -209,7 +210,8 @@ describe('client-dev-overlay with Cache Components', () => {
        1
        Route
        Static
-       Try Turbopack
+       Bundler
+       Webpack
        Cache Components
        Enabled
        Preferences"