Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1650)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: nacl/debugger/index.html

Issue 12545007: Incremental changes to NaCl debugger (Closed) Base URL: http://skia.googlecode.com/svn/
Patch Set: Created 7 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « nacl/debugger/debugger.css ('k') | nacl/src/nacl_debugger.cpp » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: nacl/debugger/index.html
===================================================================
--- nacl/debugger/index.html (revision 7983)
+++ nacl/debugger/index.html (working copy)
@@ -9,14 +9,136 @@
<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;
+
+ function openFileDialog() {
+ var event = document.createEvent("MouseEvents");
+ event.initEvent("click", true, false);
+ document.getElementById("file_open").dispatchEvent(event);
+ }
+
+ function openFile(event) {
+ var files = event.target.files;
+ if (files.length != 1) {
+ alert("Please select one SKP file.");
+ }
+ var file = files[0];
+ var reader = new FileReader();
+ reader.onload = (function(theFile) {
+ return function(e) {
+ //alert(e.target.result);
+ 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;
+ }
+
+ // 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_clearcommands = "ClearCommands";
+ var cmd_addcommand = "AddCommand:";
+ 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_clearcommands) == 0) {
+ document.getElementById("command_list").options.length = 0;
+ } else if (message_event.data.indexOf(cmd_addcommand) == 0) {
+ var command_list = document.getElementById("command_list");
+ var command = message_event.data.slice(cmd_addcommand.length);
+ var index = command_list.options.length
+ command_list.options[index] = new Option(command, index);
+ command_list.selectedIndex = command_list.length - 1;
+ } else {
+ alert(message_event.data);
+ }
+ }
+
+ 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);
+ }
+ }
+
+ // 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 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>
+<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="#">Open</a></li>
+ <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>
@@ -40,11 +162,11 @@
</li>
<li><a href="#">Navigate</a>
<ul>
- <li><a href="#">Rewind</a></li>
- <li><a href="#">Step Back</a></li>
- <li><a href="#">Step Forward</a></li>
- <li><a href="#">Play</a></li>
- <li><a href="#">Pause</a></li>
+ <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>
@@ -59,14 +181,14 @@
<div id="buttons" class="row">
<div class="column-set">
<div class="column">
- <button><img src="icons/rewind.png"/><br/>Rewind</button>
- <button><img src="icons/previous.png"/><br/>Step Back</button>
- <button><img src="icons/pause.png"/><br/>Pause</button>
- <button><img src="icons/next.png"/><br/>Step Forward</button>
- <button><img src="icons/play.png"/><br/>Play</button>
+ <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><img src="icons/inspector.png"/><br/>Inspector</button>
+ <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>
@@ -85,28 +207,30 @@
<div class="row-set">
<div id="command_list_div" class="row">
<form id="command_list_form">
- <select id="command_list" size="2">
- <option>Commands go here...</option>
+ <select id="command_list" size="2" onChange="javascript:commandSelected()">
+ <option value="-1">Commands go here...</option>
</select>
</form>
</div>
- <div id="skp_list_div" class="row">
- <form id="skp_list_form">
- <select id="skp_list" size="2">
- <option>List of SKPs 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">
- <embed name="nacl_module"
- id="skia_nacl"
- src="debugger.nmf"
- style="width:100%; height:100%;"
- type="application/x-nacl" />
+ <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">
@@ -254,6 +378,6 @@
</div>
</div>
</div>
-
+<input type="file" id="file_open" style="display:none;"/>
</body>
</html>
« no previous file with comments | « nacl/debugger/debugger.css ('k') | nacl/src/nacl_debugger.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698