Put the notable popup in the current page DOM

Author: GuillaumeGomez

src/librustdoc/html/markdown.rs

@@ -1460,6 +1460,7 @@ fn init_id_map() -> FxHashMap<String, usize> {
     map.insert("sidebar-vars".to_owned(), 1);
     map.insert("copy-path".to_owned(), 1);
     map.insert("TOC".to_owned(), 1);
+    map.insert("notable-traits".to_owned(), 1);
     // This is the list of IDs used by rustdoc sections (but still generated by
     // rustdoc).
     map.insert("fields".to_owned(), 1);

src/librustdoc/html/render/context.rs

@@ -372,34 +372,6 @@ impl<'tcx> Context<'tcx> {
             anchor = anchor
         ))
     }
-
-    fn generate_notable_trait_index(&self, crate_name: &str) -> Result<(), Error> {
-        let notable_traits = self.shared.notable_traits.borrow();
-        if !notable_traits.is_empty() {
-            // This is crate specific.
-            let notable_traits_file = self.dst.join(crate_name).join("notable-traits.js");
-            let out = "window.NOTABLE_TRAITS = [".to_owned();
-
-            // We need to put them back into a vec to sort them by their index.
-            let mut notables = notable_traits.iter().collect::<Vec<_>>();
-            notables.sort_by(|(_, pos1), (_, pos2)| pos1.cmp(pos2));
-
-            let mut out = notables.into_iter().fold(out, |mut acc, ((for_, content), pos)| {
-                if *pos > 0 {
-                    acc.push(',');
-                }
-                acc.push_str(&format!(
-                    "[\"{}\",\"{}\"]",
-                    for_.replace("\"", "\\\""),
-                    content.replace("\\", "\\\\").replace("\"", "\\\""),
-                ));
-                acc
-            });
-            out.push_str("];");
-            self.shared.fs.write(notable_traits_file, out)?;
-        }
-        Ok(())
-    }
 }
 
 /// Generates the documentation for `crate` into the directory `dst`
@@ -586,8 +558,6 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> {
         let final_file = self.dst.join(crate_name).join("all.html");
         let settings_file = self.dst.join("settings.html");
 
-        self.generate_notable_trait_index(crate_name)?;
-
         let mut root_path = self.dst.to_str().expect("invalid path").to_owned();
         if !root_path.ends_with('/') {
             root_path.push('/');

src/librustdoc/html/render/mod.rs

@@ -1265,8 +1265,8 @@ fn notable_traits_decl(decl: &clean::FnDecl, cx: &Context<'_>) -> String {
                                 &mut out_for,
                                 "{}",
                                 impl_.for_.print(cx),
-                                //    "<div class=\"notable\">Notable traits for {}</div>\
-                                // <code class=\"content\">",
+                                // "<div class=\"notable\">Notable traits for {}</div>\
+                                //   <code class=\"content\">",
                             );
                         }
 

src/librustdoc/html/render/print_item.rs

@@ -171,6 +171,23 @@ pub(super) fn print_item(
             unreachable!();
         }
     }
+    // We now write down all the notable traits DOM in one place that will be used by JS after.
+    let mut notable_traits = cx.shared.notable_traits.borrow_mut();
+    if !notable_traits.is_empty() {
+        let mut notables = notable_traits.drain().collect::<Vec<_>>();
+        notables.sort_by(|(_, pos1), (_, pos2)| pos1.cmp(pos2));
+        buf.write_str("<div id=\"notable-traits\" class=\"code-header\">");
+        for notable in notables {
+            buf.write_str(&format!(
+                "<div class=\"notable-traits-tooltiptext\">\
+                <div class=\"notable\">Notable traits for {}</div>\
+                <code class=\"content\">{}</code>\
+            </div>",
+                notable.0.0, notable.0.1
+            ));
+        }
+        buf.write_str("</div>");
+    }
 }
 
 /// For large structs, enums, unions, etc, determine whether to hide their fields

src/librustdoc/html/static/css/rustdoc.css

@@ -1268,14 +1268,13 @@ h3.variant {
 	cursor: pointer;
 }
 
-#notable-traits-tooltiptext {
+.notable-traits-tooltiptext {
 	padding: 5px 3px 3px 3px;
 	border-radius: 6px;
 	margin-left: 5px;
 	z-index: 10;
 	font-size: 16px;
 	cursor: default;
-	position: absolute;
 	border: 1px solid;
 }
 
@@ -1290,17 +1289,22 @@ h3.variant {
 	margin: 0;
 }
 
-#notable-traits-tooltiptext .notable {
+.notable-traits-tooltiptext .notable {
 	margin: 0;
 	margin-bottom: 13px;
 	font-size: 19px;
 	font-weight: 600;
 }
+#notable-traits .notable-traits-tooltiptext {
+	display: none;
+	position: absolute;
+}
 
-#notable-traits-tooltiptext code.content{
+.notable-traits-tooltiptext code.content{
 	margin: 0;
 	padding: 0;
 	font-size: 20px;
+	font-weight: 600;
 }
 
 /* Example code has the "Run" button that needs to be positioned relative to the pre */

src/librustdoc/html/static/css/themes/ayu.css

