[segment explorer] builtin slots style

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx

@@ -2,6 +2,8 @@ import { useSegmentTree, type SegmentTrieNode } from '../../segment-explorer'
 import { css } from '../../utils/css'
 import { cx } from '../../utils/cx'
 
+const BUILTIN_PREFIX = '__next_builtin__'
+
 const isFileNode = (node: SegmentTrieNode) => {
   return !!node.value?.type && !!node.value?.pagePath
 }
@@ -115,7 +117,10 @@ function PageSegmentTreeLayerPresentation({
                       return null
                     }
                     const filePath = childNode.value.pagePath
-                    const fileName = filePath.split('/').pop() || ''
+                    const lastSegment = filePath.split('/').pop() || ''
+                    const isBuiltin = filePath.startsWith(BUILTIN_PREFIX)
+                    const fileName = lastSegment.replace(BUILTIN_PREFIX, '')
+
                     return (
                       <span
                         key={fileChildSegment}
@@ -124,10 +129,18 @@ function PageSegmentTreeLayerPresentation({
                         }}
                         className={cx(
                           'segment-explorer-file-label',
-                          `segment-explorer-file-label--${childNode.value.type}`
+                          `segment-explorer-file-label--${childNode.value.type}`,
+                          isBuiltin && 'segment-explorer-file-label--builtin'
                         )}
                       >
                         {fileName}
+                        {isBuiltin && (
+                          <TooltipSpan
+                            title={`The default Next.js not found is being shown. You can customize this page by adding your own ${fileName} file to the app/ directory.`}
+                          >
+                            <InfoIcon />
+                          </TooltipSpan>
+                        )}
                       </span>
                     )
                   })}
@@ -250,6 +263,17 @@ export const DEV_TOOLS_INFO_RENDER_FILES_STYLES = css`
     background-color: var(--color-red-300);
     color: var(--color-red-900);
   }
+
+  .segment-explorer-file-label--builtin {
+    background-color: transparent;
+    color: var(--color-gray-900);
+    border: 1px dashed var(--color-gray-500);
+  }
+
+  .segment-explorer-file-label--builtin svg {
+    margin-left: 4px;
+    margin-right: -4px;
+  }
 `
 
 function openInEditor({ filePath }: { filePath: string }) {
@@ -265,3 +289,35 @@ function openInEditor({ filePath }: { filePath: string }) {
     }/__nextjs_launch-editor?${params.toString()}`
   )
 }
+
+function InfoIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
+        fill="var(--color-gray-400)"
+      />
+      <path
+        d="M7.75 7C8.30228 7.00001 8.75 7.44772 8.75 8V11.25H7.25V8.5H6.25V7H7.75ZM8 4C8.55228 4 9 4.44772 9 5C9 5.55228 8.55228 6 8 6C7.44772 6 7 5.55228 7 5C7 4.44772 7.44772 4 8 4Z"
+        fill="var(--color-gray-900)"
+      />
+    </svg>
+  )
+}
+
+function TooltipSpan({
+  children,
+  title,
+}: {
+  children: React.ReactNode
+  title: string
+}) {
+  return <span title={title}>{children}</span>
+}

packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react'
+import { Fragment, PureComponent } from 'react'
 import { dispatcher } from 'next/dist/compiled/next-devtools'
 import { RuntimeErrorHandler } from '../../../client/dev/runtime-error-handler'
 import { ErrorBoundary } from '../../../client/components/error-boundary'
@@ -31,8 +31,10 @@ function ErroredHtml({
   }
   return (
     <ErrorBoundary errorComponent={DefaultGlobalError}>
-      {globalErrorStyles}
-      <GlobalError error={error} />
+      <>
+        {globalErrorStyles}
+        <GlobalError error={error} />
+      </>
     </ErrorBoundary>
   )
 }

packages/next/src/server/app-render/app-render.tsx

@@ -3980,7 +3980,13 @@ const getGlobalErrorStyles = async (
     if (ctx.renderOpts.devtoolSegmentExplorer && globalErrorModulePath) {
       const SegmentViewNode = ctx.componentMod.SegmentViewNode
       globalErrorStyles = (
-        <SegmentViewNode type="global-error" pagePath={globalErrorModulePath}>
+        // This will be rendered next to GlobalError component under ErrorBoundary,
+        // it requires a key to avoid React warning about duplicate keys.
+        <SegmentViewNode
+          key="ge-svn"
+          type="global-error"
+          pagePath={globalErrorModulePath}
+        >
           {globalErrorStyles}
         </SegmentViewNode>
       )

packages/next/src/server/app-render/segment-explorer-path.ts

@@ -21,6 +21,8 @@ export function normalizeConventionFilePath(
   // If it's internal file only keep the filename, strip nextjs internal prefix
   if (nextInternalPrefixRegex.test(relativePath)) {
     relativePath = relativePath.replace(nextInternalPrefixRegex, '')
+    // Add a special prefix to let segment explorer know it's a built-in component
+    relativePath = `__next_builtin__${relativePath}`
   }
 
   return relativePath