Give Utilities the room Data Layers gets in Cockpit

Utilities stays in Cockpit for Directions, but only Data Layers folded the
Cockpit context rail away when opened, set its top below the open panel and
took Cyber's Cockpit size. Utilities now does all three, and Contact
expanding closes it as it closes Data Layers.

src/ui/cockpitLayout.js

@@ -84,8 +84,9 @@ export function syncContextLayout() {
     return;
   }
   const defaultTop = Math.max(255, Math.min(300, window.innerHeight * 0.28));
+  // An open left panel Cockpit keeps (Data Layers or Utilities).
   const dataPanel = document.querySelector(
-    '#left-panel-stack > #data-panel:not(.collapsed)',
+    '#left-panel-stack > :is(#data-panel, #utilities-panel):not(.collapsed)',
   );
   let desiredTop = defaultTop;
   if (this.contextCollapsed && dataPanel) {

src/ui/cyberTheme.test.mjs

@@ -854,7 +854,7 @@ test('Cyber Cockpit keeps Data Layers inside its bounded rail', () => {
   );
   assert.match(
     cyberStyles,
-    /body\.cockpit-mode #left-panel-stack > #data-panel \{[\s\S]*?max-height: min\(64vh, 610px\);/,
+    /body\.cockpit-mode\s+#left-panel-stack\s+> :is\(#data-panel, #utilities-panel\) \{[\s\S]*?max-height: min\(64vh, 610px\);/,
   );
 });
 

src/ui/panelChrome.js

@@ -25,6 +25,11 @@ const SHARE_PANEL_STATE_SPECS = Object.freeze([
   { id: 'pp-toggles' },
   { id: 'param-slider-panel' },
 ]);
+/**
+ * The left panels Cockpit keeps (Data Layers, and Utilities for Directions):
+ * opening one there folds the Cockpit context rail away until it closes.
+ */
+const COCKPIT_LEFT_PANEL_IDS = new Set(['data-panel', 'utilities-panel']);
 /** The command dock trays with a pin button. */
 const PINNABLE_PANEL_IDS = new Set(
   SHARE_PANEL_STATE_SPECS.filter((spec) => spec.pinnable).map(
@@ -497,7 +502,7 @@ export class PanelChrome {
     if (
       !nextCollapsed &&
       this.cockpitView?.active &&
-      panelId === 'data-panel'
+      COCKPIT_LEFT_PANEL_IDS.has(panelId)
     ) {
       this._cockpitContextCollapsedForDataPanel =
         !this.cockpitView.contextCollapsed;
@@ -528,7 +533,7 @@ export class PanelChrome {
     if (
       nextCollapsed &&
       this.cockpitView?.active &&
-      panelId === 'data-panel' &&
+      COCKPIT_LEFT_PANEL_IDS.has(panelId) &&
       this._cockpitContextCollapsedForDataPanel
     ) {
       this._cockpitContextCollapsedForDataPanel = false;

src/ui/radioBindings.js

@@ -380,7 +380,9 @@ export function bindRadioControls() {
     window,
     'gev:cockpit-context-expanded',
     () => {
+      // Contact takes the room the open left panel had.
       this.actions.setPanelCollapsed('data-panel', true);
+      this.actions.setPanelCollapsed('utilities-panel', true);
     },
     tunerListenerOptions,
   );

src/ui/styles/cyber.css

@@ -2771,7 +2771,10 @@
   border-inline-start: 0;
 }
 
-:root[data-ui-theme='cyber'] body.cockpit-mode #left-panel-stack > #data-panel {
+:root[data-ui-theme='cyber']
+  body.cockpit-mode
+  #left-panel-stack
+  > :is(#data-panel, #utilities-panel) {
   --panel-expanded-width: var(--cyber-panel-width);
   width: var(--cyber-panel-width);
   max-height: min(64vh, 610px);
@@ -2780,7 +2783,7 @@
 :root[data-ui-theme='cyber']
   body.cockpit-mode
   #left-panel-stack
-  > #data-panel.collapsed {
+  > :is(#data-panel, #utilities-panel).collapsed {
   width: var(--cyber-panel-collapsed-width);
 }
 
@@ -2813,7 +2816,7 @@
   :root[data-ui-theme='cyber']
     body.cockpit-mode
     #left-panel-stack
-    > #data-panel:not(.collapsed) {
+    > :is(#data-panel, #utilities-panel):not(.collapsed) {
     flex: 0 0 var(--cyber-cockpit-panel-height, 40vh);
     height: var(--cyber-cockpit-panel-height, 40vh);
     max-height: var(--cyber-cockpit-panel-height, 40vh);