Rollup merge of rust-lang#102118 - notriddle:notriddle/line-numbers, r=GuillaumeGomez

rustdoc: clean up line numbers on code examples

* First commit switches from `display: inline-flex; width: 100%` to `display: flex`.

  `display: inline-flex` was used as part of rust-lang@e961d39, the original commit that added these line numbers. Does anyone know why it was done this way?

* Second commit makes it so that toggling this checkbox will update the page in real time, just like changing themes does.

Preview: https://notriddle.com/notriddle-rustdoc-test/line-numbers/std/vec/struct.Vec.html

Author: matthiaskrgr

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

@@ -577,13 +577,9 @@ h2.location a {
 }
 
 .rustdoc .example-wrap {
-	display: inline-flex;
+	display: flex;
 	margin-bottom: 10px;
-}
-
-.example-wrap {
 	position: relative;
-	width: 100%;
 }
 
 .example-wrap > pre.line-number {

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

@@ -697,20 +697,39 @@ function loadCss(cssFileName) {
         }
     }());
 
+    window.rustdoc_add_line_numbers_to_examples = () => {
+        onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
+            const parent = x.parentNode;
+            const line_numbers = parent.querySelectorAll(".line-number");
+            if (line_numbers.length > 0) {
+                return;
+            }
+            const count = x.textContent.split("\n").length;
+            const elems = [];
+            for (let i = 0; i < count; ++i) {
+                elems.push(i + 1);
+            }
+            const node = document.createElement("pre");
+            addClass(node, "line-number");
+            node.innerHTML = elems.join("\n");
+            parent.insertBefore(node, x);
+        });
+    };
+
+    window.rustdoc_remove_line_numbers_from_examples = () => {
+        onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
+            const parent = x.parentNode;
+            const line_numbers = parent.querySelectorAll(".line-number");
+            for (const node of line_numbers) {
+                parent.removeChild(node);
+            }
+        });
+    };
+
     (function() {
         // To avoid checking on "rustdoc-line-numbers" value on every loop...
         if (getSettingValue("line-numbers") === "true") {
-            onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
-                const count = x.textContent.split("\n").length;
-                const elems = [];
-                for (let i = 0; i < count; ++i) {
-                    elems.push(i + 1);
-                }
-                const node = document.createElement("pre");
-                addClass(node, "line-number");
-                node.innerHTML = elems.join("\n");
-                x.parentNode.insertBefore(node, x);
-            });
+            window.rustdoc_add_line_numbers_to_examples();
         }
     }());
 

src/librustdoc/html/static/js/settings.js

@@ -19,6 +19,13 @@
                 updateSystemTheme();
                 updateLightAndDark();
                 break;
+            case "line-numbers":
+                if (value === true) {
+                    window.rustdoc_add_line_numbers_to_examples();
+                } else {
+                    window.rustdoc_remove_line_numbers_from_examples();
+                }
+                break;
         }
     }
 

src/test/rustdoc-gui/docblock-code-block-line-number.goml

@@ -20,3 +20,20 @@ assert-css: ("pre.line-number", {
 })
 // The first code block has two lines so let's check its `<pre>` elements lists both of them.
 assert-text: ("pre.line-number", "1\n2")
+
+// Now, try changing the setting dynamically. We'll turn it off, using the settings menu,
+// and make sure it goes away.
+
+// First, open the settings menu.
+click: "#settings-menu"
+wait-for: "#settings"
+assert-css: ("#settings", {"display": "block"})
+
+// Then, click the toggle button.
+click: "input#line-numbers + .slider"
+wait-for: 100 // wait-for-false does not exist
+assert-false: "pre.line-number"
+
+// Finally, turn it on again.
+click: "input#line-numbers + .slider"
+wait-for: "pre.line-number"

src/test/rustdoc-gui/source-anchor-scroll.goml

@@ -10,7 +10,7 @@ assert-property: ("html", {"scrollTop": "0"})
 click: '//a[text() = "barbar"]'
 assert-property: ("html", {"scrollTop": "125"})
 click: '//a[text() = "bar"]'
-assert-property: ("html", {"scrollTop": "166"})
+assert-property: ("html", {"scrollTop": "156"})
 click: '//a[text() = "sub_fn"]'
 assert-property: ("html", {"scrollTop": "53"})