From 9a8bd643bd68a51585549f8d5ad6f0ff6bb5a290 Mon Sep 17 00:00:00 2001
From: Folyd <lyshuhow@gmail.com>
Date: Sat, 7 Mar 2020 16:12:56 +0800
Subject: [PATCH] Optimize add to extension UI

---
 extension/script/docs-rs.css | 11 ++++++++++-
 extension/script/docs-rs.js  | 11 +++++++++--
 tests/bootstrap.html         |  1 -
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/extension/script/docs-rs.css b/extension/script/docs-rs.css
index 095b85a..b4e6a55 100644
--- a/extension/script/docs-rs.css
+++ b/extension/script/docs-rs.css
@@ -1,4 +1,3 @@
-
 .feature-flags-content {
     color: #333;
     max-height: 600px;
@@ -26,4 +25,14 @@
 .add-to-extension:hover {
     color: #121212;
     background-color: #F9BB2D;
+}
+
+.add-to-extension-content {
+    max-width: 20rem;
+    padding: 1rem;
+    position: relative;
+    display: block;
+    white-space: normal;
+    font-size: 13px;
+    color: #555;
 }
\ No newline at end of file
diff --git a/extension/script/docs-rs.js b/extension/script/docs-rs.js
index a3ade66..2dd6e39 100644
--- a/extension/script/docs-rs.js
+++ b/extension/script/docs-rs.js
@@ -69,7 +69,7 @@ function insertAddToExtensionElement(added) {
 
     let platformElement = document.querySelector(`.landing-search-form-nav>ul>li:last-child`);
     let li = document.createElement("li");
-    li.classList.add("pure-menu-item");
+    li.classList.add("pure-menu-item", "pure-menu-has-children", "pure-menu-allow-hover");
     li.onclick = () => {
         // Toggle search index added state
         if (added) {
@@ -81,14 +81,21 @@ function insertAddToExtensionElement(added) {
             insertAddToExtensionElement(true);
         }
     };
+    let content = `<p>Add this crate to Rust Search Extension then you can search it in the address bar.</p>`;
     let iconAttributes = `class="fa fa-fw fa-plus-circle" style="color:#121212"`;
     if (added) {
+        content = `<p>You already added this crate. Click again to remove it.</p>`;
         iconAttributes = `class="fa fa-fw fa-check-circle" style="color:green"`;
     }
     li.innerHTML = `<div class="add-to-extension"
-                         title="Add this crate's doc to Rust Search Extension, then you can search in the address bar"
+                         title="Add this crate to Rust Search Extension then you can search it in the address bar."
                          aria-label="Add to Rust Search Extension">
                          <i ${iconAttributes}></i><span class="title"> to Rust Search Extension</span>
+                    </div>
+                    <div class="pure-menu-children" role="menu">
+                        <div class="add-to-extension-content" onclick="event.stopPropagation()">
+                            ${content}
+                        </div>
                     </div>`;
     platformElement.insertAdjacentElement("afterend", li);
 }
diff --git a/tests/bootstrap.html b/tests/bootstrap.html
index f9dd3ff..549fa50 100644
--- a/tests/bootstrap.html
+++ b/tests/bootstrap.html
@@ -6,7 +6,6 @@
     <title>Rust Search Extension Testing</title>
     <script src="../extension/compat.js"></script>
     <script src="../extension/deminifier.js"></script>
-    <script src="../extension/crate-search.js"></script>
     <script src="../extension/omnibox.js"></script>
     <script src="../extension/index/crates.js"></script>