Source/WebInspectorUI/Tools/HTMLFormatter/index.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>HTMLFormatter Tool</title>

     <style>:root { color-scheme: light dark; }</style>
     <link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
     <link rel="stylesheet" href="../../UserInterface/Views/Variables.css">
     <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorOverrides.css">
     <link rel="stylesheet" href="../../UserInterface/Views/SyntaxHighlightingDefaultTheme.css">
     <link rel="stylesheet" href="styles.css">

     <script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
     <script src="../../UserInterface/External/CodeMirror/css.js"></script>
     <script src="../../UserInterface/External/CodeMirror/htmlmixed.js"></script>
     <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
     <script src="../../UserInterface/External/CodeMirror/xml.js"></script>
     <script src="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.js"></script>
     <script src="../../UserInterface/Views/CodeMirrorRegexMode.js"></script>

     <script src="HTMLTreeBuilderDebug.js"></script>
     <script src="../../UserInterface/External/Esprima/esprima.js"></script>
     <script src="../../UserInterface/Workers/Formatter/CSSFormatter.js"></script>
     <script src="../../UserInterface/Workers/Formatter/ESTreeWalker.js"></script>
     <script src="../../UserInterface/Workers/Formatter/FormatterContentBuilder.js"></script>
     <script src="../../UserInterface/Workers/Formatter/FormatterUtilities.js"></script>
     <script src="../../UserInterface/Workers/Formatter/HTMLFormatter.js"></script>
     <script src="../../UserInterface/Workers/Formatter/HTMLParser.js"></script>
     <script src="../../UserInterface/Workers/Formatter/HTMLTreeBuilderFormatter.js"></script>
     <script src="../../UserInterface/Workers/Formatter/JSFormatter.js"></script>
 </head>
 <body>
     <h1>Debug HTMLFormatter</h1>

     <!-- Controls -->
     <select id="populate">
         <option value="html-simple">Simple HTML Document</option>
         <option value="svg-simple">Simple SVG Document</option>
         <option value="html-css-js">HTML with Styles and Script</option>
         <option value="self">Self</option>
     </select>
     <select id="source-type">
         <option value="text/html">HTML</option>
         <option value="text/xml">XML</option>
     </select>
     <button id="format">Format</button>
     <button id="select-output">Select Output</button>
     <button id="save-as-url">Save URL</button>
     <small id="time"></small>
     <br><br>

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

     <!-- Output -->
     <h3>Formatted</h3>
     <pre id="pretty"></pre>
     <h3>Tree</h3>
     <pre id="debug-tree"></pre>
     <h3>Tokens</h3>
     <pre id="debug"></pre>

     <script>
     // Elements.
     const populatePicker = document.getElementById("populate");
     const sourceTypePicker = document.getElementById("source-type");
     const timeOutput = document.getElementById("time");
     const prettyPre = document.getElementById("pretty");
     const debugPre = document.getElementById("debug");
     const debugTreePre = document.getElementById("debug-tree");

     // Editor.
     let cm = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true});
     cm.setOption("mode", "text/html");

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

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

         // Time the formatter.
         let sourceType = sourceTypePicker.value === "text/html" ? HTMLFormatter.SourceType.HTML : HTMLFormatter.SourceType.XML;
         let startTime = Date.now();
         let formatter = new HTMLFormatter(cm.getValue(), sourceType);
         let endTime = Date.now();

         // Show debug parser info.
         let debugText = "";
         try {
             let options = {isXML: sourceType === HTMLFormatter.SourceType.XML};
             let parser = new HTMLParser;
             let treeBuilder = new HTMLTreeBuilderDebug;
             parser.parseDocument(cm.getValue(), treeBuilder, options);
             debugText = treeBuilder.debugText;
         } catch (error) {
             debugText = "Parse error: " + JSON.stringify(error, null, 2);
         }

         // Show debug tree info.
         let debugTreeText = "";
         try {
             let parser = new HTMLParser;
             let treeBuilder = new HTMLTreeBuilderFormatter;
             parser.parseDocument(cm.getValue(), treeBuilder);
             console.log("TreeBuilder DOM", treeBuilder.dom);

             let lines = [];
             let indentString = "  ";
             function filter(key, value) {
                 if (key === "children")
                     return undefined;
                 return value;
             }
             function stringifyNode(node) {
                 switch (node.type) {
                 case HTMLTreeBuilderFormatter.NodeType.Text:
                     return `TEXT: ${JSON.stringify(node.data)}`;
                 case HTMLTreeBuilderFormatter.NodeType.Comment:
                     return `COMMENT: (${node.data})`;
                 case HTMLTreeBuilderFormatter.NodeType.Doctype:
                     return `DOCTYPE: (${node.data})`;
                 case HTMLTreeBuilderFormatter.NodeType.CData:
                     return `CDATA: (${node.data})`;
                 case HTMLTreeBuilderFormatter.NodeType.Error:
                     return `ERROR: ${node.raw}`;
                 case HTMLTreeBuilderFormatter.NodeType.Node: {
                     let implicitCloseString = node.implicitClose ? " <implicitClose>" : "";
                     let attributesString = node.attributes ? " " + JSON.stringify(node.attributes) : "";
                     return `NODE: ${node.name}${attributesString}${implicitCloseString}`;
                 }
                 }
             }
             function visit(node, indent) {
                 lines.push(indentString.repeat(indent) + stringifyNode(node));
                 if (node.children) {
                     for (let child of node.children)
                         visit(child, indent + 1);
                 }
             }
             for (let topLevelNode of treeBuilder.dom)
                 visit(topLevelNode, 0);

             debugTreeText = lines.join("\n");
         } catch (error) {
             debugTreeText = "TreeBuilder error: " + JSON.stringify(error, null, 2);
         }

         // Output the results.
         timeOutput.innerText = (endTime - startTime) + "ms";
         prettyPre.innerText = formatter.formattedText;
         debugPre.innerText = debugText;
         debugTreePre.innerText = debugTreeText;
     }

     setTimeout(refresh);

     // Format button.
     document.getElementById("format").addEventListener("click", (event) => {
         refresh();
     });

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

     // Save as URL button.
     document.getElementById("save-as-url").addEventListener("click", (event) => {
         let content = cm.getValue();
         let populate = populatePicker.value;
         let sourceType = sourceTypePicker.value;
         window.location.search = `?content=${encodeURIComponent(content)}&populate=${encodeURIComponent(populate)}&sourceType=${encodeURIComponent(sourceType)}`;
     });

     const simpleHTML = `<!DOCTYPE html>
 <html>
 <head>
 <title>Test</title>
 <script src="js/script.js"></`+`script>
 </head>
 <body>
 <!-- Comment -->
 <div class="foo"><input type=text><br><p>Test</p></div>
 <p><![CDATA[ Test ]]></p>
 </body>
 </html>
 `;
     const simpleSVG = `<?xml version="1.0"?>
 <!-- Copyright © 2014 Apple Inc. All rights reserved. -->
 <svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 14">
 <rect fill="none" stroke="currentColor" x="0.5" y="0.5" width="12" height="13" rx="2"/>
 <rect fill="none" stroke="currentColor" stroke-width="1" x="3" y="6" width="7" height="2" rx="0.5"/>
 </svg>
 `;

     const htmlcssjs = `<!DOCTYPE html>
 <html>
 <head>
 <title>Test</title>
 <style>body,div,.foo{color:red}p{color:blue}</style>
 <script>(function(a,b,c){let sum = a; sum += b; sum += c; return sum;})()</`+`script>
 </head>
 <body>
 <!-- Comment -->
 <div class="foo"><input type=text><br><p>Test</p></div>
 </body>
 </html>
 `;

     // Populate picker
     function updateContentFromPicker() {
         let value = populatePicker.value;
         let content = simpleHTML;
         switch (value) {
         case "html-simple":
             content = simpleHTML;
             break;
         case "svg-simple":
             content = simpleSVG;
             break;
         case "html-css-js":
             content = htmlcssjs;
             break;
         case "self":
             content = document.documentElement.outerHTML;
             break;
         }
         cm.setValue(content);
     }

     populatePicker.addEventListener("change", (event) => {
         updateContentFromPicker();
     });

     // Parser mode picker.
     sourceTypePicker.addEventListener("change", (event) => {
         cm.setOption("mode", sourceTypePicker.value);
         refresh();
     });

     // Restore better initial value from query string.
     (function() {
         let queryParams = {};
         if (window.location.search.length > 0) {
             let searchString = window.location.search.substring(1);
             let groups = searchString.split("&");
             for (let i = 0; i < groups.length; ++i) {
                 let pair = groups[i].split("=");
                 queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
             }
         }
         if (queryParams.populate) {
             populatePicker.value = queryParams.populate;
             updateContentFromPicker();
         }
         if (queryParams.sourceType) {
             sourceTypePicker.value = queryParams.sourceType;
             cm.setOption("mode", sourceTypePicker.value);
         }
         if (queryParams.content)
             cm.setValue(queryParams.content);
     })();

     if (!cm.getValue())
         cm.setValue(simpleHTML);
     </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HTMLFormatter Tool</title>

	<style>:root { color-scheme: light dark; }</style>
	<link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
	<link rel="stylesheet" href="../../UserInterface/Views/Variables.css">
	<link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorOverrides.css">
	<link rel="stylesheet" href="../../UserInterface/Views/SyntaxHighlightingDefaultTheme.css">
	<link rel="stylesheet" href="styles.css">

	<script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
	<script src="../../UserInterface/External/CodeMirror/css.js"></script>
	<script src="../../UserInterface/External/CodeMirror/htmlmixed.js"></script>
	<script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
	<script src="../../UserInterface/External/CodeMirror/xml.js"></script>
	<script src="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.js"></script>
	<script src="../../UserInterface/Views/CodeMirrorRegexMode.js"></script>

	<script src="HTMLTreeBuilderDebug.js"></script>
	<script src="../../UserInterface/External/Esprima/esprima.js"></script>
	<script src="../../UserInterface/Workers/Formatter/CSSFormatter.js"></script>
	<script src="../../UserInterface/Workers/Formatter/ESTreeWalker.js"></script>
	<script src="../../UserInterface/Workers/Formatter/FormatterContentBuilder.js"></script>
	<script src="../../UserInterface/Workers/Formatter/FormatterUtilities.js"></script>
	<script src="../../UserInterface/Workers/Formatter/HTMLFormatter.js"></script>
	<script src="../../UserInterface/Workers/Formatter/HTMLParser.js"></script>
	<script src="../../UserInterface/Workers/Formatter/HTMLTreeBuilderFormatter.js"></script>
	<script src="../../UserInterface/Workers/Formatter/JSFormatter.js"></script>
	</head>
	<body>
	<h1>Debug HTMLFormatter</h1>

	<!-- Controls -->
	<select id="populate">
	<option value="html-simple">Simple HTML Document</option>
	<option value="svg-simple">Simple SVG Document</option>
	<option value="html-css-js">HTML with Styles and Script</option>
	<option value="self">Self</option>
	</select>
	<select id="source-type">
	<option value="text/html">HTML</option>
	<option value="text/xml">XML</option>
	</select>
	<button id="format">Format</button>
	<button id="select-output">Select Output</button>
	<button id="save-as-url">Save URL</button>
	<small id="time"></small>
	<br><br>

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

	<!-- Output -->
	<h3>Formatted</h3>
	<pre id="pretty"></pre>
	<h3>Tree</h3>
	<pre id="debug-tree"></pre>
	<h3>Tokens</h3>
	<pre id="debug"></pre>

	<script>
	// Elements.
	const populatePicker = document.getElementById("populate");
	const sourceTypePicker = document.getElementById("source-type");
	const timeOutput = document.getElementById("time");
	const prettyPre = document.getElementById("pretty");
	const debugPre = document.getElementById("debug");
	const debugTreePre = document.getElementById("debug-tree");

	// Editor.
	let cm = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true});
	cm.setOption("mode", "text/html");

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

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

	// Time the formatter.
	let sourceType = sourceTypePicker.value === "text/html" ? HTMLFormatter.SourceType.HTML : HTMLFormatter.SourceType.XML;
	let startTime = Date.now();
	let formatter = new HTMLFormatter(cm.getValue(), sourceType);
	let endTime = Date.now();

	// Show debug parser info.
	let debugText = "";
	try {
	let options = {isXML: sourceType === HTMLFormatter.SourceType.XML};
	let parser = new HTMLParser;
	let treeBuilder = new HTMLTreeBuilderDebug;
	parser.parseDocument(cm.getValue(), treeBuilder, options);
	debugText = treeBuilder.debugText;
	} catch (error) {
	debugText = "Parse error: " + JSON.stringify(error, null, 2);
	}

	// Show debug tree info.
	let debugTreeText = "";
	try {
	let parser = new HTMLParser;
	let treeBuilder = new HTMLTreeBuilderFormatter;
	parser.parseDocument(cm.getValue(), treeBuilder);
	console.log("TreeBuilder DOM", treeBuilder.dom);

	let lines = [];
	let indentString = " ";
	function filter(key, value) {
	if (key === "children")
	return undefined;
	return value;
	}
	function stringifyNode(node) {
	switch (node.type) {
	case HTMLTreeBuilderFormatter.NodeType.Text:
	return `TEXT: ${JSON.stringify(node.data)}`;
	case HTMLTreeBuilderFormatter.NodeType.Comment:
	return `COMMENT: (${node.data})`;
	case HTMLTreeBuilderFormatter.NodeType.Doctype:
	return `DOCTYPE: (${node.data})`;
	case HTMLTreeBuilderFormatter.NodeType.CData:
	return `CDATA: (${node.data})`;
	case HTMLTreeBuilderFormatter.NodeType.Error:
	return `ERROR: ${node.raw}`;
	case HTMLTreeBuilderFormatter.NodeType.Node: {
	let implicitCloseString = node.implicitClose ? " <implicitClose>" : "";
	let attributesString = node.attributes ? " " + JSON.stringify(node.attributes) : "";
	return `NODE: ${node.name}${attributesString}${implicitCloseString}`;
	}
	}
	}
	function visit(node, indent) {
	lines.push(indentString.repeat(indent) + stringifyNode(node));
	if (node.children) {
	for (let child of node.children)
	visit(child, indent + 1);
	}
	}
	for (let topLevelNode of treeBuilder.dom)
	visit(topLevelNode, 0);

	debugTreeText = lines.join("\n");
	} catch (error) {
	debugTreeText = "TreeBuilder error: " + JSON.stringify(error, null, 2);
	}

	// Output the results.
	timeOutput.innerText = (endTime - startTime) + "ms";
	prettyPre.innerText = formatter.formattedText;
	debugPre.innerText = debugText;
	debugTreePre.innerText = debugTreeText;
	}

	setTimeout(refresh);

	// Format button.
	document.getElementById("format").addEventListener("click", (event) => {
	refresh();
	});

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

	// Save as URL button.
	document.getElementById("save-as-url").addEventListener("click", (event) => {
	let content = cm.getValue();
	let populate = populatePicker.value;
	let sourceType = sourceTypePicker.value;
	window.location.search = `?content=${encodeURIComponent(content)}&populate=${encodeURIComponent(populate)}&sourceType=${encodeURIComponent(sourceType)}`;
	});

	const simpleHTML = `<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	<script src="js/script.js"></`+`script>
	</head>
	<body>
	<!-- Comment -->
	<div class="foo"><input type=text><br><p>Test</p></div>
	<p><![CDATA[ Test ]]></p>
	</body>
	</html>
	`;
	const simpleSVG = `<?xml version="1.0"?>
	<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
	<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 14">
	<rect fill="none" stroke="currentColor" x="0.5" y="0.5" width="12" height="13" rx="2"/>
	<rect fill="none" stroke="currentColor" stroke-width="1" x="3" y="6" width="7" height="2" rx="0.5"/>
	</svg>
	`;

	const htmlcssjs = `<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	<style>body,div,.foo{color:red}p{color:blue}</style>
	<script>(function(a,b,c){let sum = a; sum += b; sum += c; return sum;})()</`+`script>
	</head>
	<body>
	<!-- Comment -->
	<div class="foo"><input type=text><br><p>Test</p></div>
	</body>
	</html>
	`;

	// Populate picker
	function updateContentFromPicker() {
	let value = populatePicker.value;
	let content = simpleHTML;
	switch (value) {
	case "html-simple":
	content = simpleHTML;
	break;
	case "svg-simple":
	content = simpleSVG;
	break;
	case "html-css-js":
	content = htmlcssjs;
	break;
	case "self":
	content = document.documentElement.outerHTML;
	break;
	}
	cm.setValue(content);
	}

	populatePicker.addEventListener("change", (event) => {
	updateContentFromPicker();
	});

	// Parser mode picker.
	sourceTypePicker.addEventListener("change", (event) => {
	cm.setOption("mode", sourceTypePicker.value);
	refresh();
	});

	// Restore better initial value from query string.
	(function() {
	let queryParams = {};
	if (window.location.search.length > 0) {
	let searchString = window.location.search.substring(1);
	let groups = searchString.split("&");
	for (let i = 0; i < groups.length; ++i) {
	let pair = groups[i].split("=");
	queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
	}
	}
	if (queryParams.populate) {
	populatePicker.value = queryParams.populate;
	updateContentFromPicker();
	}
	if (queryParams.sourceType) {
	sourceTypePicker.value = queryParams.sourceType;
	cm.setOption("mode", sourceTypePicker.value);
	}
	if (queryParams.content)
	cm.setValue(queryParams.content);
	})();

	if (!cm.getValue())
	cm.setValue(simpleHTML);
	</script>
	</body>
	</html>