Merge pull request #5236 from dodona-edu/feat/papyros-debugger

Update to papyros version with debugger

app/assets/javascripts/coding_scratchpad.ts

@@ -1,8 +1,10 @@
-import { CodeEditor, InputMode, Papyros, ProgrammingLanguage } from "@dodona/papyros";
+import { BackendManager, CodeEditor, InputMode, Papyros, ProgrammingLanguage } from "@dodona/papyros";
 import { themeState } from "state/Theme";
 import { EditorView } from "@codemirror/view";
 import { rougeStyle, setCode } from "editor";
 import { syntaxHighlighting } from "@codemirror/language";
+import { BackendEventType } from "@dodona/papyros/dist/BackendEvent";
+import { Tab } from "bootstrap";
 
 /** Identifiers used in HTML for relevant elements */
 const CODE_EDITOR_PARENT_ID = "scratchpad-editor-wrapper";
@@ -14,6 +16,9 @@ const SHOW_OFFCANVAS_BUTTON_ID = "scratchpad-offcanvas-show-btn";
 const CODE_COPY_BUTTON_ID = "scratchpad-code-copy-btn";
 const CLOSE_BUTTON_ID = "scratchpad-offcanvas-close-btn";
 const SUBMIT_TAB_ID = "activity-handin-link";
+const CODE_TRACE_PARENT_ID = "scratchpad-trace-wrapper";
+const TRACE_TAB_ID = "scratchpad-trace-tab";
+const DESCRIPTION_TAB_ID = "scratchpad-description-tab";
 
 function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
     if (Papyros.supportsProgrammingLanguage(programmingLanguage)) {
@@ -48,22 +53,6 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
                             serviceWorkerName: "inputServiceWorker.js"
                         }
                     });
-                editor ||= window.dodona.editor;
-                if (editor) {
-                    // Shortcut to copy code to editor
-                    papyros.addButton(
-                        {
-                            id: CODE_COPY_BUTTON_ID,
-                            buttonText: I18n.t("js.coding_scratchpad.copy_code")
-                        },
-                        () => {
-                            setCode(editor, papyros.getCode());
-                            closeButton.click();
-                            // Open submit panel if possible
-                            document.getElementById(SUBMIT_TAB_ID)?.click();
-                        }
-                    );
-                }
 
                 // Render once new button is added
                 papyros.render({
@@ -83,8 +72,29 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
                             maxHeight: "10vh"
                         }
                     },
+                    traceOptions: {
+                        parentElementId: CODE_TRACE_PARENT_ID
+                    },
                     darkMode: themeState.theme === "dark"
                 });
+                editor ||= window.dodona.editor;
+                if (editor) {
+                    // Shortcut to copy code to editor
+                    papyros.addButton(
+                        {
+                            id: CODE_COPY_BUTTON_ID,
+                            buttonText: I18n.t("js.coding_scratchpad.copy_to_submit"),
+                            classNames: "btn-secondary",
+                            icon: "<i class=\"mdi mdi-clipboard-arrow-left-outline\"></i>"
+                        },
+                        () => {
+                            setCode(editor, papyros.getCode());
+                            closeButton.click();
+                            // Open submit panel if possible
+                            document.getElementById(SUBMIT_TAB_ID)?.click();
+                        }
+                    );
+                }
                 await papyros.launch();
 
                 papyros.codeRunner.editor.reconfigure([CodeEditor.STYLE, syntaxHighlighting(rougeStyle, {
@@ -107,6 +117,29 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
                 }
             }
         });
+
+        // Hide Trace tab when a new run is started
+        BackendManager.subscribe(BackendEventType.Start, () => {
+            const traceTab = document.getElementById(TRACE_TAB_ID);
+            if (traceTab) {
+                traceTab.classList.add("hidden");
+                const descriptionTab = document.getElementById(DESCRIPTION_TAB_ID);
+                if (descriptionTab) {
+                    const tabTrigger = new Tab(descriptionTab.querySelector("a"));
+                    tabTrigger.show();
+                }
+            }
+        });
+
+        // Show Trace tab when a new frame is added
+        BackendManager.subscribe(BackendEventType.Frame, () => {
+            const traceTab = document.getElementById(TRACE_TAB_ID);
+            if (traceTab) {
+                traceTab.classList.remove("hidden");
+                const tabTrigger = new Tab(traceTab.querySelector("a"));
+                tabTrigger.show();
+            }
+        });
     }
 }
 

app/assets/javascripts/i18n/translations.json

@@ -169,8 +169,8 @@
         "copy-to-clipboard": "Copy code to clipboard"
       },
       "coding_scratchpad": {
-        "copy_code": "Copy to Dodona",
-        "overwrite_code": "Do you want to overwrite the code in the scratchpad with your latest changes?"
+        "copy_to_submit": "Finalize and submit",
+        "overwrite_code": "Do you want to overwrite the code in the sandbox with your latest changes?"
       },
       "configured-institution": "the configured institution",
       "copy-fail": "Press Ctrl-C to copy",
