Rollup merge of #97317 - GuillaumeGomez:gui-settings-text-click, r=jsha

Allow to click on setting text

You can test it [here](https://rustdoc.crud.net/imperio/gui-settings-text-click/doc/foo/index.html).

This PR allows to click on the text alongside the toggle to change it.

r? `@jsha`

src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version

@@ -1 +1 @@
-0.9.3
+0.9.5

src/librustdoc/html/static/css/rustdoc.css

@@ -1415,30 +1415,6 @@ pre.rust {
 #settings-menu.rotate > a img {
 	animation: rotating 2s linear infinite;
 }
-#settings-menu #settings {
-	position: absolute;
-	right: 0;
-	z-index: 1;
-	display: block;
-	margin-top: 7px;
-	border-radius: 3px;
-	border: 1px solid;
-}
-#settings-menu #settings .setting-line {
-	margin: 0.6em;
-}
-/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
-#settings-menu #settings::before {
-	content: '';
-	position: absolute;
-	right: 11px;
-	border: solid;
-	border-width: 1px 1px 0 0;
-	display: inline-block;
-	padding: 4px;
-	transform: rotate(-45deg);
-	top: -5px;
-}
 
 #help-button {
 	font-family: "Fira Sans", Arial, sans-serif;

src/librustdoc/html/static/css/settings.css

@@ -46,9 +46,12 @@
 .toggle {
 	position: relative;
 	display: inline-block;
-	width: 45px;
+	width: 100%;
 	height: 27px;
 	margin-right: 20px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
 }
 
 .toggle input {
@@ -57,12 +60,12 @@
 }
 
 .slider {
-	position: absolute;
+	position: relative;
+	width: 45px;
+	display: block;
+	height: 28px;
+	margin-right: 20px;
 	cursor: pointer;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	background-color: #ccc;
 	transition: .3s;
 }
@@ -95,3 +98,28 @@ input:checked + .slider:before {
 	width: 100%;
 	display: block;
 }
+
+div#settings {
+	position: absolute;
+	right: 0;
+	z-index: 1;
+	display: block;
+	margin-top: 7px;
+	border-radius: 3px;
+	border: 1px solid;
+}
+#settings .setting-line {
+	margin: 1.2em 0.6em;
+}
+/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
+div#settings::before {
+	content: '';
+	position: absolute;
+	right: 11px;
+	border: solid;
+	border-width: 1px 1px 0 0;
+	display: inline-block;
+	padding: 4px;
+	transform: rotate(-45deg);
+	top: -5px;
+}

src/librustdoc/html/static/js/settings.js

@@ -130,12 +130,11 @@
             } else {
                 // This is a toggle.
                 const checked = setting["default"] === true ? " checked" : "";
-                output += `
+                output += `<label class="toggle">\
-                    <label class="toggle">
+                        <input type="checkbox" id="${js_data_name}"${checked}>\
-                        <input type="checkbox" id="${js_data_name}"${checked}>
+                        <span class="slider"></span>\
-                        <span class="slider"></span>
+                        <span class="label">${setting_name}</span>\
-                    </label>
+                    </label>`;
-                    <div>${setting_name}</div>`;
             }
             output += "</div>";
         }

src/test/rustdoc-gui/settings.goml

@@ -34,7 +34,7 @@ wait-for: "#settings"
 
 // We check that the "Use system theme" is disabled.
 assert-property: ("#use-system-theme", {"checked": "false"})
-assert: "//*[@class='setting-line']/*[text()='Use system theme']"
+assert: "//*[@class='setting-line']//span[text()='Use system theme']"
 // Meaning that only the "theme" menu is showing up.
 assert: ".setting-line:not(.hidden) #theme"
 assert: ".setting-line.hidden #preferred-dark-theme"
@@ -55,7 +55,13 @@ 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.
+// To test it, we use the "Disable keyboard shortcuts".
+local-storage: {"rustdoc-disable-shortcuts": "false"}
+click: ".setting-line:last-child .toggle .label"
+assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
+
 // 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", {"width": "45px", "margin-right": "20px"})
+assert-css: (".setting-line .toggle .slider", {"width": "45px", "margin-right": "20px"})

src/tools/rustdoc-gui/tester.js

@@ -19,6 +19,7 @@ function showHelp() {
     console.log("  --help                     : show this message then quit");
     console.log("  --tests-folder [PATH]      : location of the .GOML tests folder");
     console.log("  --jobs [NUMBER]            : number of threads to run tests on");
+    console.log("  --executable-path [PATH]   : path of the browser's executable to be used");
 }
 
 function isNumeric(s) {
@@ -34,6 +35,8 @@ function parseOptions(args) {
         "show_text": false,
         "no_headless": false,
         "jobs": -1,
+        "executable_path": null,
+        "no_sandbox": false,
     };
     var correspondances = {
         "--doc-folder": "doc_folder",
@@ -41,13 +44,16 @@ function parseOptions(args) {
         "--debug": "debug",
         "--show-text": "show_text",
         "--no-headless": "no_headless",
+        "--executable-path": "executable_path",
+        "--no-sandbox": "no_sandbox",
     };
 
     for (var i = 0; i < args.length; ++i) {
         if (args[i] === "--doc-folder"
             || args[i] === "--tests-folder"
             || args[i] === "--file"
-            || args[i] === "--jobs") {
+            || args[i] === "--jobs"
+            || args[i] === "--executable-path") {
             i += 1;
             if (i >= args.length) {
                 console.log("Missing argument after `" + args[i - 1] + "` option.");
@@ -68,6 +74,9 @@ function parseOptions(args) {
         } else if (args[i] === "--help") {
             showHelp();
             process.exit(0);
+        } else if (args[i] === "--no-sandbox") {
+            console.log("`--no-sandbox` is being used. Be very careful!");
+            opts[correspondances[args[i]]] = true;
         } else if (correspondances[args[i]]) {
             opts[correspondances[args[i]]] = true;
         } else {
@@ -147,10 +156,17 @@ async function main(argv) {
         if (opts["show_text"]) {
             args.push("--show-text");
         }
+        if (opts["no_sandbox"]) {
+            args.push("--no-sandbox");
+        }
         if (opts["no_headless"]) {
             args.push("--no-headless");
             headless = false;
         }
+        if (opts["executable_path"] !== null) {
+            args.push("--executable-path");
+            args.push(opts["executable_path"]);
+        }
         options.parseArguments(args);
     } catch (error) {
         console.error(`invalid argument: ${error}`);