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>