platform_tools/nacl/debugger/index.html

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