feat: beautify result report

* add color for state string
* align extra info to right
* apply new mapclay rule, steps result about "prepare" has type="prepare"

3 files changed, 42 insertions, 7 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 56b935c..6c2a1d9 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -155,13 +155,40 @@ export const renderResults = ({ modal, modalContent }, map) =>
       // HACK find another way to override inline style
       document.querySelector('.plainmodal-overlay-force').style.position =
         'relative';
-      map.renderer.results.forEach(result =>
+
+      const printDetails = result => {
+        const funcBody = result.func.toString();
+        const loc = funcBody.split('\n').length;
+        const color =
+          {
+            success: 'green',
+            fail: 'red',
+            skip: 'black',
+            stop: 'yellow',
+          }[result.state] ?? 'black';
         printObject(
           result,
           modalContent,
-          `${result.func.name} (${result.state})`,
-        ),
+          `${result.func.name} <span class='align-right'>${loc}LOC\x20\x20\x20<span style='display: inline-block; width: 100px; color: ${color};'>${result.state}</span></span>`,
+        );
+      };
+
+      // Add contents about prepare steps
+      const prepareHeading = document.createElement('h3');
+      prepareHeading.textContent = 'Prepare Steps';
+      modalContent.appendChild(prepareHeading);
+      const prepareSteps = map.renderer.results.filter(
+        r => r.type === 'prepare',
       );
+      prepareSteps.forEach(printDetails);
+
+      // Add contents about render steps
+      const renderHeading = document.createElement('h3');
+      renderHeading.textContent = 'Render Steps';
+      renderHeading.style.marginTop = '1em';
+      modalContent.appendChild(renderHeading);
+      const renderSteps = map.renderer.results.filter(r => r.type === 'render');
+      renderSteps.forEach(printDetails);
     },
   });
 
@@ -172,7 +199,7 @@ function printObject(obj, parentElement, name) {
   parentElement.appendChild(detailsEle);
 
   detailsEle.onclick = () => {
-    if (detailsEle.children.length > 1) return;
+    if (detailsEle.querySelector(':scope > :not(summary)')) return;
 
     Object.entries(obj).forEach(([key, value]) => {
       if (typeof value === 'object') {
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index d84ec2b..7cb4d8c 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -694,17 +694,20 @@ root {
 
   transform: translate(-50%, -50%);
   overflow-y: scroll;
+  white-space: pre;
 
   details {
     margin-bottom: 0.5em;
   }
 
   summary {
+    max-width: 60%;
+
     cursor: pointer;
   }
 
   details > :not(summary) {
-    padding-left: 1em;
+    padding-left: 2em;
   }
 
   p {
@@ -718,4 +721,9 @@ root {
 
     background: #f0f0f0;
   }
+
+  .align-right {
+    display: inline-block;
+    float: right;
+  }
 }
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index d77d49c..2a6f332 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -379,11 +379,11 @@ export const generateMaps = (container, { delay, mapCallback }) => {
    */
   const updateAttributeByStep = ({ results, target, steps }) => {
     let passNum = results.filter(
-      r => r.type === 'step' && r.state.match(/success|skip/),
+      r => r.type === 'render' && r.state.match(/success|skip/),
     ).length;
     const total = steps.length;
     passNum += `/${total}`;
-    if (results.filter(r => r.type === 'step').length === total) {
+    if (results.filter(r => r.type === 'render').length === total) {
       passNum += '\u0020';
     }