pxt-core 13.1.21 → 13.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "13.1.21",
+  "version": "13.1.22",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

package/react-common/components/theming/SimulatorThemePickerModal.tsx

@@ -4,6 +4,7 @@ import { Input } from "../controls/Input";
 import { Modal } from "../controls/Modal";
 import { copySimulatorTheme, getSimulatorThemeForLayout } from "./simulatorThemeDefaults";
 import { ThemePickerToggle } from "./ThemePickerModal";
+import { useThemeReset } from "./useThemeReset";
 
 export interface SimulatorThemePickerModalProps {
     presets: pxt.SimulatorThemePreset[];
@@ -16,6 +17,7 @@ export interface SimulatorThemePickerModalProps {
     onUseAccountTheme?: () => void | Promise<void>;
     onThemeChanged?: (preference: pxt.auth.SimulatorThemePreference) => void;
     onSave: (preference: pxt.auth.SimulatorThemePreference) => void | Promise<void>;
+    onReset?: () => Promise<void>;
     onClose: () => void;
 }
 
@@ -59,8 +61,17 @@ export const SimulatorThemePickerModal = (props: SimulatorThemePickerModalProps)
         onUseAccountTheme,
         onThemeChanged,
         onSave,
+        onReset,
         onClose,
     } = props;
+    const aspectRatio = pxt.appTarget.simulator?.aspectRatio || 1.22;
+    const previewStyle: React.CSSProperties & {
+        "--simulator-theme-aspect-ratio": number;
+        "--simulator-theme-padding-bottom": string;
+    } = {
+        "--simulator-theme-aspect-ratio": aspectRatio,
+        "--simulator-theme-padding-bottom": `${100 / aspectRatio}%`,
+    };
     const defaultColorFields = getDefaultColorFields(presets[0].theme);
     const getColorFields = (layoutId: string) => {
         const fields = layouts?.find(layout => layout.id === layoutId)?.colorFields;
@@ -93,6 +104,7 @@ export const SimulatorThemePickerModal = (props: SimulatorThemePickerModalProps)
     const layoutId = theme.layout;
     const layoutIsKnown = layoutId === pxt.auth.DEFAULT_SIMULATOR_LAYOUT || layouts?.some(layout => layout.id === layoutId);
     const colorFields = getColorFields(layoutId);
+    const { resetAction, confirmation } = useThemeReset("simulator-theme-picker-modal", onReset);
 
     const selectPreset = (id: string) => {
         if (id === ACCOUNT_PRESET_ID && onUseAccountTheme) {
@@ -133,6 +145,8 @@ export const SimulatorThemePickerModal = (props: SimulatorThemePickerModalProps)
         onThemeChanged?.({ presetId: CUSTOM_PRESET_ID, theme: nextTheme });
     };
 
+    if (confirmation) return confirmation;
+
     return <Modal
         id="simulator-theme-picker-modal"
         title={lf("Simulator Theme")}
@@ -143,6 +157,7 @@ export const SimulatorThemePickerModal = (props: SimulatorThemePickerModalProps)
             selected="simulator"
             onModeChanged={onEditorThemeClicked} />}
         actions={[
+            ...(resetAction ? [resetAction] : []),
             {
                 label: lf("Apply"),
                 className: "primary",
@@ -151,7 +166,7 @@ export const SimulatorThemePickerModal = (props: SimulatorThemePickerModalProps)
                     : onSave({ presetId, theme }),
             },
         ]}>
-        <div className="simulator-theme-picker">
+        <div className="simulator-theme-picker" style={previewStyle}>
             {renderPreview(theme)}
             <div className="simulator-theme-controls">
                 <div className="simulator-theme-select-field">

package/react-common/components/theming/ThemePickerModal.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Modal } from "../controls/Modal";
 import { EditorToggle } from "../controls/EditorToggle";
 import { ThemeCard } from "./ThemeCard";
+import { useThemeReset } from "./useThemeReset";
 
 export type ThemePickerMode = "editor" | "simulator";
 
@@ -45,6 +46,7 @@ export interface ThemePickerModalProps {
     selectedThemeId?: string;
     onThemeChanged: (theme: pxt.ColorThemeInfo) => void;
     onSave: (theme: pxt.ColorThemeInfo) => void;
+    onReset?: () => Promise<void>;
     onSimulatorThemeClicked?: () => void;
     onClose(): void;
 }
