🪲 Fixes for the debugger (hedyorg#5673)

Fixes several bugs for the debugger, including: * Now the debugger disables the continue button, so the only possibility to continue executing the program is when there are no instructions being executed. * Fixed the problem when the debugger did not show the turtle canvas. * Overlays the variable box on top of the output window, so now there's space for it when the turtle also shows in the program. fixes hedyorg#5672 fixes hedyorg#5671 fixes hedyorg#5670 fixes hedyorg#4775 **How to test** * Copy and paste this program in level 2: ``` print I will draw a plus angle is 90 forward 20 sleep 1 turn -90 color blue forward 20 sleep 1 turn 90 color red forward 20 sleep 1 turn -90 color black forward 20 sleep 1 turn -90 color blue forward 20 sleep 1 turn 90 color red forward 20 sleep 1 turn -90 color black forward 20 sleep 1 turn -90 color blue forward 20 sleep 1 turn 90 color red forward 20 sleep 1 turn -90 color black forward 20 sleep 1 turn -90 color blue forward 20 sleep 1 turn 90 color red forward 20 ``` Check that the plus is drawn correctly and that you can't continue pressing continue when the turtle is drawing or the program is sleeping. Once it finishes, check that the variable box is being shown correctly. I also updated and added a few tests.
Sidd-T · Aug 6, 2024 · 3568d97 · 3568d97
1 parent 9b8c1ce
commit 3568d97
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 56 deletions.
diff --git a/static/js/app.ts b/static/js/app.ts
@@ -908,7 +908,6 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
 
   if (hasTurtle) {
     code_prefix += turtle_prefix;
-    resetTurtleTarget();
     $('#turtlecanvas').show();
   }
 
@@ -1121,6 +1120,9 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
     });
 
   } else {
+    // Disable continue button, until the current instruction is completed.
+    // The button is enabled again in incrementDebugLine()
+    document.getElementById('debug_continue')!.setAttribute('disabled', 'disabled');
     // maybe remove debug marker here
     return theGlobalDebugger.continueForward()
       .catch(function(err: any) {
@@ -1238,24 +1240,6 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
   }
 }
 
-function resetTurtleTarget() {
-    if (Sk.TurtleGraphics !== undefined) {
-
-      let selector = Sk.TurtleGraphics.target;
-      let target = typeof selector === "string" ? document.getElementById(selector) : selector;
-      if (target !== null && target !== undefined){
-        // clear canvas container
-        while (target.firstChild) {
-          target.removeChild(target.firstChild);
-        }
-        return target;
-      }
-
-    }
-
-    return null;
-}
-
 function speak(text: string) {
   var selectedURI = $('#speak_dropdown').val();
   if (!selectedURI) { return; }

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -103879,9 +103879,10 @@ def note_with_error(value, err):
       var debugButton = $("#debug_button");
       debugButton.show();
       var continueButton = $("#debug_continue");
-      var stopButton = $("debug_stop");
+      var stopButton = $("#debug_stop");
       var resetButton = $("#debug_restart");
       var runButtonContainer = $("#run_button_container");
+      document.getElementById("debug_continue").removeAttribute("disabled");
       $("#stopit").hide();
       $("#runit").show();
       runButtonContainer.show();
@@ -103904,6 +103905,7 @@ def note_with_error(value, err):
     }
   }
   function incrementDebugLine() {
+    document.getElementById("debug_continue").removeAttribute("disabled");
     const active_suspension = theGlobalDebugger.getActiveSuspension();
     const suspension_info = theGlobalDebugger.getSuspensionInfo(active_suspension);
     const lineNumber = suspension_info.lineno;
@@ -120405,7 +120407,6 @@ def note_with_error(value, err):
     }
     if (hasTurtle) {
       code_prefix += turtle_prefix;
-      resetTurtleTarget();
       $("#turtlecanvas").show();
     }
     if (hasPressed) {
@@ -120570,6 +120571,7 @@ def note_with_error(value, err):
         throw new Error(errorMessage);
       });
     } else {
+      document.getElementById("debug_continue").setAttribute("disabled", "disabled");
       return theGlobalDebugger.continueForward().catch(function(err) {
         console.error(err);
         const errorMessage = errorMessageFromSkulptError(err) || null;
@@ -120650,19 +120652,6 @@ def note_with_error(value, err):
       }
     }
   }
