Make task errors expandable

Add a 'more/less' button for displaying the unabridged stdout/stderr
in case is longer than the default max_lines.

Move styling from inline to the stylesheet and reuses existing
logging styles.

Change-Id: Ic7f25d3bd1495da143147e1e7d2e1473367d775d

1 files changed, 29 insertions, 0 deletions

diff --git a/web/src/index.css b/web/src/index.css
index 476a55905..2d8849b8b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -272,3 +272,32 @@ pre.zuul-log-output
 .highlight {
   background: rgb(255, 255, 204);
 }
+
+details.foldable pre {
+    white-space: pre-wrap;
+}
+
+details.stderr pre {
+    color: #9b0000;
+}
+
+/* Used to make the "more/less" fold,  look like a normal hyperlink */
+details.foldable summary
+{
+    color: #0088ce;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+details.foldable summary:hover
+{
+    text-decoration: underline;
+}
+
+details.foldable summary::before {
+    content: "more";
+}
+
+details.foldable[open] summary::before {
+    content: "less";
+}