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

docs/documentation/debugging.md

@@ -19,6 +19,21 @@ const client = Client({
 });
 ```
 
+### Debug Panel options
+
+You can use the `hidePanel` option to hide the panel by default when the client loads. The `hideButton` 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: {
+    // ...
+    hidePanel: true/false,
+    hideButton: true/false
+  },
+});
+```
+
 ### Custom metadata in game logs
 
 It can sometimes be helpful to surface some metadata during a move.

src/client/client.test.ts

@@ -938,6 +938,24 @@ describe('start / stop', () => {
     jest.resetAllMocks();
   });
 
+  test('hide panel by default', () => {
+    const client = Client({ game: {}, debug: { hidePanel: true } });
+    expect(() => {
+      client.start();
+      client.stop();
+    }).not.toThrow();
+    expect(error).not.toHaveBeenCalled();
+  });
+
+  test('remove debug panel button', () => {
+    const client = Client({ game: {}, debug: { hideButton: true } });
+    expect(() => {
+      client.start();
+      client.stop();
+    }).not.toThrow();
+    expect(error).not.toHaveBeenCalled();
+  });
+
   test('mount on custom element', () => {
     const el = document.createElement('div');
     const client = Client({ game: {}, debug: { target: el } });

src/client/client.ts

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

src/client/debug/Debug.svelte

@@ -38,7 +38,10 @@
     visible = !visible;
   }
 
-  let visible = true;
+  const debugOpt = $clientManager.client.debugOpt
+  let visible = !debugOpt || !debugOpt.hidePanel;
+  const showToggleButton = !debugOpt || !debugOpt.hideButton
+
   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}