From 872b7982a5faa42de20ad8d5e4166df799895aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jim=20Br=C3=A4nnlund?= <jim.brannlund@gmail.com>
Date: Sat, 8 Apr 2023 18:09:56 +0200
Subject: [PATCH] Feature: Add hide-able Environment Table

---
 src/layout/css/style.scss              | 16 +++++++++++++++-
 src/pytest_html/resources/index.jinja2 |  4 +++-
 src/pytest_html/resources/style.css    | 16 ++++++++++++++++
 src/pytest_html/scripts/main.js        | 11 +++++++++--
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
index 5fa7be7f..10174870 100644
--- a/src/layout/css/style.scss
+++ b/src/layout/css/style.scss
@@ -46,7 +46,6 @@ table {
     border: $border-width solid #e6e6e6;
     vertical-align: top;
   }
-
   tr:nth-child(odd) {
     background-color: #f6f6f6;
   }
@@ -210,6 +209,21 @@ div.media {
   }
 }
 
+#environment-header.collapser h2 {
+  &:hover::after {
+    content: ' (hide details)';
+    @include rowToggle;
+    font-size: $font-size-text;
+  }
+}
+#environment-header.expander h2 {
+  &:hover::after {
+    content: ' (show details)';
+    @include rowToggle;
+    font-size: $font-size-text;
+  }
+}
+
 /*------------------
  * 3. Sorting items
  *------------------*/
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
index ced04544..d56c8d2d 100644
--- a/src/pytest_html/resources/index.jinja2
+++ b/src/pytest_html/resources/index.jinja2
@@ -15,7 +15,9 @@
     <h1 id="title"></h1>
     <p>Report generated on {{ date }} at {{ time }} by <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a>
         v{{ version }}</p>
-    <h2>Environment</h2>
+    <div id="environment-header" class="collapser">
+      <h2>Environment</h2>
+    </div>
     <table id="environment"></table>
     <!-- TEMPLATES -->
       <template id="template_environment_row">
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
index 20fe0a18..8a929d51 100644
--- a/src/pytest_html/resources/style.css
+++ b/src/pytest_html/resources/style.css
@@ -185,6 +185,22 @@ div.media {
   content: " (show details)";
 }
 
+#environment-header.collapser h2:hover::after {
+  content: " (hide details)";
+  color: #bbb;
+  font-style: italic;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+#environment-header.expander h2:hover::after {
+  content: " (show details)";
+  color: #bbb;
+  font-style: italic;
+  cursor: pointer;
+  font-size: 12px;
+}
+
 /*------------------
  * 3. Sorting items
  *------------------*/
diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js
index 4e48dade..b8c616b1 100644
--- a/src/pytest_html/scripts/main.js
+++ b/src/pytest_html/scripts/main.js
@@ -17,15 +17,22 @@ const renderStatic = () => {
         document.querySelector('#title').innerText = title
         document.querySelector('#head-title').innerText = title
     }
-    const renderTable = () => {
+    const renderEnvironmentTable = () => {
         const environment = manager.environment
         const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key]))
         const table = document.querySelector('#environment')
         removeChildren(table)
         rows.forEach((row) => table.appendChild(row))
+
+        const header = document.querySelector('#environment-header')
+        header.addEventListener('click', () => {
+            table.classList.toggle('hidden')
+            header.classList.toggle('collapser')
+            header.classList.toggle('expander')
+        })
     }
     renderTitle()
-    renderTable()
+    renderEnvironmentTable()
 }
 
 const renderContent = (tests) => {