feat: add button to switch between incremental and absolute coverage (#45)

Author: kilianc

assets/index.css

@@ -1,10 +1,12 @@
 :root {
+  --nav-gap: 15px;
   --covered: green;
   --uncovered: #bf616a;
   --background: #ffffff;
   --topbar-background: #f6f8fa;
   --topbar-border: #d0d7de;
   --topbar-color: #2e3440;
+  --topbar-hover-color: #afb8c133;
   --select-background: #d8dee9;
   --select-border: #d0d7de;
   --select-color: #2e3440;
@@ -58,11 +60,12 @@ body {
 #legend {
   display: flex;
   align-items: center;
+  margin-right: auto;
 }
 
 #nav,
 #legend span {
-  margin-left: 15px;
+  margin-left: var(--nav-gap);
   color: var(--topbar-color) !important;
 }
 
@@ -93,16 +96,36 @@ select {
   padding: 4px 24px 4px 8px;
 }
 
-#legend span {
+#legend > span {
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+
+a.incremental {
+  display: flex;
+  background: var(--topbar-hover-color);
   padding: 2px 4px;
   border-radius: 2px;
+  box-shadow: inset 0 0 0 1px var(--topbar-hover-color);
+  color: var(--topbar-color);
+  text-decoration: none;
+  align-items: center;
+}
+
+a.incremental:hover {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--topbar-hover-color);
+}
+
+a.incremental:active {
+  transform: translateY(1px);
 }
 
 input[type="checkbox"] {
   height: 0;
   width: 0;
   visibility: hidden;
-  margin-left: auto;
+  margin-left: var(--nav-gap);
 }
 
 label {
@@ -114,6 +137,7 @@ label {
   display: block;
   position: relative;
   margin-right: 15px;
+  margin-right: var(--nav-gap);
 }
 
 label:after {

assets/index.js

@@ -29,7 +29,7 @@ function main() {
     return
   }
 
-
+  configureIncrementalButton()
   configureSelectFix()
   configureTheme()
   configureCodeBlocks()
@@ -40,6 +40,31 @@ function main() {
   document.documentElement.style.setProperty('opacity', '1')
 }
 
+function configureIncrementalButton() {
+  let url = window.location.href
+  let isInc = url.includes('-inc.html')
+
+  let link = document.createElement('a')
+  link.classList = 'incremental'
+  link.classList.add('hljs-selector-id')
+
+  if (isInc) {
+    link.title = 'Toggle to absolute coverage'
+    link.href = url.replace('-inc.html', '.html')
+  } else {
+    link.title = 'Toggle to incremental coverage'
+    link.href = url.replace('.html', '-inc.html')
+  }
+
+  link.innerHTML = `
+    <span style="color: var(--covered);">↑</span>
+    <span style="color: var(--uncovered);">↓</span>
+    <span style="margin-left: 2px;">${isInc ? 'inc' : 'abs'}</span>
+  `
+
+  document.querySelector('#topbar').appendChild(link)
+}
+
 function configureSelectFix() {
   document.getElementById('files').addEventListener('change', (e) => {
     document.querySelectorAll('.file').forEach((el) => el.style.display = 'none')