From fc573e1441ceaa18dc20113e55b5527bec0c2100 Mon Sep 17 00:00:00 2001
From: shwin0901 <401815708@qq.com>
Date: Sat, 30 May 2020 23:38:02 +0800
Subject: [PATCH] Use balloon.css to clarify stats metrics

---
 extension/libs/balloon.min.css |  1 +
 extension/stats/index.css      |  9 ++++++---
 extension/stats/index.html     |  9 ++++-----
 extension/stats/index.js       | 22 ++++++++++++----------
 4 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 extension/libs/balloon.min.css

diff --git a/extension/libs/balloon.min.css b/extension/libs/balloon.min.css
new file mode 100644
index 0000000..d85edb2
--- /dev/null
+++ b/extension/libs/balloon.min.css
@@ -0,0 +1 @@
+:root{--balloon-border-radius: 2px;--balloon-text-color: #fff;--balloon-color: rgba(16,16,16,0.95);--balloon-font-size: 12px;--balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative;cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0;pointer-events:none;transition:all .18s ease-out .18s;text-indent:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-weight:normal;font-style:normal;text-shadow:none;font-size:var(--balloon-font-size);background:var(--balloon-color);border-radius:var(--balloon-border-radius);color:var(--balloon-text-color);content:attr(aria-label);padding:.5em 1em;position:absolute;white-space:nowrap;z-index:10}[aria-label][data-balloon-pos]:before{width:0;height:0;border:5px solid transparent;border-top-color:var(--balloon-color);opacity:0;pointer-events:none;transition:all .18s ease-out .18s;content:"";position:absolute;z-index:10}[aria-label][data-balloon-pos]:hover:before,[aria-label][data-balloon-pos]:hover:after,[aria-label][data-balloon-pos][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-visible]:after,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1;pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family:FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line;word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before,[aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:after{bottom:100%;left:50%;margin-bottom:10px;transform:translate(-50%, var(--balloon-move));transform-origin:top}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before{bottom:100%;left:50%;transform:translate(-50%, var(--balloon-move));transform-origin:top}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up-left"]:after{bottom:100%;left:0;margin-bottom:10px;transform:translate(0, var(--balloon-move));transform-origin:top}[aria-label][data-balloon-pos][data-balloon-pos="up-left"]:before{bottom:100%;left:5px;transform:translate(0, var(--balloon-move));transform-origin:top}[aria-label][data-balloon-pos][data-balloon-pos="up-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up-left"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up-left"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up-right"]:after{bottom:100%;right:0;margin-bottom:10px;transform:translate(0, var(--balloon-move));transform-origin:top}[aria-label][data-balloon-pos][data-balloon-pos="up-right"]:before{bottom:100%;right:5px;transform:translate(0, var(--balloon-move));transform-origin:top}[aria-label][data-balloon-pos][data-balloon-pos="up-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after{left:50%;margin-top:10px;top:100%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="down"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color);left:50%;top:100%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="down-left"]:after{left:0;margin-top:10px;top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="down-left"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color);left:5px;top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="down-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down-left"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="down-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down-left"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="down-right"]:after{right:0;margin-top:10px;top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="down-right"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color);right:5px;top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="down-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="down-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px;right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0;height:0;border:5px solid transparent;border-left-color:var(--balloon-color);right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{left:100%;margin-left:10px;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0;height:0;border:5px solid transparent;border-right-color:var(--balloon-color);left:100%;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{white-space:normal;width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{white-space:normal;width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{white-space:normal;width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{white-space:normal;width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{white-space:normal;width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="fit"]:after{white-space:normal;width:100%}
\ No newline at end of file
diff --git a/extension/stats/index.css b/extension/stats/index.css
index 5f8ed72..a59eb25 100644
--- a/extension/stats/index.css
+++ b/extension/stats/index.css
@@ -30,9 +30,11 @@ h3 {
   border-radius: 50%;
 }
 .search-stats-text li {
+  list-style: none;
+}
+.search-stats-text div {
   display: flex;
   align-items: center;
-  list-style: none;
 }
 .search-stats-text span {
   padding: 3px;
@@ -46,6 +48,7 @@ h3 {
   fill: rgb(255, 157, 0);
 }
 .appendix {
-    color: #666;
-    padding: 5px;
+  font-size: 20px;
+  border: none;
+  outline: none;
 }
\ No newline at end of file
diff --git a/extension/stats/index.html b/extension/stats/index.html
index 3d4cf64..c92bc99 100644
--- a/extension/stats/index.html
+++ b/extension/stats/index.html
@@ -11,6 +11,7 @@
     <script type="text/javascript" src="../libs/charts.js"></script>
 
     <link rel="stylesheet" href="../libs/calendar-heatmap.css">
+    <link rel="stylesheet" href="../libs/balloon.min.css">
     <link rel="stylesheet" href="../libs/charts.css">
     <link rel="stylesheet" href="../generic.css">
     <link rel="stylesheet" href="index.css">
@@ -31,6 +32,8 @@
             </div>
             <div class="search-time" style="text-align: center;font-size: 20px;">
                 <b>0</b> searches in total since the first day, approximately saved <b>0 seconds.</b>
+                <button aria-label="We consider one search save 5 seconds in average, just an estimated value." 
+                data-balloon-pos="up" data-balloon-length="medium" class="appendix">[i]</button>
             </div>
             <div id="chart">
                 <div style="padding: 30px 0;">
@@ -41,7 +44,7 @@
                         </ol>
                     </div>
                 </div>
-                <div style="display: flex; flex-direction: row-reverse; align-items: flex-start; padding: 30px 0;">
+                <div style="display: flex; flex-direction: row-reverse; align-items: flex-start; padding-top: 30px;">
                     <div>
                         <div class="" style="padding-bottom: 20px;">
                             <h3>Searches per weekday</h3>
@@ -64,10 +67,6 @@
                     </div>
                 </div>
             </div>
-            <hr>
-            <div class="appendix">
-                <div id="appendix1"><small>1. We consider one search save 5 seconds in average, just an estimated value.</small></div>
-            </div>
         </div>
     </div>
 </body>
diff --git a/extension/stats/index.js b/extension/stats/index.js
index b458ebb..87b7097 100644
--- a/extension/stats/index.js
+++ b/extension/stats/index.js
@@ -12,12 +12,12 @@ function makeNumericKeyObject(start, end, initial = 0) {
 }
 
 let stats = [
-    { name: "Std docs", pattern: null, value: 0, color: "#ffa600" },
-    { name: "External docs", pattern: /^[~@].*/i, value: 0, color: "#ff00af" },
-    { name: "Crates", pattern: /^!.*/i, value: 0, color: "#b600ff" },
-    { name: "Attribute", pattern: /^#.*/i, value: 0, color: "#00442d" },
-    { name: "Error code", pattern: /e\d{2,4}$/i, value: 0, color: "#dd4814" },
-    { name: "Others", pattern: /^[>%].*/i, value: 0, color: "#ededed" },
+    { name: "Std docs", pattern: null, value: 0, color: "#ffa600", description: "Std docs!"},
+    { name: "External docs", pattern: /^[~@].*/i, value: 0, color: "#ff00af", description: "External docs"},
+    { name: "Crates", pattern: /^!.*/i, value: 0, color: "#b600ff", description: "Crates"},
+    { name: "Attribute", pattern: /^#.*/i, value: 0, color: "#00442d", description: "Attribute"},
+    { name: "Error code", pattern: /e\d{2,4}$/i, value: 0, color: "#dd4814", description: "Error code"},
+    { name: "Others", pattern: /^[>%].*/i, value: 0, color: "#ededed", description: "Others"},
 ];
 let calendarData = [];
 let topCratesData = {};
@@ -157,11 +157,13 @@ stats.sort((a, b) => {
     if (a.name === "Others" || b.name === "Others") return 0;
     return b.value - a.value;
 });
-stats.forEach(({ name, color, value }) => {
+stats.forEach(({ name, color, value, description }) => {
     let li = document.createElement("li");
-    li.innerHTML = `<span class="color-block" style="background-color:${color}"></span>
-                            <span class="">${name}</span>
-                            <span class="">${(value / history.length * 100).toFixed(1)}%<span>`;
+    li.innerHTML = `<div aria-label="${description}" data-balloon-pos="up">
+                        <span class="color-block" style="background-color:${color}"></span>
+                        <span class="">${name}</span>
+                        <span class="">${(value / history.length * 100).toFixed(1)}%</span>
+                     </div>`;
     ol.append(li);
     if (value > 0) {
         searchStatsGraph.insertAdjacentHTML('beforeend', `<span class="show" style="width: ${value / history.length * 100}%;