Merge pull request #20245 from code-dot-org/gamelab_respect_debugger_…

…disabled

Gamelab respect debuggerDisabled

apps/src/gamelab/GameLab.js

@@ -230,9 +230,7 @@ GameLab.prototype.init = function (config) {
   // able to turn them on.
   config.noInstructionsWhenCollapsed = true;
 
-  // NOTE: We will go back to using !config.level.debuggerDisabled soon,
-  // but are testing with project levels only for now
-  var breakpointsEnabled = config.level.isProjectLevel;
+  var breakpointsEnabled = !config.level.debuggerDisabled;
   config.enableShowCode = true;
   config.enableShowLinesCount = false;
 
@@ -278,9 +276,7 @@ GameLab.prototype.init = function (config) {
   var showFinishButton = !this.level.isProjectLevel;
   var finishButtonFirstLine = _.isEmpty(this.level.softButtons);
 
-  // NOTE: We will go back to using !config.level.debuggerDisabled soon,
-  // but are testing with project levels only for now
-  var showDebugButtons = (!config.hideSource && config.level.isProjectLevel);
+  var showDebugButtons = (!config.hideSource && !config.level.debuggerDisabled);
   var showDebugConsole = !config.hideSource;
 
   if (showDebugButtons || showDebugConsole) {

apps/src/lib/tools/jsinterpreter/JSInterpreter.js

@@ -645,10 +645,14 @@ export default class JSInterpreter {
         return;
       }
     }
-    if (reachedBreak && atMaxSpeed) {
-      // If we were running atMaxSpeed and just reached a breakpoint, the
-      // code may not be selected in the editor, so do it now:
-      this.selectCurrentCode();
+    if (atMaxSpeed) {
+      if (reachedBreak) {
+        // If we were running atMaxSpeed and just reached a breakpoint, the
+        // code may not be selected in the editor, so do it now:
+        this.selectCurrentCode();
+      } else if (this.studioApp.editor) {
+        codegen.clearDropletAceHighlighting(this.studioApp.editor);
+      }
     }
     this.isExecuting = false;
   }

apps/test/unit/lib/tools/jsinterpreter/JSInterpreterTest.js

@@ -273,17 +273,31 @@ myCallback("this message is coming from inside the interpreter");
   });
 
   let aceEditor;
+  let Range = function (startRow, startColumn, endRow, endColumn) {
+      this.start = {
+          row: startRow,
+          column: startColumn
+      };
+
+      this.end = {
+          row: endRow,
+          column: endColumn
+      };
+  };
+
   function setupFakeAce() {
     let oldAce;
+    let markerId = 1;
     beforeEach(() => {
       oldAce = window.ace;
       window.ace = {
-        require: sinon.stub().returns({Range: sinon.stub()}),
+        require: sinon.stub().returns({Range}),
       };
       const breakpoints = [];
       const aceSession = {
-        addMarker: sinon.spy(),
+        addMarker: sinon.spy(() => markerId++),
         getBreakpoints: sinon.stub().returns(breakpoints),
+        removeMarker: sinon.spy(),
       };
       aceEditor = {
         isRowFullyVisible: () => true,
@@ -380,6 +394,18 @@ myCallback("this message is coming from inside the interpreter");
       it("will stop executing at the breakpoint", () => {
         expect(getCurrentLine()).to.equal(1);
       });
+      it("will highlight the line after the breakpoint", () => {
+        expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+          start: {
+            row: 2,
+            column: 10,
+          },
+          end: {
+            row: 2,
+            column: 26,
+          },
+        });
+      });
       it("will notify the onPause observer", () => {
         expect(onPauseObserver).to.have.been.called;
       });
@@ -393,13 +419,28 @@ myCallback("this message is coming from inside the interpreter");
         it("will stop at the next breakpoint", () => {
           expect(getCurrentLine()).to.equal(3);
         });
+        it("will highlight the line after the breakpoint", () => {
+          expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+            start: {
+              row: 4,
+              column: 10,
+            },
+            end: {
+              row: 4,
+              column: 26,
+            },
+          });
+        });
         describe("and executed again after all breakpoints have been reached", () => {
           beforeEach(() => {
             jsInterpreter.executeInterpreter(false);
           });
           it("will execute the rest of the code", () => {
             expect(getCurrentLine()).to.equal(5);
           });
+          it("will remove the highlight marker for the most recent highlight", () => {
+            expect(aceEditor.getSession().removeMarker.lastCall.args[0]).to.equal(aceEditor.getSession().addMarker.lastCall.returnValue);
+          });
         });
       });
     });
