1 files changed, 102 insertions, 0 deletions
diff --git a/client/fragments/settings/experiments.html b/client/fragments/settings/experiments.html
new file mode 100644
index 0000000..cb344ed
--- /dev/null
+++ b/client/fragments/settings/experiments.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Experiments</title>
+    <link rel="icon" href="../../assets/icons2/experiments.svg">
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+    <main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+        <h4 style="margin-top: 0; margin-bottom: 10px;">Developer</h4>
+
+        <p><b style="color: red;">WARNING: EXPERIMENTAL FEATURES AHEAD!</b> By enabling these features, you could lose browser data or compromise your security or privacy. If you are an enterprise admin you should not be using these flags in production.</p>
+        <p>The browser will need to reload to apply the new features. This will destroy all children, meaning you might lose unsaved data. For your safety, close all the open tabs before continuing.</p>
+
+        <table style="border-collapse: collapse; width: 100%;">
+            <tbody id="list"></tbody>
+        </table>
+    </main>
+
+    <script>
+        window.list = [
+            {
+                name: "forcespyglass",
+                treatments: {
+                    "false": "Not Eligible",
+                    "true": "Treatment 1: Enabled"
+                }
+            },
+            {
+                name: "removelegacyapis",
+                treatments: {
+                    "false": "Not Eligible",
+                    "true": "Treatment 1: Enabled"
+                }
+            },
+            {
+                name: "experiments",
+                treatments: {
+                    "false": "Not Eligible",
+                    "true": "Treatment 1: Enabled"
+                }
+            },
+            {
+                name: "m3uiredesign",
+                treatments: {
+                    "false": "Not Eligible",
+                    "true": "Treatment 1: Enabled"
+                }
+            },
+            {
+                name: "m2spyglassdialogbehavior",
+                treatments: {
+                    "false": "Treatment 1: Display Spyglass dialog in M2",
+                    "true": "Treatment 2: Hide Spyglass dialog in M2"
+                }
+            },
+            {
+                name: "experimentschangelog",
+                treatments: {
+                    "false": "Not Eligible",
+                    "true": "Treatment 1: Enabled"
+                }
+            }
+        ];
+
+        document.getElementById("list").innerHTML = window.list.sort((a, b) => {
+            return a.name.localeCompare(b.name);
+        }).map(i => `
+        <tr style="border: 1px solid black;">
+            <td style="padding: 5px;">
+                <b style="${Object.entries(i.treatments).find((j, k) => localStorage.getItem("cr3-trial-" + i.name) === j[0] && k !== 0) ? 'color: blue;' : ''}">${i.name}</b>
+            </td>
+            <td style="text-align: right; padding: 5px;">
+                <select class="flag-select" id="${i.name}" onchange="updateFlags();" disabled>
+                    ${Object.entries(i.treatments).map(j => `
+                    <option value="${j[0]}" ${localStorage.getItem("cr3-trial-" + i.name) === j[0] ? "selected" : ""}>${j[1]}</option>
+                    `).join("")}
+                </select>
+            </td>
+        </tr>
+        `).join("");
+
+        Array.from(document.getElementsByClassName("flag-select")).map(i => i.disabled = false);
+
+        function updateFlags() {
+            for (let item of window.list) {
+                localStorage.setItem("cr3-trial-" + item.name, document.getElementById(item.name).value);
+            }
+
+            localStorage.setItem("experiments-temp", "true");
+            window.parent.chatroom.reloadHost();
+        }
+    </script>
+</body>
+</html>