From 138022beae8426ff5847541174e2aeb4feba1bd7 Mon Sep 17 00:00:00 2001
From: Carsten Grohmann <mail@carstengrohmann.de>
Date: Wed, 13 Nov 2019 20:48:44 +0100
Subject: [PATCH] Use CSS to show/hide elements in default view

---
 OOMAnalyser.html | 38 +++++++++++++++++++++++---------------
 OOMAnalyser.py   | 10 +++++++---
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/OOMAnalyser.html b/OOMAnalyser.html
index b018fa7..0e509ea 100644
--- a/OOMAnalyser.html
+++ b/OOMAnalyser.html
@@ -6,6 +6,7 @@
     <title>OOM Analyser</title>
 
     <style>
+        /* Use BEM naming convention */
 
         .text--append-suffix-kbytes {
             text-align: right;
@@ -25,15 +26,19 @@
             text-align: right;
         }
 
-        .js-text--display-none {
-            display: none;
-        }
-
         .text__superscript {
             vertical-align: super;
             font-size: 0.83em;
         }
 
+        .text--default-hide {
+            /* empty just used to hide elements in the default view */
+
+        }
+        .text--default-show {
+            /* empty just used to show elements in the default view */
+        }
+
         svg {
             display: block;
             max-height: 200px;
@@ -75,13 +80,16 @@
         }
 
         .js-notify_box__msg--warning {
-	        color: #9F6000;
-	        background-color: #FEEFB3;
-	    }
-	    .js-notify_box__msg--error {
-	        color: #D8000C;
-    	    background-color: #FFD2D2;
-	    }
+            color: #9F6000;
+            background-color: #FEEFB3;
+        }
+        .js-notify_box__msg--error {
+            color: #D8000C;
+            background-color: #FFD2D2;
+        }
+        .js-text--display-none {
+            display: none;
+        }
 
         .license__text {
             font-size: small;
@@ -117,9 +125,9 @@ function goBack() {
 </p>
 
 <p>
-<div class="terminal notify_box js-text--display-none" id="notify_box"></div>
+<div class="terminal notify_box text--default-hide js-text--display-none" id="notify_box"></div>
 
-<div id="input">
+<div class="text--default-show" id="input">
     <h2>Step 1 - Enter your OOM message</h2>
     <textarea autocomplete="off" cols="100" id="textarea_oom" onfocusin="OOMAnalyser.OOMDisplayInstance.empty_textarea_oom()" rows="20" title="OOM input field">Add your OOMhere</textarea>
     <br/>
@@ -128,7 +136,7 @@ function goBack() {
     <button onclick="OOMAnalyser.OOMDisplayInstance.copy_example_to_form()" title="Copy an example OOM into the input area">Insert example</button>
 </div>
 
-<div id="analysis">
+<div class="text--default-hide js-text--display-none" id="analysis">
 
 <h2>Step 2 - Results</h2>
     <p>
@@ -598,7 +606,7 @@ function goBack() {
        title="Show / hide installation guide">(click to show / hide)</a>
 </h2>
 
-<div class="js-text--display-none" id="installation">
+<div class="text--default-hide js-text--display-none" id="installation">
     Installing OOMAnalyser is quite easy since OOMAnalyser consists only of two files, a
     HTML file and a JavaScript file. Both can be stored locally to use OOMAnalyser
     without an Internet connection.
diff --git a/OOMAnalyser.py b/OOMAnalyser.py
index b96d44e..c4aabfd 100644
--- a/OOMAnalyser.py
+++ b/OOMAnalyser.py
@@ -843,8 +843,13 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
         if clean_oom:
             document.getElementById('textarea_oom').value = self.paste_note
 
-        hide_element('analysis')
-        show_element('input')
+        # hide all elements marked to be hidden by default
+        for element in document.querySelectorAll('.text--default-hide'):
+            element.classList.add('js-text--display-none')
+
+        # show all elements marked to be shown by default
+        for element in document.querySelectorAll('.text--default-show'):
+            element.classList.remove('js-text--display-none')
 
         # show hidden rows
         for element in document.querySelectorAll('table .js-text--display-none'):
@@ -858,7 +863,6 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
         element = document.getElementById('notify_box')
         while element.firstChild:
             element.removeChild(element.firstChild)
-        hide_element('notify_box')
 
         # remove svg charts
         for element_id in ('svg_swap', 'svg_ram'):