maglev-webtools 0.2.1

data/public/javascript/webtools/#debugger.coffee#

@@ -0,0 +1,253 @@
+window.escapeHTML = (str) ->
+  str = "" unless str?
+  str += str unless typeof str == "string"
+  $("<i></i>").text(str).html()
+
+class Frame
+  constructor: (@server, @pid, @frame_idx, @container) ->
+
+  update_detail_view: (objectInfo) ->
+    @inspector.hide()
+    @inspector.children('.objInfoClass').text(objectInfo['(__class__)'])
+    @inspector.children('.objInfoValue').text(objectInfo['(__inspect__)'])
+    this.renderTableData @inspector.children('.objInstVars'), objectInfo, (idx, data) ->
+      $("<tr><td>#{idx}</td><td>#{data}</td></tr>")
+    @inspector.show()
+
+  renderTableData: (instVarsTable, object, formatFn) ->
+    ui = instVarsTable.children('tbody')
+    ui.empty()
+    $.each object, (key, value) ->
+      if key.indexOf("@") == 0
+        ui.append(formatFn(key, value))
+
+  create_detail_view: ->
+    @inspector = $('#objectInspector').clone()
+    @inspector.removeAttr('id')
+    @inspector.removeClass('hidden')
+    @container.append(@inspector)
+
+  create_source_code_holder: () ->
+    @container.prepend($('#editor'))
+    $('#editor').show()
+
+  create_inspector: (object, index, path) ->
+    index = 0 unless index?
+    path = "#{@server}/process/#{@pid}/frames/#{@frame_idx}" unless path?
+    options = $([])
+    $.each object, (key, value) ->
+      if "#{key}".indexOf("@") == 0 || key == "(__self__)" || key == "(__class__)"
+        options.push("#{key}")
+    if not @inspector_div?
+      @inspector_div = $(document.createElement("div"))
+      @inspector_div.addClass("inspectors")
+      @container.prepend(@inspector_div)
+    if @inspectors[index]?
+      inspector = @inspectors[index]
+    else
+      @inspectors[index] = (inspector = $(document.createElement("select")))
+      @inspector_div.append(inspector)
+      inspector.attr
+        multiple: true
+        class: 'inspector'
+    inspector.html("")
+    $(options).each (idx, o) =>
+      inspector.append("<option value=#{idx}>#{escapeHTML(o)}</option>")
+    this.create_evaluator(path)
+    inspector.bind "change", =>
+      value = options[inspector.val()]
+      url = "#{path}/objects/#{value}"
+      for i in @inspectors.slice(index + 1)
+        i.html("")
+      $.get "#{url}/objects", (object) =>
+        this.create_inspector(object, index + 1, url)
+        this.update_detail_view(object)
+      , 'json'
+
+  create_evaluator: (path) ->
+    unless @evaluator?
+      @evaluator = $(document.createElement("input"))
+      @evaluator.attr
+        type: "text"
+        name: "#{@frame_idx}_evaluator"
+        id: "#{@frame_idx}_evaluator"
+        class: "ui-widget-content ui-corner-all"
+      @container.prepend(@evaluator)
+    @evaluator.unbind("keypress")
+    @evaluator.bind "keypress", (e) =>
+      code = e.keyCode if e.keyCode?
+      code = e.which unless code
+      if code == 13 # RETURN
+        $.ajax
+          url: path
+          data:
+            "do-it": @evaluator.val()
+          success: (data) =>
+            result = data["do-it-result"]
+            @evaluator.val("#{@evaluator.val()} => #{result['(__inspect__)']}")
+            this.update_detail_view(result)
+            @evaluator.select()
+          dataType: 'json'
+          type: 'PUT'
+
+  render: ->
+    @container.html("")
+    @inspectors = []
+    this.create_source_code_holder()
+    $.get "#{@server}/process/#{@pid}/frames/#{@frame_idx}", (frame) =>
+      editor.getSession().setValue(frame.debug_info.source)
+      editor.frame_url = "#{@server}/process/#{@pid}/frames/#{@frame_idx}"
+      this.create_inspector(frame.debug_info.context)
+      this.create_detail_view()
+    , 'json'
+
+class Process
+  constructor: (@server, @pid, @tab) ->
+    @info_div = $("##{@tab} .info-bar")
+    @stack_div = $("##{@tab} .frame-list")
+
+  render: ->
+    this.render_info()
+    this.render_stack()
+
+  render_info: ->
+    request = $.get "#{@server}/process/#{@pid}", (data) =>
+      @info_div.text("#{data.label} (#{data.timestamp})")
+    , 'json'
+
+  render_stack: ->
+    @stack_div.html("")
+    request = $.get "#{@server}/process/#{@pid}/frames", (framelist) =>
+      $(framelist).each (idx, f) =>
+        header = $(document.createElement("h3"))
+        link = $(document.createElement("a"))
+        link.attr
+          href: '#'
+          data_idx: idx
+        link.text("#{f.class}##{f.method_name}")
+        link.append("<small>#{escapeHTML(f.source_location)}</small>")
+        header.append(link)
+        restartLink = $('<a href="#">Restart frame</a>')
+        restartLink.bind "click", (e) =>
+          $.ajax
+            url: "#{@server}/process/#{@pid}/frames/#{idx}",
+            type: 'DELETE'
+            success: =>
+              
+          e.preventDefault()
+        header.append(restartLink)
+        div = document.createElement("div")
+        $(div).text("Waiting for data...")
+        @stack_div.append(header)
+        @stack_div.append(div)
+        if idx == 0
+          @selected_frame = new Frame(@server, @pid, 0, $(div))
+          @selected_frame.render()
+      @stack_div.accordion
+        clearStyle: true
+        collapsible: true
+        changestart: (event, ui) =>
+          frame_idx = ui.newHeader.children("a").attr("data_idx")
+          if frame_idx?
+            @selected_frame = new Frame(@server, @pid, frame_idx, ui.newContent)
+            @selected_frame.render()
+    , 'json'
+
+class Debugger
+  constructor: (@server) ->
+    @tab_content_template = $("#tab_content_template")
+
+  toString: ->
+    "Debugger on #{server}"
+
+  server_alive: () ->
+    request = $.ajax
+      url: "#{@server}/process"
+      async: false
+    request.status == 200
+
+  clone_template: () ->
+    @content = @tab_content_template.clone()
+    @content.show()
+    @content.removeAttr("id")
+
+  fill_process_selector: () ->
+    @process_box = @content.children("select[name='process-select-box']")
+    $.getJSON "#{@server}/process", (errors) =>
+      $(errors).each (idx, e) =>
+        @process_box.append("<option value='#{e.process_id}'>#{e.process_id}: #{escapeHTML(e.label)}</option>")
+    @process_box.bind "change", =>
+      @process = new Process(@server, @process_box.val(), @tab)
+      @process.render()
+
+  content_for: (ui_panel) ->
+    if not @content?
+      @tab = $(ui_panel).attr("id")
+      return "<p>The URL " + url + " could not be reached</p>" unless this.server_alive()
+      this.clone_template()
+      this.fill_process_selector()
+      ui_panel.append(@content)
+    @content
+
+DebuggerApp =
+  setup: ->
+    debuggers = []
+    tab_server_input = $("#tab_server")
+    tab_counter = 2
+
+    # actual addTab function: adds new tab using the title input
+    # from the form above
+    add_tab = ->
+      tab_server = tab_server_input.val()
+      tabs.tabs("add", "#tabs-#{tab_counter}", tab_server)
+      tab_counter++
+
+    # tabs init with a custom tab template and an "add" callback
+    # filling in the content
+    tabs = $("#tabs").tabs
+      tabTemplate: '<li><a href=\'#{href}\'>#{label}</a>' +
+        "<span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
+      add: (event, ui) ->
+        new_debugger = new Debugger(tab_server_input.val())
+        debuggers.push(new_debugger)
+        new_debugger.content_for($(ui.panel))
+
+    # modal dialog init: custom buttons and a "close" callback
+    # reseting the form inside
+    dialog = $("#dialog").dialog
+      autoOpen: false
+      modal: true
+      buttons:
+        Add: ->
+          add_tab()
+          dialog.dialog("close")
+        Cancel: ->
+          dialog.dialog("close")
+      open: ->
+        tab_server_input.focus()
+      close: ->
+        form[0].reset()
+
+    # addTab form: calls addTab function on submit and closes the
+    # dialog
+    form = $("form", this.dialog).submit ->
+      add_tab()
+      dialog.dialog("close")
+      false
+
+    # addTab button: just opens the dialog
+    $("#add_tab").button().click ->
+      dialog.dialog("open");
+
+    # close icon: removing the tab on click
+    $("#tabs span.ui-icon-close").live "click", ->
+      index = $("li", tabs).index($(this).parent())
+      tabs.tabs("remove", index);
+
+$(document).ready ->
+  DebuggerApp.setup()
+  window.RubyMode = require("ace/mode/ruby").Mode
+  window.canon = require('pilot/canon')
+  window.editor = ace.edit('editor')
+  window.editor.getSession().setUseSoftTabs(true)
+  window.editor.getSession().setMode(new RubyMode())

