diff options
Diffstat (limited to 'chromium/third_party/skia/platform_tools/nacl/debugger/index.html')
| -rw-r--r-- | chromium/third_party/skia/platform_tools/nacl/debugger/index.html | 468 |
1 files changed, 468 insertions, 0 deletions
diff --git a/chromium/third_party/skia/platform_tools/nacl/debugger/index.html b/chromium/third_party/skia/platform_tools/nacl/debugger/index.html new file mode 100644 index 00000000000..9d4644d956b --- /dev/null +++ b/chromium/third_party/skia/platform_tools/nacl/debugger/index.html @@ -0,0 +1,468 @@ +<!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> |