Add info-button (#123)

- Add a "i" info link to each workload 
- Update in-depth.html to highlight the current selected workload

Author: camillobruni

JetStream.css

@@ -371,6 +371,29 @@ a.button {
     color: var(--text-color-subtle);
 }
 
+.benchmark a.info {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    font-style: italic;
+    font-weight: bold;
+    border-radius: 100%;
+    background-color: var(--benchmark-heading-color);
+    color: var(--text-color-inverse) !important;
+    width: 1em;
+    height: 1em;
+    user-select: none;
+
+}
+
+.benchmark-running a.info {
+    background-color: var(--color-primary);
+}
+
+.benchmark-done a.info {
+    background-color: var(--text-color-subtle);
+}
+
 .benchmark h3 a,
 .benchmark h3 a:link,
 .benchmark h3 a:active,
@@ -430,6 +453,13 @@ a.button {
     font-weight: 400;
 }
 
+dt:target {
+    background-color: var(--color-secondary);
+    color: var(--text-color-inverse);
+    padding-left: 10px;
+    border-radius: 5px;
+}
+
 .plot svg circle {
     fill: var(--color-primary);
     opacity: 0.8;

JetStreamDriver.js

@@ -352,7 +352,7 @@ class Driver {
             if (isInBrowser) {
                 text +=
                     `<div class="benchmark" id="benchmark-${benchmark.name}">
-                    <h3 class="benchmark-name"><a href="in-depth.html#${benchmark.name}">${benchmark.name}</a></h3>
+                    <h3 class="benchmark-name">${benchmark.name} <a class="info" href="in-depth.html#${benchmark.name}">i</a></h3>
                     <h4 class="score" id="${overallScoreId}">&nbsp;</h4>
                     <h4 class="plot" id="plot-${benchmark.name}">&nbsp;</h4>
                     <p>`;