fix: toast shortcut formatting, styling, timings

- format shortcuts as per the menu
- don't use blocks font, it looks very odd in MakeCode
- tweak sizing to limit text not overall width
- increase timeouts based on user researcher feedback

Author: microbit-matt-hillsdon

src/actions/clipboard.ts

@@ -14,7 +14,8 @@ import {
 import * as Constants from '../constants';
 import type {BlockSvg, Workspace, WorkspaceSvg} from 'blockly';
 import {Navigation} from '../navigation';
-import { toast } from '../toast';
+import {toast} from '../toast';
+import {formatMetaShortcut} from '../shortcut_formatting';
 
 const KeyCodes = blocklyUtils.KeyCodes;
 const createSerializedKey = ShortcutRegistry.registry.createSerializedKey.bind(
@@ -108,7 +109,7 @@ export class Clipboard {
    */
   private registerCutContextMenuAction() {
     const cutAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Cut (${this.getPlatformPrefix()}X)`,
+      displayText: (scope) => `Cut (${formatMetaShortcut('X')})`,
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -200,7 +201,7 @@ export class Clipboard {
    */
   private registerCopyContextMenuAction() {
     const copyAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Copy (${this.getPlatformPrefix()}C)`,
+      displayText: (scope) => `Copy (${formatMetaShortcut('C')})`,
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -276,8 +277,8 @@ export class Clipboard {
     this.copyWorkspace = sourceBlock.workspace;
     if (this.copyData) {
       toast(workspace, {
-        message: `Copied. Press ${navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'} + V to paste.`,
-        duration: 3000,
+        message: `Copied. Press ${formatMetaShortcut("V")} to paste.`,
+        duration: 4500,
       });
     }
     return !!this.copyData;
@@ -308,7 +309,7 @@ export class Clipboard {
    */
   private registerPasteContextMenuAction() {
     const pasteAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Paste (${this.getPlatformPrefix()}V)`,
+      displayText: (scope) => `Paste (${formatMetaShortcut('V')})`,
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -359,16 +360,4 @@ export class Clipboard {
       : this.copyWorkspace;
     return this.navigation.paste(this.copyData, pasteWorkspace);
   }
-
-  /**
-   * Check the platform and return a prefix for the keyboard shortcut.
-   * TODO: https://github.com/google/blockly-keyboard-experimentation/issues/155
-   * This will eventually be the responsibility of the action code ib
-   * Blockly core.
-   *
-   * @returns A platform-appropriate string for the meta key.
-   */
-  private getPlatformPrefix() {
-    return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl + ';
-  }
 }

src/navigation.ts

@@ -19,6 +19,7 @@ import {
 } from './flyout_cursor';
 import {PassiveFocus} from './passive_focus';
 import {toast} from './toast';
+import { formatMetaShortcut } from './shortcut_formatting';
 
 /**
  * Class that holds all methods necessary for keyboard navigation to work.
@@ -1271,9 +1272,9 @@ export class Navigation {
     } else if (nodeType === Blockly.ASTNode.types.BLOCK) {
       const block = curNode.getLocation() as Blockly.Block;
       if (!tryShowFullBlockFieldEditor(block)) {
-        const metaKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
-        const canMoveInHint = `Press right arrow to move in or ${metaKey} + Enter for more options`;
-        const genericHint = `Press ${metaKey} + Enter for options`;
+        const shortcut = formatMetaShortcut("Enter")
+        const canMoveInHint = `Press right arrow to move in or ${shortcut} for more options`;
+        const genericHint = `Press ${shortcut} for options`;
         const message =
           curNode.in()?.getSourceBlock() === block
             ? canMoveInHint

src/shortcut_formatting.ts

@@ -0,0 +1,12 @@
+/**
+ * Check the platform and return a prefix for the keyboard shortcut.
+ * TODO: https://github.com/google/blockly-keyboard-experimentation/issues/155
+ * This will eventually be the responsibility of the action code ib
+ * Blockly core.
+ *
+ * @param key The key to press in combination with Ctrl of Command.
+ * @returns A platform-appropriate string for the meta key.
+ */
+export function formatMetaShortcut(key: string) {
+  return `${navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl + '}${key}`;
+}

src/toast.ts

@@ -31,25 +31,17 @@ export interface ToastOptions {
  * @param options Options.
  */
 export function toast(workspace: WorkspaceSvg, options: ToastOptions): void {
-  const {message, duration = 5000} = options;
+  const {message, duration = 7500} = options;
   const className = 'blocklyToast';
   workspace.getInjectionDiv().querySelector(`.${className}`)?.remove();
 
   const toast = document.createElement('div');
   toast.className = className;
   toast.setAttribute('role', 'status');
   toast.setAttribute('aria-live', 'polite');
-  const {
-    FIELD_TEXT_FONTWEIGHT: fontWeight,
-    FIELD_TEXT_FONTFAMILY: fontFamily,
-    FIELD_TEXT_FONTSIZE: fontSizePt,
-  } = workspace.getRenderer().getConstants();
   assignStyle(toast, {
-    fontFamily,
-    fontWeight,
-    fontSize: `${fontSizePt}pt`,
+    fontSize: '1.2rem',
     position: 'absolute',
-    maxWidth: '20em',
     bottom: '2rem',
     right: '-50rem',
     padding: '1rem',
@@ -71,6 +63,9 @@ export function toast(workspace: WorkspaceSvg, options: ToastOptions): void {
     }),
   );
   const messageElement = toast.appendChild(document.createElement('div'));
+  assignStyle(messageElement, {
+    maxWidth: '18rem',
+  });
   messageElement.innerText = message;
   const closeButton = toast.appendChild(document.createElement('button'));
   assignStyle(closeButton, {