rustdoc: redesign [+]/[−] controls

This is a continuation of #107658 and #59851, making the toggles
consistent with other buttons, instead of looking like syntax.

The tactics to improve the look of these controls:

* When the toggle is expanded, the minus sign remains as dark as
  before, but the border is lighter. The plus sign has a border
  that's the same color as the label (black, on the default theme).
  This makes expansion buttons more prominent, easier to tell
  apart from collapse buttons.
* The plus sign is slightly taller than wide, also to make
  it easier to tell apart from the minus sign.
  * The use of crispEdges has to get a bit strategic to make this
    come out right. I've tested it on Firefox, Safari, and
    Chromium, but it's a bit hard to be sure it works right on
    all setups.
  * Does anybody know some trick to do crispEdges on only the
    X axis, while still allowing antialiasing on the Y?
* The "toggle all" button is modeled after the Help and Settings
  buttons, with a matching border, width, and +/− label.

Author: notriddle

src/librustdoc/html/static/css/rustdoc.css

@@ -138,7 +138,7 @@ h1, h2, h3, h4 {
 	margin-top: 0;
 }
 .main-heading h1 {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0;
 	flex-grow: 1;
 	/* We use overflow-wrap: break-word for Safari, which doesn't recognize
@@ -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;
@@ -666,7 +657,7 @@ pre, .rustdoc.src .example-wrap {
 nav.sub {
 	flex-grow: 1;
 	flex-flow: row nowrap;
-	margin: 4px 0 25px 0;
+	margin: 4px 0 16px 0;
 	display: flex;
 	align-items: center;
 }
@@ -1326,11 +1317,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;
@@ -1342,13 +1333,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 {
+#help-button > a:hover, #help-button > a:focus,
+button#toggle-all-docs:hover, button#toggle-all-docs:focus {
 	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);
@@ -1448,9 +1449,9 @@ 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="17" height="17" stroke="black" fill="none" \
+xmlns="http://www.w3.org/2000/svg"><path d="M2.5 2.5h12v12h-12v-12.5" \
+shape-rendering="crispEdges"/><path d="M6 8.5h5M8.5 11.5V5.5"/></svg>') no-repeat top left;
 	content: "";
 	cursor: pointer;
 	width: 16px;
@@ -1481,7 +1482,7 @@ details.toggle > summary.hideme::after {
 	content: "";
 }
 
-details.toggle > summary:focus::before,
+details.toggle > summary:focus-visible::before,
 details.toggle > summary:hover::before {
 	opacity: 1;
 }
@@ -1531,7 +1532,7 @@ 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;
+d="M2.5 2.5h12v12h-12v-12.5" stroke="%23999"/><path d="M6 8.5h5"/></svg>') no-repeat top left;
 }
 
 details.toggle[open] > summary::after {
@@ -1582,6 +1583,10 @@ in src-script.js
 		flex-direction: column;
 	}
 
+	button#toggle-all-docs {
+		margin-top: -8px;
+	}
+
 	.out-of-band {
 		text-align: left;
 		margin-left: initial;

src/librustdoc/html/static/js/main.js

@@ -635,7 +635,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() {
@@ -650,7 +650,7 @@ function preLoadCss(cssUrl) {
             }
         });
         innerToggle.title = "expand all docs";
-        innerToggle.children[0].innerText = "+";
+        innerToggle.innerText = "+";
     }
 
     function toggleAllDocs() {

src/librustdoc/html/templates/print_item.html

@@ -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> {# #}

tests/rustdoc-gui/anchors.goml

@@ -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.
@@ -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: (
@@ -81,6 +90,7 @@ call-function: (
         "main_heading_type_color": "#ffa0a5",
         "src_link_color": "#39afd7",
         "sidebar_link_color": "#53b1db",
+        "button_color": "#fff",
     },
 )
 call-function: (
@@ -93,6 +103,7 @@ call-function: (
         "main_heading_type_color": "#2dbfb8",
         "src_link_color": "#d2991d",
         "sidebar_link_color": "#fdbf35",
+        "button_color": "#000",
     },
 )
 call-function: (
@@ -105,5 +116,6 @@ call-function: (
         "main_heading_type_color": "#ad378a",
         "src_link_color": "#3873ad",
         "sidebar_link_color": "#356da4",
+        "button_color": "black",
     },
 )

tests/rustdoc-gui/shortcuts.goml

@@ -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": ""})

tests/rustdoc-gui/sidebar.goml

@@ -144,10 +144,10 @@ assert-css: ("#modules", {"background-color": "rgb(253, 255, 211)"})
 
 // 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.

tests/rustdoc-gui/toggle-docs.goml

@@ -1,25 +1,25 @@
 // Checks that the documentation toggles have the correct position, style and work as expected.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
 assert-attribute: ("#main-content > details.top-doc", {"open": ""})
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 click: "#toggle-all-docs"
 wait-for: 50
 // This is now collapsed so there shouldn't be the "open" attribute on details.
 assert-attribute-false: ("#main-content > details.top-doc", {"open": ""})
-assert-text: ("#toggle-all-docs", "[+]")
+assert-text: ("#toggle-all-docs", "+")
 assert-css: (
     "#main-content > details.top-doc > summary",
     {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
 )
 click: "#toggle-all-docs"
 // Not collapsed anymore so the "open" attribute should be back.
 wait-for-attribute: ("#main-content > details.top-doc", {"open": ""})
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 
 // Check that it works on non-module pages as well.
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
 // We first check that everything is visible.
-assert-text: ("#toggle-all-docs", "[−]")
+assert-text: ("#toggle-all-docs", "−")
 assert-attribute: ("#implementations-list details.toggle", {"open": ""}, ALL)
 assert-attribute: ("#trait-implementations-list details.toggle", {"open": ""}, ALL)
 assert-attribute-false: (
@@ -30,7 +30,7 @@ assert-attribute-false: (
 
 // We collapse them all.
 click: "#toggle-all-docs"
-wait-for-text: ("#toggle-all-docs", "[+]")
+wait-for-text: ("#toggle-all-docs", "+")
 // We check that all <details> are collapsed (except for the impl block ones).
 assert-attribute-false: ("details.toggle:not(.implementors-toggle)", {"open": ""}, ALL)
 assert-attribute: ("#implementations-list > details.implementors-toggle", {"open": ""})
@@ -42,7 +42,7 @@ assert-attribute-false: (
 )
 // We open them all again.
 click: "#toggle-all-docs"
-wait-for-text: ("#toggle-all-docs", "[−]")
+wait-for-text: ("#toggle-all-docs", "−")
 assert-attribute: ("details.toggle", {"open": ""}, ALL)
 
 // Checking the toggles style.

tests/rustdoc-gui/type-declation-overflow.goml

@@ -47,9 +47,10 @@ assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"})
 // On desktop, they wrap when too big.
 set-window-size: (1100, 800)
 go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
-compare-elements-position-false: (".main-heading h1", ".main-heading .out-of-band", ("y"))
+store-position: (".main-heading .out-of-band", {"y": out_of_band_long_y})
 go-to: "file://" + |DOC_PATH| + "/lib2/index.html"
-compare-elements-position: (".main-heading h1", ".main-heading .out-of-band", ("y"))
+store-position: (".main-heading .out-of-band", {"y": out_of_band_lib2_y})
+assert: |out_of_band_long_y| > |out_of_band_lib2_y|
 // make sure there is a gap between them
 compare-elements-position-near-false: (".main-heading h1", ".main-heading .out-of-band", {"x": 550})
 

tests/rustdoc/source-version-separator.rs

@@ -3,7 +3,7 @@
 #![feature(staged_api)]
 
 // @has foo/trait.Bar.html
-// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source · '
+// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source'
 #[stable(feature = "bar", since = "1.0")]
 pub trait Bar {
     // @has - '//*[@id="tymethod.foo"]/*[@class="rightside"]' '3.0 · source'
@@ -14,7 +14,7 @@ pub trait Bar {
 // @has - '//div[@id="implementors-list"]//*[@class="rightside"]' '4.0 · source'
 
 // @has foo/struct.Foo.html
-// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source · '
+// @has - '//div[@class="main-heading"]/*[@class="out-of-band"]' '1.0 · source'
 #[stable(feature = "baz", since = "1.0")]
 pub struct Foo;