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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: nacl/debugger/index.html

Issue 12449006: NaCl Debugger: Implement overview and filters, cleanup (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') | trunk/debugger/QT/SkDebuggerGUI.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
borenet 2013/03/07 21:38:08 At some point, I should find and follow a style gu
djsollen 2013/03/07 21:50:22 http://www.corp.google.com/eng/doc/javascriptguide
borenet 2013/03/08 13:00:26 Thanks. I'll fix style issues in another CL.
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"> 12 <script type="text/javascript">
13 "use strict"; 13 "use strict";
14 14
15 var skia_module = null; // Global application object. 15 var skia_module = null; // Global application object.
16 var display_right_panel = null; 16 var display_right_panel = null;
17 var display_bottom_row = null; 17 var display_bottom_row = null;
18 var overview_text = "";
19 var details_text = "Default details text.";
20 var command_list = [];
21 var command_types = {};
22 var no_filter_text = "--Filter By Available Commands--";
18 23
19 function openFileDialog() { 24 function openFileDialog() {
20 var event = document.createEvent("MouseEvents"); 25 var event = document.createEvent("MouseEvents");
21 event.initEvent("click", true, false); 26 event.initEvent("click", true, false);
22 document.getElementById("file_open").dispatchEvent(event); 27 document.getElementById("file_open").dispatchEvent(event);
23 } 28 }
24 29
30 function updateOverviewDetails() {
31 var radio_buttons = document.getElementsByName("overviewdetails_radio");
32 for (var i = 0; i < radio_buttons.length; ++i) {
33 if (radio_buttons[i].checked) {
34 if (radio_buttons[i].value == "details") {
35 document.getElementById("overviewdetails").innerHTML = details_text;
36 } else {
37 document.getElementById("overviewdetails").innerHTML = overview_text ;
38 }
39 return;
40 }
41 }
42 // If no radio button is checked, check the "overview" button.
43 for (var i = 0; i < radio_buttons.length; ++i) {
44 if (radio_buttons[i].value == "overview") {
45 radio_buttons[i].checked = true;
46 document.getElementById("overviewdetails").innerHTML = overview_text;
47 return;
48 }
49 }
50 }
51
52 function makeIndentString(indent_amt) {
53 var indent_str = "";
54 for (var i = 0; i < indent_amt; ++i) {
55 indent_str += "--";
56 }
57 return indent_str;
58 }
59
60 function updateCommandList(filter) {
61 var command_list_display = document.getElementById("command_list");
62 command_list_display.options.length = 0;
63 var indent = 0;
64 var indent_str = "";
65 for (var i = 0; i < command_list.length; ++i) {
66 if (command_list[i] == "Restore") {
67 indent--;
68 indent_str = makeIndentString(indent);
69 }
70 if (!filter || filter == no_filter_text || command_list[i] == filter) {
71 command_list_display.options.add(new Option(indent_str + command_list[ i], i));
72 }
73 if (command_list[i] == "Save" || command_list[i] == "Save Layer") {
74 indent++;
75 indent_str = makeIndentString(indent);
76 }
77 }
78 command_list_display.selectedIndex = command_list_display.length - 1;
79
80 // TODO(borenet): Should the SKP re-draw when the command list is updated?
81 //commandSelected();
82 }
83
84 function updateFilterList() {
85 var filter_list_display = document.getElementById("command_filter");
86 filter_list_display.options.length = 0;
87 filter_list_display.options.add(new Option(no_filter_text, no_filter_text) );
88 for (var command_type in command_types) {
89 if (command_types.hasOwnProperty(command_type)) {
90 filter_list_display.options.add(new Option(command_type, command_type) );
91 }
92 }
93 }
94
25 function openFile(event) { 95 function openFile(event) {
96 document.getElementById("overviewdetails").innerHTML = "";
26 var files = event.target.files; 97 var files = event.target.files;
27 if (files.length != 1) { 98 if (files.length != 1) {
28 alert("Please select one SKP file."); 99 return;
29 } 100 }
30 var file = files[0]; 101 var file = files[0];
31 var reader = new FileReader(); 102 var reader = new FileReader();
32 reader.onload = (function(theFile) { 103 reader.onload = (function(theFile) {
33 return function(e) { 104 return function(e) {
34 //alert(e.target.result);
35 var data_prefix = "data:;base64,"; 105 var data_prefix = "data:;base64,";
36 skia_module.postMessage("LoadSKP" + e.target.result.slice(data_prefix. length)); 106 skia_module.postMessage("LoadSKP" + e.target.result.slice(data_prefix. length));
37 }; 107 };
38 })(file); 108 })(file);
39 reader.readAsDataURL(file); 109 reader.readAsDataURL(file);
40 } 110 }
41 111
42 function toggleInspector() { 112 function toggleInspector() {
43 var right_panel = document.getElementById("right_panel"); 113 var right_panel = document.getElementById("right_panel");
44 var bottom_row = document.getElementById("bottom_row"); 114 var bottom_row = document.getElementById("bottom_row");
45 if (right_panel.style.display == display_right_panel) { 115 if (right_panel.style.display == display_right_panel) {
46 right_panel.style.display = "none"; 116 right_panel.style.display = "none";
47 bottom_row.style.display = "none"; 117 bottom_row.style.display = "none";
48 } else { 118 } else {
49 right_panel.style.display = display_right_panel; 119 right_panel.style.display = display_right_panel;
50 bottom_row.style.display = display_bottom_row; 120 bottom_row.style.display = display_bottom_row;
51 } 121 }
52 } 122 }
53 123
54 function onLoad() { 124 function onLoad() {
55 document.getElementById("file_open").addEventListener("change", openFile, false); 125 document.getElementById("file_open").addEventListener("change", openFile, false);
56 var right_panel = document.getElementById("right_panel"); 126 var right_panel = document.getElementById("right_panel");
57 var bottom_row = document.getElementById("bottom_row"); 127 var bottom_row = document.getElementById("bottom_row");
58 display_right_panel = right_panel.style.display; 128 display_right_panel = right_panel.style.display;
59 display_bottom_row = bottom_row.style.display; 129 display_bottom_row = bottom_row.style.display;
130 updateOverviewDetails();
131 updateFilterList();
60 } 132 }
61 133
62 // When the module loads, begin running the application. 134 // When the module loads, begin running the application.
63 function moduleDidLoad() { 135 function moduleDidLoad() {
64 skia_module = document.getElementById("skia_nacl"); 136 skia_module = document.getElementById("skia_nacl");
65 sendMsg("init"); 137 sendMsg("init");
66 } 138 }
67 139
68 function handleMessage(message_event) { 140 function handleMessage(message_event) {
69 var cmd_skdebugf = "SkDebugf:"; 141 var cmd_skdebugf = "SkDebugf:";
70 var cmd_clearcommands = "ClearCommands"; 142 var cmd_clear_commands = "ClearCommands";
71 var cmd_addcommand = "AddCommand:"; 143 var cmd_add_command = "AddCommand:";
144 var cmd_update_commands = "UpdateCommands";
145 var cmd_set_overview = "SetOverview:";
146 var cmd_add_filter_option = "AddFilterOption";
72 if (message_event.data.indexOf(cmd_skdebugf) == 0) { 147 if (message_event.data.indexOf(cmd_skdebugf) == 0) {
borenet 2013/03/07 21:38:08 This if/else chain should be modified to call othe
73 var msg_contents = message_event.data.slice(cmd_skdebugf.length) 148 var msg_contents = message_event.data.slice(cmd_skdebugf.length)
74 console.log("Skia: " + msg_contents); 149 console.log("Skia: " + msg_contents);
75 } else if (message_event.data.indexOf(cmd_clearcommands) == 0) { 150 } else if (message_event.data.indexOf(cmd_clear_commands) == 0) {
76 document.getElementById("command_list").options.length = 0; 151 command_list = [];
77 } else if (message_event.data.indexOf(cmd_addcommand) == 0) { 152 command_types = {};
78 var command_list = document.getElementById("command_list"); 153 updateCommandList();
79 var command = message_event.data.slice(cmd_addcommand.length); 154 updateFilterList();
80 var index = command_list.options.length 155 } else if (message_event.data.indexOf(cmd_add_command) == 0) {
81 command_list.options[index] = new Option(command, index); 156 var command = message_event.data.slice(cmd_add_command.length);
82 command_list.selectedIndex = command_list.length - 1; 157 command_list.push(command);
158 if (command_types[command] == undefined) {
159 command_types[command] = 1;
160 } else {
161 command_types[command]++;
162 }
163 } else if (message_event.data.indexOf(cmd_update_commands) == 0) {
164 updateCommandList();
165 updateFilterList();
166 } else if (message_event.data.indexOf(cmd_set_overview) == 0) {
167 overview_text = message_event.data.slice(cmd_set_overview.length);
168 document.getElementById("overview_radio").checked = true;
169 updateOverviewDetails();
83 } else { 170 } else {
84 alert(message_event.data); 171 alert(message_event.data);
85 } 172 }
86 } 173 }
87 174
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. 175 // Send a message to the plugin.
97 function sendMsg(msg) { 176 function sendMsg(msg) {
98 if (skia_module) { 177 if (skia_module) {
99 //console.log("Sending msg:" + msg); 178 //console.log("Sending msg:" + msg);
100 skia_module.postMessage(msg); 179 skia_module.postMessage(msg);
101 } else { 180 } else {
102 alert("The Skia module has not properly loaded..."); 181 alert("The Skia module has not properly loaded...");
103 } 182 }
104 } 183 }
105 184
185 function commandSelected() {
186 var command_list = document.getElementById("command_list");
187 var selected_index = command_list.options[command_list.selectedIndex].valu e;
188 if (selected_index >= 0) {
189 sendMsg("CommandSelected:" + selected_index);
190 }
191 }
192
106 function rewind() { 193 function rewind() {
107 command_list.selectedIndex = 0; 194 command_list.selectedIndex = 0;
108 sendMsg("Rewind"); 195 sendMsg("Rewind");
109 } 196 }
110 197
111 function stepBack() { 198 function stepBack() {
112 if (command_list.selectedIndex > 0) { 199 if (command_list.selectedIndex > 0) {
113 command_list.selectedIndex = command_list.selectedIndex - 1; 200 command_list.selectedIndex = command_list.selectedIndex - 1;
114 } 201 }
115 sendMsg("StepBack"); 202 sendMsg("StepBack");
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after
187 <button onClick="javascript:stepForward()"><img src="icons/next.png"/><b r/>Step Forward</button> 274 <button onClick="javascript:stepForward()"><img src="icons/next.png"/><b r/>Step Forward</button>
188 <button onClick="javascript:play()"><img src="icons/play.png"/><br/>Play </button> 275 <button onClick="javascript:play()"><img src="icons/play.png"/><br/>Play </button>
189 </div> 276 </div>
190 <div class="column"> 277 <div class="column">
191 <button onClick="javascript:toggleInspector()"><img src="icons/inspector .png"/><br/>Inspector</button> 278 <button onClick="javascript:toggleInspector()"><img src="icons/inspector .png"/><br/>Inspector</button>
192 </div> 279 </div>
193 <div class="column"> 280 <div class="column">
194 <button><img src="icons/profile.png"/><br/>Profile</button> 281 <button><img src="icons/profile.png"/><br/>Profile</button>
195 </div> 282 </div>
196 <div class="column" style="text-align:right; vertical-align:middle;"> 283 <div class="column" style="text-align:right; vertical-align:middle;">
197 <select> 284 <select id="command_filter" onChange="javascript:updateCommandList(this. options[this.selectedIndex].value)"></select>
198 <option selected>--Filter By Available Commands--</option> 285 <button onClick="javascript:updateCommandList()"><img src="icons/reload. png" /><br/>Clear Filter</button>
199 </select>
200 <button><img src="icons/reload.png"/><br/>Clear Filter</button>
201 </div> 286 </div>
202 </div> 287 </div>
203 </div> 288 </div>
204 <div class="row"> 289 <div class="row">
205 <div class="column-set"> 290 <div class="column-set">
206 <div id="left_column" class="column"> 291 <div id="left_column" class="column">
207 <div class="row-set"> 292 <div class="row-set">
208 <div id="command_list_div" class="row"> 293 <div id="command_list_div" class="row">
209 <form id="command_list_form"> 294 <form id="command_list_form">
210 <select id="command_list" size="2" onChange="javascript:commandSel ected()"> 295 <select id="command_list" size="2" onChange="javascript:commandSel ected()">
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after
326 </div> 411 </div>
327 </div> 412 </div>
328 </div> 413 </div>
329 </div> 414 </div>
330 </div> 415 </div>
331 <div id="bottom_row" class="row"> 416 <div id="bottom_row" class="row">
332 <div id="tabview" class="column"> 417 <div id="tabview" class="column">
333 <div class="row-set"> 418 <div class="row-set">
334 <div class="row" style="height:5px; overflow:auto;"> 419 <div class="row" style="height:5px; overflow:auto;">
335 <form id="overviewdetails_form"> 420 <form id="overviewdetails_form">
336 <input type="radio" name="overviewdetails_radio" value="overvi ew" checked>Overview 421 <input type="radio" name="overviewdetails_radio" onChange="jav ascript:updateOverviewDetails()" id="overview_radio" value="overview" checked>Ov erview
337 <input type="radio" name="overviewdetails_radio" value="detail s">Details 422 <input type="radio" name="overviewdetails_radio" onChange="jav ascript:updateOverviewDetails()" id="details_radio" value="details">Details
338 </form> 423 </form>
339 </div> 424 </div>
340 <div class="row"> 425 <div class="row">
341 <textarea readonly id="overviewdetails"></textarea> 426 <div id="overviewdetails"></div>
342 </div> 427 </div>
343 </div> 428 </div>
344 </div> 429 </div>
345 <div id="matrixclip" class="column"> 430 <div id="matrixclip" class="column">
346 Current Matrix 431 Current Matrix
347 <table> 432 <table>
348 <tr> 433 <tr>
349 <td><input type="text" id="matrix00" class="matrix" /></td> 434 <td><input type="text" id="matrix00" class="matrix" /></td>
350 <td><input type="text" id="matrix01" class="matrix" /></td> 435 <td><input type="text" id="matrix01" class="matrix" /></td>
351 <td><input type="text" id="matrix02" class="matrix" /></td> 436 <td><input type="text" id="matrix02" class="matrix" /></td>
(...skipping 22 matching lines...) Expand all
374 </table> 459 </table>
375 </div> 460 </div>
376 </div> 461 </div>
377 </div> 462 </div>
378 </div> 463 </div>
379 </div> 464 </div>
380 </div> 465 </div>
381 <input type="file" id="file_open" style="display:none;"/> 466 <input type="file" id="file_open" style="display:none;"/>
382 </body> 467 </body>
383 </html> 468 </html>
OLDNEW
« no previous file with comments | « nacl/debugger/debugger.css ('k') | nacl/src/nacl_debugger.cpp » ('j') | trunk/debugger/QT/SkDebuggerGUI.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698