Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

rustdoc: redesign [+]/[−] controls #113074

Closed
wants to merge 5 commits into from
Closed

rustdoc: redesign [+]/[−] controls #113074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6930b14
rustdoc: redesign [+]/[−] controls
notriddle Jun 26, 2023
73d8119
rustdoc: tweak outline color on minus button and dark toggle all
notriddle Jun 28, 2023
e930ab3
rustdoc: make toggle buttons a bit bigger
notriddle Jul 3, 2023
1425235
rustdoc: improve alignment of out-of-band page info
notriddle Aug 10, 2023
36f75e4
rustdoc: make the toggle buttons look more like the big one
notriddle Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/librustdoc/html/static/css/noscript.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ nav.sub {
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: none;
--toggle-border: #ccc;
--toggle-border-hover: #616161;
--search-input-focused-border-color: #66afe9;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
Expand Down Expand Up @@ -157,6 +159,8 @@ nav.sub {
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--toggle-border: grey;
--toggle-border-hover: black;
--search-input-focused-border-color: #008dfd;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
Expand Down Expand Up @@ -239,5 +243,13 @@ nav.sub {
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
}

/* Other themes give the toggle-all-docs button the same color as the rest of
the toolbar buttons. Dark theme makes it less bright and noticeable. */
:root button#toggle-all-docs {
background-color: transparent;
border-color: grey;
color: #ddd;
}
/* End theme: dark */
}
82 changes: 55 additions & 27 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ h1, h2, h3, h4 {
.main-heading {
display: flex;
flex-wrap: wrap;
padding-bottom: 6px;
padding: 9px 0 6px 0;
margin-bottom: 15px;
}
/* The only headings that get underlines are:
Expand Down Expand Up @@ -293,15 +293,6 @@ button {

/* 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;
Expand Down Expand Up @@ -586,6 +577,11 @@ ul.block, .block li {
margin-bottom: 1rem;
}

.version {
/* same font style used in `.since` */
font-variant-numeric: oldstyle-nums;
}

.mobile-topbar {
display: none;
}
Expand Down Expand Up @@ -677,7 +673,10 @@ ul.block, .block li {

.out-of-band {
flex-grow: 0;
font-size: 1.125rem;
font-size: 1.25rem;
align-items: center;
display: flex;
gap: 0.25em;
}

.docblock code, .docblock-short code,
Expand Down Expand Up @@ -725,7 +724,7 @@ div.where {
nav.sub {
flex-grow: 1;
flex-flow: row nowrap;
margin: 4px 0 25px 0;
margin: 4px 0 16px 0;
display: flex;
align-items: center;
}
Expand Down Expand Up @@ -1129,6 +1128,8 @@ so that we can apply CSS-filters to change the arrow color in themes */
.since {
font-weight: normal;
font-size: initial;
/* align with the word "source" in all lowercase */
font-variant-numeric: oldstyle-nums;
}

.rightside {
Expand Down Expand Up @@ -1471,11 +1472,11 @@ a.tooltip:hover::after {
opacity: 1;
}

#settings-menu, #help-button {
#settings-menu, #help-button, button#toggle-all-docs {
margin-left: 4px;
display: flex;
}
#settings-menu > a, #help-button > a {
#settings-menu > a, #help-button > a, button#toggle-all-docs {
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -1487,13 +1488,23 @@ a.tooltip:hover::after {
as an icon, it's okay to specify their sizes in pixels. */
font-size: 20px;
width: 33px;
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-webkit-appearance: none;
opacity: 1;
}

#settings-menu > a:hover, #settings-menu > a:focus,
#help-button > a:hover, #help-button > a:focus {
#settings-menu > a:hover, #settings-menu > a:focus-visible,
#help-button > a:hover, #help-button > a:focus-visible,
button#toggle-all-docs:hover, button#toggle-all-docs:focus-visible {
border-color: var(--settings-button-border-focus);
}

button#toggle-all-docs {
height: 34px;
margin-left: 16px;
float: right;
}