@@ -695,8 +695,8 @@
         "copy-to-clipboard": "Kopieer code naar klembord"
       },
       "coding_scratchpad": {
-        "copy_code": "Kopieer naar Dodona",
-        "overwrite_code": "Wil je de code in het kladblok overschrijven met je laatste aanpassingen?"
+        "copy_to_submit": "Naar indienbox",
+        "overwrite_code": "Wil je de code in de sandbox overschrijven met je laatste aanpassingen?"
       },
       "configured-institution": "de ingestelde onderwijsinstelling",
       "copy-fail": "Druk Ctrl-C om te kopiëren",

app/assets/stylesheets/base.css.scss

@@ -1,5 +1,6 @@
 // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/@dodona/papyros/dist/Papyros";
 
 // 2. Include any default variable overrides here
 @import "mixins.css.scss";
@@ -8,6 +9,7 @@
 @import "bootstrap_variable_overrides.css.scss";
 @import "theme/rouge.css.scss";
 @import "theme/codemirror.css.scss";
+@import "theme/trace-component.css.scss";
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "../../../node_modules/bootstrap/scss/variables";
@@ -83,9 +85,6 @@
 @import "seasonal/mario-day.css.scss";
 @import "seasonal/pi-day.css.scss";
 
-// 8. Papyros css
-@import "../../../node_modules/@dodona/papyros/dist/Papyros";
-
 /* stylelint-disable-next-line selector-class-pattern */
 .field_with_errors input {
   border-color: var(--d-danger);

app/assets/stylesheets/bootstrap_css_variable_overrides.css.scss

@@ -114,6 +114,10 @@
   --bs-body-font-size: var(--d-font-size-base);
   --bs-body-font-weight: 400;
 
+  .offcanvas {
+    --bs-offcanvas-width: calc(100% - 56px);
+  }
+
   .pagination {
     --bs-pagination-active-bg: var(--d-primary);
     --bs-pagination-active-border-color: var(--d-primary);

app/assets/stylesheets/components/btn.css.scss

@@ -1,4 +1,5 @@
-.btn {
+.btn,
+#scratchpad-offcanvas .papyros-button {
   height: 40px;
   display: inline-flex;
   align-items: center;
@@ -51,7 +52,9 @@
   --d-on-btn-color: var(--d-on-primary);
 }
 
-.btn.btn-filled {
+.btn.btn-filled,
+#scratchpad-offcanvas .papyros-button.btn-danger,
+#scratchpad-offcanvas .papyros-button.btn-primary {
   background: var(--d-btn-color);
   color: var(--d-on-btn-color);
 
@@ -60,7 +63,8 @@
   }
 }
 
-.btn.btn-tonal {
+.btn.btn-tonal,
+#scratchpad-offcanvas .papyros-button.btn-tonal {
   --d-btn-color: var(--d-secondary-container);
   --d-on-btn-color: var(--d-on-secondary-container);
 
@@ -81,6 +85,7 @@
 }
 
 .btn.btn-text,
+#scratchpad-offcanvas .papyros-button.btn-secondary,
 .btn.btn-outline {
   background: none;
   color: var(--d-btn-color);
@@ -119,7 +124,8 @@
   }
 }
 
-.btn.btn-outline {
+.btn.btn-outline,
+#scratchpad-offcanvas .papyros-button.btn-secondary {
   border: 1px solid var(--d-divider);
 
   &:hover,
@@ -351,7 +357,8 @@
 }
 
 // use d-btn-danger instead of btn-danger to avoid conflicts with bootstrap
-.btn.d-btn-danger {
+.btn.d-btn-danger,
+#scratchpad-offcanvas .papyros-button.btn-danger {
   --d-btn-color: var(--d-danger);
   --d-btn-color-rgb: var(--d-danger-rgb);
   --d-on-btn-color: var(--d-on-danger);

app/assets/stylesheets/components/scratchpad.css.scss

@@ -32,19 +32,45 @@
   align-items: center;
 }
 
+.scratchpad-margin {
+  // Header has absolute position, simulate its height using margin-top
+  margin-top: calc(var(--d-navbar-height));
+}
+
+.offcanvas-body {
+  padding-top: 0;
+  padding-bottom: 0;
+  height: calc(100% - var(--d-navbar-height));
+  display: flex;
+  flex-flow: column;
+
+  // estimate of height of margins, paddings, etc...
+  --d-sp-lost-height: calc(var(--d-navbar-height) + 130px);
+}
+
 .scratchpad-info {
-  padding-left: 20px;
+  margin-bottom: var(--d-card-supporting-text-padding);
   font-size: 14px;
   color: var(--d-on-surface-muted);
+  flex: 0 1 auto;
+}
 
