<!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>