@@ -422,6 +463,18 @@ myCallback("this message is coming from inside the interpreter");
       it("will execute the line that the breakpoint is on and move to the next one", () => {
         expect(getCurrentLine()).to.equal(2);
       });
+      it("will highlight the line after the step over", () => {
+        expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+          start: {
+            row: 3,
+            column: 10,
+          },
+          end: {
+            row: 3,
+            column: 26,
+          },
+        });
+      });
     });
 
     describe("When executed with handleStepOut having been called", () => {
@@ -449,6 +502,18 @@ myCallback("this message is coming from inside the interpreter");
         )).to.be.false;
         expect(getCurrentLine()).to.equal(3);
       });
+      it("will highlight the line after the function call", () => {
+        expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+          start: {
+            row: 7,
+            column: 10,
+          },
+          end: {
+            row: 7,
+            column: 26,
+          },
+        });
+      });
     });
 
     describe("When executed with handleStepOut having been called inside a deeply nested function call", () => {
@@ -485,6 +550,18 @@ myCallback("this message is coming from inside the interpreter");
           'middleFunctionScope'
         )).to.be.true;
       });
+      it("will highlight the line after the inner function call", () => {
+        expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+          start: {
+            row: 8,
+            column: 12,
+          },
+          end: {
+            row: 8,
+            column: 28,
+          },
+        });
+      });
 
       describe("and we step out again", () => {
         beforeEach(() => {
@@ -494,6 +571,18 @@ myCallback("this message is coming from inside the interpreter");
         it("will step out again", () => {
           expect(getCurrentLine()).to.equal(8);
         });
+        it("will highlight the line after the inner function call", () => {
+          expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+            start: {
+              row: 12,
+              column: 10,
+            },
+            end: {
+              row: 12,
+              column: 27,
+            },
+          });
+        });
       });
     });
 
@@ -530,6 +619,18 @@ myCallback("this message is coming from inside the interpreter");
         jsInterpreter.executeInterpreter(false);
         expect(getCurrentLine()).to.equal(4);
       });
+      it("will highlight the line at the inner breakpoint", () => {
+        expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+          start: {
+            row: 4,
+            column: 12,
+          },
+          end: {
+            row: 4,
+            column: 28,
+          },
+        });
+      });
     });
 
     describe("When executed after handleStepIn() is called", () => {
@@ -551,6 +652,18 @@ myCallback("this message is coming from inside the interpreter");
       it("will not execute the line it steps onto", () => {
         expect(getCurrentLine()).to.be.undefined;
       });
+      it("will highlight the first line", () => {
+        expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+          start: {
+            row: 1,
+            column: 10,
+          },
+          end: {
+            row: 1,
+            column: 30,
+          },
+        });
+      });
 
       describe("And after handleStepOver is subsequently called", () => {
         beforeEach(() => {
@@ -560,6 +673,18 @@ myCallback("this message is coming from inside the interpreter");
         it("will execute the line it is currently on", () => {
           expect(getCurrentLine()).to.equal(1);
         });
+        it("will highlight the line after the step over", () => {
+          expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+            start: {
+              row: 2,
+              column: 10,
+            },
+            end: {
+              row: 2,
+              column: 26,
+            },
+          });
+        });
         it("will keep the interpreter in the paused state", () => {
           expect(jsInterpreter.paused).to.be.true;
         });
@@ -572,6 +697,9 @@ myCallback("this message is coming from inside the interpreter");
           it("will execute the rest of the code", () => {
             expect(getCurrentLine()).to.equal(3);
           });
+          it("will remove the highlight marker for the most recent highlight", () => {
+            expect(aceEditor.getSession().removeMarker.lastCall.args[0]).to.equal(aceEditor.getSession().addMarker.lastCall.returnValue);
+          });
           it("will make the interpreter no longer paused", () => {
             expect(jsInterpreter.paused).to.be.false;
           });
@@ -594,6 +722,19 @@ myCallback("this message is coming from inside the interpreter");
           expect(jsInterpreter.handleError).to.have.been.called;
           expect(jsInterpreter.handleError).to.have.been.calledWith(2);
         });
