diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index f39c0e4a31400..4f5f8f92264c1 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/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" \
diff --git a/src/librustdoc/html/static/js/scrape-examples.js b/src/librustdoc/html/static/js/scrape-examples.js
index 99cbe6daf3177..d641405c87532 100644
--- a/src/librustdoc/html/static/js/scrape-examples.js
+++ b/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";
}
});
}
diff --git a/tests/rustdoc-gui/scrape-examples-button-focus.goml b/tests/rustdoc-gui/scrape-examples-button-focus.goml
index d53993ac08bae..12246a3766151 100644
--- a/tests/rustdoc-gui/scrape-examples-button-focus.goml
+++ b/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",
+})