diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 2a9b4c958838..fe5d35cad490 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -177,12 +177,21 @@ h1, h2, h3, h4 { position: relative; display: grid; grid-template-areas: + "main-heading-breadcrumbs main-heading-breadcrumbs" "main-heading-h1 main-heading-toolbar" "main-heading-sub-heading main-heading-toolbar"; grid-template-columns: 1fr max-content; + grid-template-rows: 25px min-content min-content; padding-bottom: 6px; margin-bottom: 15px; } +.rustdoc-breadcrumbs { + grid-area: main-heading-breadcrumbs; + height: 25px; + line-height: 1.25; + display: flex; + align-items: end; +} /* The only headings that get underlines are: Markdown-generated headings within the top-doc Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc) @@ -228,6 +237,7 @@ a.src, rustdoc-toolbar, summary.hideme, .scraped-example-list, +.rustdoc-breadcrumbs, /* This selector is for the items listed in the "all items" page. */ ul.all-items { font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; @@ -890,9 +900,10 @@ both the code example and the line numbers, so we need to remove the radius in t } .sub-heading { + font-size: 1rem; flex-grow: 0; - font-size: 1.125rem; grid-area: main-heading-sub-heading; + line-height: 1.25; } .main-heading rustdoc-toolbar, .main-heading .out-of-band { @@ -953,7 +964,7 @@ div.where { nav.sub { flex-grow: 1; flex-flow: row nowrap; - margin: 4px 0 25px 0; + margin: 4px 0 0 0; display: flex; align-items: center; } @@ -964,7 +975,7 @@ nav.sub { flex-grow: 1; } .src nav.sub { - margin: 0 0 15px 0; + margin: 0 0 -10px 0; } .section-header { @@ -1074,6 +1085,11 @@ table, with boxes (i.e. from the flex layout) */ align-items: baseline; } +.search-results-title + .sub-heading { + color: var(--main-color); + display: flex; + align-items: center; +} #crate-search-div { /* ensures that 100% in properties of #crate-search-div:after are relative to the size of this div */ @@ -1298,15 +1314,15 @@ so that we can apply CSS-filters to change the arrow color in themes */ } #settings.popover { - --popover-arrow-offset: 118px; - top: 26px; + --popover-arrow-offset: 202px; + top: calc(100% - 12px); } /* use larger max-width for help popover, but not for help.html */ #help.popover { max-width: 600px; - --popover-arrow-offset: 36px; - top: 26px; + --popover-arrow-offset: 118px; + top: calc(100% - 12px); } #help dt { @@ -1722,7 +1738,6 @@ a.tooltip:hover::after { } #search-tabs { - grid-area: main-heading-sub-heading; margin-top: 0.25rem; display: flex; flex-direction: row; @@ -1788,7 +1803,7 @@ a.tooltip:hover::after { #settings-menu, #help-button, button#toggle-all-docs { margin-left: var(--button-left-margin); display: flex; - line-height: initial; + line-height: 1.25; } #sidebar-button { display: none; @@ -1873,7 +1888,8 @@ button#toggle-all-docs:before { content: url('data:image/svg+xml,\ \ - ?'); + ?'); width: 18px; height: 18px; filter: var(--settings-menu-filter); @@ -1894,10 +1910,19 @@ button#toggle-all-docs:before, } } +button[disabled]#toggle-all-docs { + opacity: 0.25; + border: solid 1px var(--main-background-color); + background-size: cover; +} + +button[disabled]#toggle-all-docs:hover { + border: solid 1px var(--main-background-color); + cursor: not-allowed; +} + rustdoc-toolbar span.label { - font-size: initial; - font-variant-caps: small-caps; - text-transform: lowercase; + font-size: 1rem; flex-grow: 1; } @@ -2155,15 +2180,6 @@ However, it's not needed with smaller screen width because the doc/code block is opacity: 0.75; } -/* help button is mostly for search */ -#help-button:not(.help-open), -#alternative-display #toggle-all-docs { - display: none; -} -#alternative-display #help-button { - display: flex; -} - /* Media Queries */ /* Make sure all the buttons line wrap at the same time */ @@ -2206,12 +2222,10 @@ in src-script.js and main.js width: 33px; } #settings.popover { - --popover-arrow-offset: 48px; - top: calc(100% - 8px); + --popover-arrow-offset: 86px; } #help.popover { - --popover-arrow-offset: 12px; - top: calc(100% - 8px); + --popover-arrow-offset: 48px; } .rustdoc { @@ -2257,6 +2271,9 @@ in src-script.js and main.js .src .search-form { margin-left: 40px; } + .src .main-heading { + margin-left: 8px; + } .hide-sidebar .search-form { margin-left: 32px; } @@ -2394,7 +2411,7 @@ in src-script.js and main.js } .src nav.sub { - margin: 0; + margin: 0 0 -25px 0; padding: var(--nav-sub-mobile-padding); } } diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 53326f0fcadf..3e8c903afcbd 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -19,6 +19,10 @@ function resourcePath(basename, extension) { function hideMain() { addClass(document.getElementById(MAIN_ID), "hidden"); + const toggle = document.getElementById("toggle-all-docs"); + if (toggle) { + toggle.setAttribute("disabled", "disabled"); + } } function showMain() { @@ -31,6 +35,10 @@ function showMain() { } mainHeading.appendChild(searchState.rustdocToolbar); } + const toggle = document.getElementById("toggle-all-docs"); + if (toggle) { + toggle.removeAttribute("disabled"); + } } window.rootPath = getVar("root-path"); diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index 15b1046a27cd..eed64d024c04 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -3597,16 +3597,16 @@ async function showResults(results, go_to_first, filterCrates) { let crates = ""; if (rawSearchIndex.size > 1) { - crates = " in 
"; for (const c of rawSearchIndex.keys()) { crates += ``; } - crates += "
"; + crates += ""; } let output = `
\ -

Results${crates}

`; +

Results

${crates}`; if (results.query.error !== null) { const error = results.query.error; error.forEach((value, index) => { diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index 344743c87edd..d77804d045e3 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -293,10 +293,10 @@ class RustdocToolbarElement extends HTMLElement {
Settings
-
Help -
`; + + `; } } window.customElements.define("rustdoc-toolbar", RustdocToolbarElement); diff --git a/src/librustdoc/html/templates/print_item.html b/src/librustdoc/html/templates/print_item.html index 1b8c8293088f..2c9f8dbddf09 100644 --- a/src/librustdoc/html/templates/print_item.html +++ b/src/librustdoc/html/templates/print_item.html @@ -1,11 +1,16 @@
{# #} -

- {{typ}} - {# The breadcrumbs of the item path, like std::string #} + {% if !path_components.is_empty() %} + {% for component in path_components %} {{component.name}}:: {% endfor %} - {{name}} {# #} + + {% endif %} +

+ {{typ}} + + {{name}} + {# #} {# #} diff --git a/tests/rustdoc-gui/anchors.goml b/tests/rustdoc-gui/anchors.goml index 61b2e8880c60..3168c8e17c52 100644 --- a/tests/rustdoc-gui/anchors.goml +++ b/tests/rustdoc-gui/anchors.goml @@ -12,8 +12,7 @@ define-function: ( call-function: ("switch-theme", {"theme": |theme|}) assert-css: ("#toggle-all-docs", {"color": |main_color|}) - assert-css: (".main-heading h1 a:nth-of-type(1)", {"color": |main_heading_color|}) - assert-css: (".main-heading a:nth-of-type(2)", {"color": |main_heading_type_color|}) + assert-css: (".main-heading h1 span", {"color": |main_heading_type_color|}) assert-css: ( ".rightside a.src", {"color": |src_link_color|, "text-decoration": "none solid " + |src_link_color|}, @@ -55,7 +54,7 @@ define-function: ( assert-css: ("#top-doc-prose-title", {"color": |title_color|}) assert-css: (".sidebar .block a", {"color": |sidebar_link_color|}) - assert-css: (".main-heading h1 a", {"color": |title_color|}) + assert-css: (".main-heading h1", {"color": |title_color|}) // We move the cursor over the "Implementations" title so the anchor is displayed. move-cursor-to: "h2#implementations" diff --git a/tests/rustdoc-gui/item-info.goml b/tests/rustdoc-gui/item-info.goml index debda8d06c2c..2824a5711405 100644 --- a/tests/rustdoc-gui/item-info.goml +++ b/tests/rustdoc-gui/item-info.goml @@ -20,7 +20,7 @@ store-position: ( {"x": second_line_x, "y": second_line_y}, ) assert: |first_line_x| != |second_line_x| && |first_line_x| == 516 && |second_line_x| == 272 -assert: |first_line_y| != |second_line_y| && |first_line_y| == 715 && |second_line_y| == 738 +assert: |first_line_y| != |second_line_y| && |first_line_y| == 710 && |second_line_y| == 733 // Now we ensure that they're not rendered on the same line. set-window-size: (1100, 800) diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml index 55187a3e5964..803e8e499f47 100644 --- a/tests/rustdoc-gui/scrape-examples-layout.goml +++ b/tests/rustdoc-gui/scrape-examples-layout.goml @@ -72,8 +72,8 @@ click: ".scraped-example .button-holder .expand" store-value: (offset_y, 4) // First with desktop -assert-position: (".scraped-example", {"y": 253}) -assert-position: (".scraped-example .prev", {"y": 253 + |offset_y|}) +assert-position: (".scraped-example", {"y": 248}) +assert-position: (".scraped-example .prev", {"y": 248 + |offset_y|}) // Gradient background should be at the top of the code block. assert-css: (".scraped-example .example-wrap::before", {"top": "0px"}) @@ -82,8 +82,8 @@ assert-css: (".scraped-example .example-wrap::after", {"bottom": "0px"}) // Then with mobile set-window-size: (600, 600) store-size: (".scraped-example .scraped-example-title", {"height": title_height}) -assert-position: (".scraped-example", {"y": 284}) -assert-position: (".scraped-example .prev", {"y": 284 + |offset_y| + |title_height|}) +assert-position: (".scraped-example", {"y": 277}) +assert-position: (".scraped-example .prev", {"y": 277 + |offset_y| + |title_height|}) define-function: ( "check_title_and_code_position", diff --git a/tests/rustdoc-gui/search-filter.goml b/tests/rustdoc-gui/search-filter.goml index d6421599a207..c5038e0892b0 100644 --- a/tests/rustdoc-gui/search-filter.goml +++ b/tests/rustdoc-gui/search-filter.goml @@ -56,7 +56,8 @@ assert-property: ("#crate-search", {"value": "lib2"}) assert-false: "#results .externcrate" // Checking that the text for the "title" is correct (the "all crates" comes from the "