From 31be0f964ef440328252744239b28747279c071a Mon Sep 17 00:00:00 2001
From: Viktor Gustafsson <vikt.gust@gmail.com>
Date: Fri, 25 Aug 2023 20:15:32 +0200
Subject: [PATCH] Add expander to log output (#721)

Co-authored-by: Viktor Gustafsson <vgustafsson@planview.com>
---
 src/layout/css/style.scss              | 58 +++++++++++++++++++-------
 src/pytest_html/resources/index.jinja2 |  5 ++-
 src/pytest_html/resources/style.css    | 44 ++++++++++++++++---
 src/pytest_html/scripts/main.js        |  5 ++-
 4 files changed, 90 insertions(+), 22 deletions(-)

diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
index 0ee5586f..b4bf0eee 100644
--- a/src/layout/css/style.scss
+++ b/src/layout/css/style.scss
@@ -123,22 +123,51 @@ span.xpassed,
 $extra-height: 240px;
 $extra-media-width: 320px;
 
-.log {
-  background-color: #e6e6e6;
-  border: $border-width solid #e6e6e6;
-  color: black;
-  display: block;
-  font-family: 'Courier New', Courier, monospace;
-  max-height: $extra-height - 2 * $spacing;
-  overflow-y: scroll;
-  padding: $spacing;
-  white-space: pre-wrap;
-
-  &:only-child {
-    height: inherit;
+.logwrapper {
+    max-height: $extra-height - 2 * $spacing;
+    overflow-y: scroll;
+    background-color: #e6e6e6;
+    &.expanded {
+      max-height: none;
+      .logexpander {
+        &:after {
+          content: 'collapse [-]';
+        }
+      }
+    }
+  .logexpander {
+    z-index: 1;
+    position: sticky;
+    top: 10px;
+    width: max-content;
+    border: 1px solid;
+    border-radius: 3px;
+    padding: 5px 7px;
+    margin: 10px 0 10px calc(100% - 80px);
+    cursor: pointer;
+    background-color: #e6e6e6;
+    &:after {
+      content: 'expand [+]';
+    }
+    &:hover {
+      color: #000;
+      border-color: #000;
+    }
+  }
+  .log {
+    min-height: 40px;
+    position: relative;
+    top: -50px;
+    height: calc(100% + 50px);
+    border: $border-width solid #e6e6e6;
+    color: black;
+    display: block;
+    font-family: 'Courier New', Courier, monospace;
+    padding: $spacing;
+    padding-right: 80px;
+    white-space: pre-wrap;
   }
 }
-
 div.media {
   border: $border-width solid #e6e6e6;
   float: right;
@@ -200,6 +229,7 @@ div.media {
 }
 
 .col-result {
+  width: 130px;
   &:hover::after {
     content: ' (hide details)';
   }
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
index be2d0fd3..2e72bc7b 100644
--- a/src/pytest_html/resources/index.jinja2
+++ b/src/pytest_html/resources/index.jinja2
@@ -53,7 +53,10 @@
                 <div class="media__name"></div>
                 <div class="media__counter"></div>
             </div>
-            <div class="log"></div>
+            <div class="logwrapper">
+              <div class="logexpander"></div>
+              <div class="log"></div>
+            </div>
           </td>
         </tr>
       </tbody>
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
index e57717ec..561524c6 100644
--- a/src/pytest_html/resources/style.css
+++ b/src/pytest_html/resources/style.css
@@ -104,20 +104,49 @@ span.xpassed,
 /*------------------
  * 2. Extra
  *------------------*/
-.log {
+.logwrapper {
+  max-height: 230px;
+  overflow-y: scroll;
   background-color: #e6e6e6;
+}
+.logwrapper.expanded {
+  max-height: none;
+}
+.logwrapper.expanded .logexpander:after {
+  content: "collapse [-]";
+}
+.logwrapper .logexpander {
+  z-index: 1;
+  position: sticky;
+  top: 10px;
+  width: max-content;
+  border: 1px solid;
+  border-radius: 3px;
+  padding: 5px 7px;
+  margin: 10px 0 10px calc(100% - 80px);
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+.logwrapper .logexpander:after {
+  content: "expand [+]";
+}
+.logwrapper .logexpander:hover {
+  color: #000;
+  border-color: #000;
+}
+.logwrapper .log {
+  min-height: 40px;
+  position: relative;
+  top: -50px;
+  height: calc(100% + 50px);
   border: 1px solid #e6e6e6;
   color: black;
   display: block;
   font-family: "Courier New", Courier, monospace;
-  max-height: 230px;
-  overflow-y: scroll;
   padding: 5px;
+  padding-right: 80px;
   white-space: pre-wrap;
 }
-.log:only-child {
-  height: inherit;
-}
 
 div.media {
   border: 1px solid #e6e6e6;
@@ -177,6 +206,9 @@ div.media {
   cursor: pointer;
 }
 
+.col-result {
+  width: 130px;
+}
 .col-result:hover::after {
   content: " (hide details)";
 }
diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js
index 33792ae1..4f2c5adb 100644
--- a/src/pytest_html/scripts/main.js
+++ b/src/pytest_html/scripts/main.js
@@ -1,4 +1,4 @@
-const { dom, findAll } = require('./dom.js')
+const { dom, find, findAll } = require('./dom.js')
 const { manager } = require('./datamanager.js')
 const { doSort } = require('./sort.js')
 const { doFilter } = require('./filter.js')
@@ -67,6 +67,9 @@ const renderContent = (tests) => {
         rows.forEach((row) => {
             if (!!row) {
                 findAll('.collapsible td:not(.col-links', row).forEach(addItemToggleListener)
+                find('.logexpander', row).addEventListener('click',
+                    (evt) => evt.target.parentNode.classList.toggle('expanded'),
+                )
                 newTable.appendChild(row)
             }
         })