diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index 4e9803fe236..c28cefebc8b 100644 --- a/src/librustdoc/html/static/css/settings.css +++ b/src/librustdoc/html/static/css/settings.css @@ -3,8 +3,7 @@ position: relative; } -.setting-line .radio-line input, -.setting-line .settings-toggle input { +.setting-radio input, .setting-check input { margin-right: 0.3em; height: 1.2rem; width: 1.2rem; @@ -14,21 +13,20 @@ -webkit-appearance: none; cursor: pointer; } -.setting-line .radio-line input { +.setting-radio input { border-radius: 50%; } -.setting-line .settings-toggle input:checked { +.setting-check input:checked { content: url('data:image/svg+xml,\ \ '); } -.setting-line .radio-line input + span, -.setting-line .settings-toggle span { +.setting-radio span, .setting-check span { padding-bottom: 1px; } -.radio-line .choice { +.setting-radio { margin-top: 0.1em; margin-bottom: 0.1em; min-width: 3.8em; @@ -37,11 +35,11 @@ align-items: center; cursor: pointer; } -.radio-line .choice + .choice { +.setting-radio + .setting-radio { margin-left: 0.5em; } -.settings-toggle { +.setting-check { position: relative; width: 100%; margin-right: 20px; @@ -50,23 +48,21 @@ cursor: pointer; } -.setting-line .radio-line input:checked { +.setting-radio input:checked { box-shadow: inset 0 0 0 3px var(--main-background-color); background-color: var(--settings-input-color); } -.setting-line .settings-toggle input:checked { +.setting-check input:checked { background-color: var(--settings-input-color); } -.setting-line .radio-line input:focus, -.setting-line .settings-toggle input:focus { +.setting-radio input:focus, .setting-check 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 { +.setting-radio 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 .settings-toggle input:hover { +.setting-radio input:hover, .setting-check input:hover { border-color: var(--settings-input-color) !important; } diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index 84df1b7d391..a841b4b63ba 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -48,13 +48,13 @@ } function showLightAndDark() { - removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden"); - removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden"); + removeClass(document.getElementById("preferred-light-theme"), "hidden"); + removeClass(document.getElementById("preferred-dark-theme"), "hidden"); } function hideLightAndDark() { - addClass(document.getElementById("preferred-light-theme").parentElement, "hidden"); - addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden"); + addClass(document.getElementById("preferred-light-theme"), "hidden"); + addClass(document.getElementById("preferred-dark-theme"), "hidden"); } function updateLightAndDark() { @@ -80,17 +80,6 @@ toggle.onkeyup = handleKey; toggle.onkeyrelease = handleKey; }); - onEachLazy(settingsElement.getElementsByClassName("select-wrapper"), elem => { - const select = elem.getElementsByTagName("select")[0]; - const settingId = select.id; - const settingValue = getSettingValue(settingId); - if (settingValue !== null) { - select.value = settingValue; - } - select.onchange = function() { - changeSetting(this.id, this.value); - }; - }); onEachLazy(settingsElement.querySelectorAll("input[type=\"radio\"]"), elem => { const settingId = elem.name; let settingValue = getSettingValue(settingId); @@ -127,38 +116,40 @@ let output = ""; for (const setting of settings) { - output += "
"; const js_data_name = setting["js_name"]; const setting_name = setting["name"]; if (setting["options"] !== undefined) { // This is a select setting. output += `\ -
-
${setting_name}
-
`; +
+
${setting_name}
+
`; onEach(setting["options"], option => { const checked = option === setting["default"] ? " checked" : ""; const full = `${js_data_name}-${option.replace(/ /g,"-")}`; output += `\ -`; + `; }); - output += "
"; + output += `\ +
+
`; } else { // This is a checkbox toggle. const checked = setting["default"] === true ? " checked" : ""; output += `\ -`; +
\ + \ +
`; } - output += "
"; } return output; } diff --git a/tests/rustdoc-gui/mobile.goml b/tests/rustdoc-gui/mobile.goml index 895864d8944..3e444cbd6dc 100644 --- a/tests/rustdoc-gui/mobile.goml +++ b/tests/rustdoc-gui/mobile.goml @@ -28,7 +28,7 @@ goto: "file://" + |DOC_PATH| + "/settings.html" size: (400, 600) // Ignored for now https://github.com/rust-lang/rust/issues/93784. // compare-elements-position-near-false: ( -// "#preferred-light-theme .setting-name", -// "#preferred-light-theme .choice", +// "#preferred-light-theme .setting-radio-name", +// "#preferred-light-theme .setting-radio", // {"y": 16}, // ) diff --git a/tests/rustdoc-gui/settings.goml b/tests/rustdoc-gui/settings.goml index 419cc5ebac3..a8417288578 100644 --- a/tests/rustdoc-gui/settings.goml +++ b/tests/rustdoc-gui/settings.goml @@ -43,12 +43,12 @@ wait-for: "#settings" // We check that the "Use system theme" is disabled. assert-property: ("#theme-system-preference", {"checked": "false"}) // Meaning that only the "theme" menu is showing up. -assert: ".setting-line:not(.hidden) #theme" -assert: ".setting-line.hidden #preferred-dark-theme" -assert: ".setting-line.hidden #preferred-light-theme" +assert: "#theme.setting-line:not(.hidden)" +assert: "#preferred-dark-theme.setting-line.hidden" +assert: "#preferred-light-theme.setting-line.hidden" // We check that the correct theme is selected. -assert-property: ("#theme .choices #theme-dark", {"checked": "true"}) +assert-property: ("#theme .setting-radio-choices #theme-dark", {"checked": "true"}) // Some style checks... move-cursor-to: "#settings-menu > a" @@ -109,31 +109,31 @@ assert-css: ( "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px", }, ) -// Now we check the setting-name for radio buttons is on a different line than the label. +// Now we check the setting-radio-name is on a different line than the label. compare-elements-position-near: ( - "#theme .setting-name", - "#theme .choices", + "#theme .setting-radio-name", + "#theme .setting-radio-choices", {"x": 1} ) compare-elements-position-near-false: ( - "#theme .setting-name", - "#theme .choices", + "#theme .setting-radio-name", + "#theme .setting-radio-choices", {"y": 1} ) // Now we check that the label positions are all on the same line. compare-elements-position-near: ( - "#theme .choices #theme-light", - "#theme .choices #theme-dark", + "#theme .setting-radio-choices #theme-light", + "#theme .setting-radio-choices #theme-dark", {"y": 1} ) compare-elements-position-near: ( - "#theme .choices #theme-dark", - "#theme .choices #theme-ayu", + "#theme .setting-radio-choices #theme-dark", + "#theme .setting-radio-choices #theme-ayu", {"y": 1} ) compare-elements-position-near: ( - "#theme .choices #theme-ayu", - "#theme .choices #theme-system-preference", + "#theme .setting-radio-choices #theme-ayu", + "#theme .setting-radio-choices #theme-system-preference", {"y": 1} ) @@ -180,17 +180,17 @@ assert-css: ( // We now switch the display. click: "#theme-system-preference" // Wait for the hidden element to show up. -wait-for: ".setting-line:not(.hidden) #preferred-dark-theme" -assert: ".setting-line:not(.hidden) #preferred-light-theme" +wait-for: "#preferred-dark-theme.setting-line:not(.hidden)" +assert: "#preferred-light-theme.setting-line:not(.hidden)" // We check their text as well. -assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme") -assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme") +assert-text: ("#preferred-dark-theme .setting-radio-name", "Preferred dark theme") +assert-text: ("#preferred-light-theme .setting-radio-name", "Preferred light theme") // 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 .settings-toggle .label" +click: ".setting-line:last-child .setting-check span" assert-local-storage: {"rustdoc-disable-shortcuts": "true"} // Make sure that "Disable keyboard shortcuts" actually took effect. @@ -200,7 +200,7 @@ assert-false: "#help-button .popover" wait-for-css: ("#settings-menu .popover", {"display": "block"}) // Now turn keyboard shortcuts back on, and see if they work. -click: ".setting-line:last-child .settings-toggle .label" +click: ".setting-line:last-child .setting-check span" assert-local-storage: {"rustdoc-disable-shortcuts": "false"} press-key: "Escape" press-key: "?" diff --git a/tests/rustdoc-gui/theme-change.goml b/tests/rustdoc-gui/theme-change.goml index cc47f1f450c..31c9d99aa83 100644 --- a/tests/rustdoc-gui/theme-change.goml +++ b/tests/rustdoc-gui/theme-change.goml @@ -43,7 +43,7 @@ assert-local-storage: { "rustdoc-theme": "ayu" } assert-local-storage-false: { "rustdoc-use-system-theme": "true" } click: "#theme-system-preference" -wait-for: ".setting-line:not(.hidden) #preferred-light-theme" +wait-for: "#preferred-light-theme.setting-line:not(.hidden)" assert-local-storage: { "rustdoc-use-system-theme": "true" } // We click on both preferred light and dark themes to be sure that there is a change. click: "#preferred-light-theme-dark" @@ -52,16 +52,16 @@ wait-for-css: ("body", { "background-color": |background_dark| }) reload: // Ensure that the "preferred themes" are still displayed. -wait-for: ".setting-line:not(.hidden) #preferred-light-theme" +wait-for: "#preferred-light-theme.setting-line:not(.hidden)" click: "#theme-light" wait-for-css: ("body", { "background-color": |background_light| }) assert-local-storage: { "rustdoc-theme": "light" } // Ensure it's now hidden again -wait-for: ".setting-line.hidden #preferred-light-theme" +wait-for: "#preferred-light-theme.setting-line.hidden" // And ensure the theme was rightly set. wait-for-css: ("body", { "background-color": |background_light| }) assert-local-storage: { "rustdoc-theme": "light" } reload: wait-for: "#settings" -assert: ".setting-line.hidden #preferred-light-theme" +assert: "#preferred-light-theme.setting-line.hidden"