-  function resetTurtleTarget() {
-    if (Sk.TurtleGraphics !== void 0) {
-      let selector = Sk.TurtleGraphics.target;
-      let target = typeof selector === "string" ? document.getElementById(selector) : selector;
-      if (target !== null && target !== void 0) {
-        while (target.firstChild) {
-          target.removeChild(target.firstChild);
-        }
-        return target;
-      }
-    }
-    return null;
-  }
   function speak(text) {
     var selectedURI = $("#speak_dropdown").val();
     if (!selectedURI) {

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/static/js/debugging.ts b/static/js/debugging.ts
@@ -267,10 +267,10 @@ export function stopDebug() {
     var debugButton = $('#debug_button');
     debugButton.show();
     var continueButton = $('#debug_continue');
-    var stopButton = $('debug_stop');
+    var stopButton = $('#debug_stop');
     var resetButton = $('#debug_restart');
     var runButtonContainer = $('#run_button_container');
-
+    document.getElementById('debug_continue')!.removeAttribute('disabled');
     $('#stopit').hide();
     $('#runit').show()
     runButtonContainer.show();
@@ -298,6 +298,7 @@ function clearDebugVariables() {
 }
 
 export function incrementDebugLine() {
+  document.getElementById('debug_continue')!.removeAttribute('disabled');
   const active_suspension = theGlobalDebugger.getActiveSuspension();
   const suspension_info = theGlobalDebugger.getSuspensionInfo(active_suspension);
   const lineNumber = suspension_info.lineno;

diff --git a/templates/incl/editor-and-output.html b/templates/incl/editor-and-output.html
@@ -85,18 +85,19 @@
           </div>
         </div>
     </div>
-    <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-hidden" id="code_output" style="height: {{editor_height}}">
-      <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
-          <div id="variable_button" class="hidden my-3 cursor-pointer" onclick="$('#variable_list').slideToggle('medium');">
-            <div class="h-2 z-10 bg-blue-500 content-center justify-center grid text-center">
-                <div class="w-fit bg-blue-500 text-white px-5 rounded-lg text-sm">
-                    <i class="fa-solid fa-tag text-lg mt-2 mr-2"></i>
-                    <i id="variables_arrow" class="fa-solid fa-angle-up text-lg mt-2 ml-2"></i>                    
-                </div>
-            </div>            
-          </div>
-
-        <div class="overflow-auto inline-block flex z-10 text-white bg-blue-100 rounded-lg" id="variables">
+    <div data-devmodeheight="{{editor_height}},36rem" data-origheight="{{editor_height}}" class="w-full flex flex-col order-3 relative min-h-0 overflow-auto" id="code_output" style="height: {{editor_height}}">
+      <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 pb-10 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem;"></div>
+      <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
+      <div class="overflow-auto flex-0 absolute bottom-0 w-full z-20 bg-blue-100">
+        <div id="variable_button" class="hidden my-3 cursor-pointer" onclick="$('#variable_list').slideToggle('medium');">
+          <div class="h-2 z-10 bg-blue-500 content-center justify-center grid text-center">
+              <div class="w-fit bg-blue-500 text-white px-5 rounded-lg text-sm">
+                  <i class="fa-solid fa-tag text-lg mt-2 mr-2"></i>
+                  <i id="variables_arrow" class="fa-solid fa-angle-up text-lg mt-2 ml-2"></i>                    
+              </div>
+          </div>            
+        </div>
+        <div class="inline-block flex z-10 text-white bg-blue-100 rounded-lg max-h-36" id="variables">
             <ul id="variable_list" class="bg-blue-100 text-blue-500 px-4 whitespace-nowrap list-none mb-0"
                 style="display: none; margin-left: 0px;"
                 _="on mutation of @style
@@ -112,8 +113,7 @@
             </ul>
             <!-- For some reason the Tailwind ml-0 doesn't do the trick here -->
         </div>
-
-      <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
+      </div>
       <div id="inline_modal" class="flex-0 absolute bottom-0 w-full z-20">
         <div id="ask_modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none">
           <!--Title-->

diff --git a/tests/cypress/e2e/hedy_page/debugger.cy.js b/tests/cypress/e2e/hedy_page/debugger.cy.js
@@ -348,6 +348,7 @@ describe('Test editor box functionality', () => {
     cy.get('#debug_continue').click();
     cy.get('#output').should('contain.text', 'Not Hedy');
   });
+
   it('Test repeat with blocks', () => {
     cy.intercept('/parse').as('parse');
 
@@ -378,8 +379,11 @@ describe('Test editor box functionality', () => {
       .eq(2)
       .should('have.class', 'cm-debugger-current-line');
     cy.get('#debug_continue').click();
-
-    cy.get('#turtlecanvas').should('be.visible');
+
+    cy.wait(100);
+
+    cy.get('#debug_continue').should('not.be.visible')
+    cy.get('#turtlecanvas').invoke('height').should('gte', 100)
   });
 
   it('Test repeat with ifelse inside', () => {
@@ -517,13 +521,40 @@ describe('Test editor box functionality', () => {
 
         for (let line = 0; line < 6; line++) {
           codeMirrorLines()
-            .eq(line)
-            .should('have.class', 'cm-debugger-current-line');
+          .eq(line)
+          .should('have.class', 'cm-debugger-current-line');
           cy.get('#debug_continue').click();
         }
       })
     }
   })
+
+  it("Test disabling the continue button when the program is sleeping", () => {
+    const code = "print hello world\nsleep 1";
+    cy.intercept('/parse').as('parse');
+
+    visitLevel(2);
+
+    cy.focused().type(code)
+    cy.get('#debug_button').click()
+    cy.wait('@parse')
+
+    codeMirrorLines()
+      .eq(0)
+      .should('have.class', 'cm-debugger-current-line');
+    cy.get('#debug_continue').click();
+
+    cy.get('#output').should('contain.text', 'hello world');
+
+    codeMirrorLines()
+      .eq(1)
+      .should('have.class', 'cm-debugger-current-line');
+    cy.get('#debug_continue').click();
+    // Now that we clicked continue, the continue button should be disabled for a second
+    cy.get('#debug_continue').should('be.disabled')
+    cy.wait(1000)
+    cy.get('#debug_continue').should('not.be.visible')
+  })
 });
 
 /**

diff --git a/tests/cypress/e2e/hedy_page/run_code_button.cy.js b/tests/cypress/e2e/hedy_page/run_code_button.cy.js
@@ -81,4 +81,26 @@ describe('Is able to run code', () => {
       cy.get('#runit').should('be.visible')
       cy.get('#variable_list').should('be.visible').and('have.text', 'var1: 1var2: 2var3: 3var4: 4')
     })
+
+    it('Running a program with the turtle, still should show the variables', () => {
+      cy.intercept('/parse').as('parse')
+      cy.visit('/hedy/2')
+
+      let code = "forward 10";
+      for(let i = 1; i <= 20; i++) {
+        code += `\nangle${i} is 90`
+      }
+      cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').clear()
+      cy.get('#editor > .cm-editor > .cm-scroller > .cm-content').type(code)
+
+      cy.get('#runit').click()
+      cy.wait('@parse')
+
+      cy.wait(500)
+      cy.get('#stopit').should('not.be.visible')
+      cy.get('#runit').should('be.visible')
+
+      cy.get('#variable_button').click()
+      cy.get('#variables').invoke('height').should('gte', 50)
+    })
   })