reduce size of generated HTML files by moving the popup helper code to the JS

2 files changed, 47 insertions, 55 deletions

diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
index 83793f9d821..697dee0216e 100644
--- a/src/librustdoc/html/layout.rs
+++ b/src/librustdoc/html/layout.rs
@@ -106,61 +106,6 @@ pub fn render<T: Print, S: Print>(
     <section id=\"main\" class=\"content\">{content}</section>\
     <section id=\"search\" class=\"content hidden\"></section>\
     <section class=\"footer\"></section>\
-    <aside id=\"help\" class=\"hidden\">\
-        <div>\
-            <h1 class=\"hidden\">Help</h1>\
-            <div class=\"shortcuts\">\
-                <h2>Keyboard Shortcuts</h2>\
-                <dl>\
-                    <dt><kbd>?</kbd></dt>\
-                    <dd>Show this help dialog</dd>\
-                    <dt><kbd>S</kbd></dt>\
-                    <dd>Focus the search field</dd>\
-                    <dt><kbd>↑</kbd></dt>\
-                    <dd>Move up in search results</dd>\
-                    <dt><kbd>↓</kbd></dt>\
-                    <dd>Move down in search results</dd>\
-                    <dt><kbd>↹</kbd></dt>\
-                    <dd>Switch tab</dd>\
-                    <dt><kbd>&#9166;</kbd></dt>\
-                    <dd>Go to active search result</dd>\
-                    <dt><kbd>+</kbd></dt>\
-                    <dd>Expand all sections</dd>\
-                    <dt><kbd>-</kbd></dt>\
-                    <dd>Collapse all sections</dd>\
-                </dl>\
-            </div>\
-            <div class=\"infos\">\
-                <h2>Search Tricks</h2>\
-                <p>\
-                    Prefix searches with a type followed by a colon (e.g., \
-                    <code>fn:</code>) to restrict the search to a given type.\
-                </p>\
-                <p>\
-                    Accepted types are: <code>fn</code>, <code>mod</code>, \
-                    <code>struct</code>, <code>enum</code>, \
-                    <code>trait</code>, <code>type</code>, <code>macro</code>, \
-                    and <code>const</code>.\
-                </p>\
-                <p>\
-                    Search functions by type signature (e.g., \
-                    <code>vec -> usize</code> or <code>* -> vec</code>)\
-                </p>\
-                <p>\
-                    Search multiple things at once by splitting your query with comma (e.g., \
-                    <code>str,u8</code> or <code>String,struct:Vec,test</code>)\
-                </p>\
-                <p>\
-                    You can look for items with an exact name by putting double quotes around \
-                    your request: <code>\"string\"</code>\
-                </p>\
-                <p>\
-                    Look for items inside another one by searching for a path: \
-                    <code>vec::Vec</code>\
-                </p>\
-            </div>\
-        </div>\
-    </aside>\
     {after_content}\
     <script>\
         window.rootPath = \"{root_path}\";\
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index d321307b2e0..c896660f537 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -2553,6 +2553,53 @@ function getSearchElement() {
     }
 
     window.addSearchOptions = addSearchOptions;
+
+    function buildHelperPopup() {
+        var popup = document.createElement("aside");
+        addClass(popup, "hidden");
+        popup.id = "help";
+
+        var container = document.createElement("div");
+        var shortcuts = [
+            ["?", "Show this help dialog"],
+            ["S", "Focus the search field"],
+            ["↑", "Move up in search results"],
+            ["↓", "Move down in search results"],
+            ["↹", "Switch tab"],
+            ["&#9166;", "Go to active search result"],
+            ["+", "Expand all sections"],
+            ["-", "Collapse all sections"],
+        ].map(x => "<dt><kbd>" + x[0] + "</kbd></dt><dd>" + x[1] + "</dd>").join("");
+        var div_shortcuts = document.createElement("div");
+        addClass(div_shortcuts, "shortcuts");
+        div_shortcuts.innerHTML = "<h2>Keyboard Shortcuts</h2><dl>" + shortcuts + "</dl></div>";
+
+        var infos = [
+            "Prefix searches with a type followed by a colon (e.g., <code>fn:</code>) to \
+             restrict the search to a given type.",
+            "Accepted types are: <code>fn</code>, <code>mod</code>, <code>struct</code>, \
+             <code>enum</code>, <code>trait</code>, <code>type</code>, <code>macro</code>, \
+             and <code>const</code>.",
+            "Search functions by type signature (e.g., <code>vec -> usize</code> or \
+             <code>* -> vec</code>)",
+            "Search multiple things at once by splitting your query with comma (e.g., \
+             <code>str,u8</code> or <code>String,struct:Vec,test</code>)",
+            "You can look for items with an exact name by putting double quotes around \
+             your request: <code>\"string\"</code>",
+            "Look for items inside another one by searching for a path: <code>vec::Vec</code>",
+        ].map(x => "<p>" + x + "</p>").join("");
+        var div_infos = document.createElement("div");
+        addClass(div_infos, "infos");
+        div_infos.innerHTML = "<h2>Search Tricks</h2>" + infos;
+
+        container.appendChild(div_shortcuts);
+        container.appendChild(div_infos);
+
+        popup.appendChild(container);
+        insertAfter(popup, getSearchElement());
+    }
+
+    buildHelperPopup();
 }());
 
 // Sets the focus on the search bar at the top of the page