WIP: Editor inset vscode insiders

src/common/ct_event.nim

@@ -60,6 +60,7 @@ type
     CtUpdatedFlow,
     CtRunToEntry,
     CtRunTracepoints,
+    CtRunTraceSession,
     CtSetupTraceSession,
     CtLoadAsmFunction,
     CtLoadAsmFunctionResponse,
@@ -68,6 +69,7 @@ type
     InternalAddToScratchpadFromExpression,
     InternalStatusUpdate,
     InternalNewOperation,
+    InternalTraceMapUpdate,
     CtNotification,
 
 when defined(js):

src/frontend/dap.nim

@@ -100,6 +100,7 @@ const EVENT_KIND_TO_DAP_MAPPING: array[CtEventKind, cstring] = [
   CtUpdatedFlow: "ct/updated-flow",
   CtRunToEntry: "ct/run-to-entry",
   CtRunTracepoints: "ct/run-tracepoints",
+  CtRunTraceSession: "ct/run-trace-session",
   CtSetupTraceSession: "ct/setup-trace-session",
   CtLoadAsmFunction: "ct/load-asm-function",
   CtLoadAsmFunctionResponse: "",
@@ -108,6 +109,7 @@ const EVENT_KIND_TO_DAP_MAPPING: array[CtEventKind, cstring] = [
   InternalAddToScratchpadFromExpression: "",
   InternalStatusUpdate: "",
   InternalNewOperation: "",
+  InternalTraceMapUpdate: "",
   CtNotification: "ct/notification",
 ]
 

src/frontend/middleware.nim

@@ -5,6 +5,38 @@ import communication, dap
 import event_helpers
 
 # backend(dap) <-> middleware <-> view (self-contained, can be separate: 0, 1 or more components);
+var tracepointMap: JsAssoc[cstring, JsAssoc[int, Tracepoint]] = Jsassoc[cstring, JsAssoc[int, Tracepoint]]{}
+var sessionCounter = 0
+
+proc getTraceSession(name: cstring = "/home/nedy/calls.rb"): TraceSession =
+  var results = JsAssoc[int, seq[Stop]]{}
+  var tracepoints: seq[Tracepoint] = @[]
+
+  for line, trace in tracepointMap[name]:
+    if trace.expression != "" and trace.isChanged:
+      tracepoints.add(trace)
+
+  result = TraceSession(
+    tracepoints: tracepoints,
+    lastCount: 0,
+    results: results,
+    id: sessionCounter
+  )
+  sessionCounter += 1
+
+  return result
+
+proc updateTraceMap(tracepoint: Tracepoint) =
+  if not tracepointMap.hasKey(tracepoint.name):
+    tracepointMap[tracepoint.name] = JsAssoc[int, Tracepoint]{}
+    tracepointMap[tracepoint.name][tracepoint.line] = tracepoint
+    return
+
+  if not tracepointMap[tracepoint.name].hasKey(tracepoint.line):
+    tracepointMap[tracepoint.name][tracepoint.line] = tracepoint
+    return
+
+  tracepointMap[tracepoint.name][tracepoint.line] = tracepoint
 
 when not defined(ctInExtension):
   import utils
@@ -149,6 +181,19 @@ proc setupMiddlewareApis*(dapApi: DapApi, viewsApi: MediatorWithSubscribers) {.e
     if not lastCompleteMove.isNil:
       viewsApi.emit(CtCompleteMove, lastCompleteMove.toJs)
   )
+  viewsApi.subscribe(InternalTraceMapUpdate, proc(kind: CtEventKind, value: Tracepoint, sub: Subscriber) =
+    updateTraceMap(value)
+  )
+  viewsApi.subscribe(CtRunTraceSession, proc(kind: CtEventKind, value: SourceLocation, sub: Subscriber) =
+    let traceSession = getTraceSession(value.path)
+    dapApi.sendCtRequest(
+      CtRunTracepoints,
+      RunTracepointsArg(
+        session: traceSession,
+        stopAfter: NO_LIMIT
+      ).toJs
+    )
+  )
 
 when defined(ctInExtension):
   when defined(ctInCentralExtensionContext):

src/frontend/styles/components/flow.styl

@@ -212,15 +212,24 @@
   position: absolute
   width: 100px !important
 
+.flow-component-container
+  transform: translate(0px, 2px)
+
 .flow-loop-slider
   border-color: FLOW_PARALLEL_SLIDER_COLOR !important
   border-width: 1px !important
   position: fixed !important
   font-size: 0.9em
   height: 2px !important
+  if IS_EXTENSION
+    transform: translate(0px, 8px)
 
   .noUi-base
-    width: 100%
+    if IS_EXTENSION
+      width: 550px
+      margin-left: 220px
+    else
+      width: 100%
     height: 2px !important
     background-color: NOUI_SLIDER_BACKGROUND_COLOR
 
@@ -237,6 +246,8 @@
     background-repeat: no-repeat
     border-radius: 100px
     outline: 2px solid NOUI_SLIDER_HANDLER_BORDER
+    if IS_EXTENSION
+      transform: translate(620px, -4px)
   .noUi-connect
     background: transparent
   .noUi-tooltip

src/frontend/styles/components/text_editor.styl

@@ -869,3 +869,118 @@ else
 
 .inactive-tab
   display: none
+
+.flow-multiline-value-container
+  position: absolute
+  // background-color: FLOW_PARALLEL_BACKGROUND_COLOR
+  height: 20px
+  width: fit-content
+  // min-width: 20px
+  // max-width: 250px
+  z-index:1
+  display: flex
+  align-items: center
+
+button
+  background-color: PRIMARY_BASE
+  padding-left: 10px
+  color: PRIMARY_TEXT_COLOR
+  padding-right: 10px
+  // height: 100%
+  // font-size: 13px
+  font-family: "FiraCode"
+  margin: 1px !important
+  margin-left: 2px !important
+  display: flex
+  align-items: center
+  border-radius: 4px !important
+  cursor: pointer !important
+  background-position: center
+  background-repeat: no-repeat
+  if IS_EXTENSION
+    background-size: 8px
+  else
+    background-size: 1ch
+
+  &:hover
+    background-color: ACTIVE_MENU_BACKGROUND
+
+  &:disabled
+    opacity: 0.5 !important
+    cursor: default !important
+
+    &:hover
+      background-color: PRIMARY_BASE
+
+  &.backward
+    background-image: url('../../public/resources/shared/omniscience_backward_dark.svg')
+
+  &.forward
+    background-image: url('../../public/resources/shared/omniscience_forward_dark.svg')
+
+.flow-parallel-value
+  display: inline-flex
+  padding-right: 0
+  align-items: center
+  margin-right: 10px
+
+.flow-parallel-value-name
+  // font-size: 13px
+  font-family: "FiraCode"
+  background: FLOW_LOOP_EXPRESSION_BACKGROUND_COLOR
+  // box-shadow: 1px 1px 1px FLOW_LOOP_EXPRESSION_BOX_SHADOW_COLOR
+  color: FLOW_PARALLEL_NAME_COLOR
+  padding-left: 5px
+  padding-right: 5px
+  padding-top: 0
+  padding-bottom: 0
+  // height: 17px
+  // line-height: 17px
+  display: flex
+  border-radius: 2px
+  box-sizing: border-box
+  white-space: nowrap
+
+.flow-loop.value
+  font-size: inherit
+
+  span
+    font-size: inherit
+
+.flow-loop-value-name
+  // font-size: 13px
+  font-family: "FiraCode"
+  background: PRIMARY_BASE
+  box-shadow: 1px 1px 1px FLOW_LOOP_EXPRESSION_BOX_SHADOW_COLOR
+  color: PRIMARY_TEXT_COLOR
+  padding-left: 5px
+  padding-right: 5px
+  padding-top: 0
+  padding-bottom: 0
+  margin-right: 0px !important
+  // height: 17px
+  // line-height: 17px
+  display: flex
+  border-radius: 2px
+  box-sizing: border-box
+  white-space: nowrap
+
+.flow-loop-textarea
+  height: 100%
+  background-color: FLOW_LOOP_EXPRESSION_BACKGROUND_COLOR
+  font-family: monospace
+  border: 0
+  padding: 0
+  padding-right: 3px
+  overflow: hidden
+  resize: none
+  color: FLOW_PARALLEL_NAME_COLOR
+  outline: none
+  cursor: text
+  opacity: 0.7
+
+  &:focus
+    opacity: 1
+
+  &::placeholder
+    color: FLOW_PARALLEL_NAME_COLOR

src/frontend/styles/components/tracepoint.styl

@@ -53,6 +53,8 @@
   padding-right: 1ch
   // height: 36ch
   position: absolute
+  if IS_EXTENSION
+    max-width: calc(100% - 15px)
   // left: -81px
 
   .editor-textarea
@@ -255,10 +257,6 @@
     .fa
       color: DROPDOWN_TEXT_BACKGROUND_COLOR
 
-  .trace-buttons-container
-    display: flex
-    gap: 6px
-
   .run-trace-button
     border-radius: 6px;
     color: BORDER_COLOR;
@@ -301,6 +299,14 @@
     z-index: TRACE_LOG_EDITOR_Z_INDEX + 7
     top: 0
 
+    .trace-hamburger-svg
+      height: 24px
+      width: 24px
+      background-image: TRACE_HAMBURGER_IMAGE
+      background-size: 12px 8px
+      background-repeat: no-repeat
+      background-position: center
+
   .trace-dropdown-menu
     display: none
 
@@ -364,6 +370,16 @@
     margin: 0
     padding: 0
 
+  .trace-buttons-container
+    display: flex
+    gap: 6px
+
+    .trace-run-button-svg
+      height: 24px
+      width: 24px
+      background-image: RUN_TRACEPOINT_IMAGE
+      background-repeat: no-repeat
+
 .kind-dropdown-menu
   background: #b8c0cf !important
   position: absolute

src/frontend/styles/default_dark_theme.styl

@@ -21,6 +21,9 @@ BREAKPOINT_COLOR=#F87171
 TRACEPOINT_COLOR=#6366F1
 TRACEPOINT_LINE_NUMBER_COLOR=#c6c6c6
 
+RUN_TRACEPOINT_IMAGE=url("../../public/resources/tracepoints/run_tracepoints_dark.svg")
+TRACE_HAMBURGER_IMAGE=url("../../public/resources/tracepoints/trace_hamburger_dark.svg")
+
 NOUI_SLIDER_HANDLER_IMAGE=url("../../public/resources/shared/noUiSlider_handle_icon_dark.svg")
 NOUI_SLIDER_ACTIVE_HANDLER_IMAGE=url("../../public/resources/shared/noUiSlider_handle_active_icon_dark.svg")
 NOUI_SLIDER_HANDLER_BACKGROUND=#818181

src/frontend/types.nim

@@ -1044,6 +1044,7 @@ type
     tippyElement*: JsObject
     leftPos*: cstring
     lastScrollFireTime*: int64
+    position*: int
     # codeID*: int64