[DevTools] Separate breadcrumbs with »

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css

@@ -34,7 +34,11 @@
 
 .OwnerStackFlatListContainer {
   display: inline-flex;
-} 
+}
+
+.OwnerStackFlatListSeparator {
+  user-select: none;
+}
 
 .VRule {
   flex: 0 0 auto;

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -110,12 +110,16 @@ function OwnerStackFlatList({
   return (
     <div className={styles.OwnerStackFlatListContainer} ref={containerRef}>
       {owners.map((owner, index) => (
-        <ElementView
-          key={index}
-          owner={owner}
-          isSelected={index === selectedIndex}
-          selectOwner={selectOwner}
-        />
+        <Fragment key={index}>
+          <ElementView
+            owner={owner}
+            isSelected={index === selectedIndex}
+            selectOwner={selectOwner}
+          />
+          {index < owners.length - 1 && (
+            <span className={styles.OwnerStackFlatListSeparator}>»</span>
+          )}
+        </Fragment>
       ))}
     </div>
   );

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css

@@ -16,6 +16,10 @@
   display: inline;
 }
 
+.SuspenseBreadcrumbsListItemSeparator {
+  user-select: none;
+}
+
 .SuspenseBreadcrumbsListItem[aria-current="true"] .SuspenseBreadcrumbsButton {
   color: var(--color-button-active);
 }

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js

@@ -11,7 +11,7 @@ import type {SuspenseNode} from 'react-devtools-shared/src/frontend/types';
 import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
-import {useContext, useLayoutEffect, useRef, useState} from 'react';
+import {Fragment, useContext, useLayoutEffect, useRef, useState} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Tooltip from '../Components/reach-ui/tooltip';
@@ -99,19 +99,25 @@ function SuspenseBreadcrumbsFlatList({
           const node = store.getSuspenseByID(id);
 
           return (
-            <li
-              key={id}
-              className={styles.SuspenseBreadcrumbsListItem}
-              aria-current={selectedSuspenseID === id}
-              onPointerEnter={onItemPointerEnter.bind(null, id, false)}
-              onPointerLeave={onItemPointerLeave}>
-              <button
-                className={styles.SuspenseBreadcrumbsButton}
-                onClick={onItemClick.bind(null, id)}
-                type="button">
-                {node === null ? 'Unknown' : node.name || 'Unknown'}
-              </button>
-            </li>
+            <Fragment key={id}>
+              <li
+                className={styles.SuspenseBreadcrumbsListItem}
+                aria-current={selectedSuspenseID === id}
+                onPointerEnter={onItemPointerEnter.bind(null, id, false)}
+                onPointerLeave={onItemPointerLeave}>
+                <button
+                  className={styles.SuspenseBreadcrumbsButton}
+                  onClick={onItemClick.bind(null, id)}
+                  type="button">
+                  {node === null ? 'Unknown' : node.name || 'Unknown'}
+                </button>
+              </li>
+              {index < lineage.length - 1 && (
+                <span className={styles.SuspenseBreadcrumbsListItemSeparator}>
+                  »
+                </span>
+              )}
+            </Fragment>
           );
         })
       )}