Hide Toolbox in Minecraft Python Hour of Code (#10234)

This adds a hideToolbox metadata field for tutorials (only supported for monaco at the moment, not sure it makes much sense in a blocks scenario). When present, the toolbox is not shown and the user actually has to type things out.

It also fixes a separate issue (that I initially thought was related to these changes but actually wasn't) with the workspace header, where it was always assuming we were in blocks mode. Now it accepts a property for the workspace id, which allows it to size everything correctly (thus, fixing the border).

docs/writing-docs/tutorials/control-options.md

@@ -54,6 +54,14 @@ You can highlight the differences in code between the current step hint and the
 ### @diffs true
 ```
 
+### Hide Toolbox
+
+For text-based tutorials, you can choose to hide the toolbox altogether. This is done by specifying **@hideToolbox** in the metadata. The default is ``false``.
+
+```
+### @hideToolbox true
+```
+
 ## Special blocks
 
 ### Templates

localtypings/pxtarget.d.ts

@@ -1197,6 +1197,7 @@ declare namespace pxt.tutorial {
         activities?: boolean; // tutorial consists of activities, then steps. uses `###` for steps
         explicitHints?: boolean; // tutorial expects explicit hints in `#### ~ tutorialhint` format
         flyoutOnly?: boolean; // no categories, display all blocks in flyout
+        hideToolbox?: boolean; // hide the toolbox in the tutorial
         hideIteration?: boolean; // hide step control in tutorial
         diffs?: boolean; // automatically diff snippets
         noDiffs?: boolean; // don't automatically generated diffs
@@ -1347,4 +1348,4 @@ declare namespace pxt.auth {
         type: "skillmap-completion";
         sourceURL: string;
     }
-}
+}

pxtlib/docsrender.ts

@@ -24,6 +24,7 @@ namespace pxt.docs {
         "activities": "<!-- activities -->",
         "explicitHints": "<!-- hints -->",
         "flyoutOnly": "<!-- flyout -->",
+        "hideToolbox": "<!-- hideToolbox -->",
         "hideIteration": "<!-- iter -->",
         "codeStart": "<!-- start -->",
         "codeStop": "<!-- stop -->",

pxtlib/tutorial.ts

@@ -22,6 +22,12 @@ namespace pxt.tutorial {
             simThemeJson
         } = computeBodyMetadata(body);
 
+        // For python HOC, hide the toolbox (we don't support flyoutOnly mode).
+        if (pxt.BrowserUtils.useOldTutorialLayout() && language === "python" && metadata.flyoutOnly) {
+            metadata.flyoutOnly = false;
+            metadata.hideToolbox = true;
+        }
+
         // noDiffs legacy
         if (metadata.diffs === true // enabled in tutorial
             || (metadata.diffs !== false && metadata.noDiffs !== true // not disabled
@@ -406,7 +412,7 @@ ${code}
         if (metadata.explicitHints !== undefined
             && pxt.appTarget.appTheme
             && pxt.appTarget.appTheme.tutorialExplicitHints)
-            metadata.explicitHints = true;
+                metadata.explicitHints = true;
 
         return { metadata, body };
     }

theme/tutorial.less

@@ -642,6 +642,10 @@ code.lang-filterblocks {
     }
 }
 
+.hideToolbox #headers #flyoutHeader {
+    display: none;
+}
+
 /*******************************
         Sidebar Tutorial
 *******************************/
@@ -913,4 +917,4 @@ code.lang-filterblocks {
     100% {
         transform: rotate(0deg);
     }
-}
+}

webapp/src/app.tsx

