servoshell: Support runtime preference manipulation (#38159)

These changes add a custom servo:preferences URL that allows modifying
selected preferences at runtime. The goal of this work is to make it
easy to test pages while toggling experimental web platform features,
and support quickly changing the User-Agent header.

Testing: Manually verified that spacex.com loads correctly after
changing the user agent, and that https://polygon.io/ displays grid
elements correctly and no console errors with the experimental prefs
enabled.
Fixes: #35862

<img width="1136" height="880" alt="Screenshot 2025-07-18 at 1 06 23 AM"
src="https://github.com/user-attachments/assets/2d27c321-6ca0-43c3-a347-7bc4b55272df"
/>

---------

Signed-off-by: Josh Matthews <josh@joshmatthews.net>
This commit is contained in:
Josh Matthews 2025-08-30 12:51:58 -04:00 committed by GitHub
parent c97ec1b2fb
commit 6565d982bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 308 additions and 25 deletions

View file

@ -0,0 +1,123 @@
<!doctype html>
<html>
<head>
<title>servo:preferences</title>
<style>
ul {
list-style: none;
}
li {
padding-bottom: 1em;
}
select {
font-size: 10pt;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h2>Preferences</h2>
<div id="content" class="hidden">
<ul>
<li>
<input type="checkbox" class="bool-preference" id="experimental">
<label for="experimental">Experimental web platform features</label>
</li>
<li>
<input type="checkbox" class="bool-preference" id="more-experimental">
<label for="more-experimental">Even more experimental web platform features</label>
</li>
<li>
<input type="checkbox" class="bool-preference" id="http-cache">
<label for="http-cache">Disable HTTP cache</label>
</li>
<li>
<div>
<label style="vertical-align: baseline" for="user-agent">User agent:</label>
</div>
<div>
<input class="string-preference" id="user-agent" size=110>
<select onchange="updateUserAgent(event)">
<option value="servo" selected>Servo</option>
<option value="firefox">Firefox</option>
<option value="chrome">Chrome</option>
</select>
</div>
</ul>
</div>
<div id="loading">Loading...</div>
<script>
const prefs = {
"experimental": [],
"http-cache": ["network_http_cache_disabled"],
"more-experimental": ["dom_abort_controller_enabled"],
"user-agent": ["user_agent"],
};
const userAgents = {
"firefox": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0",
"chrome": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36",
"servo": "",
};
function initialize() {
document.getElementById("loading").classList.toggle("hidden");
document.getElementById("content").classList.toggle("hidden");
const boolPrefInputs = document.getElementsByClassName("bool-preference");
for (const pref of boolPrefInputs) {
const relatedPrefs = prefs[pref.id];
let prefValue = true;
for (const boolPref of relatedPrefs) {
prefValue &= navigator.servo.getBoolPreference(boolPref);
}
pref.checked = prefValue;
pref.onchange = (ev) => {
const relatedPrefs = prefs[ev.target.id];
for (const boolPref of relatedPrefs) {
navigator.servo.setBoolPreference(boolPref, ev.target.checked);
}
};
}
const stringPrefInputs = document.getElementsByClassName("string-preference");
for (const pref of stringPrefInputs) {
const prefValue = navigator.servo.getStringPreference(prefs[pref.id][0]);
pref.value = prefValue;
pref.oninput = (ev) => updateStringPreference(ev.target);
}
}
function updateStringPreference(input) {
const relatedPref = prefs[input.id][0];
navigator.servo.setStringPreference(relatedPref, input.value);
}
function updateUserAgent(event) {
const input = document.getElementById("user-agent");
const selection = event.target.value
input.value = userAgents[selection];
updateStringPreference(input);
}
function initExperimentalPrefs() {
return fetch("servo:experimental-preferences")
.then(response => response.json())
.then(prefList => prefs["experimental"] = prefList)
}
function initDefaultUserAgent() {
return fetch("servo:default-user-agent")
.then(response => response.json())
.then(userAgent => userAgents["servo"] = userAgent);
}
Promise.all([
initExperimentalPrefs(),
initDefaultUserAgent(),
]).then(initialize);
</script>
</body>
</html>