platform_tools/nacl/debugger/index.html - skia - Git at Google

 <!DOCTYPE html>
 <html>
   <!--
   Copyright 2013 Google Inc.

   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file.
   -->
 <head>
   <title>Skia Debugger</title>
   <link rel="stylesheet" type="text/css" href="debugger.css"/>
   <script type="text/javascript">
     "use strict";

     var skia_module = null;  // Global application object.
     var display_right_panel = null;
     var display_bottom_row = null;
     var overview_text = "";
     var details_text = "Default details text.";
     var command_list = [];
     var command_types = {};
     var no_filter_text = "--Filter By Available Commands--";

     function openFileDialog() {
       var event = document.createEvent("MouseEvents");
       event.initEvent("click", true, false);
       document.getElementById("file_open").dispatchEvent(event);
     }

     function updateOverviewDetails() {
       var radio_buttons = document.getElementsByName("overviewdetails_radio");
       for (var i = 0; i < radio_buttons.length; ++i) {
         if (radio_buttons[i].checked) {
           if (radio_buttons[i].value == "details") {
             document.getElementById("overviewdetails").innerHTML = details_text;
           } else {
             document.getElementById("overviewdetails").innerHTML = overview_text;
           }
           return;
         }
       }
       // If no radio button is checked, check the "overview" button.
       for (var i = 0; i < radio_buttons.length; ++i) {
         if (radio_buttons[i].value == "overview") {
           radio_buttons[i].checked = true;
           document.getElementById("overviewdetails").innerHTML = overview_text;
           return;
         }
       }
     }

     function makeIndentString(indent_amt) {
       var indent_str = "";
       for (var i = 0; i < indent_amt; ++i) {
         indent_str += "--";
       }
       return indent_str;
     }

     function updateCommandList(filter) {
       var command_list_display = document.getElementById("command_list");
       command_list_display.options.length = 0;
       var indent = 0;
       var indent_str = "";
       for (var i = 0; i < command_list.length; ++i) {
         if (command_list[i] == "Restore") {
           indent--;
           indent_str = makeIndentString(indent);
         }
         if (!filter || filter == no_filter_text || command_list[i] == filter) {
           command_list_display.options.add(new Option(indent_str + command_list[i], i));
         }
         if (command_list[i] == "Save" || command_list[i] == "Save Layer") {
           indent++;
           indent_str = makeIndentString(indent);
         }
       }
       command_list_display.selectedIndex = command_list_display.length - 1;

       // TODO(borenet): Should the SKP re-draw when the command list is updated?
       //commandSelected();
     }

     function updateFilterList() {
       var filter_list_display = document.getElementById("command_filter");
       filter_list_display.options.length = 0;
       filter_list_display.options.add(new Option(no_filter_text, no_filter_text));
       for (var command_type in command_types) {
         if (command_types.hasOwnProperty(command_type)) {
           filter_list_display.options.add(new Option(command_type, command_type));
         }
       }
     }

     function openFile(event) {
       document.getElementById("overviewdetails").innerHTML = "";
       var files = event.target.files;
       if (files.length != 1) {
         return;
       }
       var file = files[0];
       var reader = new FileReader();
       reader.onload = (function(theFile) {
         return function(e) {
           var data_prefix = "data:;base64,";
           skia_module.postMessage("LoadSKP" + e.target.result.slice(data_prefix.length));
         };
       })(file);
       reader.readAsDataURL(file);
     }

     function toggleInspector() {
       var right_panel = document.getElementById("right_panel");
       var bottom_row = document.getElementById("bottom_row");
       if (right_panel.style.display == display_right_panel) {
         right_panel.style.display = "none";
         bottom_row.style.display = "none";
       } else {
         right_panel.style.display = display_right_panel;
         bottom_row.style.display = display_bottom_row;
       }
     }

     function onLoad() {
       document.getElementById("file_open").addEventListener("change", openFile, false);
       var right_panel = document.getElementById("right_panel");
       var bottom_row = document.getElementById("bottom_row");
       display_right_panel = right_panel.style.display;
       display_bottom_row = bottom_row.style.display;
       updateOverviewDetails();
       updateFilterList();
     }

     // When the module loads, begin running the application.
     function moduleDidLoad() {
       skia_module = document.getElementById("skia_nacl");
       sendMsg("init");
     }

     function handleMessage(message_event) {
       var cmd_skdebugf = "SkDebugf:";
       var cmd_clear_commands = "ClearCommands";
       var cmd_add_command = "AddCommand:";
       var cmd_update_commands = "UpdateCommands";
       var cmd_set_overview = "SetOverview:";
       var cmd_add_filter_option = "AddFilterOption";
       if (message_event.data.indexOf(cmd_skdebugf) == 0) {
         var msg_contents = message_event.data.slice(cmd_skdebugf.length)
         console.log("Skia: " + msg_contents);
       } else if (message_event.data.indexOf(cmd_clear_commands) == 0) {
         command_list = [];
         command_types = {};
         updateCommandList();
         updateFilterList();
       } else if (message_event.data.indexOf(cmd_add_command) == 0) {
         var command = message_event.data.slice(cmd_add_command.length);
         command_list.push(command);
         if (command_types[command] == undefined) {
           command_types[command] = 1;
         } else {
           command_types[command]++;
         }
       } else if (message_event.data.indexOf(cmd_update_commands) == 0) {
         updateCommandList();
         updateFilterList();
       } else if (message_event.data.indexOf(cmd_set_overview) == 0) {
         overview_text = message_event.data.slice(cmd_set_overview.length);
         document.getElementById("overview_radio").checked = true;
         updateOverviewDetails();
       } else {
         alert(message_event.data);
       }
     }

     // Send a message to the plugin.
     function sendMsg(msg) {
       if (skia_module) {
         //console.log("Sending msg:" + msg);
         skia_module.postMessage(msg);
       } else {
         alert("The Skia module has not properly loaded...");
       }
     }

     function commandSelected() {
       var command_list = document.getElementById("command_list");
       var selected_index = command_list.options[command_list.selectedIndex].value;
       if (selected_index >= 0) {
         sendMsg("CommandSelected:" + selected_index);
       }
     }

     function rewind() {
       command_list.selectedIndex = 0;
       sendMsg("Rewind");
     }

     function stepBack() {
       if (command_list.selectedIndex > 0) {
         command_list.selectedIndex = command_list.selectedIndex - 1;
       }
       sendMsg("StepBack");
     }

     function pause() {
       sendMsg("Pause");
     }

     function stepForward() {
       if (command_list.selectedIndex < command_list.length - 1) {
         command_list.selectedIndex = command_list.selectedIndex + 1;
       }
       sendMsg("StepForward");
     }

     function play() {
       command_list.selectedIndex = command_list.length - 1;
       sendMsg("Play");
     }
   </script>
 </head>
 <body onLoad="javascript:onLoad()">
 <div id="content" class="row-set">
   <div id="menu" class="row">
     <ul id="menu-bar" class="dropdown-menu">
       <li><a href="#">File</a>
         <ul>
           <li><a href="#" onClick="javascript:openFileDialog()">Open</a></li>
           <li><a href="#">Save</a></li>
           <li><a href="#">Save As</a></li>
           <li><a href="#">Exit</a></li>
         </ul>
       </li>
       <li><a href="#">Edit</a>
         <ul>
           <li><a href="#">Delete Command</a></li>
           <li><a href="#">Clear Deletes</a></li>
           <li><a href="#">Set Breakpoint</a></li>
           <li><a href="#">Clear Breakpoints</a></li>
         </ul>
       </li>
       <li><a href="#">View</a>
         <ul>
           <li><a href="#">Breakpoints</a></li>
           <li><a href="#">Deleted Commands</a></li>
           <li><a href="#">Zoom In</a></li>
           <li><a href="#">Zoom Out</a></li>
         </ul>
       </li>
       <li><a href="#">Navigate</a>
         <ul>
           <li><a href="#" onClick="javascript:rewind()">Rewind</a></li>
           <li><a href="#" onClick="javascript:stepBack()">Step Back</a></li>
           <li><a href="#" onClick="javascript:stepForward()">Step Forward</a></li>
           <li><a href="#" onClick="javascript:play()">Play</a></li>
           <li><a href="#" onClick="javascript:pause()">Pause</a></li>
           <li><a href="#">Go to Line...</a></li>
         </ul>
       </li>
       <li><a href="#">Window</a>
         <ul>
           <li><a href="#">Inspector</a></li>
           <li><a href="#">Directory</a></li>
         </ul>
       </li>
     </ul>
   </div>
   <div id="buttons" class="row">
     <div class="column-set">
       <div class="column">
         <button onClick="javascript:rewind()"><img src="icons/rewind.png"/><br/>Rewind</button>
         <button onClick="javascript:stepBack()"><img src="icons/previous.png"/><br/>Step Back</button>
         <button onClick="javascript:pause()"><img src="icons/pause.png"/><br/>Pause</button>
         <button onClick="javascript:stepForward()"><img src="icons/next.png"/><br/>Step Forward</button>
         <button onClick="javascript:play()"><img src="icons/play.png"/><br/>Play</button>
       </div>
       <div class="column">
         <button onClick="javascript:toggleInspector()"><img src="icons/inspector.png"/><br/>Inspector</button>
       </div>
       <div class="column">
         <button><img src="icons/profile.png"/><br/>Profile</button>
       </div>
       <div class="column" style="text-align:right; vertical-align:middle;">
         <select id="command_filter" onChange="javascript:updateCommandList(this.options[this.selectedIndex].value)"></select>
         <button onClick="javascript:updateCommandList()"><img src="icons/reload.png" /><br/>Clear Filter</button>
       </div>
     </div>
   </div>
   <div class="row">
     <div class="column-set">
       <div id="left_column" class="column">
         <div class="row-set">
           <div id="command_list_div" class="row">
             <form id="command_list_form">
               <select id="command_list" size="2" onChange="javascript:commandSelected()">
                 <option value="-1">Commands go here...</option>
               </select>
             </form>
           </div>
         </div>
       </div>
       <div id="right_column" class="row-set">
         <div id="top_row" class="row">
           <div id="display_pane" class="column">
             <div id="listener" style="width:100%; height:100%;">
               <script type="text/javascript">
                 var listener = document.getElementById('listener');
                 listener.addEventListener('load', moduleDidLoad, true);
                 listener.addEventListener('message', handleMessage, true);
               </script>
               <embed name="nacl_module"
                  id="skia_nacl"
                  src="debugger.nmf"
                  type="application/x-nacl"
                  width="100%"
                  height="100%"
                  style="width:100%, height:100%;"/>
             </div>
           </div>
           <div id="right_panel" class="column">
             <div class="thin_outline">
               <div id="visibility_filter" class="settings_block">
                 Visibility Filter<br/>
                 <div class="thin_outline">
                   <form id="visibility_filter_form">
                     <input type="radio" name="visibility_filter_radio" value="on">On<br/>
                     <input type="radio" name="visibility_filter_radio" value="off" checked>Off
                   </form>
                 </div>
               </div>
               <div id="command_scrolling" class="settings_block">
                 Command Scrolling Preferences<br/>
                 <div class="thin_outline">
                   <div class="row-set">
                     <div class="row">
                       <div class="column-set">
                         <div class="column">
                           Current Command:
                         </div>
                         <div class="column" style="text-align:right; width:35%;">
                           <input type="text" style="width:100%;"/>
                         </div>
                       </div>
                     </div>
                     <div class="row">
                       <div class="column-set">
                         <div class="column">
                           Command HitBox:
                         </div>
                         <div class="column" style="text-align:right; width:35%;">
                           <input type="text" style="width:100%;"/>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
               <div id="render_targets" class="settings_block">
                 Render Targets<br/>
                 <div class="thin_outline">
                   <form id="render_targets_form">
                     <div class="row-set">
                       <div class="row">
                         <div class="column-set">
                           <div class="column">Raster:</div>
                           <div class="column" style="text-align:right;">
                             <input type="checkbox" name="render_targets_checkbox" value="raster" checked/>
                           </div>
                         </div>
                       </div>
                       <div class="row">
                         <div class="column-set">
                           <div class="column" style="padding-left:30px;">Overdraw Viz:</div>
                           <div class="column" style="text-align:right;">
                             <input type="checkbox" name="render_targets_checkbox" value="overdraw"/>
                           </div>
                         </div>
                       </div>
                       <div class="row">
                         <div class="column-set">
                           <div class="column">OpenGL</div>
                           <div class="column" style="text-align:right;">
                             <input type="checkbox" name="render_targets_checkbox" value="opengl"/>
                           </div>
                         </div>
                       </div>
                     </div>
                   </form>
                 </div>
               </div>
               <div id="zoom_level" class="settings_block">
                 <div class="thin_outline">
                   <div class="row-set">
                     <div class="row">
                       <div class="column-set">
                         <div class="column">
                           Zoom Level:
                         </div>
                         <div class="column" style="text-align:right; width:35%;">
                           <input type="text" style="width:100%;"/>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div id="small_window_wrapper" class="settings_block">
               <div class="thin_outline" style="padding:0px;">
                 <div id="small_window">
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div id="bottom_row" class="row">
           <div id="tabview" class="column">
             <div class="row-set">
               <div class="row" style="height:5px; overflow:auto;">
                 <form id="overviewdetails_form">
                   <input type="radio" name="overviewdetails_radio" onChange="javascript:updateOverviewDetails()" id="overview_radio" value="overview" checked>Overview
                   <input type="radio" name="overviewdetails_radio" onChange="javascript:updateOverviewDetails()" id="details_radio" value="details">Details
                 </form>
               </div>
               <div class="row">
                 <div id="overviewdetails"></div>
               </div>
             </div>
           </div>
           <div id="matrixclip" class="column">
             Current Matrix
             <table>
               <tr>
                 <td><input type="text" id="matrix00" class="matrix" /></td>
                 <td><input type="text" id="matrix01" class="matrix" /></td>
                 <td><input type="text" id="matrix02" class="matrix" /></td>
               </tr>
               <tr>
                 <td><input type="text" id="matrix10" class="matrix" /></td>
                 <td><input type="text" id="matrix11" class="matrix" /></td>
                 <td><input type="text" id="matrix12" class="matrix" /></td>
               </tr>
               <tr>
                 <td><input type="text" id="matrix20" class="matrix" /></td>
                 <td><input type="text" id="matrix21" class="matrix" /></td>
                 <td><input type="text" id="matrix22" class="matrix" /></td>
               </tr>
             </table>
             Current Clip
             <table>
               <tr>
                 <td><input type="text" id="clip00" class="matrix" /></td>
                 <td><input type="text" id="clip01" class="matrix" /></td>
               </tr>
               <tr>
                 <td><input type="text" id="clip10" class="matrix" /></td>
                 <td><input type="text" id="clip11" class="matrix" /></td>
               </tr>
             </table>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <input type="file" id="file_open" style="display:none;"/>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<!--
	Copyright 2013 Google Inc.

	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->
	<head>
	<title>Skia Debugger</title>
	<link rel="stylesheet" type="text/css" href="debugger.css"/>
	<script type="text/javascript">
	"use strict";

	var skia_module = null; // Global application object.
	var display_right_panel = null;
	var display_bottom_row = null;
	var overview_text = "";
	var details_text = "Default details text.";
	var command_list = [];
	var command_types = {};
	var no_filter_text = "--Filter By Available Commands--";

	function openFileDialog() {
	var event = document.createEvent("MouseEvents");
	event.initEvent("click", true, false);
	document.getElementById("file_open").dispatchEvent(event);
	}

	function updateOverviewDetails() {
	var radio_buttons = document.getElementsByName("overviewdetails_radio");
	for (var i = 0; i < radio_buttons.length; ++i) {
	if (radio_buttons[i].checked) {
	if (radio_buttons[i].value == "details") {
	document.getElementById("overviewdetails").innerHTML = details_text;
	} else {
	document.getElementById("overviewdetails").innerHTML = overview_text;
	}
	return;
	}
	}
	// If no radio button is checked, check the "overview" button.
	for (var i = 0; i < radio_buttons.length; ++i) {
	if (radio_buttons[i].value == "overview") {
	radio_buttons[i].checked = true;
	document.getElementById("overviewdetails").innerHTML = overview_text;
	return;
	}
	}
	}

	function makeIndentString(indent_amt) {
	var indent_str = "";
	for (var i = 0; i < indent_amt; ++i) {
	indent_str += "--";
	}
	return indent_str;
	}

	function updateCommandList(filter) {
	var command_list_display = document.getElementById("command_list");
	command_list_display.options.length = 0;
	var indent = 0;
	var indent_str = "";
	for (var i = 0; i < command_list.length; ++i) {
	if (command_list[i] == "Restore") {
	indent--;
	indent_str = makeIndentString(indent);
	}
	if (!filter \|\| filter == no_filter_text \|\| command_list[i] == filter) {
	command_list_display.options.add(new Option(indent_str + command_list[i], i));
	}
	if (command_list[i] == "Save" \|\| command_list[i] == "Save Layer") {
	indent++;
	indent_str = makeIndentString(indent);
	}
	}
	command_list_display.selectedIndex = command_list_display.length - 1;

	// TODO(borenet): Should the SKP re-draw when the command list is updated?
	//commandSelected();
	}

	function updateFilterList() {
	var filter_list_display = document.getElementById("command_filter");
	filter_list_display.options.length = 0;
	filter_list_display.options.add(new Option(no_filter_text, no_filter_text));
	for (var command_type in command_types) {
	if (command_types.hasOwnProperty(command_type)) {
	filter_list_display.options.add(new Option(command_type, command_type));
	}
	}
	}

	function openFile(event) {
	document.getElementById("overviewdetails").innerHTML = "";
	var files = event.target.files;
	if (files.length != 1) {
	return;
	}
	var file = files[0];
	var reader = new FileReader();
	reader.onload = (function(theFile) {
	return function(e) {
	var data_prefix = "data:;base64,";
	skia_module.postMessage("LoadSKP" + e.target.result.slice(data_prefix.length));
	};
	})(file);
	reader.readAsDataURL(file);
	}

	function toggleInspector() {
	var right_panel = document.getElementById("right_panel");
	var bottom_row = document.getElementById("bottom_row");
	if (right_panel.style.display == display_right_panel) {
	right_panel.style.display = "none";
	bottom_row.style.display = "none";
	} else {
	right_panel.style.display = display_right_panel;
	bottom_row.style.display = display_bottom_row;
	}
	}

	function onLoad() {
	document.getElementById("file_open").addEventListener("change", openFile, false);
	var right_panel = document.getElementById("right_panel");
	var bottom_row = document.getElementById("bottom_row");
	display_right_panel = right_panel.style.display;
	display_bottom_row = bottom_row.style.display;
	updateOverviewDetails();
	updateFilterList();
	}

	// When the module loads, begin running the application.
	function moduleDidLoad() {
	skia_module = document.getElementById("skia_nacl");
	sendMsg("init");
	}

	function handleMessage(message_event) {
	var cmd_skdebugf = "SkDebugf:";
	var cmd_clear_commands = "ClearCommands";
	var cmd_add_command = "AddCommand:";
	var cmd_update_commands = "UpdateCommands";
	var cmd_set_overview = "SetOverview:";
	var cmd_add_filter_option = "AddFilterOption";
	if (message_event.data.indexOf(cmd_skdebugf) == 0) {
	var msg_contents = message_event.data.slice(cmd_skdebugf.length)
	console.log("Skia: " + msg_contents);
	} else if (message_event.data.indexOf(cmd_clear_commands) == 0) {
	command_list = [];
	command_types = {};
	updateCommandList();
	updateFilterList();
	} else if (message_event.data.indexOf(cmd_add_command) == 0) {
	var command = message_event.data.slice(cmd_add_command.length);
	command_list.push(command);
	if (command_types[command] == undefined) {
	command_types[command] = 1;
	} else {
	command_types[command]++;
	}
	} else if (message_event.data.indexOf(cmd_update_commands) == 0) {
	updateCommandList();
	updateFilterList();
	} else if (message_event.data.indexOf(cmd_set_overview) == 0) {
	overview_text = message_event.data.slice(cmd_set_overview.length);
	document.getElementById("overview_radio").checked = true;
	updateOverviewDetails();
	} else {
	alert(message_event.data);
	}
	}

	// Send a message to the plugin.
	function sendMsg(msg) {
	if (skia_module) {
	//console.log("Sending msg:" + msg);
	skia_module.postMessage(msg);
	} else {
	alert("The Skia module has not properly loaded...");
	}
	}

	function commandSelected() {
	var command_list = document.getElementById("command_list");
	var selected_index = command_list.options[command_list.selectedIndex].value;
	if (selected_index >= 0) {
	sendMsg("CommandSelected:" + selected_index);
	}
	}

	function rewind() {
	command_list.selectedIndex = 0;
	sendMsg("Rewind");
	}

	function stepBack() {
	if (command_list.selectedIndex > 0) {
	command_list.selectedIndex = command_list.selectedIndex - 1;
	}
	sendMsg("StepBack");
	}

	function pause() {
	sendMsg("Pause");
	}

	function stepForward() {
	if (command_list.selectedIndex < command_list.length - 1) {
	command_list.selectedIndex = command_list.selectedIndex + 1;
	}
	sendMsg("StepForward");
	}

	function play() {
	command_list.selectedIndex = command_list.length - 1;
	sendMsg("Play");
	}
	</script>
	</head>
	<body onLoad="javascript:onLoad()">
	<div id="content" class="row-set">
	<div id="menu" class="row">
	<ul id="menu-bar" class="dropdown-menu">
	<li><a href="#">File</a>
	<ul>
	<li><a href="#" onClick="javascript:openFileDialog()">Open</a></li>
	<li><a href="#">Save</a></li>
	<li><a href="#">Save As</a></li>
	<li><a href="#">Exit</a></li>
	</ul>
	</li>
	<li><a href="#">Edit</a>
	<ul>
	<li><a href="#">Delete Command</a></li>
	<li><a href="#">Clear Deletes</a></li>
	<li><a href="#">Set Breakpoint</a></li>
	<li><a href="#">Clear Breakpoints</a></li>
	</ul>
	</li>
	<li><a href="#">View</a>
	<ul>
	<li><a href="#">Breakpoints</a></li>
	<li><a href="#">Deleted Commands</a></li>
	<li><a href="#">Zoom In</a></li>
	<li><a href="#">Zoom Out</a></li>
	</ul>
	</li>
	<li><a href="#">Navigate</a>
	<ul>
	<li><a href="#" onClick="javascript:rewind()">Rewind</a></li>
	<li><a href="#" onClick="javascript:stepBack()">Step Back</a></li>
	<li><a href="#" onClick="javascript:stepForward()">Step Forward</a></li>
	<li><a href="#" onClick="javascript:play()">Play</a></li>
	<li><a href="#" onClick="javascript:pause()">Pause</a></li>
	<li><a href="#">Go to Line...</a></li>
	</ul>
	</li>
	<li><a href="#">Window</a>
	<ul>
	<li><a href="#">Inspector</a></li>
	<li><a href="#">Directory</a></li>
	</ul>
	</li>
	</ul>
	</div>
	<div id="buttons" class="row">
	<div class="column-set">
	<div class="column">
	<button onClick="javascript:rewind()"><img src="icons/rewind.png"/><br/>Rewind</button>
	<button onClick="javascript:stepBack()"><img src="icons/previous.png"/><br/>Step Back</button>
	<button onClick="javascript:pause()"><img src="icons/pause.png"/><br/>Pause</button>
	<button onClick="javascript:stepForward()"><img src="icons/next.png"/><br/>Step Forward</button>
	<button onClick="javascript:play()"><img src="icons/play.png"/><br/>Play</button>
	</div>
	<div class="column">
	<button onClick="javascript:toggleInspector()"><img src="icons/inspector.png"/><br/>Inspector</button>
	</div>
	<div class="column">
	<button><img src="icons/profile.png"/><br/>Profile</button>
	</div>
	<div class="column" style="text-align:right; vertical-align:middle;">
	<select id="command_filter" onChange="javascript:updateCommandList(this.options[this.selectedIndex].value)"></select>
	<button onClick="javascript:updateCommandList()"><img src="icons/reload.png" /><br/>Clear Filter</button>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="column-set">
	<div id="left_column" class="column">
	<div class="row-set">
	<div id="command_list_div" class="row">
	<form id="command_list_form">
	<select id="command_list" size="2" onChange="javascript:commandSelected()">
	<option value="-1">Commands go here...</option>
	</select>
	</form>
	</div>
	</div>
	</div>
	<div id="right_column" class="row-set">
	<div id="top_row" class="row">
	<div id="display_pane" class="column">
	<div id="listener" style="width:100%; height:100%;">
	<script type="text/javascript">
	var listener = document.getElementById('listener');
	listener.addEventListener('load', moduleDidLoad, true);
	listener.addEventListener('message', handleMessage, true);
	</script>
	<embed name="nacl_module"
	id="skia_nacl"
	src="debugger.nmf"
	type="application/x-nacl"
	width="100%"
	height="100%"
	style="width:100%, height:100%;"/>
	</div>
	</div>
	<div id="right_panel" class="column">
	<div class="thin_outline">
	<div id="visibility_filter" class="settings_block">
	Visibility Filter<br/>
	<div class="thin_outline">
	<form id="visibility_filter_form">
	<input type="radio" name="visibility_filter_radio" value="on">On<br/>
	<input type="radio" name="visibility_filter_radio" value="off" checked>Off
	</form>
	</div>
	</div>
	<div id="command_scrolling" class="settings_block">
	Command Scrolling Preferences<br/>
	<div class="thin_outline">
	<div class="row-set">
	<div class="row">
	<div class="column-set">
	<div class="column">
	Current Command:
	</div>
	<div class="column" style="text-align:right; width:35%;">
	<input type="text" style="width:100%;"/>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="column-set">
	<div class="column">
	Command HitBox:
	</div>
	<div class="column" style="text-align:right; width:35%;">
	<input type="text" style="width:100%;"/>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div id="render_targets" class="settings_block">
	Render Targets<br/>
	<div class="thin_outline">
	<form id="render_targets_form">
	<div class="row-set">
	<div class="row">
	<div class="column-set">
	<div class="column">Raster:</div>
	<div class="column" style="text-align:right;">
	<input type="checkbox" name="render_targets_checkbox" value="raster" checked/>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="column-set">
	<div class="column" style="padding-left:30px;">Overdraw Viz:</div>
	<div class="column" style="text-align:right;">
	<input type="checkbox" name="render_targets_checkbox" value="overdraw"/>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="column-set">
	<div class="column">OpenGL</div>
	<div class="column" style="text-align:right;">
	<input type="checkbox" name="render_targets_checkbox" value="opengl"/>
	</div>
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>
	<div id="zoom_level" class="settings_block">
	<div class="thin_outline">
	<div class="row-set">
	<div class="row">
	<div class="column-set">
	<div class="column">
	Zoom Level:
	</div>
	<div class="column" style="text-align:right; width:35%;">
	<input type="text" style="width:100%;"/>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div id="small_window_wrapper" class="settings_block">
	<div class="thin_outline" style="padding:0px;">
	<div id="small_window">
	</div>
	</div>
	</div>
	</div>
	</div>
	<div id="bottom_row" class="row">
	<div id="tabview" class="column">
	<div class="row-set">
	<div class="row" style="height:5px; overflow:auto;">
	<form id="overviewdetails_form">
	<input type="radio" name="overviewdetails_radio" onChange="javascript:updateOverviewDetails()" id="overview_radio" value="overview" checked>Overview
	<input type="radio" name="overviewdetails_radio" onChange="javascript:updateOverviewDetails()" id="details_radio" value="details">Details
	</form>
	</div>
	<div class="row">
	<div id="overviewdetails"></div>
	</div>
	</div>
	</div>
	<div id="matrixclip" class="column">
	Current Matrix
	<table>
	<tr>
	<td><input type="text" id="matrix00" class="matrix" /></td>
	<td><input type="text" id="matrix01" class="matrix" /></td>
	<td><input type="text" id="matrix02" class="matrix" /></td>
	</tr>
	<tr>
	<td><input type="text" id="matrix10" class="matrix" /></td>
	<td><input type="text" id="matrix11" class="matrix" /></td>
	<td><input type="text" id="matrix12" class="matrix" /></td>
	</tr>
	<tr>
	<td><input type="text" id="matrix20" class="matrix" /></td>
	<td><input type="text" id="matrix21" class="matrix" /></td>
	<td><input type="text" id="matrix22" class="matrix" /></td>
	</tr>
	</table>
	Current Clip
	<table>
	<tr>
	<td><input type="text" id="clip00" class="matrix" /></td>
	<td><input type="text" id="clip01" class="matrix" /></td>
	</tr>
	<tr>
	<td><input type="text" id="clip10" class="matrix" /></td>
	<td><input type="text" id="clip11" class="matrix" /></td>
	</tr>
	</table>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<input type="file" id="file_open" style="display:none;"/>
	</body>
	</html>