Feature: Add hide-able Environment Table

Author: BeyondEvil

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,17 @@ div.media {
   }
 }
 
+.environment .header.collapser h2 {
+  &:hover::after {
+    content: ' (hide details)';
+  }
+}
+.environment .header.expander h2 {
+  &:hover::after {
+    content: ' (show details)';
+  }
+}
+
 /*------------------
  * 3. Sorting items
  *------------------*/

src/pytest_html/resources/index.jinja2

@@ -15,8 +15,12 @@
     <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>
-    <table id="environment"></table>
+    <div class="environment">
+      <div class="header collapser">
+        <h2>Environment</h2>
+      </div>
+      <table id="environment"></table>
+    </div>
     <!-- TEMPLATES -->
       <template id="template_environment_row">
       <tr>

src/pytest_html/resources/style.css

@@ -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) => {