Repository: vercel/next.js
Pull request: [segment explorer] hide for pages router

Hide the segment explorer menu item in pages router 

Closes NEXT-4635

Changed files:
filename: packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx
patch: @@ -96,26 +96,18 @@ function SegmentExplorerFooter({
   )
 }
 
-export function PageSegmentTree({
-  isAppRouter,
-  page,
-}: {
-  isAppRouter: boolean
-  page: string
-}) {
+export function PageSegmentTree({ page }: { page: string }) {
   const tree = useSegmentTree()
 
   // Count active boundaries for the badge
   const activeBoundariesCount = useMemo(() => {
-    return isAppRouter ? countActiveBoundaries(tree) : 0
-  }, [tree, isAppRouter])
+    return countActiveBoundaries(tree)
+  }, [tree])
 
   // Global reset handler
   const handleGlobalReset = useCallback(() => {
-    if (isAppRouter) {
-      traverseTreeAndResetBoundaries(tree)
-    }
-  }, [tree, isAppRouter])
+    traverseTreeAndResetBoundaries(tree)
+  }, [tree])
 
   return (
     <div
@@ -126,7 +118,7 @@ export function PageSegmentTree({
         height: '100%',
       }}
     >
-      {isAppRouter && <PageRouteBar page={page} />}
+      <PageRouteBar page={page} />
       <div
         className="segment-explorer-content"
         data-nextjs-devtool-segment-explorer
@@ -135,18 +127,12 @@ export function PageSegmentTree({
           overflow: 'auto',
         }}
       >
-        {isAppRouter ? (
-          <PageSegmentTreeLayerPresentation node={tree} level={0} segment="" />
-        ) : (
-          <p>Route Info currently is only available for the App Router.</p>
-        )}
+        <PageSegmentTreeLayerPresentation node={tree} level={0} segment="" />
       </div>
-      {isAppRouter && (
-        <SegmentExplorerFooter
-          activeBoundariesCount={activeBoundariesCount}
-          onGlobalReset={handleGlobalReset}
-        />
-      )}
+      <SegmentExplorerFooter
+        activeBoundariesCount={activeBoundariesCount}
+        onGlobalReset={handleGlobalReset}
+      />
     </div>
   )
 }

filename: packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx
patch: @@ -34,6 +34,8 @@ const MenuPanel = () => {
   const { setPanel, setSelectedIndex } = usePanelRouterContext()
   const { state, dispatch } = useDevOverlayContext()
   const { totalErrorCount } = useRenderErrorContext()
+  const isAppRouter = state.routerType === 'app'
+
   return (
     <DevtoolMenu
       items={[
@@ -82,14 +84,15 @@ const MenuPanel = () => {
               value: <ChevronRight />,
               onClick: () => setPanel('turbo-info'),
             },
-        !!process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER && {
-          label: 'Route Info',
-          value: <ChevronRight />,
-          onClick: () => setPanel('segment-explorer'),
-          attributes: {
-            'data-segment-explorer': true,
+        !!process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER &&
+          isAppRouter && {
+            label: 'Route Info',
+            value: <ChevronRight />,
+            onClick: () => setPanel('segment-explorer'),
+            attributes: {
+              'data-segment-explorer': true,
+            },
           },
-        },
         {
           label: 'Preferences',
           value: <GearIcon />,
@@ -137,6 +140,7 @@ export const PanelRouter = () => {
   const { state } = useDevOverlayContext()
   const { triggerRef } = usePanelRouterContext()
   const toggleDevtools = useToggleDevtoolsVisibility()
+  const isAppRouter = state.routerType === 'app'
 
   const [hideShortcut, setHideShortcut] = useHideShortcutStorage()
   useShortcuts(
@@ -206,7 +210,7 @@ export const PanelRouter = () => {
         </DynamicPanel>
       </PanelRoute>
 
-      {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER && (
+      {process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER && isAppRouter && (
         <PanelRoute name="segment-explorer">
           <DynamicPanel
             sharePanelSizeGlobally={false}
@@ -225,10 +229,7 @@ export const PanelRouter = () => {
             }}
             header={<DevToolsHeader title="Route Info" />}
           >
-            <PageSegmentTree
-              isAppRouter={state.routerType === 'app'}
-              page={state.page}
-            />
+            <PageSegmentTree page={state.page} />
           </DynamicPanel>
         </PanelRoute>
       )}

filename: test/development/app-dir/segment-explorer/segment-explorer.test.ts
patch: @@ -73,9 +73,9 @@ describe('segment-explorer', () => {
     expect(await getSegmentExplorerRoute(browser)).toBe('/file-segments')
   })
 
-  it('should indicate segment explorer is not available for pages router', async () => {
+  it('should not have route info panel for pages router', async () => {
     const browser = await next.browser('/pages-router')
-    expect(await getSegmentExplorerContent(browser)).toMatchInlineSnapshot(`""`)
+    expect(await browser.hasElementByCss('[data-segment-explorer]')).toBe(false)
   })
 
   it('should handle special built-in not-found segments', async () => {

filename: test/development/client-dev-overlay/index.test.ts
patch: @@ -142,7 +142,6 @@ describe('client-dev-overlay', () => {
        Static
        Turbopack
        Enabled
-       Route Info
        Preferences"
       `)
     } else {
@@ -152,7 +151,6 @@ describe('client-dev-overlay', () => {
        Route
        Static
        Try Turbopack
-       Route Info
        Preferences"
       `)
     }

filename: test/lib/browsers/playwright.ts
patch: @@ -375,6 +375,10 @@ export class Playwright<TCurrent = undefined> {
     return this.waitForElementByCss(selector, 5_000)
   }
 
+  hasElementByCss(selector: string) {
+    return this.startChain(() => page.locator(selector).isVisible())
+  }
+
   elementById(id: string) {
     return this.elementByCss(`#${id}`)
   }