fix(debugger): keep the frames | variables split, put the views after the toolbar, badge live sessions

- The divider between frames and variables went back to its default on every start; it is now remembered.
- The Debug tool window's toolbar now leads with the session actions and is followed by the Threads & Variables / Console / Memory tabs.
- The Debug stripe button shows how many debug sessions are live, as the Run button does for runs.

Refs #3112

src/features/debugger/index.ts

@@ -48,6 +48,11 @@ import { forgetMemory } from "./memory/memoryState";
 const useAnyOverlay = () =>
   useOverlays((s) => !!(s.popover || s.evaluate || s.breakpoints || s.chooser || s.attach || s.smartStep));
 
+/** The Debug stripe button's badge, like Run's: how many debug sessions (child sessions aside) are live. */
+function useLiveSessionCount(): number | null {
+  return useDebug((s) => Object.values(s.sessions).filter((x) => x.parent === null && isLive(x)).length || null);
+}
+
 export function activate(): () => void {
   useDebugRunSessions.setState({
     Console: lazyComponent(() => import("./ui/DebugConsole").then((m) => m.DebugServiceConsole)),
@@ -71,6 +76,7 @@ export function activate(): () => void {
       order: 20,
       component: lazyComponent(() => import("./ui/DebugToolWindow").then((m) => m.DebugToolWindow)),
       headerContent: lazyComponent(() => import("./ui/DebugToolWindow").then((m) => m.DebugTabs)),
+      useBadge: useLiveSessionCount,
     }),
     registerEditorKind(heapEditorKind),
     installHeapContext(),

src/features/debugger/ui/DebugToolWindow.tsx

@@ -176,30 +176,7 @@ export function DebugToolWindow() {
   return (
     <div className={styles.root}>
       <div className={styles.toolbar} role="toolbar" aria-label={tx("Debugger actions")}>
-        <div role="tablist" aria-label={tx("Debug views")} className={styles.tabs}>
-          {(
-            [
-              ["variables", "Threads & Variables"],
-              ["console", "Console"],
-              ...(hasMemory ? [["memory", "Memory"] as const] : []),
-            ] as const
-          ).map(([id, label]) => (
-            <button
-              key={id}
-              type="button"
-              role="tab"
-              id={`debug-tab-${id}`}
-              aria-selected={tab === id}
-              aria-controls={`debug-panel-${id}`}
-              className={clsx(styles.tab, tab === id && styles.tabActive)}
-              onClick={() => setView({ session: active.startedAt, status: active.status, tab: id })}
-            >
-              {tx(label)}
-            </button>
-          ))}
-        </div>
-        {/* IDEA's XDebugger.ToolWindow.TopToolbar3 (+ its "More" group). */}
-        <span className={styles.sep} aria-hidden />
+        {/* IDEA's XDebugger.ToolWindow.TopToolbar3 (+ its "More" group), then the views. */}
         <ToolButton action="debug.rerun" icon="rerun" />
         <ToolButton action="debug.stop" icon="stop" tone="danger" />
         <span className={styles.sep} aria-hidden />
@@ -233,6 +210,29 @@ export function DebugToolWindow() {
           onClick={() => setMuted(!muted)}
         />
         <MoreActions />
+        <span className={styles.sep} aria-hidden />
+        <div role="tablist" aria-label={tx("Debug views")} className={styles.tabs}>
+          {(
+            [
+              ["variables", "Threads & Variables"],
+              ["console", "Console"],
+              ...(hasMemory ? [["memory", "Memory"] as const] : []),
+            ] as const
+          ).map(([id, label]) => (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              id={`debug-tab-${id}`}
+              aria-selected={tab === id}
+              aria-controls={`debug-panel-${id}`}
+              className={clsx(styles.tab, tab === id && styles.tabActive)}
+              onClick={() => setView({ session: active.startedAt, status: active.status, tab: id })}
+            >
+              {tx(label)}
+            </button>
+          ))}
+        </div>
       </div>
       <div role="tabpanel" id={`debug-panel-${tab}`} aria-labelledby={`debug-tab-${tab}`} className={styles.panel}>
         {tab === "variables" ? (
@@ -251,7 +251,12 @@ export function DebugToolWindow() {
 
 function ThreadsAndVariables({ session }: { session: DebugSession }) {
   return (
-    <SplitGroup orientation="horizontal" id="debug-threads-variables" className={styles.split}>
+    <SplitGroup
+      orientation="horizontal"
+      id="debug-threads-variables"
+      storageKey="openidea.debug.threadsVariables"
+      className={styles.split}
+    >
       <SplitPanel id="frames" defaultSize="34%" minSize="160px">
         <FramesPane session={session} />
       </SplitPanel>