Rollup merge of rust-lang#104267 - notriddle:notriddle/checkbox, r=GuillaumeGomez

Dylan-DPC · web-flow · commit 28af6cae9c46 · 2022-11-12T12:02:53.000+05:30
rustdoc: use checkbox instead of switch for settings toggles Preview: http://notriddle.com/notriddle-rustdoc-demos/checkbox/test_dingus/index.html ## Before ![image](https://user-images.githubusercontent.com/1593513/201232887-dee27ef5-b091-49bb-be4a-103d2e7983f3.png) ## After ![image](https://user-images.githubusercontent.com/1593513/201232835-95b40b77-6535-4280-8719-44c992a07772.png) ## Description The switch ("slider") is designed to give the application a "physical" feel, but nothing else in here really followed through. They didn't support the "flick" gesture that real iOS switches support, and the radio buttons that were also used in Rustdoc Settings were a more "classic" form element anyway. Also, while switches are the exclusive toggle design on iOS (since [Apple HIG] reserves checkboxes for Mac only), the [Google Material] guidelines say that lists of switches are bad, and you should just use check boxes. [Apple HIG]: https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/toggles [Google Material]: https://m3.material.io/components/checkbox/guidelines#6902f23d-ceba-4b19-ae3b-b78b9b01d185
diff --git 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,17 +73,19 @@ 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. */
 .setting-line .radio-line input:checked:focus {
 	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
@@ -77,16 +77,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--crate-search-hover-border: #e0e0e0;
 }
 
-.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);
-}
-
 h1, h2, h3, h4 {
 	color: white;
 }
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
@@ -72,16 +72,6 @@
 	--crate-search-hover-border: #2196f3;
 }
 
-.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);
-}
-
 .content .item-info::before { color: #ccc; }
 
 body.source .example-wrap pre.rust a {
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
@@ -69,15 +69,6 @@
 	--crate-search-hover-border: #717171;
 }
 
-.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);
-}
 
 .content .item-info::before { color: #ccc; }
 
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
@@ -66,8 +66,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) {
@@ -139,7 +138,6 @@
                 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>`;
             }
diff --git a/src/test/rustdoc-gui/docblock-code-block-line-number.goml b/src/test/rustdoc-gui/docblock-code-block-line-number.goml
@@ -30,10 +30,10 @@ wait-for: "#settings"
 assert-css: ("#settings", {"display": "block"})
 
 // Then, click the toggle button.
-click: "input#line-numbers + .slider"
+click: "input#line-numbers"
 wait-for: 100 // wait-for-false does not exist
 assert-false: "pre.example-line-numbers"
 
 // Finally, turn it on again.
-click: "input#line-numbers + .slider"
+click: "input#line-numbers"
 wait-for: "pre.example-line-numbers"
diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml
@@ -48,7 +48,8 @@ assert: ".setting-line.hidden #preferred-light-theme"
 assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
 
 // Some style checks...
-// First we check the "default" display.
+move-cursor-to: "#settings-menu > a"
+// First we check the "default" display for radio buttons.
 assert-css: (
     "#theme-dark",
     {
@@ -57,7 +58,7 @@ assert-css: (
     },
 )
 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
-// Let's start with the hover.
+// Let's start with the hover for radio buttons.
 move-cursor-to: "#theme-dark"
 assert-css: (
     "#theme-dark",
@@ -69,7 +70,7 @@ assert-css: (
 move-cursor-to: "#theme-light"
 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
 move-cursor-to: "#theme-ayu"
-// Let's now check with the focus.
+// Let's now check with the focus for radio buttons.
 focus: "#theme-dark"
 assert-css: (
     "#theme-dark",
@@ -86,7 +87,7 @@ assert-css: (
         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
     },
 )
-// Now we check we both focus and hover.
+// Now we check we both focus and hover for radio buttons.
 move-cursor-to: "#theme-dark"
 focus: "#theme-dark"
 assert-css: (
@@ -106,6 +107,80 @@ assert-css: (
     },
 )
 
+// First we check the "default" display for toggles.
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(221, 221, 221)",
+    },
+)
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(221, 221, 221)",
+    }
+)
+// Let's start with the hover for toggles.
+move-cursor-to: "#auto-hide-large-items"
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(33, 150, 243)",
+    },
+)
+move-cursor-to: "#use-system-theme"
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(33, 150, 243)",
+    }
+)
+move-cursor-to: "#settings-menu > a"
+// Let's now check with the focus for toggles.
+focus: "#auto-hide-large-items"
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(221, 221, 221)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+focus: "#use-system-theme"
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(221, 221, 221)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+// Now we check we both focus and hover for toggles.
+move-cursor-to: "#auto-hide-large-items"
+focus: "#auto-hide-large-items"
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(33, 150, 243)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+move-cursor-to: "#use-system-theme"
+focus: "#use-system-theme"
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(33, 150, 243)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+
 // We now switch the display.
 click: "#use-system-theme"
 // Wait for the hidden element to show up.
@@ -118,7 +193,7 @@ assert: ".setting-line.hidden #theme"
 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
 
-// We now check that clicking on the "sliders"' text is like clicking on the slider.
+// We now check that clicking on the toggles' text is like clicking on the checkbox.
 // To test it, we use the "Disable keyboard shortcuts".
 local-storage: {"rustdoc-disable-shortcuts": "false"}
 click: ".setting-line:last-child .toggle .label"
@@ -141,10 +216,7 @@ assert-css: ("#settings-menu .popover", {"display": "none"})
 // Now we go to the settings page to check that the CSS is loaded as expected.
 goto: "file://" + |DOC_PATH| + "/settings.html"
 wait-for: "#settings"
-assert-css: (
-    ".setting-line .toggle .slider",
-    {"width": "45px", "margin-right": "20px", "border": "0px none rgb(0, 0, 0)"},
-)
+assert-css: (".setting-line", {"position": "relative"})
 
 assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
 compare-elements-position: (".sub form", "#settings", ("x"))
@@ -162,4 +234,4 @@ reload:
 size: (300, 1000)
 click: "#settings-menu"
 wait-for: "#settings"
-assert-css: ("#settings .slider", {"width": "45px"}, ALL)
+assert-css: (".setting-line", {"position": "relative"})
