NaCl Debugger: Implement overview and filters, cleanup

nacl/debugger/index.html

Index: nacl/debugger/index.html
===================================================================
--- nacl/debugger/index.html	(revision 8014)
+++ nacl/debugger/index.html	(working copy)
@@ -15,6 +15,11 @@
     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");
@@ -22,16 +27,81 @@
       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) {
-        alert("Please select one SKP file.");
+        return;
       }
       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));
         };
@@ -57,6 +127,8 @@
       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.
@@ -67,32 +139,39 @@
 
     function handleMessage(message_event) {
       var cmd_skdebugf = "SkDebugf:";
-      var cmd_clearcommands = "ClearCommands";
-      var cmd_addcommand = "AddCommand:";
+      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_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 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);
       }
     }
 
-    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) {
@@ -103,6 +182,14 @@
       }
     }
 
+    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");
@@ -194,10 +281,8 @@
         <button><img src="icons/profile.png"/><br/>Profile</button>
       </div>
       <div class="column" style="text-align:right; vertical-align:middle;">
-        <select>
-          <option selected>--Filter By Available Commands--</option>
-        </select>
-        <button><img src="icons/reload.png"/><br/>Clear Filter</button>
+        <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>
@@ -333,12 +418,12 @@
             <div class="row-set">
               <div class="row" style="height:5px; overflow:auto;">
                 <form id="overviewdetails_form">
-                  <input type="radio" name="overviewdetails_radio" value="overview" checked>Overview
-                  <input type="radio" name="overviewdetails_radio" value="details">Details
+                  <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">
-                <textarea readonly id="overviewdetails"></textarea>
+                <div id="overviewdetails"></div>
               </div>
             </div>
           </div>