@@ -5034,7 +5034,11 @@ export class ProjectView
             } else {
                 const tc = document.getElementById("tutorialcard");
                 if (tc) {
-                    const flyoutOnly = this.state.editorState?.hasCategories === false || this.state.tutorialOptions?.metadata?.flyoutOnly;
+                    const flyoutOnly =
+                        this.state.editorState?.hasCategories === false
+                        || this.state.tutorialOptions?.metadata?.flyoutOnly
+                        || this.state.tutorialOptions?.metadata?.hideToolbox;
+
                     let headerHeight = 0;
                     if (flyoutOnly) {
                         const headers = document.getElementById("headers");
@@ -5257,7 +5261,9 @@ export class ProjectView
         const inEditor = !!this.state.header && !inHome;
         const { lightbox, greenScreen, accessibleBlocks } = this.state;
         const hideTutorialIteration = inTutorial && tutorialOptions.metadata?.hideIteration;
-        const flyoutOnly = this.state.editorState?.hasCategories === false || (inTutorial && tutorialOptions.metadata?.flyoutOnly);
+        const hideToolbox = inTutorial && tutorialOptions.metadata?.hideToolbox;
+        // flyoutOnly has become a de facto css class for styling tutorials (especially minecraft HOC), so keep it if hideToolbox is true, even if flyoutOnly is false.
+        const flyoutOnly = this.state.editorState?.hasCategories === false || (inTutorial && (tutorialOptions.metadata?.flyoutOnly || hideToolbox));
         const { hideEditorToolbar, transparentEditorToolbar } = targetTheme;
         const hideMenuBar = targetTheme.hideMenuBar || hideTutorialIteration || (isTabTutorial && pxt.appTarget.appTheme.embeddedTutorial) || pxt.shell.isTimeMachineEmbed();
         const isHeadless = simOpts && simOpts.headless;
@@ -5308,6 +5314,7 @@ export class ProjectView
             logoWide ? "logo-wide" : "",
             isHeadless ? "headless" : "",
             flyoutOnly ? "flyoutOnly" : "",
+            hideToolbox ? "hideToolbox" : "",
             hideTutorialIteration ? "hideIteration" : "",
             this.editor != this.blocksEditor ? "editorlang-text" : "",
             this.editor == this.textEditor && this.state.errorListState,
@@ -5356,7 +5363,7 @@ export class ProjectView
                 {isSidebarTutorial && flyoutOnly && inTutorial && <sidebarTutorial.SidebarTutorialCard ref={ProjectView.tutorialCardId} parent={this} pokeUser={this.state.pokeUserComponent == ProjectView.tutorialCardId} />}
                 {inTutorial && !isTabTutorial && <div id="maineditor" className={sandbox ? "sandbox" : ""} role="main">
                     {!(isSidebarTutorial && flyoutOnly) && inTutorial && <tutorial.TutorialCard ref={ProjectView.tutorialCardId} parent={this} pokeUser={this.state.pokeUserComponent == ProjectView.tutorialCardId} />}
-                    {flyoutOnly && <tutorial.WorkspaceHeader parent={this} />}
+                    {flyoutOnly && <tutorial.WorkspaceHeader parent={this} workspaceId={this.editor.getId()} />}
                 </div>}
                 <sidepanel.Sidepanel parent={this} inHome={inHome}
                     showKeymap={this.state.keymap && simOpts.keymap}

webapp/src/marked.tsx

@@ -384,7 +384,7 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
     // Renders inline blocks, such as "||controller: Controller||".
     private renderInlineBlocks(content: HTMLElement) {
         const { parent } = this.props;
-        const hasCategories = !parent.state.tutorialOptions?.metadata?.flyoutOnly;
+        const hasCategories = !parent.state.tutorialOptions?.metadata?.flyoutOnly && !parent.state.tutorialOptions?.metadata?.hideToolbox;
         const inlineBlocks = pxt.Util.toArray(content.querySelectorAll(`:not(pre) > code`))
             .map((inlineBlock: HTMLElement) => {
                 const text = inlineBlock.innerText;

webapp/src/monaco.tsx

@@ -1326,8 +1326,14 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             || this.currFile.isReadonly()
             || pxt.shell.isReadOnly()
             || this.isDebugging();
+
+        const hideForTutorial =
+            this.parent.isTutorial()
+            && this.parent.state.header.tutorial?.metadata?.hideToolbox;
+
         return pxt.appTarget.appTheme.monacoToolbox
             && !readOnly
+            && !hideForTutorial
             && (this.fileType == "typescript" || this.fileType == "python");
     }
 

webapp/src/tutorial.tsx

@@ -747,7 +747,7 @@ export class WorkspaceHeader extends data.Component<any, WorkspaceHeaderState> {
             this.flyoutWidth = flyout.getBoundingClientRect().width;
         }
 
-        const workspace = document.querySelector('#blocksArea');
+        const workspace = document.querySelector(`#${this.props.workspaceId || "blocksArea"}`);
         if (workspace) {
             this.workspaceWidth = workspace.clientWidth - this.flyoutWidth - 4;
         }