From da699133d6285e9f7696bfa0fb8f898227abd1e2 Mon Sep 17 00:00:00 2001
From: Matheus Cruz <matheuscruz.dev@gmail.com>
Date: Thu, 3 Oct 2024 06:57:35 -0300
Subject: [PATCH] Apply enhacements to error handler page

---
 .../quarkus/runtime/TemplateHtmlBuilder.java  | 114 +++++++++++++-----
 .../META-INF/template-html-builder.css        |  65 +++++++++-
 2 files changed, 145 insertions(+), 34 deletions(-)

diff --git a/core/runtime/src/main/java/io/quarkus/runtime/TemplateHtmlBuilder.java b/core/runtime/src/main/java/io/quarkus/runtime/TemplateHtmlBuilder.java
index 0a312ed871bd4..196a709a76e00 100644
--- a/core/runtime/src/main/java/io/quarkus/runtime/TemplateHtmlBuilder.java
+++ b/core/runtime/src/main/java/io/quarkus/runtime/TemplateHtmlBuilder.java
@@ -15,33 +15,82 @@
 public class TemplateHtmlBuilder {
     private static String CSS = null;
 
-    private static final String SCRIPT_STACKTRACE_MANIPULATION = "<script>\n" +
-            "	function toggleStackTraceOrder() {\n" +
-            "		var stElement = document.getElementById('stacktrace');\n" +
-            "		var current = stElement.getAttribute('data-current-setting');\n" +
-            "		if (current == 'original-stacktrace') {\n" +
-            "			var reverseOrder = document.getElementById('reversed-stacktrace');\n" +
-            "			stElement.innerHTML = reverseOrder.innerHTML;\n" +
-            "			stElement.setAttribute('data-current-setting', 'reversed-stacktrace');\n" +
-            "		} else {\n" +
-            "			var originalOrder = document.getElementById('original-stacktrace');\n" +
-            "			stElement.innerHTML = originalOrder.innerHTML;\n" +
-            "			stElement.setAttribute('data-current-setting', 'original-stacktrace');\n" +
-            "		}\n" +
-            "		return;\n" +
-            "	}\n" +
-            "	function showDefaultStackTraceOrder() {\n" +
-            "		var reverseOrder = document.getElementById('reversed-stacktrace');\n" +
-            "		var stElement = document.getElementById('stacktrace');\n" +
-            "       if (reverseOrder == null || stElement == null) {\n" +
-            "           return;\n" +
-            "       }\n" +
-            "		// default to reverse ordered stacktrace\n" +
-            "		stElement.innerHTML = reverseOrder.innerHTML;\n" +
-            "		stElement.setAttribute('data-current-setting', 'reversed-stacktrace');\n" +
-            "		return;\n" +
-            "	}\n" +
-            "</script>\n";
+    private static final String SCRIPT_STACKTRACE_MANIPULATION = """
+            <script>
+                function toggleStackTraceOrder() {
+                    var stElement = document.getElementById('stacktrace');
+                    var current = stElement.getAttribute('data-current-setting');
+                    if (current == 'original-stacktrace') {
+                        var reverseOrder = document.getElementById('reversed-stacktrace');
+                        stElement.innerHTML = reverseOrder.innerHTML;
+                        stElement.setAttribute('data-current-setting', 'reversed-stacktrace');
+                    } else {
+                        var originalOrder = document.getElementById('original-stacktrace');
+                        stElement.innerHTML = originalOrder.innerHTML;
+                        stElement.setAttribute('data-current-setting', 'original-stacktrace');
+                    }
+                    return;
+                }
+
+                function showDefaultStackTraceOrder() {
+                    var reverseOrder = document.getElementById('reversed-stacktrace');
+                    var stacktrace = document.getElementById('stacktrace');
+
+                    if (reverseOrder == null || stacktrace == null) {
+                        return;
+                    }
+                    stacktrace.innerHTML = reverseOrder.innerHTML;
+                    stacktrace.setAttribute('data-current-setting', 'reversed-stacktrace');
+
+                    initStacktraceStyles(stacktrace);
+
+                    return;
+                }
+
+                function copyStacktrace() {
+                    const stacktrace = document.getElementById("stacktrace");
+                    const content = stacktrace.getElementsByTagName("code")[0];
+                    navigator.clipboard.writeText(content.textContent);
+                }
+
+                function initStacktraceStyles() {
+                    document.querySelector("#stacktrace code > pre").setAttribute("data-viewmode", "wrap");
+                    stacktrace.querySelector("#stacktrace code").classList.add("wrap-code");
+                }
+
+                function changeViewMode() {
+                    const code = document.querySelector("div#stacktrace code");
+                    const pre = code.querySelector("pre");
+                    const currentViewMode = pre.getAttribute("data-viewmode");
+                    if (currentViewMode === "scroll") {
+                        code.classList.remove("scroll-code");
+                        pre.classList.add("wrap-code");
+                        pre.setAttribute("data-viewmode", "wrap");
+                    } else {
+                        pre.classList.remove("wrap-code");
+                        code.classList.add("scroll-code");
+                        pre.setAttribute("data-viewmode", "scroll");
+                    }
+                }
+            </script>
+            """;
+
+    private static final String UTILITIES = """
+                    <div id="utilities-container">
+                        <p class="clipboard tooltip" onclick="changeViewMode();">
+                            <span class="tooltip-text">Change view mode</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#555555" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM64 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L96 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
+                        </p>
+                        <p class="clipboard tooltip" onclick="copyStacktrace();">
+                            <span class="tooltip-text">Copy stacktrace to clipboard</span>
+                            <svg xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+                                <path fill="#555555"
+                                    d="M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
+                            </svg>
+                        </p>
+                    </div>
+            """;
 
     private static final String HTML_TEMPLATE_START_NO_STACK = "" +
             "<!doctype html>\n" +
@@ -60,7 +109,7 @@ public class TemplateHtmlBuilder {
             "    <style>%3$s</style>\n" +
             SCRIPT_STACKTRACE_MANIPULATION +
             "</head>\n" +
-            "<body  onload=\"showDefaultStackTraceOrder()\">\n" +
+            "<body  onload=\"showDefaultStackTraceOrder();\">\n" +
             "<div class=\"header\">\n" +
             "   <svg id=\"quarkus-logo-svg\" data-name=\"Quarkus Logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1280 195\">\n"
             +
@@ -165,11 +214,11 @@ public class TemplateHtmlBuilder {
 
     private static final String OPEN_IDE_LINK = "<div class='rel-stacktrace-item' onclick=\"event.preventDefault(); fetch('/q/open-in-ide/%s/%s/%d');\">";
 
-    private static final String ERROR_STACK = "    <div id=\"original-stacktrace\" class=\"trace hidden\">\n" +
+    private static final String ORIGINAL_STACK_TRACE = "    <div id=\"original-stacktrace\" class=\"trace hidden\">\n" +
             "<h3>The stacktrace below is the original. " +
-            "<a href=\"\" onClick=\"toggleStackTraceOrder(); return false;\">See the stacktrace in reversed order</a> (root-cause first)</h4>"
+            "<a href=\"\" onClick=\"toggleStackTraceOrder(); return false;\">See the stacktrace in reversed order</a> (root-cause first)</h3>"
             +
-            "        <code class=\"stacktrace\"><pre>%1$s<pre></code>\n" +
+            "        <code class=\"stacktrace\"><pre>%1$s</pre></code>\n" +
             "    </div>\n";
 
     private static final String ERROR_STACK_REVERSED = "    <div id=\"reversed-stacktrace\" class=\"trace hidden\">\n" +
@@ -308,7 +357,8 @@ public TemplateHtmlBuilder stack(final Throwable throwable, List<String> knowCla
                 rootFirst = rootFirst.replace(ERSTI, "</div>");
             }
 
-            result.append(String.format(ERROR_STACK, original));
+            result.append(UTILITIES);
+            result.append(String.format(ORIGINAL_STACK_TRACE, original));
             result.append(String.format(ERROR_STACK_REVERSED, rootFirst));
             result.append(STACKTRACE_DISPLAY_DIV);
 
diff --git a/core/runtime/src/main/resources/META-INF/template-html-builder.css b/core/runtime/src/main/resources/META-INF/template-html-builder.css
index 862efa60e5b2a..77a86dbc4f47d 100644
--- a/core/runtime/src/main/resources/META-INF/template-html-builder.css
+++ b/core/runtime/src/main/resources/META-INF/template-html-builder.css
@@ -123,8 +123,18 @@ h3 {
     font-size: 1.3em;
     line-height: 1.5;
     color: hsla(3, 89%, 42%, 1.0);
-    overflow-x: scroll;
+}
+
+.wrap-code {
+    display: block;
+    white-space: initial;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.scroll-code {
     display: block;
+    overflow-x: scroll;
 }
 
 .rel-stacktrace-item {
@@ -252,4 +262,55 @@ a:hover {
 
 .configValue {
     border: 1px inset rgba(28,110,164,0.41);
-}
\ No newline at end of file
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    top: -10px;
+    left: 110%;;
+}
+
+#utilities-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: end;
+    margin: 0;
+    gap: 12px;
+}
+
+#utilities-container .clipboard {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-items: center;
+    gap: 4px;
+    color: #555;
+    cursor: pointer;
+}
+
+#utilities-container svg {
+    width: 24px;
+    height: 24px;
+}
+
+
+
+