Skip to content

Commit

Permalink
Rollup merge of rust-lang#107232 - notriddle:notriddle/settings-choic…
Browse files Browse the repository at this point in the history 
…e, r=GuillaumeGomez

rustdoc: simplify settings popover DOM, CSS, JS

* Change the class names so that they all start with `setting-`. That should make it harder to accidentally use a setting class outside the settings popover, where loading the CSS might accidentally change the styles of something unrelated.
* Get rid of an unnecessary wrapper DIV around the radio button line.
* Simplify CSS selectors by making the DOM easier and more intuitive to target.
* Remove dead settings JS for obsolete select-wrapper
  • Loading branch information
@Dylan-DPC
Dylan-DPC authored Jan 25, 2023
2 parents 139a3c5 + 1c41b4d commit e78fa8a
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 73 deletions.
28 changes: 12 additions & 16 deletions src/librustdoc/html/static/css/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,<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 .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;
Expand All @@ -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;
Expand All @@ -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;
}
51 changes: 21 additions & 30 deletions src/librustdoc/html/static/js/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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);
Expand Down Expand Up @@ -127,38 +116,40 @@
let output = "";

for (const setting of settings) {
output += "<div class=\"setting-line\">";
const js_data_name = setting["js_name"];
const setting_name = setting["name"];

if (setting["options"] !== undefined) {
// This is a select setting.
output += `\
<div class="radio-line" id="${js_data_name}">
<div class="setting-name">${setting_name}</div>
<div class="choices">`;
<div class="setting-line" id="${js_data_name}">
<div class="setting-radio-name">${setting_name}</div>
<div class="setting-radio-choices">`;
onEach(setting["options"], option => {
const checked = option === setting["default"] ? " checked" : "";
const full = `${js_data_name}-${option.replace(/ /g,"-")}`;

output += `\
<label for="${full}" class="choice">
<input type="radio" name="${js_data_name}"
id="${full}" value="${option}"${checked}>
<span>${option}</span>
</label>`;
<label for="${full}" class="setting-radio">
<input type="radio" name="${js_data_name}"
id="${full}" value="${option}"${checked}>
<span>${option}</span>
</label>`;
});
output += "</div></div>";
output += `\
</div>
</div>`;
} else {
// This is a checkbox toggle.
const checked = setting["default"] === true ? " checked" : "";
output += `\
<label class="settings-toggle">\
<input type="checkbox" id="${js_data_name}"${checked}>\
<span class="label">${setting_name}</span>\
</label>`;
<div class="setting-line">\
<label class="setting-check">\
<input type="checkbox" id="${js_data_name}"${checked}>\
<span>${setting_name}</span>\
</label>\
</div>`;
}
output += "</div>";
}
return output;
}
Expand Down
4 changes: 2 additions & 2 deletions tests/rustdoc-gui/mobile.goml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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},
// )
42 changes: 21 additions & 21 deletions tests/rustdoc-gui/settings.goml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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}
)

Expand Down Expand Up @@ -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.
Expand All @@ -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: "?"
Expand Down
8 changes: 4 additions & 4 deletions tests/rustdoc-gui/theme-change.goml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"

0 comments on commit e78fa8a

Please sign in to comment.