@@ -415,12 +415,12 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	border-color: transparent #314559 transparent transparent;
 }
 
-#notable-traits-tooltiptext {
+.notable-traits-tooltiptext {
 	background-color: #314559;
 	border-color: #5c6773;
 }
 
-#notable-traits-tooltiptext .notable {
+.notable-traits-tooltiptext .notable {
 	border-bottom-color: #5c6773;
 }
 

src/librustdoc/html/static/css/themes/dark.css

@@ -363,12 +363,12 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	border-color: transparent black transparent transparent;
 }
 
-#notable-traits-tooltiptext {
+.notable-traits-tooltiptext {
 	background-color: #111;
 	border-color: #777;
 }
 
-#notable-traits-tooltiptext .notable {
+.notable-traits-tooltiptext .notable {
 	border-bottom-color: #d2d2d2;
 }
 

src/librustdoc/html/static/css/themes/light.css

@@ -349,12 +349,12 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	border-color: transparent black transparent transparent;
 }
 
-#notable-traits-tooltiptext {
+.notable-traits-tooltiptext {
 	background-color: #eee;
 	border-color: #999;
 }
 
-#notable-traits-tooltiptext .notable {
+.notable-traits-tooltiptext .notable {
 	border-bottom-color: #DDDDDD;
 }
 

src/librustdoc/html/static/js/main.js

@@ -171,13 +171,6 @@ function hideThemeButtonState() {
 (function() {
     "use strict";
 
-    function loadScript(url, callback) {
-        var script = document.createElement('script');
-        script.src = url;
-        script.onload = callback;
-        document.head.append(script);
-    }
-
     window.searchState = {
         loadingText: "Loading search results...",
         input: document.getElementsByClassName("search-input")[0],
@@ -262,6 +255,12 @@ function hideThemeButtonState() {
                 return;
             }
 
+            function loadScript(url) {
+                var script = document.createElement('script');
+                script.src = url;
+                document.head.append(script);
+            }
+
             var searchLoaded = false;
             function loadSearch() {
                 if (!searchLoaded) {
@@ -1009,51 +1008,33 @@ function hideThemeButtonState() {
     //
     // Handling the notable traits popup.
     //
-    function getNotablePopup(callback) {
-        var elemId = "notable-traits-tooltiptext";
-        var elem = document.getElementById(elemId);
-
-        if (!elem) {
-            // If the element cannot be found, it means it hasn't been created yet and that the
-            // notable traits index wasn't loaded either.
-            var script = getVar("root-path") + window.currentCrate + "/notable-traits.js";
-            loadScript(script, function() {
-                elem = document.createElement("code");
-                elem.id = elemId;
-                elem.classList = "docblock";
-                main.appendChild(elem);
-                callback(elem);
-            });
+    function showNotableTraitPopup(elem) {
+        if (elem === window.currentNotableElem) {
+            window.currentNotablePopup.style.display = "";
+            window.currentNotableElem = null;
             return;
+        } else if (window.currentNotablePopup) {
+            window.currentNotablePopup.style.display = "";
         }
-        callback(elem);
-    }
-    function showNotableTraitPopup(elem) {
-        getNotablePopup(function(popup) {
-            if (elem === window.currentNotableElem) {
-                popup.style.display = "none";
-                window.currentNotableElem = null;
-                return;
-            }
-            var elemRect = elem.getBoundingClientRect();
-            var containerRect = main.getBoundingClientRect();
-
-            var index = elem.getAttribute("data-index");
-            var notableTrait = window.NOTABLE_TRAITS[parseInt(index)];
-
-            popup.innerHTML = "<div class=\"notable\">Notable traits for " + notableTrait[0] + "</div><code class=\"content\">" + notableTrait[1] + "</code>";
-            popup.style.top = (elemRect.top - containerRect.top) + "px";
-            // In here, if the "i" is too much on the right, better put the popup on its left.
-            if (elem.offsetLeft > main.offsetWidth / 2) {
-                popup.style.left = "";
-                popup.style.right = (main.offsetWidth - elem.offsetLeft + 2) + "px";
-            } else {
-                popup.style.right = "";
-                popup.style.left = (elem.offsetLeft + 12) + "px";
-            }
-            popup.style.display = "";
-            window.currentNotableElem = elem;
-        });
+        var elemRect = elem.getBoundingClientRect();
+        var containerRect = main.getBoundingClientRect();
+
+        var index = elem.getAttribute("data-index");
+        var notableTraitContainer = document.getElementById("notable-traits");
+        var notable = notableTraitContainer.children[parseInt(index)];
+
+        notable.style.top = (elemRect.top - containerRect.top) + "px";
+        // In here, if the "i" is too much on the right, better put the popup on its left.
+        if (elem.offsetLeft > main.offsetWidth / 2) {
+            notable.style.left = "";
+            notable.style.right = (main.offsetWidth - elem.offsetLeft + 2) + "px";
+        } else {
+            notable.style.right = "";
+            notable.style.left = (elem.offsetLeft + 12) + "px";
+        }
+        notable.style.display = "block";
+        window.currentNotableElem = elem;
+        window.currentNotablePopup = notable;
     }
 
     onEachLazy(document.getElementsByClassName("notable-traits-tooltip"), function(e) {