@@ -53,6 +55,9 @@ export const ThemePickerModal = (props: ThemePickerModalProps) => {
         props.selectedThemeId || props.themes[0]?.id
     );
     const selectedTheme = props.themes.find(theme => theme.id === selectedThemeId);
+    const { resetAction, confirmation } = useThemeReset("theme-picker-modal", props.onReset);
+
+    if (confirmation) return confirmation;
 
     return (
         <Modal
@@ -64,7 +69,7 @@ export const ThemePickerModal = (props: ThemePickerModalProps) => {
             rightHeader={props.onSimulatorThemeClicked && <ThemePickerToggle
                 selected="editor"
                 onModeChanged={props.onSimulatorThemeClicked} />}
-            actions={[{
+            actions={[...(resetAction ? [resetAction] : []), {
                 label: lf("Apply"),
                 className: "primary",
                 disabled: !selectedTheme,

package/react-common/components/theming/themeReset.ts

@@ -0,0 +1,16 @@
+import { getDefaultSimulatorThemePreference } from "./simulatorThemeDefaults";
+
+/** Reset this editor's preferences only. */
+export async function resetEditorThemesAsync(
+    target: Pick<pxt.TargetBundle, "appTheme" | "colorThemeMap" | "simulator">,
+    saveColorTheme: (theme: pxt.ColorThemeInfo) => Promise<void>,
+    clearSimulatorTheme: () => Promise<void>
+): Promise<pxt.auth.SimulatorThemePreference | undefined> {
+    const defaultThemeId = target.appTheme?.defaultColorTheme;
+    const defaultTheme = defaultThemeId ? target.colorThemeMap?.[defaultThemeId] : undefined;
+    if (!defaultTheme) throw new Error("No default editor theme configured");
+
+    await saveColorTheme(defaultTheme);
+    await clearSimulatorTheme();
+    return getDefaultSimulatorThemePreference(defaultTheme, target.simulator?.themePresets);
+}

package/react-common/components/theming/useThemeReset.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Modal, ModalAction } from "../controls/Modal";
+
+/** Shared confirmation for editor-wide pickers, not project-specific theme settings. */
+export function useThemeReset(pickerId: string, onReset: (() => Promise<void>) | undefined) {
+    const [confirming, setConfirming] = React.useState(false);
+    const [resetting, setResetting] = React.useState(false);
+    const [failed, setFailed] = React.useState(false);
+    const inFlight = React.useRef(false);
+    const restoreFocus = React.useRef(false);
+
+    React.useEffect(() => {
+        if (!confirming && restoreFocus.current) {
+            document.getElementById(pickerId)?.querySelector<HTMLElement>(".theme-reset-button")?.focus();
+            restoreFocus.current = false;
+        }
+    }, [confirming, pickerId]);
+
+    const cancel = () => {
+        if (inFlight.current) return;
+        restoreFocus.current = true;
+        setConfirming(false);
+    };
+
+    const confirm = async () => {
+        if (!onReset || inFlight.current) return;
+        inFlight.current = true;
+        setResetting(true);
+        setFailed(false);
+        try {
+            await onReset();
+        } catch (error) {
+            pxt.reportException(error);
+            setFailed(true);
+        } finally {
+            inFlight.current = false;
+            setResetting(false);
+        }
+    };
+
+    const resetAction: ModalAction | undefined = onReset ? {
+        label: lf("Reset"),
+        className: "primary inverted theme-reset-button",
+        onClick: () => {
+            setFailed(false);
+            setConfirming(true);
+        },
+    } : undefined;
+
+    const confirmation = confirming && <Modal
+        key="theme-reset-confirmation"
+        title={lf("Reset all themes?")}
+        ariaDescribedBy="theme-reset-description"
+        onClose={cancel}
+        hideDismissButton={resetting}
+        actions={[
+            { label: lf("Cancel"), onClick: cancel, disabled: resetting },
+            { label: resetting ? lf("Resetting...") : lf("Reset"), className: "primary", onClick: confirm, disabled: resetting },
+        ]}>
+        <p id="theme-reset-description">
+            {lf("Are you sure you want to reset the editor and simulator themes to their defaults? This will remove your editor-wide theme customizations. Themes set directly on projects will not be changed. This action cannot be undone.")}
+        </p>
+        {failed && <p role="alert">{lf("Unable to reset themes. Please try again.")}</p>}
+    </Modal>;
+
+    return { resetAction, confirmation };
+}

package/react-common/styles/theming/ThemePickerModal.less

@@ -19,6 +19,10 @@
     .common-modal-footer {
         grid-template-columns: 1fr auto;
 
+        .theme-reset-button {
+            justify-self: start;
+        }
+
         button:only-child {
             justify-self: end;
             min-width: 8rem;
@@ -27,7 +31,7 @@
 }
 
 .theme-picker-modal>.common-modal,
-.simulator-theme-picker-modal:not(.standalone)>.common-modal {
+.simulator-theme-picker-modal>.common-modal {
     height: 90%;
     max-height: 48rem;
     display: flex;
@@ -70,30 +74,78 @@
     padding-left: 1.5rem;
 }
 
+.simulator-theme-picker-modal>.common-modal {
+    overflow: hidden;
+
+    .common-modal-body {
+        display: flex;
+        overflow: hidden;
+    }
+
+    .common-modal-footer {
+        flex-shrink: 0;
+    }
+}
+
 .simulator-theme-picker {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
     display: grid;
-    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
     gap: 2rem;
-    align-items: center;
+    align-items: stretch;
 }
 
 .simulator-theme-preview {
+    position: relative;
     min-width: 0;
+    min-height: 0;
 
     .simframe {
         margin: 0;
     }
 
+    .simframe.ui.embed {
+        // Fresh homescreen/skillmap frames have no inline ratio from the simulator driver.
+        padding-bottom: var(--simulator-theme-padding-bottom);
+    }
+
     .simframe > .ui.loader {
         display: none;
     }
 }
 
+@media only screen and (min-width: 50.001rem) {
+    .simulator-theme-preview .simframe.ui.embed {
+        // Cap the viewport at the target's default ratio, even in a short pane.
+        // If width is constrained further, the simulator centers itself within the taller viewport.
+        // Override the driver's inline padding ratio only while inside the desktop picker.
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        width: auto;
+        max-width: 100%;
+        height: 100%;
+        aspect-ratio: var(--simulator-theme-aspect-ratio);
+        padding-bottom: 0 !important;
+    }
+}
+
 .simulator-theme-controls {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
     min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+    // Leave room for focus outlines inside the independently scrolling controls.
+    padding: 0.25rem;
+    scrollbar-gutter: stable;
+    > * {
+        flex-shrink: 0;
+    }
 }
 
 .simulator-theme-select-field {
@@ -128,10 +180,14 @@
 
 .simulator-theme-color {
     display: grid;
-    grid-template-columns: minmax(7rem, 1fr) 3rem minmax(8rem, 1fr);
+    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
     gap: 0.5rem;
     align-items: center;
 
+    > span {
+        overflow-wrap: anywhere;
+    }
+
     .common-input-wrapper {
         min-width: 0;
     }
@@ -173,18 +229,27 @@
     }
 
     .simulator-theme-picker {
+        flex: none;
+        width: 100%;
         grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+
+    .simulator-theme-picker-modal>.common-modal .common-modal-body {
+        display: block;
+        overflow-y: auto;
+    }
+
+    .simulator-theme-controls {
+        overflow: visible;
+        scrollbar-gutter: auto;
     }
 
     .simulator-theme-preview {
-        max-width: 28rem;
         width: 100%;
+        max-width: 28rem;
         justify-self: center;
     }
-
-    .simulator-theme-color {
-        grid-template-columns: minmax(5.5rem, 1fr) 3rem minmax(6.5rem, 1fr);
-    }
 }
 
 .theme-picker {

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-skillmap.css">
-  <script defer="defer" src="/blb/skillmap/js/main.6352b119.js"></script><link href="/blb/skillmap/css/main.450cb46e.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/skillmap/js/main.99d90503.js"></script><link href="/blb/skillmap/css/main.450cb46e.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>