diff options
Diffstat (limited to 'src/librustdoc/html/static')
-rw-r--r-- | src/librustdoc/html/static/css/noscript.css | 6 | ||||
-rw-r--r-- | src/librustdoc/html/static/css/rustdoc.css | 526 | ||||
-rw-r--r-- | src/librustdoc/html/static/css/settings.css | 57 | ||||
-rw-r--r-- | src/librustdoc/html/static/css/themes/ayu.css | 126 | ||||
-rw-r--r-- | src/librustdoc/html/static/css/themes/dark.css | 122 | ||||
-rw-r--r-- | src/librustdoc/html/static/css/themes/light.css | 116 | ||||
-rw-r--r-- | src/librustdoc/html/static/fonts/README.txt | 12 | ||||
-rw-r--r-- | src/librustdoc/html/static/js/main.js | 184 | ||||
-rw-r--r-- | src/librustdoc/html/static/js/scrape-examples.js | 34 | ||||
-rw-r--r-- | src/librustdoc/html/static/js/search.js | 21 | ||||
-rw-r--r-- | src/librustdoc/html/static/js/settings.js | 74 | ||||
-rw-r--r-- | src/librustdoc/html/static/js/source-script.js | 11 | ||||
-rw-r--r-- | src/librustdoc/html/static/js/storage.js | 24 | ||||
-rw-r--r-- | src/librustdoc/html/static/scrape-examples-help.md | 5 |
14 files changed, 604 insertions, 714 deletions
diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 301f03a16..54e8b6561 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -22,3 +22,9 @@ nav.sub { .source .sidebar { display: none; } + +.notable-traits { + /* layout requires javascript + https://github.com/rust-lang/rust/issues/102576 */ + display: none; +} diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 1cc954a98..afcb40224 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -4,7 +4,7 @@ font-style: normal; font-weight: 400; src: local('Fira Sans'), - url("FiraSans-Regular.woff2") format("woff2"); + url("FiraSans-Regular-018c141bf0843ffd.woff2") format("woff2"); font-display: swap; } @font-face { @@ -12,7 +12,7 @@ font-style: normal; font-weight: 500; src: local('Fira Sans Medium'), - url("FiraSans-Medium.woff2") format("woff2"); + url("FiraSans-Medium-8f9a781e4970d388.woff2") format("woff2"); font-display: swap; } @@ -22,7 +22,7 @@ font-style: normal; font-weight: 400; src: local('Source Serif 4'), - url("SourceSerif4-Regular.ttf.woff2") format("woff2"); + url("SourceSerif4-Regular-1f7d512b176f0f72.ttf.woff2") format("woff2"); font-display: swap; } @font-face { @@ -30,7 +30,7 @@ font-style: italic; font-weight: 400; src: local('Source Serif 4 Italic'), - url("SourceSerif4-It.ttf.woff2") format("woff2"); + url("SourceSerif4-It-d034fe4ef9d0fa00.ttf.woff2") format("woff2"); font-display: swap; } @font-face { @@ -38,7 +38,7 @@ font-style: normal; font-weight: 700; src: local('Source Serif 4 Bold'), - url("SourceSerif4-Bold.ttf.woff2") format("woff2"); + url("SourceSerif4-Bold-124a1ca42af929b6.ttf.woff2") format("woff2"); font-display: swap; } @@ -49,28 +49,28 @@ font-weight: 400; /* Avoid using locally installed font because bad versions are in circulation: * see https://github.com/rust-lang/rust/issues/24355 */ - src: url("SourceCodePro-Regular.ttf.woff2") format("woff2"); + src: url("SourceCodePro-Regular-562dcc5011b6de7d.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: italic; font-weight: 400; - src: url("SourceCodePro-It.ttf.woff2") format("woff2"); + src: url("SourceCodePro-It-1cc31594bf4f1f79.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 600; - src: url("SourceCodePro-Semibold.ttf.woff2") format("woff2"); + src: url("SourceCodePro-Semibold-d899c5a5c4aeb14a.ttf.woff2") format("woff2"); font-display: swap; } /* Avoid using legacy CJK serif fonts in Windows like Batang. */ @font-face { font-family: 'NanumBarunGothic'; - src: url("NanumBarunGothic.ttf.woff2") format("woff2"); + src: url("NanumBarunGothic-0f09457c7a19b7c6.ttf.woff2") format("woff2"); font-display: swap; unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF; } @@ -159,13 +159,9 @@ h1.fqn { .main-heading { display: flex; flex-wrap: wrap; - justify-content: space-between; padding-bottom: 6px; margin-bottom: 15px; } -#toggle-all-docs { - text-decoration: none; -} /* 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) @@ -199,17 +195,14 @@ h1, h2, h3, h4, h5, h6, span.since, a.srclink, #help-button > a, -details.rustdoc-toggle.top-doc > summary, -details.rustdoc-toggle.non-exhaustive > summary, -.scraped-example-title, -.more-examples-toggle summary, .more-examples-toggle .hide-more, -.example-links a, +summary.hideme, +.scraped-example-list, /* This selector is for the items listed in the "all items" page. */ ul.all-items { font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; } -a#toggle-all-docs, +#toggle-all-docs, a.anchor, .small-section-header a, #source-sidebar a, @@ -219,12 +212,8 @@ pre.rust a, .mobile-topbar h2 a, h1 a, .search-results a, -.module-item .stab, -.import-item .stab, -.result-name .primitive > i, .result-name .keyword > i, -.method .where, -.fn .where, -.where.fmt-newline { +.item-left .stab, +.result-name .primitive > i, .result-name .keyword > i { color: var(--main-color); } @@ -249,7 +238,6 @@ h1 a, } .content span.fn, .content a.fn, -.content .fnname, .content span.method, .content a.method, .content span.tymethod, .content a.tymethod { color: var(--function-link-color); @@ -297,10 +285,21 @@ p:last-child { button { /* Buttons on Safari have different default padding than other platforms. Make them the same. */ padding: 1px 6px; + /* Opinionated tweak: use pointer cursor as clickability signifier. */ + cursor: pointer; } /* end tweaks for normalize.css 8 */ +button#toggle-all-docs { + padding: 0; + background: none; + border: none; + /* iOS button gradient: https://stackoverflow.com/q/5438567 */ + -webkit-appearance: none; + opacity: 1; +} + .rustdoc { display: flex; flex-direction: row; @@ -311,7 +310,7 @@ main { position: relative; flex-grow: 1; padding: 10px 15px 40px 45px; - min-width: 0; + min-width: 0; /* avoid growing beyond the size limit */ } .source main { @@ -360,7 +359,8 @@ img { overflow: visible; } -.sub-logo-container { +.sub-logo-container, .logo-container { + /* zero text boxes so that computed line height = image height exactly */ line-height: 0; } @@ -370,14 +370,17 @@ img { object-fit: contain; } +.rust-logo { + filter: var(--rust-logo-filter); +} + .sidebar, .mobile-topbar, .sidebar-menu-toggle { background-color: var(--sidebar-background-color); } .sidebar { font-size: 0.875rem; - width: 200px; - min-width: 200px; + flex: 0 0 200px; overflow-y: scroll; position: sticky; height: 100vh; @@ -386,12 +389,7 @@ img { } .rustdoc.source .sidebar { - width: 50px; - min-width: 0px; - max-width: 300px; - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; + flex-basis: 50px; border-right: 1px solid; overflow-x: hidden; /* The sidebar is by default hidden */ @@ -412,7 +410,7 @@ img { .source-sidebar-expanded .source .sidebar { overflow-y: auto; - width: 300px; + flex-basis: 300px; } .source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) { @@ -458,10 +456,9 @@ img { } .sidebar .logo-container { - display: flex; margin-top: 10px; margin-bottom: 10px; - justify-content: center; + text-align: center; } .version { @@ -479,23 +476,17 @@ ul.block, .block li { list-style: none; } -.block a, -.sidebar h2 a, -.sidebar h3 a { +.sidebar-elems a, +.sidebar > h2 a { display: block; - padding: 0.25rem; + padding: 0.25rem; /* 4px */ margin-left: -0.25rem; - - text-overflow: ellipsis; - overflow: hidden; } .sidebar h2 { overflow-wrap: anywhere; padding: 0; - margin: 0; - margin-top: 0.7rem; - margin-bottom: 0.7rem; + margin: 0.7rem 0; } .sidebar h3 { @@ -523,6 +514,8 @@ ul.block, .block li { .sidebar-elems .block li a { white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .mobile-topbar { @@ -570,15 +563,16 @@ ul.block, .block li { border-color: var(--example-line-numbers-border-color); } -.src-line-numbers span { - cursor: pointer; +.src-line-numbers a, .src-line-numbers span { color: var(--src-line-numbers-span-color); } -.src-line-numbers .line-highlighted { - background-color: var(--src-line-number-highlighted-background-color); -} .src-line-numbers :target { background-color: transparent; + border-right: none; + padding-right: 0; +} +.src-line-numbers .line-highlighted { + background-color: var(--src-line-number-highlighted-background-color); } .search-loading { @@ -636,22 +630,16 @@ pre, .rustdoc.source .example-wrap { .docblock table { margin: .5em 0; - width: calc(100% - 2px); - overflow-x: auto; - display: block; border-collapse: collapse; } -.docblock table td { +.docblock table td, .docblock table th { padding: .5em; - border: 1px dashed var(--border-color); - vertical-align: top; + border: 1px solid var(--border-color); } -.docblock table th { - padding: .5em; - text-align: left; - border: 1px solid var(--border-color); +.docblock table tbody tr:nth-child(2n) { + background: var(--table-alt-row-background-color); } /* Shift "where ..." part of method or fn definition down a line */ @@ -672,7 +660,6 @@ pre, .rustdoc.source .example-wrap { } #main-content > .item-info { - margin-top: 0; margin-left: 0; } @@ -701,8 +688,8 @@ a { } .small-section-header { - display: flex; - justify-content: space-between; + /* fields use <span> tags, but should get their own lines */ + display: block; position: relative; } @@ -710,7 +697,7 @@ a { display: initial; } -.impl:hover > .anchor, .trait-impl:hover > .anchor { +.impl:hover > .anchor, .trait-impl:hover > .anchor, .variant:hover > .anchor { display: inline-block; position: absolute; } @@ -730,9 +717,6 @@ a { h2.small-section-header > .anchor { padding-right: 6px; } -.anchor::before { - content: 'ยง'; -} .main-heading a:hover, .example-wrap > pre.rust a:hover, @@ -787,14 +771,12 @@ table, margin-top: 0; white-space: nowrap; /* flex layout allows shrinking the <select> appropriately if it becomes too large */ - display: inline-flex; - max-width: 100%; + display: flex; /* make things look like in a line, despite the fact that we're using a layout with boxes (i.e. from the flex layout) */ align-items: baseline; } #crate-search-div { - display: inline-block; /* ensures that 100% in properties of #crate-search-div:after are relative to the size of this div */ position: relative; @@ -803,10 +785,8 @@ table, } #crate-search { min-width: 115px; - padding: 0; /* keep these two in sync with "@-moz-document url-prefix()" below */ - padding-left: 4px; - padding-right: 23px; + padding: 0 23px 0 4px; /* prevents the <select> from overflowing the containing div in case it's shrunk */ max-width: 100%; /* contents can overflow because of max-width limit, then show ellipsis */ @@ -824,6 +804,9 @@ table, line-height: 1.5; font-weight: 500; } +#crate-search:hover, #crate-search:focus { + border-color: var(--crate-search-hover-border); +} /* cancel stylistic differences in padding in firefox for "appearance: none"-style (or equivalent) <select>s */ @-moz-document url-prefix() { @@ -847,8 +830,13 @@ so that we can apply CSS-filters to change the arrow color in themes */ background-repeat: no-repeat; background-size: 20px; background-position: calc(100% - 2px) 56%; - /* image is black color, themes should apply a "filter" property to change the color */ - background-image: /* AUTOREPLACE: */url("down-arrow.svg"); + /* image is black color */ + background-image: url("down-arrow-927217e04c7463ac.svg"); + /* changes the arrow image color */ + filter: var(--crate-search-div-filter); +} +#crate-search-div:hover::after, #crate-search-div:focus-within::after { + filter: var(--crate-search-div-hover-filter); } #crate-search > option { font-size: 1rem; @@ -873,40 +861,29 @@ so that we can apply CSS-filters to change the arrow color in themes */ .search-results { display: none; - padding-bottom: 2em; } .search-results.active { display: block; - /* prevent overhanging tabs from moving the first result */ - clear: both; -} - -.search-results .desc > span { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: block; } .search-results > a { - display: block; + display: flex; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; - border-bottom: 1px solid #aaa3; + border-bottom: 1px solid var(--search-result-border-color); + gap: 1em; } .search-results > a > div { - display: flex; - flex-flow: row wrap; + flex: 1; } -.search-results .result-name, .search-results div.desc { - width: 50%; -} -.search-results .result-name { - padding-right: 1em; +.search-results > a > div.desc { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .search-results a:hover, @@ -914,26 +891,32 @@ so that we can apply CSS-filters to change the arrow color in themes */ background-color: var(--search-result-link-focus-background-color); } +.search-results .result-name span.alias { + color: var(--search-results-alias-color); +} +.search-results .result-name span.grey { + color: var(--search-results-grey-color); +} + .popover { - font-size: 1rem; position: absolute; + top: 100%; right: 0; z-index: 2; display: block; margin-top: 7px; border-radius: 3px; border: 1px solid var(--border-color); - font-size: 1rem; + --popover-arrow-offset: 11px; } /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */ .popover::before { content: ''; position: absolute; - right: 11px; + right: var(--popover-arrow-offset); border: solid var(--border-color); border-width: 1px 1px 0 0; - display: inline-block; padding: 4px; transform: rotate(-45deg); top: -5px; @@ -947,16 +930,12 @@ so that we can apply CSS-filters to change the arrow color in themes */ /* use larger max-width for help popover, but not for help.html */ #help.popover { max-width: 600px; -} - -#help.popover::before { - right: 48px; + --popover-arrow-offset: 48px; } #help dt { float: left; clear: left; - display: block; margin-right: 0.5rem; } #help span.top, #help span.bottom { @@ -1024,11 +1003,9 @@ so that we can apply CSS-filters to change the arrow color in themes */ 0 -1px 0 black; } -.module-item .stab, -.import-item .stab { +.item-left .stab { border-radius: 3px; display: inline-block; - font-size: 0.875rem; line-height: 1.2; margin-bottom: 0; margin-left: 0.3125em; @@ -1048,7 +1025,6 @@ so that we can apply CSS-filters to change the arrow color in themes */ .rightside { padding-left: 12px; - padding-right: 2px; float: right; } @@ -1090,7 +1066,7 @@ pre.rust .bool-val { pre.rust .self { color: var(--code-highlight-self-color); } -pre.rust .attribute { +pre.rust .attr { color: var(--code-highlight-attribute-color); } pre.rust .macro, @@ -1147,7 +1123,6 @@ pre.rust .doccomment { .example-wrap .tooltip { position: absolute; display: block; - cursor: pointer; left: -25px; top: 5px; } @@ -1164,6 +1139,8 @@ pre.rust .doccomment { width: max-content; top: -2px; z-index: 1; + background-color: var(--tooltip-background-color); + color: var(--tooltip-color); } .example-wrap .tooltip::before { @@ -1172,10 +1149,10 @@ pre.rust .doccomment { top: 50%; left: 16px; margin-top: -5px; - border-width: 5px; - border-style: solid; display: none; z-index: 1; + border: 5px solid transparent; + border-right-color: var(--tooltip-background-color); } .example-wrap.ignore .tooltip::after { @@ -1203,7 +1180,6 @@ pre.rust .doccomment { } a.test-arrow { - display: inline-block; visibility: hidden; position: absolute; padding: 5px 10px 5px 10px; @@ -1212,6 +1188,12 @@ a.test-arrow { top: 5px; right: 5px; z-index: 1; + color: var(--test-arrow-color); + background-color: var(--test-arrow-background-color); +} +a.test-arrow:hover { + color: var(--test-arrow-hover-color); + background-color: var(--test-arrow-hover-background-color); } .example-wrap:hover .test-arrow { visibility: visible; @@ -1231,12 +1213,6 @@ a.test-arrow { font-size: 1.25rem; } -h3.variant { - font-weight: 600; - font-size: 1.125rem; - margin-bottom: 10px; -} - .sub-variant h4 { font-size: 1rem; font-weight: 400; @@ -1253,59 +1229,40 @@ h3.variant { margin-left: 24px; } -:target > code, :target > .code-header { - opacity: 1; -} - :target { padding-right: 3px; + background-color: var(--target-background-color); + border-right: 3px solid var(--target-border-color); } -.notable-traits-tooltip { - display: inline-block; - cursor: pointer; -} - -.notable-traits:hover .notable-traits-tooltiptext, -.notable-traits .notable-traits-tooltiptext.force-tooltip { - display: inline-block; +.notable-traits { + color: inherit; + margin-right: 15px; + position: relative; } -.notable-traits .notable-traits-tooltiptext { - display: none; - padding: 5px 3px 3px 3px; - border-radius: 6px; - margin-left: 5px; - z-index: 10; - font-size: 1rem; - cursor: default; +/* placeholder thunk so that the mouse can easily travel from "(i)" to popover + the resulting "hover tunnel" is a stepped triangle, approximating + https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */ +.notable-traits:hover::after { position: absolute; - border: 1px solid; -} - -.notable-traits-tooltip::after { - /* The margin on the tooltip does not capture hover events, - this extends the area of hover enough so that mouse hover is not - lost when moving the mouse to the tooltip */ - content: "\00a0\00a0\00a0"; -} - -.notable-traits .docblock { - margin: 0; + top: calc(100% - 10px); + left: -15px; + right: -15px; + height: 20px; + content: "\00a0"; } -.notable-traits .notable { - margin: 0; - margin-bottom: 13px; - font-size: 1.1875rem; - font-weight: 600; - display: block; +.notable .docblock { + margin: 0.25em 0.5em; } -.notable-traits .docblock code.content { +.notable .docblock pre, .notable .docblock code { + background: transparent; margin: 0; padding: 0; font-size: 1.25rem; + white-space: pre-wrap; } .search-failed { @@ -1335,7 +1292,6 @@ h3.variant { #titles > button { text-align: center; font-size: 1.125rem; - cursor: pointer; border: 0; border-top: 2px solid; flex: 1; @@ -1348,12 +1304,6 @@ h3.variant { font-size: 1rem; } -.notable-traits { - cursor: pointer; - z-index: 2; - margin-left: 5px; -} - #sidebar-toggle { position: sticky; top: 0; @@ -1362,8 +1312,8 @@ h3.variant { border-bottom: 1px solid; display: flex; height: 40px; - justify-content: center; - align-items: center; + justify-content: stretch; + align-items: stretch; z-index: 10; } #source-sidebar { @@ -1376,44 +1326,51 @@ h3.variant { border-bottom: 1px solid var(--border-color); margin-bottom: 6px; } +#source-sidebar div.files > a:hover, details.dir-entry summary:hover, +#source-sidebar div.files > a:focus, details.dir-entry summary:focus { + background-color: var(--source-sidebar-background-hover); +} +#source-sidebar div.files > a.selected { + background-color: var(--source-sidebar-background-selected); +} #sidebar-toggle > button { font-size: inherit; font-weight: bold; background: none; color: inherit; - cursor: pointer; text-align: center; border: none; outline: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - /* work around button layout strangeness: https://stackoverflow.com/q/7271561 */ - width: 100%; + flex: 1 1; /* iOS button gradient: https://stackoverflow.com/q/5438567 */ -webkit-appearance: none; opacity: 1; } #settings-menu, #help-button { margin-left: 4px; - outline: none; + display: flex; } #settings-menu > a, #help-button > a, #copy-path { width: 33px; - cursor: pointer; - line-height: 1.5; } #settings-menu > a, #help-button > a { - padding: 5px; - height: 100%; - display: block; + display: flex; + align-items: center; + justify-content: center; background-color: var(--button-background-color); border: 1px solid var(--border-color); border-radius: 2px; + color: var(--settings-button-color); + /* Rare exception to specifying font sizes in rem. Since this is acting + as an icon, it's okay to specify their sizes in pixels. */ + font-size: 20px; +} + +#settings-menu > a:hover, #settings-menu > a:focus, +#help-button > a:hover, #help-button > a:focus { + border-color: var(--settings-button-border-focus); } #copy-path { @@ -1444,14 +1401,6 @@ h3.variant { animation: rotating 2s linear infinite; } -#help-button > a { - text-align: center; - /* Rare exception to specifying font sizes in rem. Since this is acting - as an icon, it's okay to specify their sizes in pixels. */ - font-size: 20px; - padding-top: 2px; -} - kbd { display: inline-block; padding: 3px 5px; @@ -1461,6 +1410,9 @@ kbd { border: solid 1px var(--border-color); border-radius: 3px; cursor: default; + color: var(--kbd--color); + background-color: var(--kbd-background); + box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color); } ul.all-items > li { @@ -1522,6 +1474,7 @@ details.rustdoc-toggle { "Expand description" or "Show methods". */ details.rustdoc-toggle > summary.hideme { cursor: pointer; + font-size: 1rem; } details.rustdoc-toggle > summary { @@ -1539,15 +1492,15 @@ details.rustdoc-toggle > summary.hideme > span { } details.rustdoc-toggle > summary::before { + background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left; content: ""; cursor: pointer; width: 16px; height: 16px; - background-repeat: no-repeat; - background-position: top left; display: inline-block; vertical-align: middle; opacity: .5; + filter: var(--toggle-filter); } details.rustdoc-toggle > summary.hideme > span, @@ -1584,13 +1537,6 @@ details.rustdoc-toggle > summary:focus-visible::before { outline-offset: 1px; } -details.rustdoc-toggle.top-doc > summary, -details.rustdoc-toggle.top-doc > summary::before, -details.rustdoc-toggle.non-exhaustive > summary, -details.rustdoc-toggle.non-exhaustive > summary::before { - font-size: 1rem; -} - details.non-exhaustive { margin-bottom: 8px; } @@ -1623,27 +1569,11 @@ details.rustdoc-toggle[open] > summary.hideme > span { display: none; } -details.rustdoc-toggle[open] > summary::before, -details.rustdoc-toggle[open] > summary.hideme::before { - background-image: /* AUTOREPLACE: */url("toggle-minus.svg"); +details.rustdoc-toggle[open] > summary::before { + background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left; } -details.rustdoc-toggle > summary::before { - background-image: /* AUTOREPLACE: */url("toggle-plus.svg"); -} - -details.rustdoc-toggle[open] > summary::before, -details.rustdoc-toggle[open] > summary.hideme::before { - width: 16px; - height: 16px; - background-repeat: no-repeat; - background-position: top left; - display: inline-block; - content: ""; -} - -details.rustdoc-toggle[open] > summary::after, -details.rustdoc-toggle[open] > summary.hideme::after { +details.rustdoc-toggle[open] > summary::after { content: "Collapse"; } @@ -1677,7 +1607,6 @@ in storage.js } .rustdoc { - padding-top: 0px; /* Sidebar should overlay main content, rather than pushing main content to the right. Turn off `display: flex` on the body element. */ display: block; @@ -1702,10 +1631,6 @@ in storage.js content: "Since "; } - #copy-path { - display: none; - } - /* Hide the logo and item name from the sidebar. Those are displayed in the mobile-topbar instead. */ .sidebar .sidebar-logo, @@ -1719,12 +1644,10 @@ in storage.js /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means the sidebar stays visible for screen readers, which is useful for navigation. */ left: -1000px; - margin-left: 0; - margin: 0; - padding: 0; z-index: 11; /* Reduce height slightly to account for mobile topbar. */ height: calc(100vh - 45px); + width: 200px; } /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar, @@ -1765,16 +1688,10 @@ in storage.js white-space: nowrap; } - .mobile-topbar .logo-container { - max-height: 45px; - } - .mobile-topbar .logo-container > img { max-width: 35px; max-height: 35px; - margin-left: 20px; - margin-top: 5px; - margin-bottom: 5px; + margin: 5px 0 5px 20px; } .mobile-topbar { @@ -1800,7 +1717,6 @@ in storage.js .sidebar-elems { margin-top: 1em; - background-color: var(--sidebar-background-color); } .content { @@ -1815,21 +1731,6 @@ in storage.js display: block; } - /* Because of ios, we need to actually have a full height sidebar title so the - * actual sidebar can show up. But then we need to make it transparent so we don't - * hide content. The filler just allows to create the background for the sidebar - * title. But because of the absolute position, I had to lower the z-index. - */ - #sidebar-filler { - position: fixed; - left: 45px; - width: calc(100% - 45px); - top: 0; - height: 45px; - z-index: -1; - border-bottom: 1px solid; - } - #main-content > details.rustdoc-toggle > summary::before, #main-content > div > details.rustdoc-toggle > summary::before { left: -11px; @@ -1846,7 +1747,6 @@ in storage.js z-index: 10; border-top-right-radius: 3px; border-bottom-right-radius: 3px; - cursor: pointer; border: 1px solid; border-left: 0; } @@ -1862,37 +1762,22 @@ in storage.js border-bottom: 1px solid; } - .notable-traits .notable-traits-tooltiptext { - left: 0; - top: 100%; - } - - /* We don't display the help button on mobile devices. */ - #help-button { + /* We don't display these buttons on mobile devices. */ + #copy-path, #help-button { display: none; } /* Display an alternating layout on tablets and phones */ - .item-table { + .item-table, .item-row, .item-left, .item-right, + .search-results > a, .search-results > a > div { display: block; } - .item-row { - display: flex; - flex-flow: column wrap; - } - .item-left, .item-right { - width: 100%; - } /* Display an alternating layout on tablets and phones */ .search-results > a { - border-bottom: 1px solid #aaa9; padding: 5px 0px; } - .search-results .result-name, .search-results div.desc { - width: 100%; - } - .search-results div.desc, .item-right { + .search-results > a > div.desc, .item-right { padding-left: 2em; } @@ -1922,6 +1807,22 @@ in storage.js } } +/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */ +@media (min-width: 701px) { + /* Places file-link for a scraped example on top of the example to save space. + We only do this on large screens so the file-link doesn't overlap too much + with the example's content. */ + .scraped-example-title { + position: absolute; + z-index: 10; + background: var(--main-background-color); + bottom: 8px; + right: 5px; + padding: 2px 4px; + box-shadow: 0 0 4px var(--main-background-color); + } +} + @media print { nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path, details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before, @@ -1969,24 +1870,28 @@ in storage.js } } -.method-toggle > summary, +.variant, .implementors-toggle > summary, .impl, #implementors-list > .docblock, .impl-items > section, -.methods > section +.impl-items > .rustdoc-toggle > summary, +.methods > section, +.methods > .rustdoc-toggle > summary { margin-bottom: 0.75em; } -.method-toggle[open]:not(:last-child), +.variants > .docblock, +.impl-items > .rustdoc-toggle[open]:not(:last-child), +.methods > .rustdoc-toggle[open]:not(:last-child), .implementors-toggle[open]:not(:last-child) { margin-bottom: 2em; } -#trait-implementations-list .method-toggle:not(:last-child), -#synthetic-implementations-list .method-toggle:not(:last-child), -#blanket-implementations-list .method-toggle:not(:last-child) { +#trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child), +#synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child), +#blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) { margin-bottom: 1em; } @@ -1999,12 +1904,16 @@ in storage.js font-size: 12px; position: relative; bottom: 1px; - background: transparent; border-width: 1px; border-style: solid; border-radius: 50px; } +.scraped-example { + /* So .scraped-example-title can be positioned absolutely */ + position: relative; +} + .scraped-example .code-wrapper { position: relative; display: flex; @@ -2014,54 +1923,62 @@ in storage.js } .scraped-example:not(.expanded) .code-wrapper { - max-height: 240px; + /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number + * of lines shown in the un-expanded example code viewer. This pre needs to have + * a max-height equal to line-height * N. The line-height is currently 1.5em, + * and we include additional 10px for padding. */ + max-height: calc(1.5em * 5 + 10px); } .scraped-example:not(.expanded) .code-wrapper pre { overflow-y: hidden; - max-height: 240px; padding-bottom: 0; + /* See above comment, should be the same max-height. */ + max-height: calc(1.5em * 5 + 10px); } -.scraped-example .code-wrapper .prev { +.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper, +.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre { + /* See above comment, except this height is based on HIDDEN_MAX_LINES. */ + max-height: calc(1.5em * 10 + 10px); +} + +.scraped-example .code-wrapper .next, +.scraped-example .code-wrapper .prev, +.scraped-example .code-wrapper .expand { + color: var(--main-color); position: absolute; top: 0.25em; + z-index: 1; + padding: 0; + background: none; + border: none; + /* iOS button gradient: https://stackoverflow.com/q/5438567 */ + -webkit-appearance: none; + opacity: 1; +} +.scraped-example .code-wrapper .prev { right: 2.25em; - z-index: 100; - cursor: pointer; } - .scraped-example .code-wrapper .next { - position: absolute; - top: 0.25em; right: 1.25em; - z-index: 100; - cursor: pointer; } - .scraped-example .code-wrapper .expand { - position: absolute; - top: 0.25em; right: 0.25em; - z-index: 100; - cursor: pointer; } -.scraped-example:not(.expanded) .code-wrapper:before { +.scraped-example:not(.expanded) .code-wrapper:before, +.scraped-example:not(.expanded) .code-wrapper:after { content: " "; width: 100%; height: 5px; position: absolute; - z-index: 100; + z-index: 1; +} +.scraped-example:not(.expanded) .code-wrapper:before { top: 0; } - .scraped-example:not(.expanded) .code-wrapper:after { - content: " "; - width: 100%; - height: 5px; - position: absolute; - z-index: 100; bottom: 0; } @@ -2070,12 +1987,15 @@ in storage.js padding: 14px 0; } +.scraped-example .code-wrapper .src-line-numbers a, .scraped-example .code-wrapper .src-line-numbers span { padding: 0 14px; } .scraped-example .code-wrapper .example-wrap { - flex: 1; + display: grid; + grid-template-columns: max-content auto; + width: 100%; overflow-x: auto; overflow-y: hidden; margin-bottom: 0; diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index 83939f63b..1f6fb961e 100644 --- a/src/librustdoc/html/static/css/settings.css +++ b/src/librustdoc/html/static/css/settings.css @@ -8,7 +8,8 @@ flex-wrap: wrap; } -.setting-line .radio-line input { +.setting-line .radio-line input, +.setting-line .toggle input { margin-right: 0.3em; height: 1.2rem; width: 1.2rem; @@ -17,9 +18,18 @@ outline: none; -webkit-appearance: none; cursor: pointer; +} +.setting-line .radio-line input { border-radius: 50%; } -.setting-line .radio-line input + span { +.setting-line .toggle input:checked { + content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\ + <path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\ + <path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>'); +} + +.setting-line .radio-line input + span, +.setting-line .toggle span { padding-bottom: 1px; } @@ -49,37 +59,6 @@ cursor: pointer; } -.toggle input { - opacity: 0; - position: absolute; -} - -.slider { - position: relative; - width: 45px; - min-width: 45px; - display: block; - height: 28px; - margin-right: 20px; - cursor: pointer; - background-color: #ccc; - transition: .3s; -} - -.slider:before { - position: absolute; - content: ""; - height: 19px; - width: 19px; - left: 4px; - bottom: 4px; - transition: .3s; -} - -input:checked + .slider:before { - transform: translateX(19px); -} - .setting-line > .sub-settings { padding-left: 42px; width: 100%; @@ -94,7 +73,11 @@ input:checked + .slider:before { box-shadow: inset 0 0 0 3px var(--main-background-color); background-color: var(--settings-input-color); } -.setting-line .radio-line input:focus { +.setting-line .toggle input:checked { + background-color: var(--settings-input-color); +} +.setting-line .radio-line input:focus, +.setting-line .toggle input:focus { box-shadow: 0 0 1px 1px var(--settings-input-color); } /* In here we combine both `:focus` and `:checked` properties. */ @@ -102,9 +85,7 @@ input:checked + .slider:before { box-shadow: inset 0 0 0 3px var(--main-background-color), 0 0 2px 2px var(--settings-input-color); } -.setting-line .radio-line input:hover { +.setting-line .radio-line input:hover, +.setting-line .toggle input:hover { border-color: var(--settings-input-color) !important; } -input:checked + .slider { - background-color: var(--settings-input-color); -} diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index fdfdb3e19..0436fe013 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -7,6 +7,8 @@ Original by Dempfi (https://github.com/dempfi/ayu) --main-background-color: #0f1419; --main-color: #c5c5c5; --settings-input-color: #ffb454; + --settings-button-color: #fff; + --settings-button-border-focus: #e0e0e0; --sidebar-background-color: #14191f; --sidebar-background-color-hover: rgba(70, 70, 70, 0.33); --code-block-background-color: #191f26; @@ -19,6 +21,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) --right-side-color: grey; --code-attribute-color: #999; --toggles-color: #999; + --toggle-filter: invert(100%); --search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */ --copy-path-button-color: #fff; --copy-path-img-filter: invert(70%); @@ -38,9 +41,12 @@ Original by Dempfi (https://github.com/dempfi/ayu) --sidebar-link-color: #53b1db; --sidebar-current-link-background-color: transparent; --search-result-link-focus-background-color: #3c3c3c; + --search-result-border-color: #aaa3; + --search-color: #fff; + --search-results-alias-color: #c5c5c5; + --search-results-grey-color: #999; --stab-background-color: #314559; --stab-code-color: #e6e1cf; - --search-color: #fff; --code-highlight-kw-color: #ff7733; --code-highlight-kw-2-color: #ff7733; --code-highlight-lifetime-color: #ff7733; @@ -58,16 +64,30 @@ Original by Dempfi (https://github.com/dempfi/ayu) --example-line-numbers-border-color: none; --src-line-numbers-span-color: #5c6773; --src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06); -} - -.slider { - background-color: #ccc; -} -.slider:before { - background-color: white; -} -input:focus + .slider { - box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); + --test-arrow-color: #788797; + --test-arrow-background-color: rgba(57, 175, 215, 0.09); + --test-arrow-hover-color: #c5c5c5; + --test-arrow-hover-background-color: rgba(57, 175, 215, 0.368); + --target-background-color: rgba(255, 236, 164, 0.06); + --target-border-color: rgba(255, 180, 76, 0.85); + --tooltip-background-color: #314559; + --tooltip-color: #c5c5c5; + --kbd-color: #c5c5c5; + --kbd-background: #314559; + --kbd-box-shadow-color: #5c6773; + --rust-logo-filter: drop-shadow(1px 0 0px #fff) + drop-shadow(0 1px 0 #fff) + drop-shadow(-1px 0 0 #fff) + drop-shadow(0 -1px 0 #fff); + /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ + --crate-search-div-filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) + brightness(94%) contrast(94%); + --crate-search-div-hover-filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) + brightness(113%) contrast(76%); + --crate-search-hover-border: #e0e0e0; + --source-sidebar-background-selected: #14191f; + --source-sidebar-background-hover: #14191f; + --table-alt-row-background-color: #191f26; } h1, h2, h3, h4 { @@ -99,13 +119,6 @@ pre, .rustdoc.source .example-wrap { color: #e6e1cf; } -.rust-logo { - filter: drop-shadow(1px 0 0px #fff) - drop-shadow(0 1px 0 #fff) - drop-shadow(-1px 0 0 #fff) - drop-shadow(0 -1px 0 #fff); -} - .sidebar .current, .sidebar a:hover { color: #ffb44c; @@ -147,21 +160,6 @@ body.source .example-wrap pre.rust a { background: #333; } -details.rustdoc-toggle > summary::before { - filter: invert(100%); -} - -#crate-search-div::after { - /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ - filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%); -} -#crate-search:hover, #crate-search:focus { - border-color: #e0e0e0 !important; -} -#crate-search-div:hover::after, #crate-search-div:focus-within::after { - filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) brightness(113%) contrast(76%); -} - .module-item .stab, .import-item .stab { color: #000; @@ -171,40 +169,6 @@ details.rustdoc-toggle > summary::before { color: #788797; } -a.test-arrow { - font-size: 100%; - color: #788797; - border-radius: 4px; - background-color: rgba(57, 175, 215, 0.09); -} - -a.test-arrow:hover { - background-color: rgba(57, 175, 215, 0.368); - color: #c5c5c5; -} - -:target { - background: rgba(255, 236, 164, 0.06); - border-right: 3px solid rgba(255, 180, 76, 0.85); -} - -.search-failed a { - color: #39AFD7; -} - -.tooltip::after { - background-color: #314559; - color: #c5c5c5; -} - -.tooltip::before { - border-color: transparent #314559 transparent transparent; -} - -.notable-traits-tooltiptext { - background-color: #314559; -} - #titles > button.selected { background-color: #141920 !important; border-bottom: 1px solid #ffb44c !important; @@ -236,42 +200,16 @@ pre.rust .kw {} pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, pre.rust .attribute {} pre.rust .kw-2, pre.rust .prelude-ty {} -kbd { - color: #c5c5c5; - background-color: #314559; - box-shadow: inset 0 -1px 0 #5c6773; -} - -#settings-menu > a, #help-button > a { - color: #fff; -} - #settings-menu > a img { filter: invert(100); } -#settings-menu > a:hover, #settings-menu > a:focus, -#help-button > a:hover, #help-button > a:focus { - border-color: #e0e0e0; -} - -.search-results .result-name span.alias { - color: #c5c5c5; -} -.search-results .result-name span.grey { - color: #999; -} - #source-sidebar > .title { color: #fff; } #source-sidebar div.files > a:hover, details.dir-entry summary:hover, -#source-sidebar div.files > a:focus, details.dir-entry summary:focus { - background-color: #14191f; - color: #ffb44c; -} +#source-sidebar div.files > a:focus, details.dir-entry summary:focus, #source-sidebar div.files > a.selected { - background-color: #14191f; color: #ffb44c; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 361d3d4a2..d945e956c 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -2,6 +2,8 @@ --main-background-color: #353535; --main-color: #ddd; --settings-input-color: #2196f3; + --settings-button-color: #000; + --settings-button-border-focus: #ffb900; --sidebar-background-color: #505050; --sidebar-background-color-hover: #676767; --code-block-background-color: #2A2A2A; @@ -14,6 +16,7 @@ --right-side-color: grey; --code-attribute-color: #999; --toggles-color: #999; + --toggle-filter: invert(100%); --search-input-focused-border-color: #008dfd; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -33,9 +36,12 @@ --sidebar-link-color: #fdbf35; --sidebar-current-link-background-color: #444; --search-result-link-focus-background-color: #616161; + --search-result-border-color: #aaa3; + --search-color: #111; + --search-results-alias-color: #fff; + --search-results-grey-color: #ccc; --stab-background-color: #314559; --stab-code-color: #e6e1cf; - --search-color: #111; --code-highlight-kw-color: #ab8ac1; --code-highlight-kw-2-color: #769acb; --code-highlight-lifetime-color: #d97f26; @@ -53,23 +59,30 @@ --example-line-numbers-border-color: #4a4949; --src-line-numbers-span-color: #3b91e2; --src-line-number-highlighted-background-color: #0a042f; -} - -.slider { - background-color: #ccc; -} -.slider:before { - background-color: white; -} -input:focus + .slider { - box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); -} - -.rust-logo { - filter: drop-shadow(1px 0 0px #fff) + --test-arrow-color: #dedede; + --test-arrow-background-color: rgba(78, 139, 202, 0.2); + --test-arrow-hover-color: #dedede; + --test-arrow-hover-background-color: #4e8bca; + --target-background-color: #494a3d; + --target-border-color: #bb7410; + --tooltip-background-color: #000; + --tooltip-color: #fff; + --kbd-color: #000; + --kbd-background: #fafbfc; + --kbd-box-shadow-color: #c6cbd1; + --rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) - drop-shadow(0 -1px 0 #fff) + drop-shadow(0 -1px 0 #fff); + /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ + --crate-search-div-filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) + brightness(90%) contrast(90%); + --crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) + brightness(100%) contrast(91%); + --crate-search-hover-border: #2196f3; + --source-sidebar-background-selected: #333; + --source-sidebar-background-hover: #444; + --table-alt-row-background-color: #2A2A2A; } .content .item-info::before { color: #ccc; } @@ -78,53 +91,6 @@ body.source .example-wrap pre.rust a { background: #333; } -details.rustdoc-toggle > summary::before { - filter: invert(100%); -} - -#crate-search-div::after { - /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ - filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) brightness(90%) contrast(90%); -} -#crate-search:hover, #crate-search:focus { - border-color: #2196f3 !important; -} -#crate-search-div:hover::after, #crate-search-div:focus-within::after { - filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%); -} - -a.test-arrow { - color: #dedede; - background-color: rgba(78, 139, 202, 0.2); -} - -a.test-arrow:hover{ - background-color: #4e8bca; -} - -:target { - background-color: #494a3d; - border-right: 3px solid #bb7410; -} - -.search-failed a { - color: #0089ff; -} - -.tooltip::after { - background-color: #000; - color: #fff; - border-color: #000; -} - -.tooltip::before { - border-color: transparent black transparent transparent; -} - -.notable-traits-tooltiptext { - background-color: #111; -} - #titles > button:not(.selected) { background-color: #252525; border-top-color: #252525; @@ -139,36 +105,6 @@ a.test-arrow:hover{ color: #888; } -kbd { - color: #000; - background-color: #fafbfc; - box-shadow: inset 0 -1px 0 #c6cbd1; -} - -#settings-menu > a, #help-button > a { - color: #000; -} - -#settings-menu > a:hover, #settings-menu > a:focus, -#help-button > a:hover, #help-button > a:focus { - border-color: #ffb900; -} - -.search-results .result-name span.alias { - color: #fff; -} -.search-results .result-name span.grey { - color: #ccc; -} - -#source-sidebar div.files > a:hover, details.dir-entry summary:hover, -#source-sidebar div.files > a:focus, details.dir-entry summary:focus { - background-color: #444; -} -#source-sidebar div.files > a.selected { - background-color: #333; -} - .scraped-example-list .scrape-help { border-color: #aaa; color: #eee; diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 5eb4bbcf8..58955a793 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -2,6 +2,8 @@ --main-background-color: white; --main-color: black; --settings-input-color: #2196f3; + --settings-button-color: #000; + --settings-button-border-focus: #717171; --sidebar-background-color: #F5F5F5; --sidebar-background-color-hover: #E0E0E0; --code-block-background-color: #F5F5F5; @@ -14,6 +16,7 @@ --right-side-color: grey; --code-attribute-color: #999; --toggles-color: #999; + --toggle-filter: none; --search-input-focused-border-color: #66afe9; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -33,9 +36,12 @@ --sidebar-link-color: #356da4; --sidebar-current-link-background-color: #fff; --search-result-link-focus-background-color: #ccc; + --search-result-border-color: #aaa3; + --search-color: #000; + --search-results-alias-color: #000; + --search-results-grey-color: #999; --stab-background-color: #fff5d6; --stab-code-color: #000; - --search-color: #000; --code-highlight-kw-color: #8959a8; --code-highlight-kw-2-color: #4271ae; --code-highlight-lifetime-color: #b76514; @@ -53,22 +59,27 @@ --example-line-numbers-border-color: #c7c7c7; --src-line-numbers-span-color: #c67e2d; --src-line-number-highlighted-background-color: #fdffd3; -} - -.slider { - background-color: #ccc; -} -.slider:before { - background-color: white; -} -input:focus + .slider { - box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); -} - -.rust-logo { - /* This rule exists to force other themes to explicitly style the logo. - * Rustdoc has a custom linter for this purpose. - */ + --test-arrow-color: #f5f5f5; + --test-arrow-background-color: rgba(78, 139, 202, 0.2); + --test-arrow-hover-color: #f5f5f5; + --test-arrow-hover-background-color: #4e8bca; + --target-background-color: #fdffd3; + --target-border-color: #ad7c37; + --tooltip-background-color: #000; + --tooltip-color: #fff; + --kbd-color: #000; + --kbd-background: #fafbfc; + --kbd-box-shadow-color: #c6cbd1; + --rust-logo-filter: initial; + /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ + --crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) + brightness(114%) contrast(76%); + --crate-search-div-hover-filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) + brightness(96%) contrast(93%); + --crate-search-hover-border: #717171; + --source-sidebar-background-selected: #fff; + --source-sidebar-background-hover: #e0e0e0; + --table-alt-row-background-color: #F5F5F5; } .content .item-info::before { color: #ccc; } @@ -77,48 +88,6 @@ body.source .example-wrap pre.rust a { background: #eee; } -#crate-search-div::after { - /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ - filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) brightness(114%) contrast(76%); -} -#crate-search:hover, #crate-search:focus { - border-color: #717171 !important; -} -#crate-search-div:hover::after, #crate-search-div:focus-within::after { - filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%); -} - -a.test-arrow { - color: #f5f5f5; - background-color: rgba(78, 139, 202, 0.2); -} - -a.test-arrow:hover{ - background-color: #4e8bca; -} - -:target { - background: #FDFFD3; - border-right: 3px solid #AD7C37; -} - -.search-failed a { - color: #3873AD; -} - -.tooltip::after { - background-color: #000; - color: #fff; -} - -.tooltip::before { - border-color: transparent black transparent transparent; -} - -.notable-traits-tooltiptext { - background-color: #eee; -} - #titles > button:not(.selected) { background-color: #e6e6e6; border-top-color: #e6e6e6; @@ -133,35 +102,6 @@ a.test-arrow:hover{ color: #888; } -kbd { - color: #000; - background-color: #fafbfc; - box-shadow: inset 0 -1px 0 #c6cbd1; -} - -#settings-menu > a, #help-button > a { - color: #000; -} - -#settings-menu > a:hover, #settings-menu > a:focus, -#help-button > a:hover, #help-button > a:focus { - border-color: #717171; -} - -.search-results .result-name span.alias { - color: #000; -} -.search-results .result-name span.grey { - color: #999; -} - -#source-sidebar div.files > a:hover, details.dir-entry summary:hover, -#source-sidebar div.files > a:focus, details.dir-entry summary:focus { - background-color: #E0E0E0; -} -#source-sidebar div.files > a.selected { - background-color: #fff; -} .scraped-example-list .scrape-help { border-color: #555; color: #333; diff --git a/src/librustdoc/html/static/fonts/README.txt b/src/librustdoc/html/static/fonts/README.txt new file mode 100644 index 000000000..0db15996d --- /dev/null +++ b/src/librustdoc/html/static/fonts/README.txt @@ -0,0 +1,12 @@ +The Nanum Barun Gothic fonts are shipped with rustdoc because the default fonts +on many Windows installs render Korean very badly. See: + - https://github.com/rust-lang/rust/pull/84048, + - https://github.com/rust-lang/rust/issues/84035 + - https://github.com/rust-lang/rust/pull/90232 + +The font files were generated with these commands: + +```sh +pyftsubset NanumBarunGothic.ttf \ +--unicodes=U+AC00-D7AF:U+1100-11FF,U+3130-318F,U+A960-A97F,U+D7B0-D7FF \ +--output-file=NanumBarunGothic.ttf.woff2 --flavor=woff2 diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 33480fa41..152116089 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -47,10 +47,8 @@ function blurHandler(event, parentElem, hideCallback) { } } -(function() { - window.rootPath = getVar("root-path"); - window.currentCrate = getVar("current-crate"); -}()); +window.rootPath = getVar("root-path"); +window.currentCrate = getVar("current-crate"); function setMobileTopbar() { // FIXME: It would be nicer to generate this text content directly in HTML, @@ -183,9 +181,9 @@ function browserSupportsHistoryApi() { } // eslint-disable-next-line no-unused-vars -function loadCss(cssFileName) { +function loadCss(cssUrl) { const link = document.createElement("link"); - link.href = resourcePath(cssFileName, ".css"); + link.href = cssUrl; link.type = "text/css"; link.rel = "stylesheet"; document.getElementsByTagName("head")[0].appendChild(link); @@ -204,12 +202,13 @@ function loadCss(cssFileName) { if (event.ctrlKey || event.altKey || event.metaKey) { return; } + window.hideAllModals(false); addClass(getSettingsButton(), "rotate"); event.preventDefault(); // Sending request for the CSS and the JS files at the same time so it will // hopefully be loaded when the JS will generate the settings content. - loadCss("settings"); - loadScript(resourcePath("settings", ".js")); + loadCss(getVar("static-root-path") + getVar("settings-css")); + loadScript(getVar("static-root-path") + getVar("settings-js")); }; window.searchState = { @@ -286,7 +285,7 @@ function loadCss(cssFileName) { function loadSearch() { if (!searchLoaded) { searchLoaded = true; - loadScript(resourcePath("search", ".js")); + loadScript(getVar("static-root-path") + getVar("search-js")); loadScript(resourcePath("search-index", ".js")); } } @@ -303,13 +302,15 @@ function loadCss(cssFileName) { const params = searchState.getQueryStringParams(); if (params.search !== undefined) { - const search = searchState.outputElement(); - search.innerHTML = "<h3 class=\"search-loading\">" + - searchState.loadingText + "</h3>"; - searchState.showResults(search); + searchState.setLoadingSearch(); loadSearch(); } }, + setLoadingSearch: () => { + const search = searchState.outputElement(); + search.innerHTML = "<h3 class=\"search-loading\">" + searchState.loadingText + "</h3>"; + searchState.showResults(search); + }, }; function getPageId() { @@ -379,7 +380,7 @@ function loadCss(cssFileName) { } ev.preventDefault(); searchState.defocus(); - window.hidePopoverMenus(); + window.hideAllModals(true); // true = reset focus for notable traits } function handleShortcut(ev) { @@ -621,7 +622,7 @@ function loadCss(cssFileName) { const innerToggle = document.getElementById(toggleAllDocsId); removeClass(innerToggle, "will-expand"); onEachLazy(document.getElementsByClassName("rustdoc-toggle"), e => { - if (!hasClass(e, "type-contents-toggle")) { + if (!hasClass(e, "type-contents-toggle") && !hasClass(e, "more-examples-toggle")) { e.open = true; } }); @@ -725,12 +726,9 @@ function loadCss(cssFileName) { }); }; - (function() { - // To avoid checking on "rustdoc-line-numbers" value on every loop... - if (getSettingValue("line-numbers") === "true") { - window.rustdoc_add_line_numbers_to_examples(); - } - }()); + if (getSettingValue("line-numbers") === "true") { + window.rustdoc_add_line_numbers_to_examples(); + } let oldSidebarScrollPosition = null; @@ -772,6 +770,7 @@ function loadCss(cssFileName) { }; function showSidebar() { + window.hideAllModals(false); window.rustdocMobileScrollLock(); const sidebar = document.getElementsByClassName("sidebar")[0]; addClass(sidebar, "shown"); @@ -790,6 +789,19 @@ function loadCss(cssFileName) { // we need to switch away from mobile mode and make the main content area scrollable. hideSidebar(); } + if (window.CURRENT_NOTABLE_ELEMENT) { + // As a workaround to the behavior of `contains: layout` used in doc togglers, the + // notable traits popup is positioned using javascript. + // + // This means when the window is resized, we need to redo the layout. + const base = window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE; + const force_visible = base.NOTABLE_FORCE_VISIBLE; + hideNotable(false); + if (force_visible) { + showNotable(base); + base.NOTABLE_FORCE_VISIBLE = true; + } + } }); function handleClick(id, f) { @@ -822,10 +834,123 @@ function loadCss(cssFileName) { }); }); + function showNotable(e) { + if (!window.NOTABLE_TRAITS) { + const data = document.getElementById("notable-traits-data"); + if (data) { + window.NOTABLE_TRAITS = JSON.parse(data.innerText); + } else { + throw new Error("showNotable() called on page without any notable traits!"); + } + } + if (window.CURRENT_NOTABLE_ELEMENT && window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE === e) { + // Make this function idempotent. + return; + } + window.hideAllModals(false); + const ty = e.getAttribute("data-ty"); + const wrapper = document.createElement("div"); + wrapper.innerHTML = "<div class=\"docblock\">" + window.NOTABLE_TRAITS[ty] + "</div>"; + wrapper.className = "notable popover"; + const focusCatcher = document.createElement("div"); + focusCatcher.setAttribute("tabindex", "0"); + focusCatcher.onfocus = hideNotable; + wrapper.appendChild(focusCatcher); + const pos = e.getBoundingClientRect(); + // 5px overlap so that the mouse can easily travel from place to place + wrapper.style.top = (pos.top + window.scrollY + pos.height) + "px"; + wrapper.style.left = 0; + wrapper.style.right = "auto"; + wrapper.style.visibility = "hidden"; + const body = document.getElementsByTagName("body")[0]; + body.appendChild(wrapper); + const wrapperPos = wrapper.getBoundingClientRect(); + // offset so that the arrow points at the center of the "(i)" + const finalPos = pos.left + window.scrollX - wrapperPos.width + 24; + if (finalPos > 0) { + wrapper.style.left = finalPos + "px"; + } else { + wrapper.style.setProperty( + "--popover-arrow-offset", + (wrapperPos.right - pos.right + 4) + "px" + ); + } + wrapper.style.visibility = ""; + window.CURRENT_NOTABLE_ELEMENT = wrapper; + window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e; + wrapper.onpointerleave = function(ev) { + // If this is a synthetic touch event, ignore it. A click event will be along shortly. + if (ev.pointerType !== "mouse") { + return; + } + if (!e.NOTABLE_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) { + hideNotable(true); + } + }; + } + + function notableBlurHandler(event) { + if (window.CURRENT_NOTABLE_ELEMENT && + !elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT) && + !elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT) && + !elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE) && + !elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE) + ) { + // Work around a difference in the focus behaviour between Firefox, Chrome, and Safari. + // When I click the button on an already-opened notable trait popover, Safari + // hides the popover and then immediately shows it again, while everyone else hides it + // and it stays hidden. + // + // To work around this, make sure the click finishes being dispatched before + // hiding the popover. Since `hideNotable()` is idempotent, this makes Safari behave + // consistently with the other two. + setTimeout(() => hideNotable(false), 0); + } + } + + function hideNotable(focus) { + if (window.CURRENT_NOTABLE_ELEMENT) { + if (window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE) { + if (focus) { + window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.focus(); + } + window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false; + } + const body = document.getElementsByTagName("body")[0]; + body.removeChild(window.CURRENT_NOTABLE_ELEMENT); + window.CURRENT_NOTABLE_ELEMENT = null; + } + } + onEachLazy(document.getElementsByClassName("notable-traits"), e => { e.onclick = function() { - this.getElementsByClassName("notable-traits-tooltiptext")[0] - .classList.toggle("force-tooltip"); + this.NOTABLE_FORCE_VISIBLE = this.NOTABLE_FORCE_VISIBLE ? false : true; + if (window.CURRENT_NOTABLE_ELEMENT && !this.NOTABLE_FORCE_VISIBLE) { + hideNotable(true); + } else { + showNotable(this); + window.CURRENT_NOTABLE_ELEMENT.setAttribute("tabindex", "0"); + window.CURRENT_NOTABLE_ELEMENT.focus(); + window.CURRENT_NOTABLE_ELEMENT.onblur = notableBlurHandler; + } + return false; + }; + e.onpointerenter = function(ev) { + // If this is a synthetic touch event, ignore it. A click event will be along shortly. + if (ev.pointerType !== "mouse") { + return; + } + showNotable(this); + }; + e.onpointerleave = function(ev) { + // If this is a synthetic touch event, ignore it. A click event will be along shortly. + if (ev.pointerType !== "mouse") { + return; + } + if (!this.NOTABLE_FORCE_VISIBLE && + !elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT)) { + hideNotable(true); + } }; }); @@ -929,6 +1054,17 @@ function loadCss(cssFileName) { } /** + * Hide popover menus, notable trait tooltips, and the sidebar (if applicable). + * + * Pass "true" to reset focus for notable traits. + */ + window.hideAllModals = function(switchFocus) { + hideSidebar(); + window.hidePopoverMenus(); + hideNotable(switchFocus); + }; + + /** * Hide all the popover menus. */ window.hidePopoverMenus = function() { @@ -959,7 +1095,7 @@ function loadCss(cssFileName) { function showHelp() { const menu = getHelpMenu(true); if (menu.style.display === "none") { - window.hidePopoverMenus(); + window.hideAllModals(); menu.style.display = ""; } } diff --git a/src/librustdoc/html/static/js/scrape-examples.js b/src/librustdoc/html/static/js/scrape-examples.js index d0fd115fd..7a3a9c5f3 100644 --- a/src/librustdoc/html/static/js/scrape-examples.js +++ b/src/librustdoc/html/static/js/scrape-examples.js @@ -3,25 +3,33 @@ "use strict"; (function() { - // Number of lines shown when code viewer is not expanded - const MAX_LINES = 10; + // Number of lines shown when code viewer is not expanded. + // DEFAULT is the first example shown by default, while HIDDEN is + // the examples hidden beneath the "More examples" toggle. + // + // NOTE: these values MUST be synchronized with certain rules in rustdoc.css! + const DEFAULT_MAX_LINES = 5; + const HIDDEN_MAX_LINES = 10; // Scroll code block to the given code location - function scrollToLoc(elt, loc) { + function scrollToLoc(elt, loc, isHidden) { const lines = elt.querySelector(".src-line-numbers"); let scrollOffset; // If the block is greater than the size of the viewer, // then scroll to the top of the block. Otherwise scroll // to the middle of the block. - if (loc[1] - loc[0] > MAX_LINES) { + const maxLines = isHidden ? HIDDEN_MAX_LINES : DEFAULT_MAX_LINES; + if (loc[1] - loc[0] > maxLines) { const line = Math.max(0, loc[0] - 1); scrollOffset = lines.children[line].offsetTop; } else { const wrapper = elt.querySelector(".code-wrapper"); const halfHeight = wrapper.offsetHeight / 2; - const offsetMid = (lines.children[loc[0]].offsetTop - + lines.children[loc[1]].offsetTop) / 2; + const offsetTop = lines.children[loc[0]].offsetTop; + const lastLine = lines.children[loc[1]]; + const offsetBot = lastLine.offsetTop + lastLine.offsetHeight; + const offsetMid = (offsetTop + offsetBot) / 2; scrollOffset = offsetMid - halfHeight; } @@ -29,7 +37,7 @@ elt.querySelector(".rust").scrollTo(0, scrollOffset); } - function updateScrapedExample(example) { + function updateScrapedExample(example, isHidden) { const locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent); let locIndex = 0; const highlights = Array.prototype.slice.call(example.querySelectorAll(".highlight")); @@ -40,7 +48,7 @@ const onChangeLoc = changeIndex => { removeClass(highlights[locIndex], "focus"); changeIndex(); - scrollToLoc(example, locs[locIndex][0]); + scrollToLoc(example, locs[locIndex][0], isHidden); addClass(highlights[locIndex], "focus"); const url = locs[locIndex][1]; @@ -57,7 +65,7 @@ }); }); - example.querySelector("next") + example.querySelector(".next") .addEventListener("click", () => { onChangeLoc(() => { locIndex = (locIndex + 1) % locs.length; @@ -70,7 +78,7 @@ expandButton.addEventListener("click", () => { if (hasClass(example, "expanded")) { removeClass(example, "expanded"); - scrollToLoc(example, locs[0][0]); + scrollToLoc(example, locs[0][0], isHidden); } else { addClass(example, "expanded"); } @@ -78,11 +86,11 @@ } // Start with the first example in view - scrollToLoc(example, locs[0][0]); + scrollToLoc(example, locs[0][0], isHidden); } const firstExamples = document.querySelectorAll(".scraped-example-list > .scraped-example"); - onEachLazy(firstExamples, updateScrapedExample); + onEachLazy(firstExamples, el => updateScrapedExample(el, false)); onEachLazy(document.querySelectorAll(".more-examples-toggle"), toggle => { // Allow users to click the left border of the <details> section to close it, // since the section can be large and finding the [+] button is annoying. @@ -99,7 +107,7 @@ // depends on offsetHeight, a property that requires an element to be visible to // compute correctly. setTimeout(() => { - onEachLazy(moreExamples, updateScrapedExample); + onEachLazy(moreExamples, el => updateScrapedExample(el, true)); }); }, {once: true}); }); diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index d04ec357c..23ae4e970 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -1491,6 +1491,7 @@ function initSearch(rawSearchIndex) { const target = searchState.focusedByTab[searchState.currentTab] || document.querySelectorAll(".search-results.active a").item(0) || document.querySelectorAll("#titles > button").item(searchState.currentTab); + searchState.focusedByTab[searchState.currentTab] = null; if (target) { target.focus(); } @@ -1593,7 +1594,6 @@ function initSearch(rawSearchIndex) { link.className = "result-" + type; link.href = item.href; - const wrapper = document.createElement("div"); const resultName = document.createElement("div"); resultName.className = "result-name"; @@ -1614,16 +1614,13 @@ function initSearch(rawSearchIndex) { resultName.insertAdjacentHTML( "beforeend", item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>"); - wrapper.appendChild(resultName); + link.appendChild(resultName); const description = document.createElement("div"); description.className = "desc"; - const spanDesc = document.createElement("span"); - spanDesc.insertAdjacentHTML("beforeend", item.desc); + description.insertAdjacentHTML("beforeend", item.desc); - description.appendChild(spanDesc); - wrapper.appendChild(description); - link.appendChild(wrapper); + link.appendChild(description); output.appendChild(link); }); } else if (query.error === null) { @@ -1769,13 +1766,13 @@ function initSearch(rawSearchIndex) { * @param {boolean} [forced] */ function search(e, forced) { - const params = searchState.getQueryStringParams(); - const query = parseQuery(searchState.input.value.trim()); - if (e) { e.preventDefault(); } + const query = parseQuery(searchState.input.value.trim()); + let filterCrates = getFilterCrates(); + if (!forced && query.userQuery === currentResults) { if (query.userQuery.length > 0) { putBackSearch(); @@ -1783,7 +1780,9 @@ function initSearch(rawSearchIndex) { return; } - let filterCrates = getFilterCrates(); + searchState.setLoadingSearch(); + + const params = searchState.getQueryStringParams(); // In case we have no information about the saved crate and there is a URL query parameter, // we override it with the URL query parameter. diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index 5e1c7e6f0..589bfc793 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -9,13 +9,16 @@ const isSettingsPage = window.location.pathname.endsWith("/settings.html"); function changeSetting(settingName, value) { + if (settingName === "theme") { + const useSystem = value === "system preference" ? "true" : "false"; + updateLocalStorage("use-system-theme", useSystem); + } updateLocalStorage(settingName, value); switch (settingName) { case "theme": case "preferred-dark-theme": case "preferred-light-theme": - case "use-system-theme": updateSystemTheme(); updateLightAndDark(); break; @@ -45,7 +48,6 @@ } function showLightAndDark() { - addClass(document.getElementById("theme").parentElement, "hidden"); removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden"); removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden"); } @@ -53,11 +55,11 @@ function hideLightAndDark() { addClass(document.getElementById("preferred-light-theme").parentElement, "hidden"); addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden"); - removeClass(document.getElementById("theme").parentElement, "hidden"); } function updateLightAndDark() { - if (getSettingValue("use-system-theme") !== "false") { + const useSystem = getSettingValue("use-system-theme"); + if (useSystem === "true" || (useSystem === null && getSettingValue("theme") === null)) { showLightAndDark(); } else { hideLightAndDark(); @@ -66,8 +68,7 @@ function setEvents(settingsElement) { updateLightAndDark(); - onEachLazy(settingsElement.getElementsByClassName("slider"), elem => { - const toggle = elem.previousElementSibling; + onEachLazy(settingsElement.querySelectorAll("input[type=\"checkbox\"]"), toggle => { const settingId = toggle.id; const settingValue = getSettingValue(settingId); if (settingValue !== null) { @@ -92,7 +93,18 @@ }); onEachLazy(settingsElement.querySelectorAll("input[type=\"radio\"]"), elem => { const settingId = elem.name; - const settingValue = getSettingValue(settingId); + let settingValue = getSettingValue(settingId); + if (settingId === "theme") { + const useSystem = getSettingValue("use-system-theme"); + if (useSystem === "true" || settingValue === null) { + if (useSystem !== "false") { + settingValue = "system preference"; + } else { + // This is the default theme. + settingValue = "light"; + } + } + } if (settingValue !== null && settingValue !== "null") { elem.checked = settingValue === elem.value; } @@ -121,27 +133,30 @@ if (setting["options"] !== undefined) { // This is a select setting. - output += `<div class="radio-line" id="${js_data_name}">\ - <span class="setting-name">${setting_name}</span>\ - <div class="choices">`; + output += `\ +<div class="radio-line" id="${js_data_name}"> + <span class="setting-name">${setting_name}</span> +<div class="choices">`; onEach(setting["options"], option => { const checked = option === setting["default"] ? " checked" : ""; + const full = `${js_data_name}-${option.replace(/ /g,"-")}`; - output += `<label for="${js_data_name}-${option}" class="choice">\ - <input type="radio" name="${js_data_name}" \ - id="${js_data_name}-${option}" value="${option}"${checked}>\ - <span>${option}</span>\ - </label>`; + output += `\ +<label for="${full}" class="choice"> + <input type="radio" name="${js_data_name}" + id="${full}" value="${option}"${checked}> + <span>${option}</span> +</label>`; }); output += "</div></div>"; } else { // This is a toggle. const checked = setting["default"] === true ? " checked" : ""; - output += `<label class="toggle">\ - <input type="checkbox" id="${js_data_name}"${checked}>\ - <span class="slider"></span>\ - <span class="label">${setting_name}</span>\ - </label>`; + output += `\ +<label class="toggle">\ + <input type="checkbox" id="${js_data_name}"${checked}>\ + <span class="label">${setting_name}</span>\ +</label>`; } output += "</div>"; } @@ -154,30 +169,27 @@ * @return {HTMLElement} */ function buildSettingsPage() { - const themes = getVar("themes").split(","); + const theme_names = getVar("themes").split(",").filter(t => t); + theme_names.push("light", "dark", "ayu"); + const settings = [ { - "name": "Use system theme", - "js_name": "use-system-theme", - "default": true, - }, - { "name": "Theme", "js_name": "theme", - "default": "light", - "options": themes, + "default": "system preference", + "options": theme_names.concat("system preference"), }, { "name": "Preferred light theme", "js_name": "preferred-light-theme", "default": "light", - "options": themes, + "options": theme_names, }, { "name": "Preferred dark theme", "js_name": "preferred-dark-theme", "default": "dark", - "options": themes, + "options": theme_names, }, { "name": "Auto-hide item contents for large items", @@ -256,7 +268,7 @@ event.preventDefault(); const shouldDisplaySettings = settingsMenu.style.display === "none"; - window.hidePopoverMenus(); + window.hideAllModals(); if (shouldDisplaySettings) { displaySettings(); } diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js index 0b9368dd8..5db768c1c 100644 --- a/src/librustdoc/html/static/js/source-script.js +++ b/src/librustdoc/html/static/js/source-script.js @@ -157,7 +157,7 @@ function highlightSourceLines(match) { x.scrollIntoView(); } onEachLazy(document.getElementsByClassName("src-line-numbers"), e => { - onEachLazy(e.getElementsByTagName("span"), i_e => { + onEachLazy(e.getElementsByTagName("a"), i_e => { removeClass(i_e, "line-highlighted"); }); }); @@ -188,8 +188,13 @@ const handleSourceHighlight = (function() { return ev => { let cur_line_id = parseInt(ev.target.id, 10); - // It can happen when clicking not on a line number span. - if (isNaN(cur_line_id)) { + // This event handler is attached to the entire line number column, but it should only + // be run if one of the anchors is clicked. It also shouldn't do anything if the anchor + // is clicked with a modifier key (to open a new browser tab). + if (isNaN(cur_line_id) || + ev.ctrlKey || + ev.altKey || + ev.metaKey) { return; } ev.preventDefault(); diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index b462a2c50..db2db83ca 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -126,33 +126,29 @@ function getCurrentValue(name) { } } -function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) { - const newHref = mainStyleElem.href.replace( - /\/rustdoc([^/]*)\.css/, "/" + newTheme + "$1" + ".css"); - +function switchTheme(styleElem, mainStyleElem, newThemeName, saveTheme) { // If this new value comes from a system setting or from the previously // saved theme, no need to save it. if (saveTheme) { - updateLocalStorage("theme", newTheme); - } - - if (styleElem.href === newHref) { - return; + updateLocalStorage("theme", newThemeName); } - let found = false; if (savedHref.length === 0) { onEachLazy(document.getElementsByTagName("link"), el => { savedHref.push(el.href); }); } - onEach(savedHref, el => { - if (el === newHref) { - found = true; + const newHref = savedHref.find(url => { + const m = url.match(/static\.files\/(.*)-[a-f0-9]{16}\.css$/); + if (m && m[1] === newThemeName) { + return true; + } + const m2 = url.match(/\/([^/]*)\.css$/); + if (m2 && m2[1].startsWith(newThemeName)) { return true; } }); - if (found) { + if (newHref && newHref !== styleElem.href) { styleElem.href = newHref; } } diff --git a/src/librustdoc/html/static/scrape-examples-help.md b/src/librustdoc/html/static/scrape-examples-help.md index 035b2e18b..002d19ec9 100644 --- a/src/librustdoc/html/static/scrape-examples-help.md +++ b/src/librustdoc/html/static/scrape-examples-help.md @@ -1,4 +1,4 @@ -Rustdoc will automatically scrape examples of documented items from the `examples/` directory of a project. These examples will be included within the generated documentation for that item. For example, if your library contains a public function: +Rustdoc will automatically scrape examples of documented items from a project's source code. These examples will be included within the generated documentation for that item. For example, if your library contains a public function: ```rust // src/lib.rs @@ -16,6 +16,7 @@ fn main() { Then this code snippet will be included in the documentation for `a_func`. + ## How to read scraped examples Scraped examples are shown as blocks of code from a given file. The relevant item will be highlighted. If the file is larger than a couple lines, only a small window will be shown which you can expand by clicking ↕ in the top-right. If a file contains multiple instances of an item, you can use the ≺ and ≻ buttons to toggle through each instance. @@ -25,7 +26,7 @@ If there is more than one file that contains examples, then you should click "Mo ## How Rustdoc scrapes examples -When you run `cargo doc`, Rustdoc will analyze all the crates that match Cargo's `--examples` filter for instances of items that occur in the crates being documented. Then Rustdoc will include the source code of these instances in the generated documentation. +When you run `cargo doc -Zunstable-options -Zrustdoc-scrape-examples`, Rustdoc will analyze all the documented crates for uses of documented items. Then Rustdoc will include the source code of these instances in the generated documentation. Rustdoc has a few techniques to ensure this doesn't overwhelm documentation readers, and that it doesn't blow up the page size: |