-  // Header has absolute position, simulate its height using margin-top
-  margin-top: calc(var(--d-navbar-height) + 5px);
+.scratchpad-body {
+  flex: 1 1 auto;
 }
 
-#scratchpad-code-copy-btn {
-  color: white;
-  background-color: var(--d-blue-gray);
-  white-space: nowrap;
+.scratchpad-panel {
+  overflow: scroll;
+  height: calc(100vh - var(--d-navbar-height));
+  padding: var(--d-card-supporting-text-padding);
+
+  .nav-link {
+    cursor: pointer;
+  }
+}
+
+.scratchpad-panel + .scratchpad-panel {
+  border-left: 1px solid var(--d-divider);
 }
 
 .scratchpad-content {
@@ -72,19 +98,30 @@
   overflow-y: auto;
 }
 
+#scratchpad-editor-wrapper .cm-editor {
+  height: calc(60vh - 0.6 * var(--d-sp-lost-height));
+  min-height: 300px;
+}
+
 #scrathcpad-output-wrapper {
   margin-bottom: 10px;
   flex: 0 1 auto;
 }
 
 // First child is the output area, limit its size
 #scratchpad-output-wrapper > div:first-child {
-  max-height: 20vh !important;
+  max-height: calc(20vh - 0.2 * var(--d-sp-lost-height)) !important;
+  min-height: 100px;
   flex: 0 1 auto;
 }
 
 #scratchpad-input-wrapper {
   flex: 0 1 auto;
+
+  .cm-editor {
+    max-height: calc(10vh - 0.1 * var(--d-sp-lost-height)) !important;
+    min-height: 50px;
+  }
 }
 
 #scratchpad-offcanvas.show {
@@ -103,16 +140,56 @@
 .tailwind * {
   border-color: var(--d-divider) !important;
 }
+
+.tailwind ._tw-border-b-red-500 {
+  border-bottom-color: var(--d-danger) !important;
+}
+
+.tailwind ._tw-text-blue-500 {
+  color: var(--d-primary) !important;
+}
 /* stylelint-enable selector-class-pattern */
 
 /* stylelint-disable selector-id-pattern */
 #__papyros-code-input-area {
   background-color: var(--d-code-bg) !important;
   color: var(--d-on-background);
   caret-color: var(--d-secondary);
+  padding: 0 12px !important;
 }
 /* stylelint-enable selector-id-pattern */
 
 #scratchpad-panel-wrapper {
   border-bottom: 0 !important;
 }
+
+#scratchpad-offcanvas {
+  .papyros-button {
+    box-sizing: border-box;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 24px;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    vertical-align: middle;
+    border-radius: 20px;
+  }
+}
+
+#scratchpad-tab-content {
+  // 50px tab bar height + 16 px margin + 32px container padding + 1px to always avoid outer scrollbar
+  height: calc(100vh - var(--d-navbar-height) - 50px - 16px - 32px - 1px);
+  overflow: scroll;
+}
+
+.papyros-button.with-icon svg{
+  height: 24px;
+  width: 24px;
+  margin-right: .25em;
+}
+
+.papyros-button.with-icon .mdi::before {
+  font-size: 24px;
+  line-height: 26px;
+}

app/assets/stylesheets/theme/m3-theme-dark.css.scss

@@ -13,19 +13,31 @@
   --d-on-primary-container-rgb: #{color.red($primary-90)}, #{color.green($primary-90)}, #{color.blue($primary-90)};
   --d-banner: #{$primary-20};
   --d-on-banner: #{$primary-90};
+  --d-primary-surface: #{$primary-10};
+  --d-primary-surface-container: #{$primary-20};
+  --d-primary-outline: #{$primary-60};
+  --d-primary-outline-variant: #{$primary-30};
 
   // secondary
   --d-secondary: #{$secondary-80};
   --d-secondary-container: #{$secondary-30};
   --d-on-secondary: #{$secondary-20};
   --d-on-secondary-container: #{$secondary-90};
   --d-secondary-rgb: #{color.red($secondary-80)}, #{color.green($secondary-80)}, #{color.blue($secondary-80)};
+  --d-secondary-surface: #{$secondary-10};
+  --d-secondary-surface-container: #{$secondary-20};
+  --d-secondary-outline: #{$secondary-60};
+  --d-secondary-on-surface: #{$secondary-90};
 
   // tertiary
   --d-tertiary: #{$tertiary-80};
   --d-tertiary-container: #{$tertiary-30};
   --d-on-tertiary: #{$tertiary-20};
   --d-on-tertiary-container: #{$tertiary-90};
+  --d-tertiary-surface: #{$tertiary-10};
+  --d-tertiary-surface-container: #{$tertiary-20};
+  --d-tertiary-outline: #{$tertiary-60};
+  --d-tertiary-on-surface: #{$tertiary-90};
 
   // neutral
   --d-surface: #{$neutral-20};