feat(debug): Add collapse on load & hide toggle button options (#1040)

Co-authored-by: Chris Swithinbank <[email protected]>

Author: MathieuLoutre

docs/documentation/debugging.md

@@ -19,6 +19,21 @@ const client = Client({
 });
 ```
 
+### Debug Panel options
+
+You can use the `collapseOnLoad` option to hide the panel by default when the client loads. The `hideToggleButton` option removes the toggle button on the side of the panel which means you can only use the keyboard shortcut to toggle its visibility.
+
+```js
+const client = Client({
+  // ...
+  debug: {
+    // ...
+    collapseOnLoad: true/false,
+    hideToggleButton: true/false
+  },
+});
+```
+
 ### Custom metadata in game logs
 
 It can sometimes be helpful to surface some metadata during a move.

src/client/client.ts

@@ -52,6 +52,8 @@ type Action =
 export interface DebugOpt {
   target?: HTMLElement;
   impl?: typeof Debug;
+  collapseOnLoad?: boolean;
+  hideToggleButton?: boolean;
 }
 
 /**

src/client/debug/Debug.svelte

@@ -38,7 +38,10 @@
     visible = !visible;
   }
 
-  let visible = true;
+  const debugOpt = $clientManager.client.debugOpt
+  let visible = !debugOpt || !debugOpt.collapseOnLoad;
+  const showToggleButton = !debugOpt || !debugOpt.hideToggleButton
+
   function Keypress(e) {
     if (e.key == '.') {
       ToggleVisibility();
@@ -180,6 +183,7 @@
 
 <section aria-label="boardgame.io Debug Panel" class="debug-panel">
   {#if !visible}
+    {#if showToggleButton}
     <button
       on:click={ToggleVisibility}
       class="visibility-toggle opener"
@@ -191,8 +195,10 @@
         <Chevron />
       </span>
     </button>
+    {/if}
   {:else}
     <div transition:fly={{ x: 400, ...transitionOpts }} class="panel">
+      {#if showToggleButton}
       <button
         on:click={ToggleVisibility}
         class="visibility-toggle closer"
@@ -204,6 +210,7 @@
           <Chevron />
         </span>
       </button>
+      {/if}
       <Menu on:change={MenuChange} {panes} {pane} />
       <div
         bind:this={paneDiv}

src/client/debug/tests/debug.test.ts

@@ -70,6 +70,23 @@ test('visibility toggle', async () => {
   client.stop();
 });
 
+test('panel options', async () => {
+  const client = Client({
+    game: {},
+    debug: { hideToggleButton: true, collapseOnLoad: true },
+  });
+  client.start();
+
+  const hideButton = screen.queryByTitle('Hide Debug Panel');
+  expect(hideButton).not.toBeInTheDocument();
+
+  expect(
+    screen.queryByRole('heading', { name: 'Controls' })
+  ).not.toBeInTheDocument();
+
+  client.stop();
+});
+
 describe('multiple clients', () => {
   const client0 = Client({
     game: { name: 'game1' },