From a92f2d508e2912321fc4dba4e20bca40db0549c2 Mon Sep 17 00:00:00 2001
From: Chungeng Meng <chungeng.meng@mail.utoronto.ca>
Date: Sun, 8 Mar 2020 03:23:46 -0400
Subject: [PATCH 1/4] issue #97 enhancement, add explanation box

---
 frontend/src/base.html               |  9 +++++
 frontend/src/style.scss              | 53 ++++++++++++++++++++++++++++
 frontend/src/zero_coverage_report.js |  3 +-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/frontend/src/base.html b/frontend/src/base.html
index 134ee2695..e59a7c55b 100644
--- a/frontend/src/base.html
+++ b/frontend/src/base.html
@@ -135,6 +135,15 @@ <h2>
   {{#filters}}
   <input type="checkbox" name="{{ key }}" id="{{ key }}" {{#checked}}checked="checked"{{/checked}}>
   <label for="{{ key }}">{{ message }}</label>
+  {{#needs_explanation}}
+  <div class="tooltip">
+    <span class="questionbox">?</span>
+    <span class="tooltiptext">For JavaScript files, the top-level code is always covered if the file is loaded, 
+      so we came up with a heuristic: a "zero coverage" file is a file which has at least one function and whose functions are all not covered.</br>
+      For C/C++ it's easier, as there's no top-level code and the code is always in functions. 
+      In this case, a "zero coverage" file is a file which has no covered lines.</span>
+  </div>
+  {{/needs_explanation}}
   {{/filters}}
 
   <select name="last_push" id="last_push">
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index 2f5449ad4..66a87079d 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -394,3 +394,56 @@ $samp_size: 20px;
     float: right;
   }
 }
+
+// Tooltip container for explanation (issue #97 enhancement)
+#menu .tooltip {
+  position: relative;
+  display: inline-block;
+
+  // Question mark container 
+  .questionbox {
+    text-align: center;
+    border-bottom: 1px dotted black;
+    cursor: default;
+  }
+
+  // Show the tooltip text when you mouse over the tooltip container
+  &:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .tooltiptext {
+    visibility: hidden;
+    line-height: 120%;
+    background-color: $default_color;
+    color: white;
+    text-align: left;
+    padding: 2vh 2vw;
+    border-radius: 6px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+    
+    // Position the tooltip 
+    position: absolute;
+    z-index: 1;
+    width: 36vw;
+    top: 100%;
+    left: 50%;
+    margin-left: -20vw; // Use half of the width including left horizontal padding size i.e 36vw/2 + 2vw
+
+    &::after {
+      content: " ";
+      position: absolute;
+      bottom: 100%;  /* At the top of the tooltip */
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent transparent $default_color transparent;
+    }
+
+    // Transition animation
+    opacity: 0;
+    transition: opacity 1s;
+  }
+}
diff --git a/frontend/src/zero_coverage_report.js b/frontend/src/zero_coverage_report.js
index 82fe1d2dc..ea356854d 100644
--- a/frontend/src/zero_coverage_report.js
+++ b/frontend/src/zero_coverage_report.js
@@ -55,7 +55,8 @@ export function zeroCoverageMenu(route) {
       return {
         key,
         message: filter.name,
-        checked: isEnabled(key)
+        checked: isEnabled(key),
+        needs_explanation: key === "completely_uncovered"
       };
     }),
     last_pushes: Object.entries(ZERO_COVERAGE_PUSHES).map(

From 2a8ef48ca2e6ad3db043d6d57aea0e244368c3f0 Mon Sep 17 00:00:00 2001
From: Chungeng Meng <chungeng.meng@mail.utoronto.ca>
Date: Sun, 8 Mar 2020 03:39:35 -0400
Subject: [PATCH 2/4] delete trailing white spaces

---
 frontend/src/base.html  | 4 ++--
 frontend/src/style.scss | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/base.html b/frontend/src/base.html
index e59a7c55b..2c83e688f 100644
--- a/frontend/src/base.html
+++ b/frontend/src/base.html
@@ -138,9 +138,9 @@ <h2>
   {{#needs_explanation}}
   <div class="tooltip">
     <span class="questionbox">?</span>
-    <span class="tooltiptext">For JavaScript files, the top-level code is always covered if the file is loaded, 
+    <span class="tooltiptext">For JavaScript files, the top-level code is always covered if the file is loaded,
       so we came up with a heuristic: a "zero coverage" file is a file which has at least one function and whose functions are all not covered.</br>
-      For C/C++ it's easier, as there's no top-level code and the code is always in functions. 
+      For C/C++ it's easier, as there's no top-level code and the code is always in functions.
       In this case, a "zero coverage" file is a file which has no covered lines.</span>
   </div>
   {{/needs_explanation}}
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index 66a87079d..092e5f04d 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -400,7 +400,7 @@ $samp_size: 20px;
   position: relative;
   display: inline-block;
 
-  // Question mark container 
+  // Question mark container
   .questionbox {
     text-align: center;
     border-bottom: 1px dotted black;
@@ -422,8 +422,8 @@ $samp_size: 20px;
     padding: 2vh 2vw;
     border-radius: 6px;
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-    
-    // Position the tooltip 
+
+    // Position the tooltip
     position: absolute;
     z-index: 1;
     width: 36vw;

From ad9524f9a340701f2f28e15c0efe0024d656ff82 Mon Sep 17 00:00:00 2001
From: Chungeng Meng <chungeng.meng@mail.utoronto.ca>
Date: Tue, 10 Mar 2020 15:51:17 -0400
Subject: [PATCH 3/4] upadte explanation text

---
 frontend/src/base.html  | 6 ++----
 frontend/src/style.scss | 6 +++---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/base.html b/frontend/src/base.html
index 2c83e688f..dc7cbb1a9 100644
--- a/frontend/src/base.html
+++ b/frontend/src/base.html
@@ -138,10 +138,8 @@ <h2>
   {{#needs_explanation}}
   <div class="tooltip">
     <span class="questionbox">?</span>
-    <span class="tooltiptext">For JavaScript files, the top-level code is always covered if the file is loaded,
-      so we came up with a heuristic: a "zero coverage" file is a file which has at least one function and whose functions are all not covered.</br>
-      For C/C++ it's easier, as there's no top-level code and the code is always in functions.
-      In this case, a "zero coverage" file is a file which has no covered lines.</span>
+    <span class="tooltiptext">For JavaScript, files with at least one function where all functions are uncovered.
+      For C/C++/other languages, files which have no covered lines.</span>
   </div>
   {{/needs_explanation}}
   {{/filters}}
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index 092e5f04d..038dcf25f 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -419,17 +419,17 @@ $samp_size: 20px;
     background-color: $default_color;
     color: white;
     text-align: left;
-    padding: 2vh 2vw;
+    padding: 1vh 1vw;
     border-radius: 6px;
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 
     // Position the tooltip
     position: absolute;
     z-index: 1;
-    width: 36vw;
+    width: 30vw;
     top: 100%;
     left: 50%;
-    margin-left: -20vw; // Use half of the width including left horizontal padding size i.e 36vw/2 + 2vw
+    margin-left: -16vw; // Use half of the width including left horizontal padding size i.e 30vw/2 + 1vw
 
     &::after {
       content: " ";

From 47eeb2b43fe82110a53ffa880d7f146aab0a7921 Mon Sep 17 00:00:00 2001
From: Bastien Abadie <bastien@nextcairn.com>
Date: Wed, 11 Mar 2020 09:05:56 +0100
Subject: [PATCH 4/4] Add breaking line + strongs

---
 frontend/src/base.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/base.html b/frontend/src/base.html
index dc7cbb1a9..b13255f0e 100644
--- a/frontend/src/base.html
+++ b/frontend/src/base.html
@@ -138,8 +138,8 @@ <h2>
   {{#needs_explanation}}
   <div class="tooltip">
     <span class="questionbox">?</span>
-    <span class="tooltiptext">For JavaScript, files with at least one function where all functions are uncovered.
-      For C/C++/other languages, files which have no covered lines.</span>
+    <span class="tooltiptext">For <strong>JavaScript</strong>, files with at least one function where all functions are uncovered.
+      <br />For <strong>C/C++/other languages</strong>, files which have no covered lines.</span>
   </div>
   {{/needs_explanation}}
   {{/filters}}