From a461b1c48442189041f03ddb5b8c05daa9d943c2 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Thu, 17 Jul 2025 15:18:35 +0100
Subject: [PATCH] Add ability to toggle keyboard controls and show theme picker

---
 src/stories/MakeCodeToolbar.tsx      |  4 ++++
 src/vanilla/makecode-frame-driver.ts | 14 ++++++++++++++
 src/vanilla/pxt.ts                   |  3 +++
 3 files changed, 21 insertions(+)

diff --git a/src/stories/MakeCodeToolbar.tsx b/src/stories/MakeCodeToolbar.tsx
index 703ca5c..076e6c0 100644
--- a/src/stories/MakeCodeToolbar.tsx
+++ b/src/stories/MakeCodeToolbar.tsx
@@ -104,12 +104,16 @@ const MakeCodeToolbar = ({
         <button onClick={() => driver.current!.toggleDebugSloMo()}>
           Toggle debug slow mo
         </button>
+        <button onClick={() => driver.current!.toggleKeyboardControls()}>
+          Keyboard controls
+        </button>
         <button onClick={() => driver.current!.toggleGreenScreen()}>
           Green screen
         </button>
         <button onClick={() => driver.current!.toggleHighContrast()}>
           Contrast
         </button>
+        <button onClick={() => driver.current!.showThemePicker()}>Theme</button>
         <button onClick={() => driver.current!.closeFlyout()}>
           Close flyout
         </button>
diff --git a/src/vanilla/makecode-frame-driver.ts b/src/vanilla/makecode-frame-driver.ts
index 777f8d5..69969ee 100644
--- a/src/vanilla/makecode-frame-driver.ts
+++ b/src/vanilla/makecode-frame-driver.ts
@@ -734,6 +734,13 @@ export class MakeCodeFrameDriver {
     });
   }
 
+  async showThemePicker(): Promise<void> {
+    await this.sendRequest({
+      type: 'pxteditor',
+      action: 'showthemepicker',
+    });
+  }
+
   async toggleHighContrast(): Promise<void> {
     await this.sendRequest({
       type: 'pxteditor',
@@ -749,6 +756,13 @@ export class MakeCodeFrameDriver {
     } as EditorMessageSetHighContrastRequest);
   }
 
+  async toggleKeyboardControls(): Promise<void> {
+    await this.sendRequest({
+      type: 'pxteditor',
+      action: 'togglekeyboardcontrols',
+    });
+  }
+
   async toggleGreenScreen(): Promise<void> {
     await this.sendRequest({
       type: 'pxteditor',
diff --git a/src/vanilla/pxt.ts b/src/vanilla/pxt.ts
index 93953d2..85719d9 100644
--- a/src/vanilla/pxt.ts
+++ b/src/vanilla/pxt.ts
@@ -180,9 +180,11 @@ export interface EditorMessageRequest extends EditorMessage {
     | 'setlanguagerestriction'
     | 'gettoolboxcategories'
     | 'toggletrace' // EditorMessageToggleTraceRequest
+    | 'showthemepicker'
     | 'togglehighcontrast'
     | 'sethighcontrast' // EditorMessageSetHighContrastRequest
     | 'togglegreenscreen'
+    | 'togglekeyboardcontrols'
     | 'settracestate' //
     | 'setsimulatorfullscreen' // EditorMessageSimulatorFullScreenRequest
     | 'print' // print code
@@ -542,6 +544,7 @@ export interface InfoMessage {
   versions: TargetVersions;
   locale: string;
   availableLocales?: string[];
+  keyboardControls: boolean;
 }
 
 export interface PackageExtensionData {