#copy-path {
color: var(--copy-path-button-color);
background: var(--main-background-color);
Expand Down Expand Up @@ -1593,16 +1604,15 @@ details.toggle > summary.hideme > span {

details.toggle > summary::before {
/* toggle plus */
background: url('data:image/svg+xml,<svg width="17" height="17" \
shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>') no-repeat top left;
background: url('data:image/svg+xml,<svg width="15" height="15" stroke="black" fill="none" \
xmlns="http://www.w3.org/2000/svg"><path d="M3 6.5h7M6.5 10.5V2.5"/></svg>') no-repeat top left;
content: "";
cursor: pointer;
width: 16px;
height: 16px;
width: 13px;
height: 13px;
border: solid 1px var(--toggle-border);
display: inline-block;
vertical-align: middle;
opacity: .5;
filter: var(--toggle-filter);
}

Expand All @@ -1626,9 +1636,9 @@ details.toggle > summary.hideme::after {
content: "";
}

details.toggle > summary:focus::before,
details.toggle > summary:focus-visible::before,
details.toggle > summary:hover::before {
opacity: 1;
border: solid 1px var(--toggle-border-hover);
}

details.toggle > summary:focus-visible::before {
Expand Down Expand Up @@ -1674,9 +1684,8 @@ details.toggle[open] > summary.hideme > span {

details.toggle[open] > summary::before {
/* toggle minus */
background: url('data:image/svg+xml,<svg width="17" height="17" \
shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>') no-repeat top left;
background: url('data:image/svg+xml,<svg width="15" height="15" stroke="black" fill="none" \
xmlns="http://www.w3.org/2000/svg"><path d="M3 6.5h7"/></svg>') no-repeat top left;
}

details.toggle[open] > summary::after {
Expand Down Expand Up @@ -1734,10 +1743,15 @@ in src-script.js
flex-direction: column;
}

button#toggle-all-docs {
margin-top: -8px;
}

.out-of-band {
text-align: left;
margin-left: initial;
padding: initial;
display: block;
}

.out-of-band .since::before {
Expand Down Expand Up @@ -2193,6 +2207,8 @@ in src-script.js
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: none;
--toggle-border: #ccc;
--toggle-border-hover: #616161;
--search-input-focused-border-color: #66afe9;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
Expand Down Expand Up @@ -2295,6 +2311,8 @@ in src-script.js
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--toggle-border: grey;
--toggle-border-hover: black;
--search-input-focused-border-color: #008dfd;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
Expand Down Expand Up @@ -2377,6 +2395,14 @@ in src-script.js
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
}

/* Other themes give the toggle-all-docs button the same color as the rest of
the toolbar buttons. Dark theme makes it less bright and noticeable. */
:root[data-theme="dark"] button#toggle-all-docs {
background-color: transparent;
border-color: grey;
color: #ddd;
}
/* End theme: dark */

/* Begin theme: ayu */
Expand Down Expand Up @@ -2404,6 +2430,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--toggle-border: grey;
--toggle-border-hover: black;
--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
--copy-path-button-color: #fff;
--copy-path-img-filter: invert(70%);
Expand Down
4 changes: 2 additions & 2 deletions src/librustdoc/html/static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -879,7 +879,7 @@ function preLoadCss(cssUrl) {
}
});
innerToggle.title = "collapse all docs";
innerToggle.children[0].innerText = "\u2212"; // "\u2212" is "−" minus sign
innerToggle.innerText = "\u2212"; // "\u2212" is "−" minus sign
}

function collapseAllDocs() {
Expand All @@ -894,7 +894,7 @@ function preLoadCss(cssUrl) {
}
});
innerToggle.title = "expand all docs";
innerToggle.children[0].innerText = "+";
innerToggle.innerText = "+";
}