+        it("will highlight as an error the first character of the program since the exception wasn't handled", () => {
+          expect(aceEditor.getSession().addMarker.lastCall.args[0]).to.deep.equal({
+            start: {
+              row: 0,
+              column: 0,
+            },
+            end: {
+              row: 1,
+              column: 0,
+            },
+          });
+          expect(aceEditor.getSession().addMarker.lastCall.args[1]).to.equal('ace_error');
+        });
       });
       describe("with hideSource=true", () => {
         beforeEach(() => {

dashboard/config/scripts/levels/CSD U3 - Simple Counter Predict.level

@@ -64,7 +64,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "false",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "encrypted_examples": "rjxT6iF5KjqBHXf413tzznDDpJVGWcEND3LaKri4GpvMPkbfhUl54EVvy/a7\nAgj1\n",
     "instructions_important": "false",
     "hide_animation_mode": "true",

dashboard/config/scripts/levels/CSD U3 - Sprites - Sprite v Rect.level

@@ -63,7 +63,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "false",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "start_blocks": "function draw(){\r\n  \r\n}",
     "show_debug_watch": "true",
     "contained_level_names": null

dashboard/config/scripts/levels/CSD U3 - balloon template.level

@@ -31,7 +31,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "false",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "start_animations": "{\n    \"orderedKeys\": [\n        \"balloon\",\n        \"pop\"\n    ],\n    \"propsByKey\": {\n        \"balloon\": {\n            \"name\": \"balloon\",\n            \"sourceUrl\": \"https://curriculum.code.org/images/sprites/balloon.png\",\n            \"sourceSize\": {\n                \"x\": 444,\n                \"y\": 598\n            },\n            \"frameSize\": {\n                \"x\": 444,\n                \"y\": 598\n            },\n            \"frameCount\": 1,\n            \"frameDelay\": 2,\n            \"looping\": true\n        },\n        \"pop\": {\n            \"name\": \"pop\",\n            \"sourceUrl\": \"https://curriculum.code.org/images/sprites/pop.png\",\n            \"sourceSize\": {\n                \"x\": 600,\n                \"y\": 465\n            },\n            \"frameSize\": {\n                \"x\": 600,\n                \"y\": 465\n            },\n            \"frameCount\": 1,\n            \"frameDelay\": 2,\n            \"looping\": true\n        }\n    }\n}",
     "show_debug_watch": "true",
     "contained_level_names": null

dashboard/config/scripts/levels/CSD U3 - car template.level

@@ -31,7 +31,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "false",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "start_animations": "{\r\n  \"orderedKeys\": [\r\n    \"finish_line\",\r\n    \"6adbac7a-0e3f-4640-ae37-54a94a97d542\"\r\n  ],\r\n  \"propsByKey\": {\r\n    \"finish_line\": {\r\n      \"name\": \"finish_line\",\r\n      \"sourceUrl\": \"https://levelbuilder-studio.code.org/v3/animations/ZmPw5xh7H5t1cAqt3rnDPA/finish_line.png?version=EF4Q6UwymbxNBc81zzKZEPhh1ql4gwvO\",\r\n      \"frameSize\": {\r\n        \"x\": 81,\r\n        \"y\": 400\r\n      },\r\n      \"frameCount\": 1,\r\n      \"looping\": true,\r\n      \"frameDelay\": 2,\r\n      \"version\": \"EF4Q6UwymbxNBc81zzKZEPhh1ql4gwvO\"\r\n    },\r\n    \"6adbac7a-0e3f-4640-ae37-54a94a97d542\": {\r\n      \"name\": \"race_car\",\r\n      \"sourceUrl\": \"https://levelbuilder-studio.code.org/media?u=https%3A%2F%2Flevelbuilder-studio.code.org%2Fv3%2Fanimations%2FZmPw5xh7H5t1cAqt3rnDPA%2F6adbac7a-0e3f-4640-ae37-54a94a97d542.png%3Fversion%3D_QE8AAH3dC365E.Ytt7Jk9Ce6MFxp47q\",\r\n      \"frameSize\": {\r\n        \"x\": 131,\r\n        \"y\": 71\r\n      },\r\n      \"frameCount\": 1,\r\n      \"looping\": true,\r\n      \"frameDelay\": 2,\r\n      \"version\": \"_QE8AAH3dC365E.Ytt7Jk9Ce6MFxp47q\"\r\n    }\r\n  }\r\n}",
     "instructions_important": "false",
     "hide_animation_mode": "false",

dashboard/config/scripts/levels/CSD U3 - complex - compound conditionals.level

@@ -94,7 +94,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "true",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "callout_json": "[]",
     "hide_animation_mode": "false",
     "instructions_important": "false",

dashboard/config/scripts/levels/CSD U3 - complex - key up and down.level

@@ -97,7 +97,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "true",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "callout_json": "[]",
     "start_blocks": "var clicks = 0;\r\n\r\nfunction draw() {\r\n  // If mouseWentDown, add one to the clicks variable\r\n  \r\n  background(\"white\");\r\n  textSize(50);\r\n  textAlign(CENTER, CENTER);\r\n  text(clicks, 0, 0, 400, 400);\r\n}",
     "hide_animation_mode": "false",

dashboard/config/scripts/levels/CSD U3 - complex - mouse down.level

@@ -94,7 +94,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "true",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "callout_json": "[]",
     "start_blocks": "var balloon = createSprite(200, 50);\r\nballoon.setAnimation(\"balloon\");\r\nballoon.scale = 0.1;\r\n\r\nfunction draw() {\r\n  background(\"white\");\r\n  \r\n  // If the mouse is down, move the balloon up, otherwise move it down\r\n  balloon.y = balloon.y + 1;\r\n\r\n  drawSprites();\r\n}",
     "hide_animation_mode": "false",

dashboard/config/scripts/levels/CSD U3 - complex - mouse move.level

@@ -97,7 +97,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "true",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "callout_json": "[]",
     "start_blocks": "var salt = createSprite (200, 200);\r\nsalt.setAnimation(\"salt\");\r\nsalt.rotation = 150;\r\n\r\nfunction draw() {\r\n  background(\"skyblue\");\r\n  \r\n  // If mouseDidMove, rotate the salt randomly to the left or right\r\n  \r\n  drawSprites();\r\n}",
     "hide_animation_mode": "false",

dashboard/config/scripts/levels/CSD U3 - complex - nested conditional.level

@@ -94,7 +94,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "true",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "callout_json": "[]",
     "hide_animation_mode": "false",
     "instructions_important": "false",

dashboard/config/scripts/levels/CSD U3 - conditionals - arrows and gears.level

@@ -85,7 +85,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "false",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "instructions_important": "false",
     "hide_animation_mode": "false",
     "start_in_animation_tab": "false",

dashboard/config/scripts/levels/CSD U3 - conditionals - transition.level

@@ -29,7 +29,7 @@
     "text_mode_at_start": "false",
     "submittable": "false",
     "hide_view_data_button": "true",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "markdown_instructions": "# Booleans\r\n\r\nIn the past few levels, we have been comparing values of sprites to find out whether something is true or false. Let's start putting that in the context of an animation.\r\n\r\n# Do This\r\nThe program draws a race car and a finish line. We are going to figure out when the race car crosses the finish line. The sprites have all been set up for you.\r\n\r\n* Add a `console.log` statement inside the draw loop. ( [Show me where](#triggercallout=callout) )\r\n* Add an Boolean expression inside the `console.log` that asks \"Is the x position of the race car less than the x position of the finish line?\"\r\n* Look at the output of the program as the car moves. When does the output change? Why?",
     "callout_json": "[ {\r\n  \"localization_key\": \"CSD_U3_L8_S6_C1\",\r\n  \"callout_text\": \"Put the console log statement here\",\r\n  \"element_id\": \"\",\r\n  \"on\": \"callout\",\r\n  \"qtip_config\": {\r\n   \"codeStudio\": {\r\n    \"canReappear\": true,\r\n    \"dropletPaletteCategory\": \"\",\r\n     \"codeString\": \"raceCar.x = raceCar.x - 2;\"\r\n   },\r\n   \"style\": {\r\n    \"classes\": \"\"\r\n   },\r\n   \"position\": {\r\n    \"my\": \"top left\",\r\n    \"at\": \"bottom left\",\r\n    \"adjust\": {\r\n     \"x\": 160,\r\n     \"y\": 10\r\n    }\r\n   }\r\n  }\r\n }\r\n]",
     "show_d_pad": "false",

dashboard/config/scripts/levels/CSD U3 - fish template.level

@@ -31,7 +31,7 @@
     "free_play": "false",
     "text_mode_at_start": "false",
     "hide_view_data_button": "false",
-    "debugger_disabled": "false",
+    "debugger_disabled": "true",
     "start_animations": "{\r\n  \"orderedKeys\": [\r\n    \"7971239b-2cc5-42c7-8f24-cc7628d98d29\",\r\n    \"04fe3dba-6425-4064-87d6-a572685bdd5c\",\r\n    \"d3c518ec-c351-41d4-bc12-d3b885389bf5\"\r\n  ],\r\n  \"propsByKey\": {\r\n    \"7971239b-2cc5-42c7-8f24-cc7628d98d29\": {\r\n      \"name\": \"blue_fish\",\r\n      \"sourceUrl\": \"https://levelbuilder-studio.code.org/v3/animations/qQO8azHNNTyOiiJs3MYLNQ/7971239b-2cc5-42c7-8f24-cc7628d98d29.png\",\r\n      \"frameSize\": {\r\n        \"x\": 128,\r\n        \"y\": 128\r\n      },\r\n      \"frameCount\": 1,\r\n      \"looping\": true,\r\n      \"frameDelay\": 4,\r\n      \"version\": \"UgK56NFFNAcaEgzyGa1kA7Q0ifv.dcK0\"\r\n    },\r\n    \"04fe3dba-6425-4064-87d6-a572685bdd5c\": {\r\n      \"name\": \"orange_fish\",\r\n      \"sourceUrl\": \"https://levelbuilder-studio.code.org/v3/animations/qQO8azHNNTyOiiJs3MYLNQ/04fe3dba-6425-4064-87d6-a572685bdd5c.png\",\r\n      \"frameSize\": {\r\n        \"x\": 128,\r\n        \"y\": 128\r\n      },\r\n      \"frameCount\": 1,\r\n      \"looping\": true,\r\n      \"frameDelay\": 4,\r\n      \"version\": \"IMlqRruXCoTazPeu.iWQKvo8vtNWEeao\"\r\n    },\r\n    \"d3c518ec-c351-41d4-bc12-d3b885389bf5\": {\r\n      \"name\": \"green_fish\",\r\n      \"sourceUrl\": \"https://levelbuilder-studio.code.org/v3/animations/qQO8azHNNTyOiiJs3MYLNQ/d3c518ec-c351-41d4-bc12-d3b885389bf5.png\",\r\n      \"frameSize\": {\r\n        \"x\": 128,\r\n        \"y\": 128\r\n      },\r\n      \"frameCount\": 1,\r\n      \"looping\": true,\r\n      \"frameDelay\": 4,\r\n      \"version\": \"l3xz89QJEaPfW4rdHCynWADo_KChYRTj\"\r\n    }\r\n  }\r\n}",
     "instructions_important": "false",
     "hide_animation_mode": "false",