| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <!-- | |
| 4 Copyright 2013 Google Inc. | |
| 5 | |
| 6 Use of this source code is governed by a BSD-style license that can be | |
| 7 found in the LICENSE file. | |
| 8 --> | |
| 9 <head> | |
| 10 <title>Skia Debugger</title> | |
| 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 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--"; | |
| 23 | |
| 24 function openFileDialog() { | |
| 25 var event = document.createEvent("MouseEvents"); | |
| 26 event.initEvent("click", true, false); | |
| 27 document.getElementById("file_open").dispatchEvent(event); | |
| 28 } | |
| 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 | |
| 95 function openFile(event) { | |
| 96 document.getElementById("overviewdetails").innerHTML = ""; | |
| 97 var files = event.target.files; | |
| 98 if (files.length != 1) { | |
| 99 return; | |
| 100 } | |
| 101 var file = files[0]; | |
| 102 var reader = new FileReader(); | |
| 103 reader.onload = (function(theFile) { | |
| 104 return function(e) { | |
| 105 var data_prefix = "data:;base64,"; | |
| 106 skia_module.postMessage("LoadSKP" + e.target.result.slice(data_prefix.
length)); | |
| 107 }; | |
| 108 })(file); | |
| 109 reader.readAsDataURL(file); | |
| 110 } | |
| 111 | |
| 112 function toggleInspector() { | |
| 113 var right_panel = document.getElementById("right_panel"); | |
| 114 var bottom_row = document.getElementById("bottom_row"); | |
| 115 if (right_panel.style.display == display_right_panel) { | |
| 116 right_panel.style.display = "none"; | |
| 117 bottom_row.style.display = "none"; | |
| 118 } else { | |
| 119 right_panel.style.display = display_right_panel; | |
| 120 bottom_row.style.display = display_bottom_row; | |
| 121 } | |
| 122 } | |
| 123 | |
| 124 function onLoad() { | |
| 125 document.getElementById("file_open").addEventListener("change", openFile,
false); | |
| 126 var right_panel = document.getElementById("right_panel"); | |
| 127 var bottom_row = document.getElementById("bottom_row"); | |
| 128 display_right_panel = right_panel.style.display; | |
| 129 display_bottom_row = bottom_row.style.display; | |
| 130 updateOverviewDetails(); | |
| 131 updateFilterList(); | |
| 132 } | |
| 133 | |
| 134 // When the module loads, begin running the application. | |
| 135 function moduleDidLoad() { | |
| 136 skia_module = document.getElementById("skia_nacl"); | |
| 137 sendMsg("init"); | |
| 138 } | |
| 139 | |
| 140 function handleMessage(message_event) { | |
| 141 var cmd_skdebugf = "SkDebugf:"; | |
| 142 var cmd_clear_commands = "ClearCommands"; | |
| 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"; | |
| 147 if (message_event.data.indexOf(cmd_skdebugf) == 0) { | |
| 148 var msg_contents = message_event.data.slice(cmd_skdebugf.length) | |
| 149 console.log("Skia: " + msg_contents); | |
| 150 } else if (message_event.data.indexOf(cmd_clear_commands) == 0) { | |
| 151 command_list = []; | |
| 152 command_types = {}; | |
| 153 updateCommandList(); | |
| 154 updateFilterList(); | |
| 155 } else if (message_event.data.indexOf(cmd_add_command) == 0) { | |
| 156 var command = message_event.data.slice(cmd_add_command.length); | |
| 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(); | |
| 170 } else { | |
| 171 alert(message_event.data); | |
| 172 } | |
| 173 } | |
| 174 | |
| 175 // Send a message to the plugin. | |
| 176 function sendMsg(msg) { | |
| 177 if (skia_module) { | |
| 178 //console.log("Sending msg:" + msg); | |
| 179 skia_module.postMessage(msg); | |
| 180 } else { | |
| 181 alert("The Skia module has not properly loaded..."); | |
| 182 } | |
| 183 } | |
| 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 | |
| 193 function rewind() { | |
| 194 command_list.selectedIndex = 0; | |
| 195 sendMsg("Rewind"); | |
| 196 } | |
| 197 | |
| 198 function stepBack() { | |
| 199 if (command_list.selectedIndex > 0) { | |
| 200 command_list.selectedIndex = command_list.selectedIndex - 1; | |
| 201 } | |
| 202 sendMsg("StepBack"); | |
| 203 } | |
| 204 | |
| 205 function pause() { | |
| 206 sendMsg("Pause"); | |
| 207 } | |
| 208 | |
| 209 function stepForward() { | |
| 210 if (command_list.selectedIndex < command_list.length - 1) { | |
| 211 command_list.selectedIndex = command_list.selectedIndex + 1; | |
| 212 } | |
| 213 sendMsg("StepForward"); | |
| 214 } | |
| 215 | |
| 216 function play() { | |
| 217 command_list.selectedIndex = command_list.length - 1; | |
| 218 sendMsg("Play"); | |
| 219 } | |
| 220 </script> | |
| 221 </head> | |
| 222 <body onLoad="javascript:onLoad()"> | |
| 223 <div id="content" class="row-set"> | |
| 224 <div id="menu" class="row"> | |
| 225 <ul id="menu-bar" class="dropdown-menu"> | |
| 226 <li><a href="#">File</a> | |
| 227 <ul> | |
| 228 <li><a href="#" onClick="javascript:openFileDialog()">Open</a></li> | |
| 229 <li><a href="#">Save</a></li> | |
| 230 <li><a href="#">Save As</a></li> | |
| 231 <li><a href="#">Exit</a></li> | |
| 232 </ul> | |
| 233 </li> | |
| 234 <li><a href="#">Edit</a> | |
| 235 <ul> | |
| 236 <li><a href="#">Delete Command</a></li> | |
| 237 <li><a href="#">Clear Deletes</a></li> | |
| 238 <li><a href="#">Set Breakpoint</a></li> | |
| 239 <li><a href="#">Clear Breakpoints</a></li> | |
| 240 </ul> | |
| 241 </li> | |
| 242 <li><a href="#">View</a> | |
| 243 <ul> | |
| 244 <li><a href="#">Breakpoints</a></li> | |
| 245 <li><a href="#">Deleted Commands</a></li> | |
| 246 <li><a href="#">Zoom In</a></li> | |
| 247 <li><a href="#">Zoom Out</a></li> | |
| 248 </ul> | |
| 249 </li> | |
| 250 <li><a href="#">Navigate</a> | |
| 251 <ul> | |
| 252 <li><a href="#" onClick="javascript:rewind()">Rewind</a></li> | |
| 253 <li><a href="#" onClick="javascript:stepBack()">Step Back</a></li> | |
| 254 <li><a href="#" onClick="javascript:stepForward()">Step Forward</a></l
i> | |
| 255 <li><a href="#" onClick="javascript:play()">Play</a></li> | |
| 256 <li><a href="#" onClick="javascript:pause()">Pause</a></li> | |
| 257 <li><a href="#">Go to Line...</a></li> | |
| 258 </ul> | |
| 259 </li> | |
| 260 <li><a href="#">Window</a> | |
| 261 <ul> | |
| 262 <li><a href="#">Inspector</a></li> | |
| 263 <li><a href="#">Directory</a></li> | |
| 264 </ul> | |
| 265 </li> | |
| 266 </ul> | |
| 267 </div> | |
| 268 <div id="buttons" class="row"> | |
| 269 <div class="column-set"> | |
| 270 <div class="column"> | |
| 271 <button onClick="javascript:rewind()"><img src="icons/rewind.png"/><br/>
Rewind</button> | |
| 272 <button onClick="javascript:stepBack()"><img src="icons/previous.png"/><
br/>Step Back</button> | |
| 273 <button onClick="javascript:pause()"><img src="icons/pause.png"/><br/>Pa
use</button> | |
| 274 <button onClick="javascript:stepForward()"><img src="icons/next.png"/><b
r/>Step Forward</button> | |
| 275 <button onClick="javascript:play()"><img src="icons/play.png"/><br/>Play
</button> | |
| 276 </div> | |
| 277 <div class="column"> | |
| 278 <button onClick="javascript:toggleInspector()"><img src="icons/inspector
.png"/><br/>Inspector</button> | |
| 279 </div> | |
| 280 <div class="column"> | |
| 281 <button><img src="icons/profile.png"/><br/>Profile</button> | |
| 282 </div> | |
| 283 <div class="column" style="text-align:right; vertical-align:middle;"> | |
| 284 <select id="command_filter" onChange="javascript:updateCommandList(this.
options[this.selectedIndex].value)"></select> | |
| 285 <button onClick="javascript:updateCommandList()"><img src="icons/reload.
png" /><br/>Clear Filter</button> | |
| 286 </div> | |
| 287 </div> | |
| 288 </div> | |
| 289 <div class="row"> | |
| 290 <div class="column-set"> | |
| 291 <div id="left_column" class="column"> | |
| 292 <div class="row-set"> | |
| 293 <div id="command_list_div" class="row"> | |
| 294 <form id="command_list_form"> | |
| 295 <select id="command_list" size="2" onChange="javascript:commandSel
ected()"> | |
| 296 <option value="-1">Commands go here...</option> | |
| 297 </select> | |
| 298 </form> | |
| 299 </div> | |
| 300 </div> | |
| 301 </div> | |
| 302 <div id="right_column" class="row-set"> | |
| 303 <div id="top_row" class="row"> | |
| 304 <div id="display_pane" class="column"> | |
| 305 <div id="listener" style="width:100%; height:100%;"> | |
| 306 <script type="text/javascript"> | |
| 307 var listener = document.getElementById('listener'); | |
| 308 listener.addEventListener('load', moduleDidLoad, true); | |
| 309 listener.addEventListener('message', handleMessage, true); | |
| 310 </script> | |
| 311 <embed name="nacl_module" | |
| 312 id="skia_nacl" | |
| 313 src="debugger.nmf" | |
| 314 type="application/x-nacl" | |
| 315 width="100%" | |
| 316 height="100%" | |
| 317 style="width:100%, height:100%;"/> | |
| 318 </div> | |
| 319 </div> | |
| 320 <div id="right_panel" class="column"> | |
| 321 <div class="thin_outline"> | |
| 322 <div id="visibility_filter" class="settings_block"> | |
| 323 Visibility Filter<br/> | |
| 324 <div class="thin_outline"> | |
| 325 <form id="visibility_filter_form"> | |
| 326 <input type="radio" name="visibility_filter_radio" value="on
">On<br/> | |
| 327 <input type="radio" name="visibility_filter_radio" value="of
f" checked>Off | |
| 328 </form> | |
| 329 </div> | |
| 330 </div> | |
| 331 <div id="command_scrolling" class="settings_block"> | |
| 332 Command Scrolling Preferences<br/> | |
| 333 <div class="thin_outline"> | |
| 334 <div class="row-set"> | |
| 335 <div class="row"> | |
| 336 <div class="column-set"> | |
| 337 <div class="column"> | |
| 338 Current Command: | |
| 339 </div> | |
| 340 <div class="column" style="text-align:right; width:35%;"
> | |
| 341 <input type="text" style="width:100%;"/> | |
| 342 </div> | |
| 343 </div> | |
| 344 </div> | |
| 345 <div class="row"> | |
| 346 <div class="column-set"> | |
| 347 <div class="column"> | |
| 348 Command HitBox: | |
| 349 </div> | |
| 350 <div class="column" style="text-align:right; width:35%;"
> | |
| 351 <input type="text" style="width:100%;"/> | |
| 352 </div> | |
| 353 </div> | |
| 354 </div> | |
| 355 </div> | |
| 356 </div> | |
| 357 </div> | |
| 358 <div id="render_targets" class="settings_block"> | |
| 359 Render Targets<br/> | |
| 360 <div class="thin_outline"> | |
| 361 <form id="render_targets_form"> | |
| 362 <div class="row-set"> | |
| 363 <div class="row"> | |
| 364 <div class="column-set"> | |
| 365 <div class="column">Raster:</div> | |
| 366 <div class="column" style="text-align:right;"> | |
| 367 <input type="checkbox" name="render_targets_checkbox
" value="raster" checked/> | |
| 368 </div> | |
| 369 </div> | |
| 370 </div> | |
| 371 <div class="row"> | |
| 372 <div class="column-set"> | |
| 373 <div class="column" style="padding-left:30px;">Overdra
w Viz:</div> | |
| 374 <div class="column" style="text-align:right;"> | |
| 375 <input type="checkbox" name="render_targets_checkbox
" value="overdraw"/> | |
| 376 </div> | |
| 377 </div> | |
| 378 </div> | |
| 379 <div class="row"> | |
| 380 <div class="column-set"> | |
| 381 <div class="column">OpenGL</div> | |
| 382 <div class="column" style="text-align:right;"> | |
| 383 <input type="checkbox" name="render_targets_checkbox
" value="opengl"/> | |
| 384 </div> | |
| 385 </div> | |
| 386 </div> | |
| 387 </div> | |
| 388 </form> | |
| 389 </div> | |
| 390 </div> | |
| 391 <div id="zoom_level" class="settings_block"> | |
| 392 <div class="thin_outline"> | |
| 393 <div class="row-set"> | |
| 394 <div class="row"> | |
| 395 <div class="column-set"> | |
| 396 <div class="column"> | |
| 397 Zoom Level: | |
| 398 </div> | |
| 399 <div class="column" style="text-align:right; width:35%;"
> | |
| 400 <input type="text" style="width:100%;"/> | |
| 401 </div> | |
| 402 </div> | |
| 403 </div> | |
| 404 </div> | |
| 405 </div> | |
| 406 </div> | |
| 407 </div> | |
| 408 <div id="small_window_wrapper" class="settings_block"> | |
| 409 <div class="thin_outline" style="padding:0px;"> | |
| 410 <div id="small_window"> | |
| 411 </div> | |
| 412 </div> | |
| 413 </div> | |
| 414 </div> | |
| 415 </div> | |
| 416 <div id="bottom_row" class="row"> | |
| 417 <div id="tabview" class="column"> | |
| 418 <div class="row-set"> | |
| 419 <div class="row" style="height:5px; overflow:auto;"> | |
| 420 <form id="overviewdetails_form"> | |
| 421 <input type="radio" name="overviewdetails_radio" onChange="jav
ascript:updateOverviewDetails()" id="overview_radio" value="overview" checked>Ov
erview | |
| 422 <input type="radio" name="overviewdetails_radio" onChange="jav
ascript:updateOverviewDetails()" id="details_radio" value="details">Details | |
| 423 </form> | |
| 424 </div> | |
| 425 <div class="row"> | |
| 426 <div id="overviewdetails"></div> | |
| 427 </div> | |
| 428 </div> | |
| 429 </div> | |
| 430 <div id="matrixclip" class="column"> | |
| 431 Current Matrix | |
| 432 <table> | |
| 433 <tr> | |
| 434 <td><input type="text" id="matrix00" class="matrix" /></td> | |
| 435 <td><input type="text" id="matrix01" class="matrix" /></td> | |
| 436 <td><input type="text" id="matrix02" class="matrix" /></td> | |
| 437 </tr> | |
| 438 <tr> | |
| 439 <td><input type="text" id="matrix10" class="matrix" /></td> | |
| 440 <td><input type="text" id="matrix11" class="matrix" /></td> | |
| 441 <td><input type="text" id="matrix12" class="matrix" /></td> | |
| 442 </tr> | |
| 443 <tr> | |
| 444 <td><input type="text" id="matrix20" class="matrix" /></td> | |
| 445 <td><input type="text" id="matrix21" class="matrix" /></td> | |
| 446 <td><input type="text" id="matrix22" class="matrix" /></td> | |
| 447 </tr> | |
| 448 </table> | |
| 449 Current Clip | |
| 450 <table> | |
| 451 <tr> | |
| 452 <td><input type="text" id="clip00" class="matrix" /></td> | |
| 453 <td><input type="text" id="clip01" class="matrix" /></td> | |
| 454 </tr> | |
| 455 <tr> | |
| 456 <td><input type="text" id="clip10" class="matrix" /></td> | |
| 457 <td><input type="text" id="clip11" class="matrix" /></td> | |
| 458 </tr> | |
| 459 </table> | |
| 460 </div> | |
| 461 </div> | |
| 462 </div> | |
| 463 </div> | |
| 464 </div> | |
| 465 </div> | |
| 466 <input type="file" id="file_open" style="display:none;"/> | |
| 467 </body> | |
| 468 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1036283002:
Remove all code related to NaCl (Closed)
Base URL: https://skia.googlesource.com/skia.git@master
