From 0f3ae6218ef1d9e9b14bf983b463785b14abc205 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 10 Nov 2022 16:51:14 -0700 Subject: [PATCH 1/2] rustdoc: use checkbox instead of switch for settings toggles The switch 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 --- src/librustdoc/html/static/css/settings.css | 57 +++++++------------ src/librustdoc/html/static/css/themes/ayu.css | 10 ---- .../html/static/css/themes/dark.css | 10 ---- .../html/static/css/themes/light.css | 9 --- src/librustdoc/html/static/js/settings.js | 4 +- .../docblock-code-block-line-number.goml | 4 +- src/test/rustdoc-gui/settings.goml | 9 +-- 7 files changed, 25 insertions(+), 78 deletions(-) diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index 83939f63b4e85..1f6fb961e918d 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,\ + \ + '); +} + +.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 129ef6e10e7e7..63c0b78b2371c 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -75,16 +75,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 index 7cd2d7817d59d..77f888330a42a 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -70,16 +70,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 index c41ec24884127..13ad38cf6e631 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -67,15 +67,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 index 141563bd46a19..95cc265f1bdf6 100644 --- 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 += ``; } diff --git a/src/test/rustdoc-gui/docblock-code-block-line-number.goml b/src/test/rustdoc-gui/docblock-code-block-line-number.goml index 911ee34be94e5..fec21ad35c3eb 100644 --- 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 index f258f4d2a838e..a800cfc82d4c9 100644 --- a/src/test/rustdoc-gui/settings.goml +++ b/src/test/rustdoc-gui/settings.goml @@ -118,7 +118,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 +141,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 +159,4 @@ reload: size: (300, 1000) click: "#settings-menu" wait-for: "#settings" -assert-css: ("#settings .slider", {"width": "45px"}, ALL) +assert-css: (".setting-line", {"position": "relative"}) From 269dad27f23e85359afee82f8fbd144fec616dc9 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 11 Nov 2022 09:57:58 -0700 Subject: [PATCH 2/2] rustdoc: add test cases for checkbox toggles --- src/test/rustdoc-gui/settings.goml | 83 ++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 4 deletions(-) diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml index a800cfc82d4c9..7e7971d47fbca 100644 --- 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.