Generate scraped examples buttons in JS

Author: GuillaumeGomez

Diff for: src/librustdoc/html/render/mod.rs

@@ -2537,7 +2537,6 @@ fn render_call_locations<W: fmt::Write>(mut w: W, cx: &mut Context<'_>, item: &c
             &cx.root_path(),
             highlight::DecorationInfo(decoration_info),
             sources::SourceContext::Embedded(sources::ScrapedInfo {
-                needs_prev_next_buttons: line_ranges.len() > 1,
                 needs_expansion,
                 offset: line_min,
                 name: &call_data.display_name,

Diff for: src/librustdoc/html/sources.rs

@@ -292,7 +292,6 @@ where
 
 pub(crate) struct ScrapedInfo<'a> {
     pub(crate) offset: usize,
-    pub(crate) needs_prev_next_buttons: bool,
     pub(crate) name: &'a str,
     pub(crate) url: &'a str,
     pub(crate) title: &'a str,

Diff for: src/librustdoc/html/static/js/main.js

@@ -1855,12 +1855,8 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
         // Since the button will be added, no need to keep this listener around.
         elem.removeEventListener("mouseover", addCopyButton);
 
-        // If this is a scrapped example, there will already be a "button-holder" element.
-        let parent = elem.querySelector(".button-holder");
-        if (!parent) {
-            parent = document.createElement("div");
-            parent.className = "button-holder";
-        }
+        const parent = document.createElement("div");
+        parent.className = "button-holder";
 
         const runButton = elem.querySelector(".test-arrow");
         if (runButton !== null) {
@@ -1876,6 +1872,12 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
             copyButtonAnimation(copyButton);
         });
         parent.appendChild(copyButton);
+
+        if (!elem.parentElement.classList.contains("scraped-example")) {
+            return;
+        }
+        const scrapedWrapped = elem.parentElement;
+        window.updateScrapedExample(scrapedWrapped, parent);
     }
 
     function showHideCodeExampleButtons(event) {

Diff for: src/librustdoc/html/static/js/scrape-examples.js

@@ -36,13 +36,30 @@
         elt.querySelector(".rust").scrollTo(0, scrollOffset);
     }
 
-    function updateScrapedExample(example, isHidden) {
-        const locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent);
+    function createScrapeButton(parent, className, content) {
+        const button = document.createElement("button");
+        button.className = className;
+        button.innerText = content;
+        parent.insertBefore(button, parent.firstChild);
+        return button;
+    }
+
+    window.updateScrapedExample = (example, buttonHolder) => {
         let locIndex = 0;
         const highlights = Array.prototype.slice.call(example.querySelectorAll(".highlight"));
         const link = example.querySelector(".scraped-example-title a");
+        let expandButton = null;
+
+        if (!example.classList.contains("expanded")) {
+            expandButton = createScrapeButton(buttonHolder, "expand", "↕");
+        }
+        const isHidden = example.parentElement.classList.contains("more-scraped-examples");
 
+        const locs = example.locs;
         if (locs.length > 1) {
+            const next = createScrapeButton(buttonHolder, "next", "≻");
+            const prev = createScrapeButton(buttonHolder, "prev", "≺");
+
             // Toggle through list of examples in a given file
             const onChangeLoc = changeIndex => {
                 removeClass(highlights[locIndex], "focus");
@@ -57,22 +74,19 @@
                 link.innerHTML = title;
             };
 
-            example.querySelector(".prev")
-                .addEventListener("click", () => {
-                    onChangeLoc(() => {
-                        locIndex = (locIndex - 1 + locs.length) % locs.length;
-                    });
+            prev.addEventListener("click", () => {
+                onChangeLoc(() => {
+                    locIndex = (locIndex - 1 + locs.length) % locs.length;
                 });
+            });
 
-            example.querySelector(".next")
-                .addEventListener("click", () => {
-                    onChangeLoc(() => {
-                        locIndex = (locIndex + 1) % locs.length;
-                    });
+            next.addEventListener("click", () => {
+                onChangeLoc(() => {
+                    locIndex = (locIndex + 1) % locs.length;
                 });
+            });
         }
 
-        const expandButton = example.querySelector(".expand");
         if (expandButton) {
             expandButton.addEventListener("click", () => {
                 if (hasClass(example, "expanded")) {
@@ -83,13 +97,16 @@
                 }
             });
         }
+    };
 
+    function setupLoc(example, isHidden) {
+        example.locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent);
         // Start with the first example in view
-        scrollToLoc(example, locs[0][0], isHidden);
+        scrollToLoc(example, example.locs[0][0], isHidden);
     }
 
     const firstExamples = document.querySelectorAll(".scraped-example-list > .scraped-example");
-    onEachLazy(firstExamples, el => updateScrapedExample(el, false));
+    onEachLazy(firstExamples, el => setupLoc(el, false));
     onEachLazy(document.querySelectorAll(".more-examples-toggle"), toggle => {
         // Allow users to click the left border of the <details> section to close it,
         // since the section can be large and finding the [+] button is annoying.
@@ -102,11 +119,11 @@
         const moreExamples = toggle.querySelectorAll(".scraped-example");
         toggle.querySelector("summary").addEventListener("click", () => {
             // Wrapping in setTimeout ensures the update happens after the elements are actually
-            // visible. This is necessary since updateScrapedExample calls scrollToLoc which
+            // visible. This is necessary since setupLoc calls scrollToLoc which
             // depends on offsetHeight, a property that requires an element to be visible to
             // compute correctly.
             setTimeout(() => {
-                onEachLazy(moreExamples, el => updateScrapedExample(el, true));
+                onEachLazy(moreExamples, el => setupLoc(el, true));
             });
         }, {once: true});
     });

Diff for: src/librustdoc/html/templates/scraped_source.html

@@ -1,8 +1,8 @@
 <div class="scraped-example{% if !info.needs_expansion +%} expanded{% endif %}" data-locs="{{info.locations}}"> {# #}
     <div class="scraped-example-title">
        {{info.name +}} (<a href="{{info.url}}">{{info.title}}</a>) {# #}
-    </div>
-    <div class="example-wrap"> {# #}
+    </div> {# #}
+    <div class="example-wrap">
         {# https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#data-nosnippet-attr
            Do not show "1 2 3 4 5 ..." in web search results. #}
         <div class="src-line-numbers" data-nosnippet> {# #}
@@ -18,16 +18,5 @@
                 {{code_html|safe}}
             </code> {# #}
         </pre> {# #}
-        {% if info.needs_prev_next_buttons || info.needs_expansion %}
-            <div class="button-holder">
-                {% if info.needs_prev_next_buttons %}
-                    <button class="prev">&pr;</button> {# #}
-                    <button class="next">&sc;</button>
-                {% endif %}
-                {% if info.needs_expansion %}
-                    <button class="expand">&varr;</button>
-                {% endif %}
-            </div>
-        {% endif %}
     </div> {# #}
 </div> {# #}