Skip to content

rustdoc: simplify settings popover DOM, CSS, JS #107232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 25, 2023
Merged

rustdoc: simplify settings popover DOM, CSS, JS #107232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5dd87c5
rustdoc: simplify settings popover DOM
notriddle Jan 23, 2023
1c41b4d
rustdoc: remove dead settings JS for obsolete select-wrapper
notriddle Jan 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 12 additions & 16 deletions src/librustdoc/html/static/css/settings.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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"