1.1.7: TAB hides the asset + properties asides for a full-width stage

Press TAB to slide the asset sidebar and the properties aside off-screen
and let the stage absorb their grid columns; press again to bring them
back. Skipped while typing in inputs so form-field focus traversal
keeps working.

src/devtools/tests.ts

@@ -4621,6 +4621,48 @@ export function registerAllTests(): void {
       const btn = document.querySelector('button[aria-label="Create a new track group"]')
       expect(btn).toBeTruthy()
     })
+
+    test('TAB toggles .panels-hidden on the .app grid', async () => {
+      // Pressing TAB from the document root flips a class on .app
+      // that collapses the side / props grid columns. A second TAB
+      // restores them. Skipped while the user is typing in an input.
+      const app = document.querySelector('.app') as HTMLElement
+      expect(app).toBeTruthy()
+      // Reset to a known baseline — preceding tests may have left
+      // the panels in either state.
+      while (app.classList.contains('panels-hidden')) {
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+        await nextTick()
+      }
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+      await nextTick()
+      expect(app.classList.contains('panels-hidden')).toBe(true)
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+      await nextTick()
+      expect(app.classList.contains('panels-hidden')).toBe(false)
+    })
+
+    test('TAB inside an input does not toggle the panels', async () => {
+      // Typed-text inputs need TAB for focus traversal; the global
+      // toggle bails out via isEditable().
+      const app = document.querySelector('.app') as HTMLElement
+      while (app.classList.contains('panels-hidden')) {
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+        await nextTick()
+      }
+      const input = document.createElement('input')
+      input.type = 'text'
+      document.body.appendChild(input)
+      try {
+        input.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+        )
+        await nextTick()
+        expect(app.classList.contains('panels-hidden')).toBe(false)
+      } finally {
+        document.body.removeChild(input)
+      }
+    })
   })
 
   suite('app — arrow-key nudge', () => {