[DevTools] Add Settings button on Suspense Tab

packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

@@ -52,7 +52,7 @@ type Props = {
   type: IconType,
 };
 
-const panelIcons = '0 -960 960 820';
+const panelIcons = '96 -864 768 768';
 export default function ButtonIcon({className = '', type}: Props): React.Node {
   let pathData = null;
   let viewBox = '0 0 24 24';

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

@@ -14,6 +14,14 @@
   -webkit-font-smoothing: var(--font-smoothing);
 }
 
+.VRule {
+  height: 20px;
+  width: 1px;
+  flex: 0 0 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}
+
 .TreeWrapper {
   border-top: 1px solid var(--color-border);
   flex: 1 1 65%;
@@ -107,13 +115,13 @@
 .SuspenseTreeViewHeader {
   flex: 0 0 42px;
   padding: 0.5rem;
-  display: grid;
-  grid-template-columns: auto 1fr auto auto auto;
+  display: flex;
   align-items: flex-start;
   border-bottom: 1px solid var(--color-border);
 }
 
 .SuspenseBreadcrumbs {
+  flex: 1;
   /**
    * TODO: Switch to single item view on overflow like OwnerStack does.
    * OwnerStack has more constraints that make it easier so it won't be a 1:1 port.

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

@@ -33,14 +33,17 @@ import {
   SuspenseTreeDispatcherContext,
   SuspenseTreeStateContext,
 } from './SuspenseTreeContext';
-import {StoreContext} from '../context';
+import {StoreContext, OptionsContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import Button from '../Button';
 import Tooltip from '../Components/reach-ui/tooltip';
 import typeof {
   SyntheticEvent,
   SyntheticPointerEvent,
 } from 'react-dom-bindings/src/events/SyntheticEvent';
+import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
+import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
+import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
 
 type Orientation = 'horizontal' | 'vertical';
 
@@ -212,6 +215,7 @@ function ToggleInspectedElement({
 }
 
 function SuspenseTab(_: {}) {
+  const {hideSettings} = useContext(OptionsContext);
   const [state, dispatch] = useReducer<LayoutState, null, LayoutAction>(
     layoutReducer,
     null,
@@ -394,75 +398,82 @@ function SuspenseTab(_: {}) {
   };
 
   return (
-    <div className={styles.SuspenseTab} ref={wrapperTreeRef}>
-      <div className={styles.TreeWrapper} ref={resizeTreeRef}>
-        {treeListDisabled ? null : (
-          <div
-            className={styles.TreeList}
-            hidden={treeListHidden}
-            ref={resizeTreeListRef}>
-            <SuspenseTreeList />
-          </div>
-        )}
-        {treeListDisabled ? null : (
-          <div className={styles.ResizeBarWrapper} hidden={treeListHidden}>
+    <SettingsModalContextController>
+      <div className={styles.SuspenseTab} ref={wrapperTreeRef}>
+        <div className={styles.TreeWrapper} ref={resizeTreeRef}>
+          {treeListDisabled ? null : (
             <div
-              onPointerDown={onResizeStart}
-              onPointerMove={onResizeTreeList}
-              onPointerUp={onResizeEnd}
-              className={styles.ResizeBar}
-            />
-          </div>
-        )}
-        <div className={styles.TreeView}>
-          <header className={styles.SuspenseTreeViewHeader}>
-            {treeListDisabled ? (
-              <div />
-            ) : (
-              <ToggleTreeList dispatch={dispatch} state={state} />
-            )}
-            <div className={styles.SuspenseBreadcrumbs}>
-              <SuspenseBreadcrumbs />
+              className={styles.TreeList}
+              hidden={treeListHidden}
+              ref={resizeTreeListRef}>
+              <SuspenseTreeList />
             </div>
-            <ToggleUniqueSuspenders />
-            <SelectRoot />
-            <ToggleInspectedElement
-              dispatch={dispatch}
-              state={state}
-              orientation="horizontal"
-            />
-          </header>
-          <div className={styles.Rects}>
-            <SuspenseRects />
-          </div>
-          <footer className={styles.SuspenseTreeViewFooter}>
-            <div className={styles.SuspenseTimeline}>
-              <SuspenseTimeline />
+          )}
+          {treeListDisabled ? null : (
+            <div className={styles.ResizeBarWrapper} hidden={treeListHidden}>
+              <div
+                onPointerDown={onResizeStart}
+                onPointerMove={onResizeTreeList}
+                onPointerUp={onResizeEnd}
+                className={styles.ResizeBar}
+              />
+            </div>
+          )}
+          <div className={styles.TreeView}>
+            <header className={styles.SuspenseTreeViewHeader}>
+              {treeListDisabled ? (
+                <div />
+              ) : (
+                <ToggleTreeList dispatch={dispatch} state={state} />
+              )}
+              <div className={styles.SuspenseBreadcrumbs}>
+                <SuspenseBreadcrumbs />
+              </div>
+              <ToggleUniqueSuspenders />
+              <SelectRoot />
+              {!hideSettings && <div className={styles.VRule} />}
+              {!hideSettings && <SettingsModalContextToggle />}
+              <ToggleInspectedElement
+                dispatch={dispatch}
+                state={state}
+                orientation="horizontal"
+              />
+            </header>
+            <div className={styles.Rects}>
+              <SuspenseRects />
             </div>
-            <ToggleInspectedElement
-              dispatch={dispatch}
-              state={state}
-              orientation="vertical"
-            />
-          </footer>
+            <footer className={styles.SuspenseTreeViewFooter}>
+              <div className={styles.SuspenseTimeline}>
+                <SuspenseTimeline />
+              </div>
+              <ToggleInspectedElement
+                dispatch={dispatch}
+                state={state}
+                orientation="vertical"
+              />
+            </footer>
+          </div>
         </div>
-      </div>
-      <div className={styles.ResizeBarWrapper} hidden={inspectedElementHidden}>
         <div
-          onPointerDown={onResizeStart}
-          onPointerMove={onResizeTree}
-          onPointerUp={onResizeEnd}
-          className={styles.ResizeBar}
-        />
-      </div>
-      <div
-        className={styles.InspectedElementWrapper}
-        hidden={inspectedElementHidden}>
-        <InspectedElementErrorBoundary>
-          <InspectedElement />
-        </InspectedElementErrorBoundary>
+          className={styles.ResizeBarWrapper}
+          hidden={inspectedElementHidden}>
+          <div
+            onPointerDown={onResizeStart}
+            onPointerMove={onResizeTree}
+            onPointerUp={onResizeEnd}
+            className={styles.ResizeBar}
+          />
+        </div>
+        <div
+          className={styles.InspectedElementWrapper}
+          hidden={inspectedElementHidden}>
+          <InspectedElementErrorBoundary>
+            <InspectedElement />
+          </InspectedElementErrorBoundary>
+        </div>
+        <SettingsModal />
       </div>
-    </div>
+    </SettingsModalContextController>
   );
 }