data/public/javascript/webtools/browser.js

@@ -0,0 +1,260 @@
+maglevInfo = (function() {
+  var requestCount = 0, rubyEditor = null;
+
+  $(document).ready(function() {
+    setupSelectables();
+    setupEditor();
+    setupToolBar();
+    updateCodeBrowser();  // Not sure this is the best way to kick it off...
+  });
+
+  function setupToolBar() {
+    $('#toolBar').append(
+      $('<div>').button({label: 'Refresh View'}
+                       ).click(function () {
+                         getJSON('/transaction/abort', null, function(data) {
+                           clearRubyNav();
+                           updateCodeBrowser();
+                         });
+                       }));
+    $('#toolBar').append($('<div>', { id: 'statusBar'}));
+  }
+
+  function clearRubyNav() {
+    $('ul.rubyList').empty();
+    clearDetailView();
+  }
+
+  function setupSelectables() {
+    $('#rubyModules').selectable({
+      selected: function(event, ui) { selectModule(ui.selected.title); }
+    });
+    $('#rubyConstants').selectable({
+      selected: function(event, ui) { selectConstant(ui.selected.title); }
+    });
+    $('#rubyModuleMethods').selectable({
+      selected: function(event, ui) { selectModuleMethod(ui.selected.title); }
+    });
+    $('#rubyInstanceMethods').selectable({
+      selected: function(event, ui) { selectInstanceMethod(ui.selected.title); }
+    });
+  }
+
+  function setupEditor() {
+    rubyEditor = CodeMirror.fromTextArea('rubyEditor',
+                                         { height: "100%",
+                                           parserfile: "parseSmalltalk.js",
+                                           stylesheet: "CodeMirror/css/Smalltalk.css",
+                                           path: "CodeMirror/js/",
+                                           lineNumbers: true});
+  }
+
+  function selectedModuleName() {
+    return $('#rubyModules .ui-selected').attr('title');
+  }
+
+  function selectedConstantName() {
+    return $('#rubyConstants .ui-selected').attr('title');
+  }
+
+  function selectedModuleMethodName() {
+    return $('#rubyModuleMethods .ui-selected').attr('title');
+  }
+
+  function selectedInstanceMethodName() {
+    return $('#rubyInstanceMethods .ui-selected').attr('title');
+  }
+
+  function selectModule(className) {
+    clearSelections(['#rubyModuleMethods',   '#rubyModuleMethods',
+                     '#rubyInstanceMethods', '#rubyAncestors']);
+    clearDetailView();
+    getJSON('/module/' + className, null, renderCodeBrowser);
+  }
+
+  function selectConstant(constName) {
+    clearSelections(['#rubyModuleMethods', '#rubyInstanceMethods']);
+    getJSON('/module/' + selectedModuleName() + '/constant/' + selectedConstantName(),
+            null,
+            function(data) {
+              clearEditArea();
+              renderObject(data['const_value']);
+            });
+  }
+
+  function selectModuleMethod(methodName) {
+    clearSelections(['#rubyConstants', '#rubyInstanceMethods']);
+    getJSON('/module/' + selectedModuleName() + '/method',
+            { 'method_name': selectedModuleMethodName(),
+              'is_instance_method': false },
+            renderMethod);
+  }
+
+  function selectInstanceMethod(methodName) {
+    clearSelections(['#rubyConstants', '#rubyModuleMethods']);
+    getJSON('/module/' + selectedModuleName() + '/method',
+            { 'method_name': selectedInstanceMethodName(),
+              'is_instance_method': true },
+            renderMethod);
+  }
+
+  function clearSelections(selections) {
+    console.log('clearSelections: ' + selections);
+    $.each(selections, function(i, el) {
+      $(el + ' .ui-selected').removeClass('ui-selected');
+    });
+    clearEditArea();
+  }
+
+  // Makes a JSON request, and decorates it with timing information.
+  // It then passes the bundled data object to the callback.
+  function getJSON(url, data, callback) {
+    var startTime = new Date().getTime();
+    var statusBar = $('#statusBar');
+    url = window.WebTools.location + url
+    $(statusBar).text('Sent request #' + (++requestCount) + ' for ' + url);
+    $.getJSON(url, data, success);
+    return;
+
+    function success(data) {
+      debugMsg('getJSON Success');
+      debugMsg(data);
+
+      var serverTime = data['_time'];
+      var networkTime = new Date().getTime() - startTime - serverTime;
+      startTime = new Date().getTime();
+      var error = data['_error'];
+      if (error) {
+        alert(error + ' (see console log for stack)');
+        debugMsg(data['_stack']);
+      } else {
+        (callback)(data);
+      };
+      var elapsed = new Date().getTime() - startTime;
+      $(statusBar).text(
+        'Request for ' + url + ' (roundtrip #' + requestCount + ') took ' +
+          serverTime + ' ms on server, ' + networkTime + ' ms on the network, and '
+          + elapsed + ' ms on the client.'
+      );
+    }
+  }
+
+  function updateCodeBrowser() {
+    getJSON('/modulelist', null, renderCodeBrowser);
+  }
+
+  function renderCodeBrowser(data) {
+    renderList(data['modules'],          $('#rubyModules'));
+    renderList(data['constants'],        $('#rubyConstants'));
+    renderList(data['module_methods'],   $('#rubyModuleMethods'));
+    renderList(data['instance_methods'], $('#rubyInstanceMethods'));
+    renderList(data['ancestors'],        $('#rubyAncestors'));
+    return;
+
+    function renderList(items, ui) {
+      if (items) {
+        ui.empty();
+        $.each(items, function(n, item) {
+          $('<li>', { title: item, 'class': 'ui-widget-content' }).html(item).appendTo(ui);
+        });
+      }
+    }
+  }
+
+  function setDetailViewCode(sym) {
+    console.log('setDetailViewCode()');
+    $('#objectInspector').addClass('hidden');
+    $('#rubyEditArea').removeClass('hidden');
+  }
+
+  function setDetailViewObject(sym) {
+    $('#rubyEditArea').addClass('hidden');
+    $('#objectInspector').removeClass('hidden');
+  }
+
+  function clearDetailView() {
+    $('#rubyEditArea').addClass('hidden');
+    $('#objectInspector').addClass('hidden');
+  }
+
+  function clearEditArea() {
+    if (rubyEditor.editor) {
+      rubyEditor.setCode('');
+    }
+    $('#fileInfo').empty();
+  }
+
+  function renderMethod(data) {
+    clearEditArea();
+    renderSource(data['method_source']);
+    var file = data['method_source_file'];
+
+    if (file) {
+      $('#fileInfo').html(file + ':' + data['method_line_number']);
+    } else {
+      $('#fileInfo').html('No file information available');
+    }
+  }
+
+  // Make the rubyEditor visible in the detail area and render the source
+  // code.  High level api.
+  function renderSource(string) {
+    if (rubyEditor.editor) {
+      rubyEditor.setCode(string);
+      setDetailViewCode();
+    }
+  }
+
+  // Make the objectInspector visible in the detail area and render the
+  // Object.  High level api.
+  function renderObject(objectInfo) {
+    console.log('renderObject()');
+    console.log(objectInfo);
+    setDetailViewObject();
+
+    $('#objInfoClass').text(objectInfo['class']);
+    $('#objInfoId').text(objectInfo['object_id']);
+    $('#objInfoValue').text(objectInfo['inspect']);
+
+    renderTableData('#objInstVars',
+                    objectInfo['instance_variables'],
+                    // Data is an array of [name, value, objid]
+                    function(idx, data) {
+                      return $('<tr><td>'+ data[0] + '</td><td objectId="'
+                               + escapeHTML(data[2]) + '">' + data[1] + '</td></tr>');
+                    });
+
+    renderTableData('#objEnumValues',
+                    objectInfo['enumerated'],
+                    function(idx, data) {
+                      return $('<tr><td>' + idx + '</td><td>' + escapeHTML(data) + '</td></tr>');
+                    });
+    return;
+
+    function escapeHTML(text) {
+      return $('<div>').text(text).html();
+    }
+
+    function renderTableData(tableId, vals, formatFn) {
+      console.log('renderTableData: tableId: '+ tableId + ' # vals: ' + vals.length);
+      if (vals && vals.length > 0) {
+        $(tableId).removeClass('hidden');
+        var ui = $(tableId + ' tbody');
+        ui.empty();
+        $.each(vals, function(idx, data) { ui.append(formatFn(idx, data)) });
+        $(tableId).removeClass('hidden');
+      } else {
+        $(tableId).addClass('hidden');
+      }
+    }
+  }
+
+  // Some older browsers were complaining that console wasn't defined.
+  // (old firefox on solaris), so I'm wrapping console logging in this
+  // function.
+  function debugMsg(obj) {
+    if (console) {
+      console.log(obj);
+    }
+  }
+})();