From 2c4922cf29beb8c3742c5d8dee4a9d89367b4ff2 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Wed, 12 Feb 2025 15:13:34 -0700 Subject: [PATCH] rustdoc: use better, consistent SVG icons for scraped examples 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. --- src/librustdoc/html/static/css/rustdoc.css | 43 ++++++++++++++++++- .../html/static/js/scrape-examples.js | 12 ++++-- .../scrape-examples-button-focus.goml | 26 +++++++++++ 3 files changed, 76 insertions(+), 5 deletions(-) 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,'); + --next-arrow-image: url('data:image/svg+xml,'); + --expand-arrow-image: url('data:image/svg+xml,'); + --collapse-arrow-image: url('data:image/svg+xml,'); } :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,\ + '); +} + #help-button > a:before { /* Question mark with circle */ content: url('data:image/svg+xml, 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", +})