Add ability to toggle keyboard controls and show theme picker (#8)

Author: microbit-robert

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>

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',

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 {