feat: Add animation to debug menu and fix monaco editor colors with new color palette

Author: pxor

src/frontend/styles/components/state.styl

@@ -29,7 +29,7 @@
   color: orange
 
 .value-error
-  color: red
+  color: CALLTRACE_END_OF_PROGRAM_ERROR
 
 .value-non-expanded, .value-error
   position: absolute

src/frontend/styles/components/text_editor.styl

@@ -7,33 +7,38 @@
 .margin-view-overlays
   height: 100%
 
-  // div
-  //   background-color: SECONDARY_BASE
+  div
+    background-color: SECONDARY_BASE
 
 .monaco-editor .margin .margin-view-overlays .folding
-  margin-left: 15px !important
+  padding-left: 14px !important
   // background-color: transparent
-  width: 5px !important
+  width: 4px !important
 
 .sticky-widget
   width: 100% !important
 
 .diff-view-zone
   width: -webkit-fill-available !important
-  background-color: DIFF_BACKGROUND
+
+  .monaco-editor-background
+    background-color: DIFF_BACKGROUND !important
+  
+  .margin
+    background-color: DIFF_BACKGROUND !important
 
   .margin-view-overlays
     div
       background-color: DIFF_BACKGROUND !important
 
-  .mtk1
+  [class^="mtk"]
     color: BREAKPOINT_COLOR !important
 
   .line-numbers
     border-right: 1px solid BREAKPOINT_COLOR !important
 
   .diff-deleted-gutter
-    color: BREAKPOINT_COLOR
+    color: BREAKPOINT_COLOR !important
 
   .current-line
     background-color: transparent !important
@@ -76,7 +81,7 @@
   //     width: 8px !important
 
 .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input, .monaco-editor .margin, .monaco-editor .sticky-line-content, .monaco-editor .sticky-line-number
-  // background-color: transparent !important
+  background-color: transparent !important
   z-index: 2
 
   .monaco-scrollable-element

src/frontend/types.nim

@@ -609,6 +609,7 @@ type
     activeHistory*: cstring
     finished*: bool
     jumpHistory*: seq[JumpHistory]
+    isLoading*: bool
 
 
 

src/frontend/ui/debug.nim

@@ -90,7 +90,14 @@ proc action(self: DebugComponent, id: string) =
   of "run-tests":
     # copied from alt+l shorcut handling in shortcuts.nim
     let options = RunTestOptions(newWindow: true, path: data.services.debugger.location.path, testName: "")
+    self.isLoading = true
     data.runTests(options)
+    # TODO: For now hardcode the animation reset
+    discard setTimeout(proc() =
+      self.isLoading = false
+      redrawAll(),
+      10000
+    )
 
   of "history-back":
     self.handleHistoryJump(isForward = true)
@@ -142,7 +149,8 @@ var buttons = JsAssoc[cstring, VNode]{
   "jump-before": buildHtml(img(src="public/resources/debug/jump-before_16_dark.svg", height="16px", width="16px", class="debug-button-svg")),
   "jump-after": buildHtml(img(src="public/resources/debug/jump-after_16_dark.svg", height="16px", width="16px", class="debug-button-svg")),
   "run-to-entry": buildHtml(img(src="public/resources/debug/run_to_entry_dark.svg", height="20px", width="18px", class="debug-button-svg")),
-  "run-tests": buildHtml(img(src="public/resources/shared/run_test_img.svg", height="12px", width="18px", class="debug-button-svg"))
+  "run-tests": buildHtml(img(src="public/resources/shared/run_test_img.svg", height="12px", width="18px", class="debug-button-svg")),
+  "run-tests-loading": buildHtml(img(src="public/resources/shared/rerecord_animation.svg", height="18px", width="18px", class="debug-button-svg"))
  }
 
 let shortcuts = JsAssoc[cstring, cstring]{
@@ -353,7 +361,10 @@ method render*(self: DebugComponent): VNode =
         separateBar()
         debugButton("reset-operation", false) # not self.stableBusy)
         separateBar()
-        debugButton("run-tests")
+        if not self.isLoading:
+          debugButton("run-tests")
+        else:
+          debugButton("run-tests-loading")
         separateBar()
       else:
         debugStepButton("continue", Continue, false)