Rollup merge of #136950 - notriddle:notriddle/svg-example-buttons, r=GuillaumeGomez

rustdoc: use better, consistent SVG icons for scraped examples

## Screenshots

![](https://github.com/user-attachments/assets/f305fb20-5ded-428a-b0d0-04e8b7762769)

![](https://github.com/user-attachments/assets/5b9bee5e-74b9-447b-a19a-49f32b6bf218)

![image](https://github.com/user-attachments/assets/d855a8c8-dc24-44f9-a067-1e0f0654c28a)

![image](https://github.com/user-attachments/assets/71bca54a-0562-480a-8989-938acc351307)

## Description

This continues two ongoing projects

- Replacing ascii art with real icons that don't look like syntax, are understandable to people who're familiar with desktop computers and smart devices, and aren't ugly.
- Using labels and tooltips to clarify these icons, when the limits of popular iconography hit us. In this case, I've added tooltips, because, unfortunately, there's not room for always-visible labels.

r? ``@GuillaumeGomez``

Author: workingjubilee

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

@@ -41,6 +41,19 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 	--font-family: "Source Serif 4", NanumBarunGothic, serif;
 	--font-family-code: "Source Code Pro", monospace;
 	--line-number-padding: 4px;
+	/* scraped examples icons (34x33px) */
+	--prev-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
+	enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
+	d="M8,3l-4,5l4,5m-4,-5h10" stroke="black" stroke-width="2"/></svg>');
+	--next-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
+	enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
+	d="M8,3l4,5l-4,5m4,-5h-10" stroke="black" stroke-width="2"/></svg>');
+	--expand-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
+	enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
+	d="M3,10l4,4l4,-4m-4,4M3,7l4,-4l4,4" stroke="black" stroke-width="2"/></svg>');
+	--collapse-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
+	enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
+	d="M3,8l4,4l4,-4m-4,4M3,4l4,4l4,-4" stroke="black" stroke-width="2"/></svg>');
 }
 
 :root.sans-serif {
@@ -1729,7 +1742,10 @@ instead, we check that it's not a "finger" cursor.
 	padding: 2px 0 0 4px;
 }
 .example-wrap .button-holder .copy-button::before,
-.example-wrap .test-arrow::before {
+.example-wrap .test-arrow::before,
+.example-wrap .button-holder .prev::before,
+.example-wrap .button-holder .next::before,
+.example-wrap .button-holder .expand::before {
 	filter: var(--copy-path-img-filter);
 }
 .example-wrap .button-holder .copy-button::before {
@@ -1744,6 +1760,24 @@ instead, we check that it's not a "finger" cursor.
 	padding-right: 5px;
 }
 
+.example-wrap .button-holder .prev,
+.example-wrap .button-holder .next,
+.example-wrap .button-holder .expand {
+	line-height: 0px;
+}
+.example-wrap .button-holder .prev::before {
+	content: var(--prev-arrow-image);
+}
+.example-wrap .button-holder .next::before {
+	content: var(--next-arrow-image);
+}
+.example-wrap .button-holder .expand::before {
+	content: var(--expand-arrow-image);
+}
+.example-wrap .button-holder .expand.collapse::before {
+	content: var(--collapse-arrow-image);
+}
+
 .code-attribute {
 	font-weight: 300;
 	color: var(--code-attribute-color);
@@ -2012,6 +2046,13 @@ button#toggle-all-docs:before {
 	filter: var(--settings-menu-filter);
 }
 
+button#toggle-all-docs.will-expand:before {
+	/* Custom arrow icon */
+	content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \
+	enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
+	<path d="M2,5l4,-4l4,4M2,7l4,4l4,-4" stroke="black" fill="none" stroke-width="2px"/></svg>');
+}
+
 #help-button > a:before {
 	/* Question mark with circle */
 	content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \

src/librustdoc/html/static/js/scrape-examples.js

@@ -42,7 +42,7 @@
     function createScrapeButton(parent, className, content) {
         const button = document.createElement("button");
         button.className = className;
-        button.innerText = content;
+        button.title = content;
         parent.insertBefore(button, parent.firstChild);
         return button;
     }
@@ -54,14 +54,14 @@
         let expandButton = null;
 
         if (!example.classList.contains("expanded")) {
-            expandButton = createScrapeButton(buttonHolder, "expand", "↕");
+            expandButton = createScrapeButton(buttonHolder, "expand", "Show all");
         }
         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", "≺");
+            const next = createScrapeButton(buttonHolder, "next", "Next usage");
+            const prev = createScrapeButton(buttonHolder, "prev", "Previous usage");
 
             // Toggle through list of examples in a given file
             const onChangeLoc = changeIndex => {
@@ -94,9 +94,13 @@
             expandButton.addEventListener("click", () => {
                 if (hasClass(example, "expanded")) {
                     removeClass(example, "expanded");
+                    removeClass(expandButton, "collapse");
+                    expandButton.title = "Show all";
                     scrollToLoc(example, locs[0][0], isHidden);
                 } else {
                     addClass(example, "expanded");
+                    addClass(expandButton, "collapse");
+                    expandButton.title = "Show single example";
                 }
             });
         }

tests/rustdoc-gui/scrape-examples-button-focus.goml

@@ -19,3 +19,29 @@ press-key: "Enter"
 assert-property: (".scraped-example-list > .scraped-example .rust", {
     "scrollTop": |initialScrollTop|
 }, NEAR)
+
+// Make sure all the buttons are the same size
+store-property: (".scraped-example-list > .scraped-example .prev", {
+    "offsetWidth": buttonWidth,
+    "offsetHeight": buttonHeight,
+})
+assert-property: (".scraped-example-list > .scraped-example .prev", {
+    "offsetWidth": |buttonWidth|,
+    "offsetHeight": |buttonHeight|,
+    "title": "Previous usage",
+})
+assert-property: (".scraped-example-list > .scraped-example .next", {
+    "offsetWidth": |buttonWidth|,
+    "offsetHeight": |buttonHeight|,
+    "title": "Next usage",
+})
+assert-property: (".scraped-example-list > .scraped-example .expand", {
+    "offsetWidth": |buttonWidth|,
+    "offsetHeight": |buttonHeight|,
+    "title": "Show all",
+})
+assert-property: (".scraped-example-list > .scraped-example .copy-button", {
+    "offsetWidth": |buttonWidth|,
+    "offsetHeight": |buttonHeight|,
+    "title": "Copy code to clipboard",
+})