[devtool] optimize segement explorer tree view

Author: huozhi

packages/next/src/client/components/react-dev-overlay/ui/components/overview/segment-explorer.tsx

@@ -9,46 +9,6 @@ import {
 } from '../../../../../../shared/lib/devtool/app-segment-tree'
 import type { Trie, TrieNode } from '../../../../../../shared/lib/devtool/trie'
 
-const IconLayout = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M16 12.5L15.9873 12.7559C15.8677 13.9323 14.9323 14.8677 13.7559 14.9873L13.5 15H2.5L2.24414 14.9873C1.06772 14.8677 0.132274 13.9323 0.0126953 12.7559L0 12.5V1H16V12.5ZM1.5 6.25488V12.5C1.5 13.0523 1.94772 13.5 2.5 13.5H4.99512V6.25488H1.5ZM6.24512 6.25488V13.5H13.5C14.0523 13.5 14.5 13.0523 14.5 12.5V6.25488H6.24512ZM1.5 5.00488H14.5V2.5H1.5V5.00488Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-const IconPage = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 16 16"
-      fill="none"
-      strokeLinejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M14.5 6.5V13.5C14.5 14.8807 13.3807 16 12 16H4C2.61929 16 1.5 14.8807 1.5 13.5V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5ZM13 6.5V13.5C13 14.0523 12.5523 14.5 12 14.5H4C3.44772 14.5 3 14.0523 3 13.5V1.5H8V5V6.5H9.5H13ZM9.5 2.12132V5H12.3787L9.5 2.12132Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-const ICONS = {
-  layout: <IconLayout width={16} />,
-  page: <IconPage width={16} />,
-}
-
 function PageSegmentTree({ tree }: { tree: Trie<SegmentNode> | undefined }) {
   if (!tree) {
     return null
@@ -63,6 +23,7 @@ function PageSegmentTree({ tree }: { tree: Trie<SegmentNode> | undefined }) {
         node={tree.getRoot()}
         level={0}
         segment=""
+        parentSegment=""
       />
     </div>
   )
@@ -71,11 +32,13 @@ function PageSegmentTree({ tree }: { tree: Trie<SegmentNode> | undefined }) {
 function PageSegmentTreeLayerPresentation({
   tree,
   segment,
+  parentSegment,
   node,
   level,
 }: {
   tree: Trie<SegmentNode>
   segment: string
+  parentSegment: string
   node: TrieNode<SegmentNode>
   level: number
 }) {
@@ -106,31 +69,14 @@ function PageSegmentTreeLayerPresentation({
         <div className={cx('segment-explorer-item-row')}>
           <div className="segment-explorer-line">
             <div className={`segment-explorer-line-text-${nodeName}`}>
-              <span
-                className={cx(
-                  'segment-explorer-line-icon',
-                  `segment-explorer-line-icon-${nodeName}`
-                )}
-              >
-                {nodeName === 'layout' ? ICONS.layout : ICONS.page}
-              </span>
-              <span className="segment-explorer-filename-path">{fileName}</span>
-            </div>
-          </div>
-        </div>
-      ) : segment ? (
-        <div className={'segment-explorer-item-row'}>
-          <div className="segment-explorer-line">
-            <div className={`segment-explorer-line-text-${nodeName}`}>
-              <span
-                className={cx(
-                  'segment-explorer-line-icon',
-                  `segment-explorer-line-icon-${nodeName}`
-                )}
-              ></span>
-              <span className="segment-explorer-filename-path">
-                {`${segment}/`}
-              </span>
+              <div className="segment-explorer-filename">
+                <span className="segment-explorer-filename--path">
+                  {parentSegment}
+                </span>
+                <span className="segment-explorer-filename--name">
+                  {fileName}
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -147,6 +93,7 @@ function PageSegmentTreeLayerPresentation({
               <PageSegmentTreeLayerPresentation
                 key={childSegment}
                 segment={childSegment}
+                parentSegment={segment}
                 tree={tree}
                 node={child}
                 level={level + 1}
@@ -189,35 +136,23 @@ export const DEV_TOOLS_INFO_RENDER_FILES_STYLES = css`
   }
 
   [data-nextjs-devtool-segment-explorer-level].segment-explorer-segment-children {
-    padding-left: 20px;
+    padding-left: 16px;
   }
   [data-nextjs-devtool-segment-explorer-level='0'].segment-explorer-segment-children {
     padding-left: 0px;
   }
 
-  .segment-explorer-filename-path {
-    display: inline-block;
-  }
-
-  .segment-explorer-filename-path a {
-    color: inherit;
-    text-decoration: inherit;
+  .segment-explorer-filename--name {
+    margin-left: 8px;
+    color: var(--color-gray-800);
   }
 
   .segment-explorer-line {
     white-space: pre;
     cursor: default;
   }
 
-  .segment-explorer-line-icon {
-    margin-right: 4px;
-  }
-  .segment-explorer-line-icon-page {
-    color: inherit;
-  }
-
-  .segment-explorer-line-text-page {
+  .segment-explorer-line {
     color: var(--color-gray-1000);
-    font-weight: 500;
   }
 `