From e93dda51dce31ba427b4059596c953b6c51c474f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Sat, 5 Feb 2022 13:30:04 +0100
Subject: [PATCH 1/6] feat(ui): show all failed tasks in report

---
 packages/ui/client/components/views/ViewReport.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index b39e095c7aa5..2518792f5f01 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -1,12 +1,21 @@
 <script setup lang="ts">
-import type { File } from '#types'
+import type { File, Task } from '#types'
 import { config } from '~/composables/client'
 
 const props = defineProps<{
   file?: File
 }>()
 
-const failed = computed(() => props.file?.tasks.filter(i => i.result?.state === 'fail') || [])
+function collectFailed(task: Task): Task[] {
+  if (task.result?.state !== 'fail') return []
+
+  if (task.type === 'test')
+    return [task]
+  else
+    return [task, ...task.tasks.flatMap(t => collectFailed(t))]
+}
+
+const failed = computed(() => props.file?.tasks.flatMap(t => collectFailed(t)) || [])
 
 function relative(p: string) {
   if (p.startsWith(config.value.root))

From b6ef51cf2a70d0a8b64a7ec3eff4a70532fc73ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Sat, 5 Feb 2022 13:35:55 +0100
Subject: [PATCH 2/6] feat(ui): indent report for nested failed tasks

---
 .../ui/client/components/views/ViewReport.vue     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 2518792f5f01..60c49218a5d1 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -6,16 +6,20 @@ const props = defineProps<{
   file?: File
 }>()
 
-function collectFailed(task: Task): Task[] {
+type LeveledTask = Task & {
+  level: number
+}
+
+function collectFailed(task: Task, level: number): LeveledTask[] {
   if (task.result?.state !== 'fail') return []
 
   if (task.type === 'test')
-    return [task]
+    return [{ ...task, level }]
   else
-    return [task, ...task.tasks.flatMap(t => collectFailed(t))]
+    return [{ ...task, level }, ...task.tasks.flatMap(t => collectFailed(t, level + 1))]
 }
 
-const failed = computed(() => props.file?.tasks.flatMap(t => collectFailed(t)) || [])
+const failed = computed(() => props.file?.tasks.flatMap(t => collectFailed(t, 0)) || [])
 
 function relative(p: string) {
   if (p.startsWith(config.value.root))
@@ -28,9 +32,8 @@ function relative(p: string) {
   <div h-full class="scrolls">
     <template v-if="failed.length">
       <div v-for="task of failed" :key="task.id">
-        <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded>
+        <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded :style="{ 'margin-left': `${2 * task.level + 0.5}rem`}">
           {{ task.name }}
-
           <div v-if="task.result?.error">
             <pre><b>{{ task.result.error.name || task.result.error.nameStr }}</b>: {{ task.result.error.message }}</pre>
             <pre v-for="stack, i of task.result.error.stacks || []" :key="i" op80> - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>

From 31021a7c64fdece3b72d3e494e13ba40c079526e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Sat, 5 Feb 2022 13:37:57 +0100
Subject: [PATCH 3/6] fix(ui): make report errors scrollable

---
 packages/ui/client/components/views/ViewReport.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 60c49218a5d1..b4cf382108a8 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -34,7 +34,7 @@ function relative(p: string) {
       <div v-for="task of failed" :key="task.id">
         <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded :style="{ 'margin-left': `${2 * task.level + 0.5}rem`}">
           {{ task.name }}
-          <div v-if="task.result?.error">
+          <div v-if="task.result?.error" overflow="x-auto">
             <pre><b>{{ task.result.error.name || task.result.error.nameStr }}</b>: {{ task.result.error.message }}</pre>
             <pre v-for="stack, i of task.result.error.stacks || []" :key="i" op80> - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
           </div>

From 8f9274fd5b832d9135a1a0eb1e4bb788dd126747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Sat, 5 Feb 2022 13:47:15 +0100
Subject: [PATCH 4/6] fix(ui): improve task error scrollbars

---
 packages/ui/client/components/views/ViewReport.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index b4cf382108a8..852db7fe118d 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -34,7 +34,7 @@ function relative(p: string) {
       <div v-for="task of failed" :key="task.id">
         <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded :style="{ 'margin-left': `${2 * task.level + 0.5}rem`}">
           {{ task.name }}
-          <div v-if="task.result?.error" overflow="x-auto">
+          <div v-if="task.result?.error" class="scrolls task-error">
             <pre><b>{{ task.result.error.name || task.result.error.nameStr }}</b>: {{ task.result.error.message }}</pre>
             <pre v-for="stack, i of task.result.error.stacks || []" :key="i" op80> - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
           </div>
@@ -48,3 +48,12 @@ function relative(p: string) {
     </template>
   </div>
 </template>
+
+<style scoped>
+.task-error {
+  --cm-ttc-c-thumb: #CCC;
+}
+html.dark .task-error {
+  --cm-ttc-c-thumb: #444;
+}
+</style>

From daa2ac4bcd3dc409666ecc80d92e58dc2f40ea53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Sat, 5 Feb 2022 13:52:01 +0100
Subject: [PATCH 5/6] fix(ui): make task error scrollbar track rounded

---
 packages/ui/client/components/views/ViewReport.vue | 2 +-
 packages/ui/client/styles/main.css                 | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 852db7fe118d..3d4f3a713284 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -34,7 +34,7 @@ function relative(p: string) {
       <div v-for="task of failed" :key="task.id">
         <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded :style="{ 'margin-left': `${2 * task.level + 0.5}rem`}">
           {{ task.name }}
-          <div v-if="task.result?.error" class="scrolls task-error">
+          <div v-if="task.result?.error" class="scrolls scrolls-rounded task-error">
             <pre><b>{{ task.result.error.name || task.result.error.nameStr }}</b>: {{ task.result.error.message }}</pre>
             <pre v-for="stack, i of task.result.error.stacks || []" :key="i" op80> - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
           </div>
diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
index 71f2acdfcb13..8dbce19e1af5 100644
--- a/packages/ui/client/styles/main.css
+++ b/packages/ui/client/styles/main.css
@@ -144,7 +144,8 @@ html.dark {
   background: var(--cm-ttc-c-track);
 }
 .CodeMirror-scroll::-webkit-scrollbar-thumb,
-.scrolls::-webkit-scrollbar-thumb {
+.scrolls::-webkit-scrollbar-thumb,
+.scrolls-rounded::-webkit-scrollbar-track {
   background-color: var(--cm-ttc-c-thumb);
   border-radius: 3px;
   border: 2px solid var(--cm-ttc-c-thumb);
@@ -179,4 +180,4 @@ html.dark {
 
 .v-popper__popper .v-popper__arrow-outer {
   border-color: var(--background-color);
-}
\ No newline at end of file
+}

From c51a98dbcda6a87518391f79e703265ba9c56065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Sat, 5 Feb 2022 13:59:31 +0100
Subject: [PATCH 6/6] fix(ui): split css rules

---
 packages/ui/client/styles/main.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
index 8dbce19e1af5..1e4f6155317e 100644
--- a/packages/ui/client/styles/main.css
+++ b/packages/ui/client/styles/main.css
@@ -144,11 +144,14 @@ html.dark {
   background: var(--cm-ttc-c-track);
 }
 .CodeMirror-scroll::-webkit-scrollbar-thumb,
+.scrolls::-webkit-scrollbar-thumb {
+  background-color: var(--cm-ttc-c-thumb);
+  border: 2px solid var(--cm-ttc-c-thumb);
+}
+.CodeMirror-scroll::-webkit-scrollbar-thumb,
 .scrolls::-webkit-scrollbar-thumb,
 .scrolls-rounded::-webkit-scrollbar-track {
-  background-color: var(--cm-ttc-c-thumb);
   border-radius: 3px;
-  border: 2px solid var(--cm-ttc-c-thumb);
 }
 .CodeMirror-scroll::-webkit-scrollbar-corner,
 .scrolls::-webkit-scrollbar-corner {