[LFC][IFC] Decouple display box construction for bidi and non-bidi content
[WebKit-https.git] / Source / WebInspectorUI / Tools / CodeMirrorModes / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CodeMirrorModes Tool</title>
5
6     <style>:root { color-scheme: light dark; }</style>
7     <link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
8     <link rel="stylesheet" href="../../UserInterface/Views/Variables.css">
9     <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorOverrides.css">
10     <link rel="stylesheet" href="../../UserInterface/Views/SyntaxHighlightingDefaultTheme.css">
11     <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.css">
12     <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorRegexMode.css">
13     <link rel="stylesheet" href="styles.css">
14
15     <script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
16     <script src="../../UserInterface/External/CodeMirror/clike.js"></script>
17     <script src="../../UserInterface/External/CodeMirror/clojure.js"></script>
18     <script src="../../UserInterface/External/CodeMirror/coffeescript.js"></script>
19     <script src="../../UserInterface/External/CodeMirror/css.js"></script>
20     <script src="../../UserInterface/External/CodeMirror/css.js"></script>
21     <script src="../../UserInterface/External/CodeMirror/htmlmixed.js"></script>
22     <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
23     <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
24     <script src="../../UserInterface/External/CodeMirror/jsx.js"></script>
25     <script src="../../UserInterface/External/CodeMirror/livescript.js"></script>
26     <script src="../../UserInterface/External/CodeMirror/sass.js"></script>
27     <script src="../../UserInterface/External/CodeMirror/sql.js"></script>
28     <script src="../../UserInterface/External/CodeMirror/xml.js"></script>
29     <script src="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.js"></script>
30     <script src="../../UserInterface/Views/CodeMirrorRegexMode.js"></script>
31 </head>
32 <body>
33     <h1>Debug CodeMirrorModes</h1>
34
35     <!-- Controls -->
36     <select id="mode">
37         <optgroup label="Web Inspector">
38             <option>text/x-local-override-url</option>
39             <option>text/x-regex</option>
40         </optgroup>
41         <optgroup label="Web">
42             <option>text/css</option>
43             <option>text/html</option>
44             <option>text/javascript</option>
45             <option>text/plain</option>
46             <option>text/xml</option>
47         </optgroup>
48         <optgroup id="extra-group" label="Extra Modes"></optgroup>
49     </select>
50     <button id="save-as-url">Save URL</button>
51     <br><br>
52
53     <!-- Editor -->
54     <textarea id="code" name="code"></textarea>
55
56     <script>
57     const modeSelect = document.getElementById("mode");
58     let cm = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true});
59
60     function update() {
61         let mode = modeSelect.value;
62         cm.setOption("mode", mode);
63
64         let content;
65         switch (mode) {
66         case "text/x-local-override-url":
67             content = "http://example.com/path/?query#frag";
68             break;
69         case "text/x-regex":
70             content = "^\\d{2,3}.\\.*?(abc|[A-Z_])+\\1zzz$";
71             break;
72         default:
73             content = cm.getValue() || "";
74             break;
75         }
76         cm.setValue(content);
77     }
78
79     // Mode picker.
80     modeSelect.addEventListener("change", (event) => { update(); });
81
82     // Fill in additional options dynamically.
83     const optgroup = document.getElementById("extra-group");
84     let knownModes = new Set(Array.from(modeSelect.options).map((x) => x.value));
85     let extraModes = Object.keys(CodeMirror.mimeModes).sort();
86     for (let mode of extraModes) {
87         if (knownModes.has(mode))
88             continue;
89         knownModes.add(mode);
90         optgroup.appendChild(document.createElement("option")).textContent = mode;
91     }
92
93     // Save as URL button.
94     document.getElementById("save-as-url").addEventListener("click", function(event) {
95         let mode = modeSelect.value;
96         let content = cm.getValue();
97         window.location.search = `?mode=${encodeURIComponent(mode)}&content=${encodeURIComponent(content)}`;
98     });
99
100     // Initial content.
101     update();
102
103     // Restore better initial value from query string.
104     (function() {
105         let queryParams = {};
106         if (window.location.search.length > 0) {
107             let searchString = window.location.search.substring(1);
108             let groups = searchString.split("&");
109             for (let i = 0; i < groups.length; ++i) {
110                 let pair = groups[i].split("=");
111                 queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
112             }
113         }
114         if (queryParams.mode) {
115             modeSelect.value = queryParams.mode;
116             cm.setOption("mode", queryParams.mode);
117         }
118         if (queryParams.content)
119             cm.setValue(queryParams.content);
120     })();
121     </script>
122 </body>
123 </html>