function toggleAllDocs() {
Expand Down
4 changes: 2 additions & 2 deletions src/librustdoc/html/templates/print_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ <h1>
{% endif %}
{% match src_href %}
{% when Some with (href) %}
<a class="src" href="{{href|safe}}">source</a> · {#+ #}
<a class="src" href="{{href|safe}}">source</a> {#+ #}
{% else %}
{% endmatch %}
<button id="toggle-all-docs" title="collapse all docs"> {# #}
[<span>&#x2212;</span>] {# #}
&#x2212; {# #}
</button> {# #}
</span> {# #}
</div> {# #}
16 changes: 14 additions & 2 deletions tests/rustdoc-gui/anchors.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@

define-function: (
"check-colors",
(theme, main_color, title_color, main_heading_color, main_heading_type_color, src_link_color, sidebar_link_color),
(
theme,
main_color,
title_color,
main_heading_color,
main_heading_type_color,
src_link_color,
sidebar_link_color,
button_color,
),
block {
go-to: "file://" + |DOC_PATH| + "/staged_api/struct.Foo.html"
// This is needed to ensure that the text color is computed.
Expand All @@ -13,7 +22,7 @@ define-function: (
// We reload the page so the local storage settings are being used.
reload:

assert-css: ("#toggle-all-docs", {"color": |main_color|})
assert-css: ("#toggle-all-docs", {"color": |button_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: (
Expand Down Expand Up @@ -81,6 +90,7 @@ call-function: (
"main_heading_type_color": "#ffa0a5",
"src_link_color": "#39afd7",
"sidebar_link_color": "#53b1db",
"button_color": "#fff",
},
)
call-function: (
Expand All @@ -93,6 +103,7 @@ call-function: (
"main_heading_type_color": "#2dbfb8",
"src_link_color": "#d2991d",
"sidebar_link_color": "#fdbf35",
"button_color": "#ddd",
},
)
call-function: (
Expand All @@ -105,5 +116,6 @@ call-function: (
"main_heading_type_color": "#ad378a",
"src_link_color": "#3873ad",
"sidebar_link_color": "#356da4",
"button_color": "black",
},
)
4 changes: 2 additions & 2 deletions tests/rustdoc-gui/scrape-examples-layout.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,5 +44,5 @@ assert-position: (".scraped-example .code-wrapper .prev", {"y": 226 + |offset_y|

// Then with mobile
set-window-size: (600, 600)
assert-position: (".scraped-example .code-wrapper", {"y": 308})
assert-position: (".scraped-example .code-wrapper .prev", {"y": 308 + |offset_y|})
assert-position: (".scraped-example .code-wrapper", {"y": 311})
assert-position: (".scraped-example .code-wrapper .prev", {"y": 311 + |offset_y|})
10 changes: 5 additions & 5 deletions tests/rustdoc-gui/shortcuts.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ press-key: "Escape"
assert-css: ("#help-button .popover", {"display": "none"})
// Checking doc collapse and expand.
// It should be displaying a "-":
assert-text: ("#toggle-all-docs", "[−]")
assert-text: ("#toggle-all-docs", "−")
press-key: "-"
wait-for-text: ("#toggle-all-docs", "[+]")
wait-for-text: ("#toggle-all-docs", "+")
assert-attribute: ("#toggle-all-docs", {"class": "will-expand"})
// Pressing it again shouldn't do anything.
press-key: "-"
assert-text: ("#toggle-all-docs", "[+]")
assert-text: ("#toggle-all-docs", "+")
assert-attribute: ("#toggle-all-docs", {"class": "will-expand"})
// Expanding now.
press-key: "+"
wait-for-text: ("#toggle-all-docs", "[−]")
wait-for-text: ("#toggle-all-docs", "−")
assert-attribute: ("#toggle-all-docs", {"class": ""})
// Pressing it again shouldn't do anything.
press-key: "+"
assert-text: ("#toggle-all-docs", "[−]")
assert-text: ("#toggle-all-docs", "−")
assert-attribute: ("#toggle-all-docs", {"class": ""})
4 changes: 2 additions & 2 deletions tests/rustdoc-gui/sidebar.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,10 +163,10 @@ assert-css: ("#modules", {"background-color": "#fdffd3"})

// Finally, assert that the `[+]/[−]` toggle doesn't affect sidebar width.
click: "#toggle-all-docs"
assert-text: ("#toggle-all-docs", "[+]")
assert-text: ("#toggle-all-docs", "+")
assert-property: (".sidebar", {"clientWidth": "200"})
click: "#toggle-all-docs"
assert-text: ("#toggle-all-docs", "[−]")
assert-text: ("#toggle-all-docs", "−")
assert-property: (".sidebar", {"clientWidth": "200"})

// Checks that all.html and index.html have their sidebar link in the same place.
Expand Down
Loading
Loading