469 lines
18 KiB
HTML
469 lines
18 KiB
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>
|