Source/WebInspectorUI/Tools/PrettyPrinting/index.html - third_party/webkit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <title>Debug</title>
     <link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
     <link rel="stylesheet" href="codemirror-additions.css">
     <script src="Utilities.js"></script>
     <script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
     <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
     <script src="../../UserInterface/External/CodeMirror/css.js"></script>
     <script src="../../UserInterface/Base/WebInspector.js"></script>
     <script src="../../UserInterface/Views/CodeMirrorAdditions.js"></script>
     <script src="../../UserInterface/Controllers/Formatter.js"></script>
     <script src="FormatterDebug.js"></script>
     <script src="../../UserInterface/Workers/Formatter/FormatterContentBuilder.js"></script>
     <script src="../../UserInterface/Views/CodeMirrorFormatters.js"></script>
 </head>
 <body>

     <h1>Debug Pretty Printing</h1>

     <!-- Controls -->
     <select id="mode">
         <option selected value="text/javascript">JavaScript</option>
         <option value="text/css">CSS</option>
         <option value="css-rule">CSS-Rule</option>
     </select>
     <button id="populate">Populate</button>
     <button id="run-tests">Run Tests</button>
     <button id="clear">Clear</button>
     <button id="select-output">Select Output</button>
     <button id="run-again">Run Again</button>
     <button id="save-as-url">Save URL</button>
     <button id="save-local-storage">Save to Storage</button>
     <button id="clear-local-storage">Clear Storage</button>
     <small id="time"></small>

     <br><br>

     <!-- Editor -->
     <textarea id="code" name="code"></textarea>

     <!-- Output -->
     <pre id="pretty"></pre>
     <pre id="debug"></pre>

     <script>
     // Editor.
     var cm = CodeMirror.fromTextArea(document.getElementById("code"), {
         lineNumbers: true,
     });

     // In the frontend, keywords are added to the css mode to force the parser to recognize them as values.
     // Here, the "calc" keyword is added to allow the css-rule tests to perform as they would in the frontend.
     var modeSpec = CodeMirror.resolveMode("text/css");
     modeSpec.valueKeywords["calc"] = true;

     // Initial values from URL.
     var queryParams = {};
     if (window.location.search.length > 0) {
         var searchString = window.location.search.substring(1);
         var groups = searchString.split("&");
         for (var i = 0; i < groups.length; ++i) {
             var pair = groups[i].split("=");
             queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
         }
     }

     // Initial mode and string.
     var mode = "text/javascript";
     var content = "(function() { var a=1; return a+1; })();";
     var updatePicker = false;
     if (queryParams.content || queryParams.mode) {
         content = queryParams.content || "";
         mode = queryParams.mode || "text/javascript";
         updatePicker = true;
     } else if (localStorage.content || localStorage.mode) {
         content = localStorage.content || "";
         mode = localStorage.mode || "text/javascript";
         updatePicker = true;
     }

     // Initial mode picker value.
     var modePicker = document.getElementById("mode");
     if (updatePicker) {
         for (var i = 0; i < modePicker.options.length; ++i) {
             if (modePicker.options[i].value === mode) {
                 modePicker.options[i].selected = true;
                 break;
             }
         }
     }

     // Set on CodeMirror.
     cm.setValue(content);
     cm.setOption("mode", mode);

     // Changing the mode.
     modePicker.addEventListener("change", function(event) {
         cm.setValue("");
         cm.setOption("mode", modePicker.value);
         refresh();
     });

     // Populate button to populate with some canned content.
     document.getElementById("populate").addEventListener("click", function(event) {
         switch (modePicker.value) {
             case "text/javascript":
                 var url = "../../../../LayoutTests/inspector/formatting/resources/javascript-tests/sample-jquery.js";
                 break;
             case "text/css":
                 var url = "populate/apple.css";
                 break;
         }

         var xhr = new XMLHttpRequest;
         xhr.open("GET", url, true);
         xhr.onload = function() {
             cm.setValue(xhr.responseText);
             setTimeout(refresh);
         }
         xhr.send();
     });

     // Run Tests button.
     document.getElementById("run-tests").addEventListener("click", function(event) {
         cm.setValue("/* Running Tests... */");
         refresh();
         runTests();
     });

     // Clear button.
     document.getElementById("clear").addEventListener("click", function(event) {
         cm.setValue("");
         refresh();
     });

     // Select output button.
     document.getElementById("select-output").addEventListener("click", function(event) {
         var range = document.createRange();
         range.selectNodeContents(document.getElementById("pretty"));
         var selection = window.getSelection();
         selection.removeAllRanges();
         selection.addRange(range);
     });

     // Run again button.
     document.getElementById("run-again").addEventListener("click", function(event) {
         refresh();
     });

     // Save as URL button.
     document.getElementById("save-as-url").addEventListener("click", function(event) {
         var mode = modePicker.value;
         var content = cm.getValue();
         window.location.search = "?mode=" + window.encodeURIComponent(mode) + "&content=" + window.encodeURIComponent(content);
     });

     // Save to localStorage.
     document.getElementById("save-local-storage").addEventListener("click", function(event) {
         localStorage.mode = modePicker.value;
         localStorage.content = cm.getValue();
     });

     // Clear localStorage.
     document.getElementById("clear-local-storage").addEventListener("click", function(event) {
         localStorage.removeItem("mode");
         localStorage.removeItem("content");
     });

     // Button helpers.
     var buttons = ["mode", "populate", "run-tests", "clear", "select-output", "run-again"];
     function disableButtons() {
         buttons.forEach(function(id) {
             document.getElementById(id).disabled = true;
         });
     }
     function enableButtons() {
         buttons.forEach(function(id) {
             document.getElementById(id).disabled = false;
         });
     }

     // Refresh after changes after a short delay.
     var timer = null;
     cm.on("change", function(codeMirror, change) {
         if (timer)
             clearTimeout(timer)
         timer = setTimeout(function() {
             clearTimeout(timer);
             timer = null;
             refresh();
         }, 500);
     });

     // Output elements.
     var timeOutput = document.getElementById("time");
     var prettyPre = document.getElementById("pretty");
     var debugPre = document.getElementById("debug");

     function refresh() {
         if (timer)
             clearTimeout(timer);

         const start = {line: 0, ch: 0};
         const end = {line: cm.lineCount() - 1};

         // Setup.
         const indentString = "    ";
         var builder = new FormatterContentBuilder(indentString);
         var formatter = new WebInspector.Formatter(cm, builder);

         // Time the formatter.
         var startTime = Date.now();
         formatter.format(start, end);
         var endTime = Date.now();

         // Gather debug information.
         var debug = formatter.debug(start, end);

         // Output the results.
         timeOutput.innerText = (endTime - startTime) + "ms";
         prettyPre.innerText = builder.formattedContent;
         debugPre.innerText = debug;
     }

     setTimeout(refresh);

     // Tests.
     function runTests() {
         disableButtons();
         function completedCallback() {
             enableButtons();
         }

         if (modePicker.value === "text/javascript")
             runJavaScriptTests(completedCallback);
         else if (modePicker.value === "css-rule")
             runCssRuleTests(completedCallback);
         else
             runCSSTests(completedCallback);
     }
     function runJavaScriptTests(callback) {
         _runTests(callback, [
             "javascript-tests/block-comment.js",
             "javascript-tests/single-statement-blocks.js",
             "javascript-tests/switch-case-default.js",
         ]);
     }
     function runCssRuleTests(callback) {
         _runTests(callback, [
             "css-rule-tests/invalid-property-is-not-removed.css",
             "css-rule-tests/remove-newline-between-values.css",
             "css-rule-tests/remove-whitespace-before-colon.css",
             "css-rule-tests/remove-whitespace-before-semicolon.css",
             "css-rule-tests/remove-whitespace-before-property.css",
             "css-rule-tests/remove-whitespace-before-prefixed-property.css",
             "css-rule-tests/remove-whitespace-before-invalid-property.css",
             "css-rule-tests/remove-whitespace-before-comment.css",
             "css-rule-tests/split-comment-followed-by-property.css",
             "css-rule-tests/split-comment-followed-by-prefixed-property.css",
             "css-rule-tests/split-comment-followed-by-invalid-property.css",
             "css-rule-tests/split-comment-followed-by-comment.css",
             "css-rule-tests/split-property-followed-by-property.css",
             "css-rule-tests/split-property-followed-by-prefixed-property.css",
             "css-rule-tests/split-property-followed-by-invalid-property.css",
             "css-rule-tests/split-property-followed-by-comment.css",
             "css-rule-tests/split-invalid-property-followed-by-property.css",
             "css-rule-tests/split-invalid-property-followed-by-prefixed-property.css",
             "css-rule-tests/split-invalid-property-followed-by-invalid-property.css",
             "css-rule-tests/split-invalid-property-followed-by-comment.css",
             "css-rule-tests/split-property-without-semicolon-followed-by-comment-and-property.css",
             "css-rule-tests/add-whitespace-between-values.css",
             "css-rule-tests/add-whitespace-between-rules.css",
             "css-rule-tests/add-whitespace-after-colon.css",
             "css-rule-tests/add-whitespace-after-comma.css",
             "css-rule-tests/do-not-append-semicolon.css",
             "css-rule-tests/do-not-add-whitespace-before-prefixed-property-value.css",
             "css-rule-tests/keep-prefixed-value.css",
         ]);
     }
     function runCSSTests(callback) {
         _runTests(callback, [
             "css-tests/basic.css",
             "css-tests/calc.css",
             "css-tests/gradient.css",
             "css-tests/keyframes.css",
             "css-tests/media-query.css",
             "css-tests/selectors.css",
             "css-tests/wrapping.css",
         ]);
     }
     function _runTests(callback, manifest) {
         var index = -1;
         var results = [];
         setTimeout(runNextTest, 0);

         function runNextTest() {
             // Next test.
             index++;

             // Done.
             if (index >= manifest.length) {
                 if (!index)
                     results.push("/* No tests for mode: " + modePicker.value);
                 printResults();
                 return;
             }

             // Load test and expected results.
             var test = manifest[index];
             var testURL = "../../../../LayoutTests/inspector/codemirror/resources/prettyprinting/" + test;
             var expectedURL = testURL.replace(/\.([^\.]+)$/, "-expected.$1");
             var xhr1 = new XMLHttpRequest;
             xhr1.open("GET", testURL, false);
             xhr1.send();
             var xhr2 = new XMLHttpRequest;
             xhr2.open("GET", expectedURL, false);
             xhr2.send();
             var testData = xhr1.responseText;
             var expectedData = xhr2.responseText;

             // Run the test.
             var editor = CodeMirror(document.createElement("div"));
             editor.setOption("mode", modePicker.value);
             editor.setValue(testData);
             const start = {line: 0, ch: 0};
             const end = {line: editor.lineCount() - 1};
             const indentString = "    ";
             var builder = new FormatterContentBuilder(indentString);
             var formatter = new WebInspector.Formatter(editor, builder);
             formatter.format(start, end);

             // Compare results.
             var pass = builder.formattedContent === expectedData;
             results.push("/* " + (pass ? "PASS" : "FAIL") + ": " + test + " */");

             // Output failures to console.
             if (!pass) {
                 console.log("Test", test);
                 console.log("Formatted Output", builder.formattedContent.length);
                 console.log(builder.formattedContent);
                 console.log("Expected Output", expectedData.length);
                 console.log(expectedData);
             }

             runNextTest();
         }

         function printResults() {
             cm.setValue(results.join("\n"));
             cm.refresh();
             callback();
         }
     }

     </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Debug</title>
	<link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
	<link rel="stylesheet" href="codemirror-additions.css">
	<script src="Utilities.js"></script>
	<script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
	<script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
	<script src="../../UserInterface/External/CodeMirror/css.js"></script>
	<script src="../../UserInterface/Base/WebInspector.js"></script>
	<script src="../../UserInterface/Views/CodeMirrorAdditions.js"></script>
	<script src="../../UserInterface/Controllers/Formatter.js"></script>
	<script src="FormatterDebug.js"></script>
	<script src="../../UserInterface/Workers/Formatter/FormatterContentBuilder.js"></script>
	<script src="../../UserInterface/Views/CodeMirrorFormatters.js"></script>
	</head>
	<body>

	<h1>Debug Pretty Printing</h1>

	<!-- Controls -->
	<select id="mode">
	<option selected value="text/javascript">JavaScript</option>
	<option value="text/css">CSS</option>
	<option value="css-rule">CSS-Rule</option>
	</select>
	<button id="populate">Populate</button>
	<button id="run-tests">Run Tests</button>
	<button id="clear">Clear</button>
	<button id="select-output">Select Output</button>
	<button id="run-again">Run Again</button>
	<button id="save-as-url">Save URL</button>
	<button id="save-local-storage">Save to Storage</button>
	<button id="clear-local-storage">Clear Storage</button>
	<small id="time"></small>

	<br><br>

	<!-- Editor -->
	<textarea id="code" name="code"></textarea>

	<!-- Output -->
	<pre id="pretty"></pre>
	<pre id="debug"></pre>

	<script>
	// Editor.
	var cm = CodeMirror.fromTextArea(document.getElementById("code"), {
	lineNumbers: true,
	});

	// In the frontend, keywords are added to the css mode to force the parser to recognize them as values.
	// Here, the "calc" keyword is added to allow the css-rule tests to perform as they would in the frontend.
	var modeSpec = CodeMirror.resolveMode("text/css");
	modeSpec.valueKeywords["calc"] = true;

	// Initial values from URL.
	var queryParams = {};
	if (window.location.search.length > 0) {
	var searchString = window.location.search.substring(1);
	var groups = searchString.split("&");
	for (var i = 0; i < groups.length; ++i) {
	var pair = groups[i].split("=");
	queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
	}
	}

	// Initial mode and string.
	var mode = "text/javascript";
	var content = "(function() { var a=1; return a+1; })();";
	var updatePicker = false;
	if (queryParams.content \|\| queryParams.mode) {
	content = queryParams.content \|\| "";
	mode = queryParams.mode \|\| "text/javascript";
	updatePicker = true;
	} else if (localStorage.content \|\| localStorage.mode) {
	content = localStorage.content \|\| "";
	mode = localStorage.mode \|\| "text/javascript";
	updatePicker = true;
	}

	// Initial mode picker value.
	var modePicker = document.getElementById("mode");
	if (updatePicker) {
	for (var i = 0; i < modePicker.options.length; ++i) {
	if (modePicker.options[i].value === mode) {
	modePicker.options[i].selected = true;
	break;
	}
	}
	}

	// Set on CodeMirror.
	cm.setValue(content);
	cm.setOption("mode", mode);

	// Changing the mode.
	modePicker.addEventListener("change", function(event) {
	cm.setValue("");
	cm.setOption("mode", modePicker.value);
	refresh();
	});

	// Populate button to populate with some canned content.
	document.getElementById("populate").addEventListener("click", function(event) {
	switch (modePicker.value) {
	case "text/javascript":
	var url = "../../../../LayoutTests/inspector/formatting/resources/javascript-tests/sample-jquery.js";
	break;
	case "text/css":
	var url = "populate/apple.css";
	break;
	}

	var xhr = new XMLHttpRequest;
	xhr.open("GET", url, true);
	xhr.onload = function() {
	cm.setValue(xhr.responseText);
	setTimeout(refresh);
	}
	xhr.send();
	});

	// Run Tests button.
	document.getElementById("run-tests").addEventListener("click", function(event) {
	cm.setValue("/* Running Tests... */");
	refresh();
	runTests();
	});

	// Clear button.
	document.getElementById("clear").addEventListener("click", function(event) {
	cm.setValue("");
	refresh();
	});

	// Select output button.
	document.getElementById("select-output").addEventListener("click", function(event) {
	var range = document.createRange();
	range.selectNodeContents(document.getElementById("pretty"));
	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	});

	// Run again button.
	document.getElementById("run-again").addEventListener("click", function(event) {
	refresh();
	});

	// Save as URL button.
	document.getElementById("save-as-url").addEventListener("click", function(event) {
	var mode = modePicker.value;
	var content = cm.getValue();
	window.location.search = "?mode=" + window.encodeURIComponent(mode) + "&content=" + window.encodeURIComponent(content);
	});

	// Save to localStorage.
	document.getElementById("save-local-storage").addEventListener("click", function(event) {
	localStorage.mode = modePicker.value;
	localStorage.content = cm.getValue();
	});

	// Clear localStorage.
	document.getElementById("clear-local-storage").addEventListener("click", function(event) {
	localStorage.removeItem("mode");
	localStorage.removeItem("content");
	});

	// Button helpers.
	var buttons = ["mode", "populate", "run-tests", "clear", "select-output", "run-again"];
	function disableButtons() {
	buttons.forEach(function(id) {
	document.getElementById(id).disabled = true;
	});
	}
	function enableButtons() {
	buttons.forEach(function(id) {
	document.getElementById(id).disabled = false;
	});
	}

	// Refresh after changes after a short delay.
	var timer = null;
	cm.on("change", function(codeMirror, change) {
	if (timer)
	clearTimeout(timer)
	timer = setTimeout(function() {
	clearTimeout(timer);
	timer = null;
	refresh();
	}, 500);
	});

	// Output elements.
	var timeOutput = document.getElementById("time");
	var prettyPre = document.getElementById("pretty");
	var debugPre = document.getElementById("debug");

	function refresh() {
	if (timer)
	clearTimeout(timer);

	const start = {line: 0, ch: 0};
	const end = {line: cm.lineCount() - 1};

	// Setup.
	const indentString = " ";
	var builder = new FormatterContentBuilder(indentString);
	var formatter = new WebInspector.Formatter(cm, builder);

	// Time the formatter.
	var startTime = Date.now();
	formatter.format(start, end);
	var endTime = Date.now();

	// Gather debug information.
	var debug = formatter.debug(start, end);

	// Output the results.
	timeOutput.innerText = (endTime - startTime) + "ms";
	prettyPre.innerText = builder.formattedContent;
	debugPre.innerText = debug;
	}

	setTimeout(refresh);

	// Tests.
	function runTests() {
	disableButtons();
	function completedCallback() {
	enableButtons();
	}

	if (modePicker.value === "text/javascript")
	runJavaScriptTests(completedCallback);
	else if (modePicker.value === "css-rule")
	runCssRuleTests(completedCallback);
	else
	runCSSTests(completedCallback);
	}
	function runJavaScriptTests(callback) {
	_runTests(callback, [
	"javascript-tests/block-comment.js",
	"javascript-tests/single-statement-blocks.js",
	"javascript-tests/switch-case-default.js",
	]);
	}
	function runCssRuleTests(callback) {
	_runTests(callback, [
	"css-rule-tests/invalid-property-is-not-removed.css",
	"css-rule-tests/remove-newline-between-values.css",
	"css-rule-tests/remove-whitespace-before-colon.css",
	"css-rule-tests/remove-whitespace-before-semicolon.css",
	"css-rule-tests/remove-whitespace-before-property.css",
	"css-rule-tests/remove-whitespace-before-prefixed-property.css",
	"css-rule-tests/remove-whitespace-before-invalid-property.css",
	"css-rule-tests/remove-whitespace-before-comment.css",
	"css-rule-tests/split-comment-followed-by-property.css",
	"css-rule-tests/split-comment-followed-by-prefixed-property.css",
	"css-rule-tests/split-comment-followed-by-invalid-property.css",
	"css-rule-tests/split-comment-followed-by-comment.css",
	"css-rule-tests/split-property-followed-by-property.css",
	"css-rule-tests/split-property-followed-by-prefixed-property.css",
	"css-rule-tests/split-property-followed-by-invalid-property.css",
	"css-rule-tests/split-property-followed-by-comment.css",
	"css-rule-tests/split-invalid-property-followed-by-property.css",
	"css-rule-tests/split-invalid-property-followed-by-prefixed-property.css",
	"css-rule-tests/split-invalid-property-followed-by-invalid-property.css",
	"css-rule-tests/split-invalid-property-followed-by-comment.css",
	"css-rule-tests/split-property-without-semicolon-followed-by-comment-and-property.css",
	"css-rule-tests/add-whitespace-between-values.css",
	"css-rule-tests/add-whitespace-between-rules.css",
	"css-rule-tests/add-whitespace-after-colon.css",
	"css-rule-tests/add-whitespace-after-comma.css",
	"css-rule-tests/do-not-append-semicolon.css",
	"css-rule-tests/do-not-add-whitespace-before-prefixed-property-value.css",
	"css-rule-tests/keep-prefixed-value.css",
	]);
	}
	function runCSSTests(callback) {
	_runTests(callback, [
	"css-tests/basic.css",
	"css-tests/calc.css",
	"css-tests/gradient.css",
	"css-tests/keyframes.css",
	"css-tests/media-query.css",
	"css-tests/selectors.css",
	"css-tests/wrapping.css",
	]);
	}
	function _runTests(callback, manifest) {
	var index = -1;
	var results = [];
	setTimeout(runNextTest, 0);

	function runNextTest() {
	// Next test.
	index++;

	// Done.
	if (index >= manifest.length) {
	if (!index)
	results.push("/* No tests for mode: " + modePicker.value);
	printResults();
	return;
	}

	// Load test and expected results.
	var test = manifest[index];
	var testURL = "../../../../LayoutTests/inspector/codemirror/resources/prettyprinting/" + test;
	var expectedURL = testURL.replace(/\.([^\.]+)$/, "-expected.$1");
	var xhr1 = new XMLHttpRequest;
	xhr1.open("GET", testURL, false);
	xhr1.send();
	var xhr2 = new XMLHttpRequest;
	xhr2.open("GET", expectedURL, false);
	xhr2.send();
	var testData = xhr1.responseText;
	var expectedData = xhr2.responseText;

	// Run the test.
	var editor = CodeMirror(document.createElement("div"));
	editor.setOption("mode", modePicker.value);
	editor.setValue(testData);
	const start = {line: 0, ch: 0};
	const end = {line: editor.lineCount() - 1};
	const indentString = " ";
	var builder = new FormatterContentBuilder(indentString);
	var formatter = new WebInspector.Formatter(editor, builder);
	formatter.format(start, end);

	// Compare results.
	var pass = builder.formattedContent === expectedData;
	results.push("/* " + (pass ? "PASS" : "FAIL") + ": " + test + " */");

	// Output failures to console.
	if (!pass) {
	console.log("Test", test);
	console.log("Formatted Output", builder.formattedContent.length);
	console.log(builder.formattedContent);
	console.log("Expected Output", expectedData.length);
	console.log(expectedData);
	}

	runNextTest();
	}

	function printResults() {
	cm.setValue(results.join("\n"));
	cm.refresh();
	callback();
	}
	}

	</script>
	</body>
	</html>