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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « nacl/debugger/debugger.css ('k') | nacl/src/nacl_debugger.cpp » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <!-- 3 <!--
4 Copyright 2013 Google Inc. 4 Copyright 2013 Google Inc.
5 5
6 Use of this source code is governed by a BSD-style license that can be 6 Use of this source code is governed by a BSD-style license that can be
7 found in the LICENSE file. 7 found in the LICENSE file.
8 --> 8 -->
9 <head> 9 <head>
10 <title>Skia Debugger</title> 10 <title>Skia Debugger</title>
11 <link rel="stylesheet" type="text/css" href="debugger.css"/> 11 <link rel="stylesheet" type="text/css" href="debugger.css"/>
12 <script type="text/javascript">
13 "use strict";
14
15 var skia_module = null; // Global application object.
16 var display_right_panel = null;
17 var display_bottom_row = null;
18
19 function openFileDialog() {
20 var event = document.createEvent("MouseEvents");
21 event.initEvent("click", true, false);
22 document.getElementById("file_open").dispatchEvent(event);
23 }
24
25 function openFile(event) {
26 var files = event.target.files;
27 if (files.length != 1) {
28 alert("Please select one SKP file.");
29 }
30 var file = files[0];
31 var reader = new FileReader();
32 reader.onload = (function(theFile) {
33 return function(e) {
34 //alert(e.target.result);
35 var data_prefix = "data:;base64,";
36 skia_module.postMessage("LoadSKP" + e.target.result.slice(data_prefix. length));
37 };
38 })(file);
39 reader.readAsDataURL(file);
40 }
41
42 function toggleInspector() {
43 var right_panel = document.getElementById("right_panel");
44 var bottom_row = document.getElementById("bottom_row");
45 if (right_panel.style.display == display_right_panel) {
46 right_panel.style.display = "none";
47 bottom_row.style.display = "none";
48 } else {
49 right_panel.style.display = display_right_panel;
50 bottom_row.style.display = display_bottom_row;
51 }
52 }
53
54 function onLoad() {
55 document.getElementById("file_open").addEventListener("change", openFile, false);
56 var right_panel = document.getElementById("right_panel");
57 var bottom_row = document.getElementById("bottom_row");
58 display_right_panel = right_panel.style.display;
59 display_bottom_row = bottom_row.style.display;
60 }
61
62 // When the module loads, begin running the application.
63 function moduleDidLoad() {
64 skia_module = document.getElementById("skia_nacl");
65 sendMsg("init");
66 }
67
68 function handleMessage(message_event) {
69 var cmd_skdebugf = "SkDebugf:";
70 var cmd_clearcommands = "ClearCommands";
71 var cmd_addcommand = "AddCommand:";
72 if (message_event.data.indexOf(cmd_skdebugf) == 0) {
73 var msg_contents = message_event.data.slice(cmd_skdebugf.length)
74 console.log("Skia: " + msg_contents);
75 } else if (message_event.data.indexOf(cmd_clearcommands) == 0) {
76 document.getElementById("command_list").options.length = 0;
77 } else if (message_event.data.indexOf(cmd_addcommand) == 0) {
78 var command_list = document.getElementById("command_list");
79 var command = message_event.data.slice(cmd_addcommand.length);
80 var index = command_list.options.length
81 command_list.options[index] = new Option(command, index);
82 command_list.selectedIndex = command_list.length - 1;
83 } else {
84 alert(message_event.data);
85 }
86 }
87
88 function commandSelected() {
89 var command_list = document.getElementById("command_list");
90 var selected_index = command_list.options[command_list.selectedIndex].valu e;
91 if (selected_index >= 0) {
92 sendMsg("CommandSelected:" + selected_index);
93 }
94 }
95
96 // Send a message to the plugin.
97 function sendMsg(msg) {
98 if (skia_module) {
99 //console.log("Sending msg:" + msg);
100 skia_module.postMessage(msg);
101 } else {
102 alert("The Skia module has not properly loaded...");
103 }
104 }
105
106 function rewind() {
107 command_list.selectedIndex = 0;
108 sendMsg("Rewind");
109 }
110
111 function stepBack() {
112 if (command_list.selectedIndex > 0) {
113 command_list.selectedIndex = command_list.selectedIndex - 1;
114 }
115 sendMsg("StepBack");
116 }
117
118 function pause() {
119 sendMsg("Pause");
120 }
121
122 function stepForward() {
123 if (command_list.selectedIndex < command_list.length - 1) {
124 command_list.selectedIndex = command_list.selectedIndex + 1;
125 }
126 sendMsg("StepForward");
127 }
128
129 function play() {
130 command_list.selectedIndex = command_list.length - 1;
131 sendMsg("Play");
132 }
133 </script>
12 </head> 134 </head>
13 <body> 135 <body onLoad="javascript:onLoad()">
14 <div id="content" class="row-set"> 136 <div id="content" class="row-set">
15 <div id="menu" class="row"> 137 <div id="menu" class="row">
16 <ul id="menu-bar" class="dropdown-menu"> 138 <ul id="menu-bar" class="dropdown-menu">
17 <li><a href="#">File</a> 139 <li><a href="#">File</a>
18 <ul> 140 <ul>
19 <li><a href="#">Open</a></li> 141 <li><a href="#" onClick="javascript:openFileDialog()">Open</a></li>
20 <li><a href="#">Save</a></li> 142 <li><a href="#">Save</a></li>
21 <li><a href="#">Save As</a></li> 143 <li><a href="#">Save As</a></li>
22 <li><a href="#">Exit</a></li> 144 <li><a href="#">Exit</a></li>
23 </ul> 145 </ul>
24 </li> 146 </li>
25 <li><a href="#">Edit</a> 147 <li><a href="#">Edit</a>
26 <ul> 148 <ul>
27 <li><a href="#">Delete Command</a></li> 149 <li><a href="#">Delete Command</a></li>
28 <li><a href="#">Clear Deletes</a></li> 150 <li><a href="#">Clear Deletes</a></li>
29 <li><a href="#">Set Breakpoint</a></li> 151 <li><a href="#">Set Breakpoint</a></li>
30 <li><a href="#">Clear Breakpoints</a></li> 152 <li><a href="#">Clear Breakpoints</a></li>
31 </ul> 153 </ul>
32 </li> 154 </li>
33 <li><a href="#">View</a> 155 <li><a href="#">View</a>
34 <ul> 156 <ul>
35 <li><a href="#">Breakpoints</a></li> 157 <li><a href="#">Breakpoints</a></li>
36 <li><a href="#">Deleted Commands</a></li> 158 <li><a href="#">Deleted Commands</a></li>
37 <li><a href="#">Zoom In</a></li> 159 <li><a href="#">Zoom In</a></li>
38 <li><a href="#">Zoom Out</a></li> 160 <li><a href="#">Zoom Out</a></li>
39 </ul> 161 </ul>
40 </li> 162 </li>
41 <li><a href="#">Navigate</a> 163 <li><a href="#">Navigate</a>
42 <ul> 164 <ul>
43 <li><a href="#">Rewind</a></li> 165 <li><a href="#" onClick="javascript:rewind()">Rewind</a></li>
44 <li><a href="#">Step Back</a></li> 166 <li><a href="#" onClick="javascript:stepBack()">Step Back</a></li>
45 <li><a href="#">Step Forward</a></li> 167 <li><a href="#" onClick="javascript:stepForward()">Step Forward</a></l i>
46 <li><a href="#">Play</a></li> 168 <li><a href="#" onClick="javascript:play()">Play</a></li>
47 <li><a href="#">Pause</a></li> 169 <li><a href="#" onClick="javascript:pause()">Pause</a></li>
48 <li><a href="#">Go to Line...</a></li> 170 <li><a href="#">Go to Line...</a></li>
49 </ul> 171 </ul>
50 </li> 172 </li>
51 <li><a href="#">Window</a> 173 <li><a href="#">Window</a>
52 <ul> 174 <ul>
53 <li><a href="#">Inspector</a></li> 175 <li><a href="#">Inspector</a></li>
54 <li><a href="#">Directory</a></li> 176 <li><a href="#">Directory</a></li>
55 </ul> 177 </ul>
56 </li> 178 </li>
57 </ul> 179 </ul>
58 </div> 180 </div>
59 <div id="buttons" class="row"> 181 <div id="buttons" class="row">
60 <div class="column-set"> 182 <div class="column-set">
61 <div class="column"> 183 <div class="column">
62 <button><img src="icons/rewind.png"/><br/>Rewind</button> 184 <button onClick="javascript:rewind()"><img src="icons/rewind.png"/><br/> Rewind</button>
63 <button><img src="icons/previous.png"/><br/>Step Back</button> 185 <button onClick="javascript:stepBack()"><img src="icons/previous.png"/>< br/>Step Back</button>
64 <button><img src="icons/pause.png"/><br/>Pause</button> 186 <button onClick="javascript:pause()"><img src="icons/pause.png"/><br/>Pa use</button>
65 <button><img src="icons/next.png"/><br/>Step Forward</button> 187 <button onClick="javascript:stepForward()"><img src="icons/next.png"/><b r/>Step Forward</button>
66 <button><img src="icons/play.png"/><br/>Play</button> 188 <button onClick="javascript:play()"><img src="icons/play.png"/><br/>Play </button>
67 </div> 189 </div>
68 <div class="column"> 190 <div class="column">
69 <button><img src="icons/inspector.png"/><br/>Inspector</button> 191 <button onClick="javascript:toggleInspector()"><img src="icons/inspector .png"/><br/>Inspector</button>
70 </div> 192 </div>
71 <div class="column"> 193 <div class="column">
72 <button><img src="icons/profile.png"/><br/>Profile</button> 194 <button><img src="icons/profile.png"/><br/>Profile</button>
73 </div> 195 </div>
74 <div class="column" style="text-align:right; vertical-align:middle;"> 196 <div class="column" style="text-align:right; vertical-align:middle;">
75 <select> 197 <select>
76 <option selected>--Filter By Available Commands--</option> 198 <option selected>--Filter By Available Commands--</option>
77 </select> 199 </select>
78 <button><img src="icons/reload.png"/><br/>Clear Filter</button> 200 <button><img src="icons/reload.png"/><br/>Clear Filter</button>
79 </div> 201 </div>
80 </div> 202 </div>
81 </div> 203 </div>
82 <div class="row"> 204 <div class="row">
83 <div class="column-set"> 205 <div class="column-set">
84 <div id="left_column" class="column"> 206 <div id="left_column" class="column">
85 <div class="row-set"> 207 <div class="row-set">
86 <div id="command_list_div" class="row"> 208 <div id="command_list_div" class="row">
87 <form id="command_list_form"> 209 <form id="command_list_form">
88 <select id="command_list" size="2"> 210 <select id="command_list" size="2" onChange="javascript:commandSel ected()">
89 <option>Commands go here...</option> 211 <option value="-1">Commands go here...</option>
90 </select>
91 </form>
92 </div>
93 <div id="skp_list_div" class="row">
94 <form id="skp_list_form">
95 <select id="skp_list" size="2">
96 <option>List of SKPs here...</option>
97 </select> 212 </select>
98 </form> 213 </form>
99 </div> 214 </div>
100 </div> 215 </div>
101 </div> 216 </div>
102 <div id="right_column" class="row-set"> 217 <div id="right_column" class="row-set">
103 <div id="top_row" class="row"> 218 <div id="top_row" class="row">
104 <div id="display_pane" class="column"> 219 <div id="display_pane" class="column">
105 <embed name="nacl_module" 220 <div id="listener" style="width:100%; height:100%;">
106 id="skia_nacl" 221 <script type="text/javascript">
107 src="debugger.nmf" 222 var listener = document.getElementById('listener');
108 style="width:100%; height:100%;" 223 listener.addEventListener('load', moduleDidLoad, true);
109 type="application/x-nacl" /> 224 listener.addEventListener('message', handleMessage, true);
225 </script>
226 <embed name="nacl_module"
227 id="skia_nacl"
228 src="debugger.nmf"
229 type="application/x-nacl"
230 width="100%"
231 height="100%"
232 style="width:100%, height:100%;"/>
233 </div>
110 </div> 234 </div>
111 <div id="right_panel" class="column"> 235 <div id="right_panel" class="column">
112 <div class="thin_outline"> 236 <div class="thin_outline">
113 <div id="visibility_filter" class="settings_block"> 237 <div id="visibility_filter" class="settings_block">
114 Visibility Filter<br/> 238 Visibility Filter<br/>
115 <div class="thin_outline"> 239 <div class="thin_outline">
116 <form id="visibility_filter_form"> 240 <form id="visibility_filter_form">
117 <input type="radio" name="visibility_filter_radio" value="on ">On<br/> 241 <input type="radio" name="visibility_filter_radio" value="on ">On<br/>
118 <input type="radio" name="visibility_filter_radio" value="of f" checked>Off 242 <input type="radio" name="visibility_filter_radio" value="of f" checked>Off
119 </form> 243 </form>
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after
247 <td><input type="text" id="clip10" class="matrix" /></td> 371 <td><input type="text" id="clip10" class="matrix" /></td>
248 <td><input type="text" id="clip11" class="matrix" /></td> 372 <td><input type="text" id="clip11" class="matrix" /></td>
249 </tr> 373 </tr>
250 </table> 374 </table>
251 </div> 375 </div>
252 </div> 376 </div>
253 </div> 377 </div>
254 </div> 378 </div>
255 </div> 379 </div>
256 </div> 380 </div>
257 381 <input type="file" id="file_open" style="display:none;"/>
258 </body> 382 </body>
259 </html> 383 </html>
OLDNEW
« 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