From bbb576197cd4b893da98891fec54ab94cecb7ada Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Mun=CC=83oz?= Date: Tue, 4 Apr 2017 01:17:31 +0200 Subject: [PATCH] refactor of graph view. part I --- src/html/graph/index.html | 23 +- src/html/graph/lib/js/bokken.js | 49 ---- src/html/graph/lib/js/disasm.js | 169 +++-------- .../js/{disasm_panel.js => graph_panel.js} | 272 +++++++----------- src/html/graph/lib/js/{r2_bokken.js => r2.js} | 3 - src/html/graph/lib/js/r2ui.js | 85 +----- src/resources.qrc | 5 +- 7 files changed, 178 insertions(+), 428 deletions(-) delete mode 100644 src/html/graph/lib/js/bokken.js rename src/html/graph/lib/js/{disasm_panel.js => graph_panel.js} (62%) rename src/html/graph/lib/js/{r2_bokken.js => r2.js} (99%) diff --git a/src/html/graph/index.html b/src/html/graph/index.html index 5914b33e..17cbd5fb 100644 --- a/src/html/graph/index.html +++ b/src/html/graph/index.html @@ -13,18 +13,33 @@ - + - - + + -
+
diff --git a/src/html/graph/lib/js/bokken.js b/src/html/graph/lib/js/bokken.js deleted file mode 100644 index 6ba434fb..00000000 --- a/src/html/graph/lib/js/bokken.js +++ /dev/null @@ -1,49 +0,0 @@ -var myLayout; - -$(document).ready( function() { - - r2ui.load_colors(); - r2.load_settings(); - - // Create panels - var disasm_panel = new DisasmPanel(); - disasm_panel.display = "graph"; - r2ui._dis = disasm_panel; - - // For enyo compatibility - r2ui.ra = {}; - r2ui.mp = {}; - r2ui.ra.getIndex = function() {}; - r2ui.ra.setIndex = function() {}; - r2ui.mp.openPage = function() {}; - r2ui._hex = {}; - r2ui._hex.seek = function() {}; - - - // Workaround for Chrome 48 getTransformToElement removal - // https://github.com/clientIO/joint/issues/203 - SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) { - return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM()); - }; - - // Render Disasm Panel - r2ui._dis.seek(location.hash.substring(1)); - r2ui._dis.render("graph"); -}); - -// Overwritting since its used in disasm_panel.js -function render_history() {} - -function scroll_to_element(element) { - if (element === undefined || element === null) return; - var top = Math.max(0,element.documentOffsetTop() - ( window.innerHeight / 2 )); - $('#center_panel').scrollTo(top, {axis: 'y'}); - r2ui._dis.scroll_offset = top; -} - -function store_scroll_offset() { - r2ui._dis.scroll_offset = $('#center_panel').scrollTop(); -} -function scroll_to_last_offset() { - if (r2ui._dis.scroll_offset !== null) $('#center_panel').scrollTo(r2ui._dis.scroll_offset, {axis: 'y'}); -} diff --git a/src/html/graph/lib/js/disasm.js b/src/html/graph/lib/js/disasm.js index 15deb8c2..ed110da4 100644 --- a/src/html/graph/lib/js/disasm.js +++ b/src/html/graph/lib/js/disasm.js @@ -1,3 +1,4 @@ +// Basic Block Graph var BBGraph = function () { this.vertices = {}; this.edges = []; @@ -47,8 +48,8 @@ BBGraph.prototype.addVertex = function(addr, vlen, dom) { this.vertices[addr].len = 1; dom = document.createElement('div'); dom.id = "bb_" + addr; - dom.className = "basicblock enyo-selectable ec_gui_background ec_gui_border"; - dom.innerHTML = "
0x" + addr.toString(16) + "
"; + dom.className = "basicblock eny0-selectable ec_gui_background ec_gui_border"; + dom.innerHTML = "
0x" + addr.toString(16) + "
"; this.vertices[addr].rendered = dom; } } @@ -123,8 +124,8 @@ BBGraph.prototype.render = function() { var paper = new joint.dia.Paper({ el: $('#canvas'), gridSize: 1, - width: 2000, - height: 6000, + width: 10000, + height: 10000, model: graph, }); @@ -159,7 +160,7 @@ BBGraph.prototype.render = function() { var svg_width = $('#canvas svg')[0].getBBox().width; var svg_height = $('#canvas svg')[0].getBBox().height; // update paper size with these values - paper.setDimensions(svg_width + 500, svg_height + 500); + paper.setDimensions(svg_width + 5000, svg_height + 5000); var ws = Math.ceil(svg_width/minimap_width); var hs = Math.ceil(svg_height/minimap_heigh); var scale = 1/Math.max(ws, hs); @@ -169,17 +170,9 @@ BBGraph.prototype.render = function() { minimap.setOrigin(delta,0); // minimap.$el.css('pointer-events', 'none'); - if ($("#radareApp_mp").length) { - // enyo layout - $("#minimap").css("left", $("#main_panel").width() - minimap_width - $("#main_panel").position().left); - $("#minimap").css("top", $("#center_panel").position().top); - $("#main_panel").bind('scroll', update_minimap); - } else if ($("#main_panel").length){ - // panel layout - $("#minimap").css("left", $("#main_panel").width() - minimap_width); - $("#minimap").css("top", $("#center_panel").position().top - 40); - $("#center_panel").bind('scroll', update_minimap); - } + $("#minimap").css("left", $("#main_panel").width() - minimap_width); + $("#minimap").css("top", $("#center_panel").position().top - 40); + $("#center_panel").bind('scroll', update_minimap); paper.on( "cell:pointerup", function( cellview, evt, x, y) { var model = cellview.model; @@ -200,7 +193,7 @@ BBGraph.prototype.render = function() { } }); - if (r2ui._dis.minimap) { + if (r2ui.graph.minimap) { update_minimap(); $("#minimap_area").draggable({ containment: "parent", @@ -226,20 +219,22 @@ BBGraph.prototype.render = function() { }; +// Functions + function toggle_minimap() { - if (r2ui._dis.minimap) { - r2ui._dis.minimap = false; - r2ui.seek(r2ui._dis.selected_offset, false); + if (r2ui.graph.minimap) { + r2ui.graph.minimap = false; + r2ui.seek(r2ui.graph.selected_offset, false); $('#minimap').hide(); } else { - r2ui._dis.minimap = true; - r2ui.seek(r2ui._dis.selected_offset, false); + r2ui.graph.minimap = true; + r2ui.seek(r2ui.graph.selected_offset, false); $('#minimap').show(); } } function update_minimap() { - if (r2ui._dis.minimap && $('#canvas svg').length) { + if (r2ui.graph.minimap && $('#canvas svg').length) { var minimap_width = 200; var minimap_height = 200; var svg_width = $('#canvas svg')[0].getBBox().width; @@ -250,13 +245,8 @@ function update_minimap() { var delta = 0; if (hs > ws) delta = (minimap_width/2) - svg_width*scale/2; var el = null; - if ($("#radareApp_mp").length) { - // enyo layout - el = $('#main_panel'); - } else if ($("#main_panel").length){ - // panel layout - el = $('#center_panel'); - } + // panel layout + el = $('#center_panel'); if (el.scrollTop() < svg_height) { $("#minimap_area").width(el.width()*scale); $("#minimap_area").height(el.height()*scale); @@ -265,17 +255,8 @@ function update_minimap() { $("#minimap_area").css("left", delta + el.scrollLeft()*scale); } el = $('#center_panel'); - if ($("#radareApp_mp").length) { - // enyo layout - $("#minimap").css("display", "none"); - $("#minimap").css("left", el.scrollLeft() + el.width() - minimap_width - $("#radareApp_mp").position().left + 2 * el.css("padding").replace('px','')); - $("#minimap").css("top", el.scrollTop()); - $("#minimap").css("display", "block"); - } else if ($("#main_panel").length){ - // panel layout - $("#minimap").css("left", el.scrollLeft() + $("#main_panel").width() - minimap_width); - $("#minimap").css("top", el.scrollTop()); - } + $("#minimap").css("left", el.scrollLeft() + $("#main_panel").width() - minimap_width); + $("#minimap").css("top", el.scrollTop()); $("#minimap").css("border", "1px solid " + r2ui.colors['.ec_gui_background']); $("#minimap_area").css("background", r2ui.colors['.ec_gui_background']); } @@ -299,9 +280,6 @@ function reposition_graph() { if (color !== null && color !== undefined) bbs[i].attr('rect/fill', color); } } - // if (!found) { - // r2ui.update_fcn_BB(r2ui.current_fcn_offset, bbs[i].prop("id"), {x:bbs[i].prop("position").x, y:bbs[i].prop("position").y, color:r2ui.colors['.ec_gui_alt_background']}); - // } } } var flag = 0; @@ -345,7 +323,7 @@ function render_graph(x) { } var dom = document.createElement('div'); dom.id = "bb_" + addr; - dom.className = "basicblock enyo-selectable ec_gui_background ec_gui_border"; + dom.className = "basicblock eny0-selectable ec_gui_background ec_gui_border"; dom.innerHTML = idump; graph.addVertex(addr, cnt, dom); if (bb.fail > 0) { @@ -447,7 +425,7 @@ function render_instructions(instructions) { } } var dom = document.createElement('div'); - if (asm_lines) dom.className = "instructionbox enyo-selectable lines"; + if (asm_lines) dom.className = "instructionbox eny0-selectable lines"; else dom.className = "instructionbox"; dom.style.top = accumulated_heigth + "px"; dom.innerHTML = html_for_instruction(ins); @@ -578,7 +556,7 @@ function toBoolean(str) { } function html_for_instruction(ins) { - var idump = '
'; + var idump = '
'; var offset = "0x" + ins.offset.toString(16); var address = offset; var asm_flags = (r2.settings["asm.flags"]); @@ -587,7 +565,6 @@ function html_for_instruction(ins) { var asm_cmtright = (r2.settings["asm.cmtright"]); if (ins.fcn_addr > 0 && offset === "0x"+ins.fcn_addr.toString(16)) { - if (r2ui._dis.display == "flat") idump += '
; -----------------------------------------------------------
'; // Get Instruction info var results; @@ -877,60 +854,25 @@ function has_scrollbar(divnode) { } function on_scroll(event) { - // console.log($(event.target).scrollTop()); - if (!r2ui._dis.scrolling) { - var enyo = $("#radareApp").length ? true : false; - var panel_disas = false; - if (!enyo) panel_disas = $("#main_panel").tabs("option", "active") === 0 ? true : false; - r2ui._dis.scrolling = true; - if (r2ui._dis.display == "flat" && (enyo || panel_disas)) { - var scroll_offset = null; - var top_offset = null; - var addr = null; - if (enyo) { - scroll_offset = $("#main_panel").scrollTop(); - top_offset = $("#gbox").height() - $("#main_panel").height() - 10; - container_element = $("#center_panel"); - } else { - scroll_offset = $("#center_panel").scrollTop(); - top_offset = $("#gbox").height() - $("#center_panel").height() - 10; - container_element = $("#disasm_tab"); - } - if (has_scrollbar($('#center_panel')[0])) { - if (scroll_offset === 0 ) { - addr = "0x" + r2ui._dis.instructions[0].offset.toString(16); - // console.log("Scroll en top", scroll_offset, top_offset, addr); - r2.get_disasm_before(addr, 50, function(x) { - // console.log(x.length); - r2ui._dis.instructions = x.concat(r2ui._dis.instructions); - }); - container_element.html("
"); - render_instructions(r2ui._dis.instructions); - scroll_to_address(addr); - rehighlight_iaddress(r2ui._dis.selected_offset); - } else if (scroll_offset > top_offset) { - // console.log("Scroll en top", scroll_offset, top_offset) - addr = "0x" + r2ui._dis.instructions[r2ui._dis.instructions.length-1].offset.toString(16); - r2.get_disasm_after(addr, 100, function(x) { - r2ui._dis.instructions = r2ui._dis.instructions.slice(0, -1).concat(x); - }); - container_element.html("
"); - render_instructions(r2ui._dis.instructions); - scroll_to_address(addr); - rehighlight_iaddress(r2ui._dis.selected_offset); - } - } - } - r2ui._dis.scrolling = false; + if (!r2ui.graph.scrolling) { + var panel_disas = $("#main_panel").tabs("option", "active") === 0 ? true : false; event.preventDefault(); } } function scroll_to_element(element) { - var top = element.documentOffsetTop() - ( window.innerHeight / 2 ); - top = Math.max(0,top); - $("#main_panel").scrollTo({'top':top, 'left':0}); - // r2ui._dis.scrollTo(0,top); + if (element === undefined || element === null) return; + var top = Math.max(0,element.documentOffsetTop() - ( window.innerHeight / 2 )); + $('#center_panel').scrollTo(top, {axis: 'y'}); + r2ui.graph.scroll_offset = top; +} + +function store_scroll_offset() { + r2ui.graph.scroll_offset = $('#center_panel').scrollTop(); +} + +function scroll_to_last_offset() { + if (r2ui.graph.scroll_offset !== null) $('#center_panel').scrollTo(r2ui.graph.scroll_offset, {axis: 'y'}); } function rename(offset, old_value, new_value, space) { @@ -981,11 +923,11 @@ function contains(a, obj) { } function handleInputTextChange() { - r2ui._dis.handleInputTextChange(); + r2ui.graph.handleInputTextChange(); } function show_contextMenu(x,y) { - r2ui._dis.showContextMenu(x,y); + r2ui.graph.showContextMenu(x,y); } function get_offset_flag(offset) { @@ -1045,35 +987,6 @@ function get_reloc_flag(reloc) { return full_name; } -// Cookies -function createCookie(name,value,days) { - var expires = ""; - if (days) { - var date = new Date(); - date.setTime(date.getTime()+(days*24*60*60*1000)); - expires = "; expires="+date.toGMTString(); - } - else { - expires = ""; - } - document.cookie = name+"="+value+expires+"; path=/"; -} - -function readCookie(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(';'); - for(var i=0;i < ca.length;i++) { - var c = ca[i]; - while (c.charAt(0)==' ') c = c.substring(1,c.length); - if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length); - } - return null; -} - -function eraseCookie(name) { - createCookie(name,"",-1); -} - function do_randomcolors(element, inEvent) { r2.cmd ('ecr;ec gui.background rgb:000', function() { r2ui.load_colors (); diff --git a/src/html/graph/lib/js/disasm_panel.js b/src/html/graph/lib/js/graph_panel.js similarity index 62% rename from src/html/graph/lib/js/disasm_panel.js rename to src/html/graph/lib/js/graph_panel.js index 1695ef88..b669de15 100644 --- a/src/html/graph/lib/js/disasm_panel.js +++ b/src/html/graph/lib/js/graph_panel.js @@ -1,6 +1,6 @@ -// DISASSEMBLER PANEL -var DisasmPanel = function () { - this.display = "flat"; + +// Graph Panel +var GraphPanel = function () { this.min = 0; this.max = 0; this.block = 512; @@ -17,9 +17,9 @@ var DisasmPanel = function () { this.instructions = []; this.scrolling = false; }; -DisasmPanel.prototype.render = function(mode) { - // r2ui.seek("$$", false); +GraphPanel.prototype.render = function(mode) { + $("#center_panel").unbind( "click" ); $(document).unbind( "keypress" ); $(document).unbind( "click" ); @@ -28,6 +28,8 @@ DisasmPanel.prototype.render = function(mode) { $(document).keypress(handleKeypress); $(document).click(handleClick); $(document).dblclick(handleDoubleClick); + + // Context menu for disas addresses: $(document).contextmenu({ delegate: ".addr", @@ -148,18 +150,15 @@ DisasmPanel.prototype.render = function(mode) { case "comment": do_comment(target); break; case "rename": do_rename(target, event); break; case "define": do_define(target); break; - case "undefine": do_undefine(target); break; + //case "undefine": do_undefine(target); break; case "randomcolors": do_randomcolors(target); break; - case "switchview": do_switchview(target); break; + //case "switchview": do_switchview(target); break; } } }); - // Show disasm panel and seek to entrypoint - if (mode === "flat") - this.display_flat(); - else if (mode === "graph") - this.display_graph(); + // Show graph and seek to entrypoint + this.display_graph(); var addr = null; if (this.selected_offset !== null) { addr = this.selected_offset; @@ -175,53 +174,31 @@ DisasmPanel.prototype.render = function(mode) { scroll_to_address(addr); }; -DisasmPanel.prototype.seek = function(addr, scroll) { +GraphPanel.prototype.seek = function(addr, scroll) { var panel = this.panel; var error = false; - if (this.display === "graph") { - panel.innerHTML = ""; - r2.cmd("agj " + addr, function(x) { + panel.innerHTML = ""; + r2.cmd("agj " + addr, function(x) { panel.innerHTML = "
"; - // If render fails (address does not belong to function) then switch to flat view if (render_graph(x) === false) error = true; - }); - } - if (error) this.display_flat(); - if (this.display === "flat") { - this.min = this.max = 0; - r2.get_disasm_before_after(addr, -100, 100, function(x) { - panel.innerHTML = "
"; - r2ui._dis.instructions = x; - render_instructions(r2ui._dis.instructions); - }); - } + }); + if (error) console.log("Render failed, probably address does not belong to function"); this.selected = get_element_by_address(addr); this.selected_offset = addr; - render_history(); rehighlight_iaddress(addr); }; -DisasmPanel.prototype.display_graph = function() { - this.display = "graph"; +GraphPanel.prototype.display_graph = function() { $("#main_panel").removeClass("ec_gui_background"); $("#main_panel").addClass("ec_gui_alt_background"); if ($('#minimap').length) $('#minimap')[0].innerHTML = ""; }; -DisasmPanel.prototype.display_flat = function() { - this.display = "flat"; - $("#main_panel").removeClass("ec_gui_alt_background"); - $("#main_panel").addClass("ec_gui_background"); - if ($('#minimap').length) $('#minimap')[0].innerHTML = ""; -}; - -DisasmPanel.prototype.goToAddress = function() { +GraphPanel.prototype.goToAddress = function() { if (this.renaming === null && this.selected !== null && (this.selected.className.indexOf(" addr ") > -1)) { var address = get_address_from_class(this.selected); if (this.selected.className.indexOf("ec_gui_dataoffset") > -1) { - // address is located in not executable memory, switching to hex view - r2ui.openpage(address, 2); return; } if (address !== undefined && address !== null) { @@ -231,33 +208,32 @@ DisasmPanel.prototype.goToAddress = function() { } }; -DisasmPanel.prototype.handleInputTextChange = function() { +GraphPanel.prototype.handleInputTextChange = function() { if (this.renaming !== null && this.rbox.value.length > 0) { if ($(this.selected).hasClass('insaddr')) { - var old_value = get_offset_flag(r2ui._dis.selected_offset); + var old_value = get_offset_flag(r2ui.graph.selected_offset); var type = "offsets"; - r2.cmdj("afij @ " + r2ui._dis.selected_offset, function(x) { + r2.cmdj("afij @ " + r2ui.graph.selected_offset, function(x) { if (x !== null && x !== undefined) { - if ("0x" + x[0].offset.toString(16) === r2ui._dis.selected_offset) { + if ("0x" + x[0].offset.toString(16) === r2ui.graph.selected_offset) { type = "functions"; } } }); - rename(r2ui._dis.selected_offset, old_value, this.rbox.value, type); + rename(r2ui.graph.selected_offset, old_value, this.rbox.value, type); } else if ($(this.selected).hasClass('faddr')) { if ($(this.selected).hasClass('fvar')) - r2.cmd("afvn " + r2ui._dis.renameOldValue + " " + r2ui._dis.rbox.value + " @ " + r2ui._dis.selected_offset, function(x){}); + r2.cmd("afvn " + r2ui.graph.renameOldValue + " " + r2ui.graph.rbox.value + " @ " + r2ui.graph.selected_offset, function(x){}); else if ($(this.selected).hasClass('farg')) - r2.cmd("afan " + r2ui._dis.renameOldValue + " " + r2ui._dis.rbox.value + " @ " + r2ui._dis.selected_offset, function(x){}); + r2.cmd("afan " + r2ui.graph.renameOldValue + " " + r2ui.graph.rbox.value + " @ " + r2ui.graph.selected_offset, function(x){}); } else { // TODO, try to recognize other spaces - var old_value = r2ui._dis.renameOldValue; + var old_value = r2ui.graph.renameOldValue; if (old_value.indexOf("0x") === 0) old_value = ""; - rename(r2ui._dis.selected_offset, old_value, r2ui._dis.rbox.value, "*"); + rename(r2ui.graph.selected_offset, old_value, r2ui.graph.rbox.value, "*"); } var instruction; - if (this.display == "flat") instruction = $(this.selected).closest(".instructionbox").find('.insaddr')[0]; - if (this.display == "graph") instruction = $(this.selected).closest(".instruction").find('.insaddr')[0]; + instruction = $(this.selected).closest(".instruction").find('.insaddr')[0]; this.renaming = null; var address = get_address_from_class(instruction); update_binary_details(); @@ -265,6 +241,7 @@ DisasmPanel.prototype.handleInputTextChange = function() { scroll_to_address(address); } }; + function scroll_to_address(address, pos) { if (address === undefined || address === null) return; var offset = 0; @@ -277,10 +254,9 @@ function scroll_to_address(address, pos) { var top = elements[0].documentOffsetTop() - offset; top = Math.max(0,top); $('#center_panel').scrollTo(top, {axis: 'y'}); - r2ui._dis.scroll_offset = top; + r2ui.graph.scroll_offset = top; } - function handleClick(inEvent) { if ($(inEvent.target).hasClass('addr')) { @@ -293,37 +269,24 @@ function handleClick(inEvent) { // If instruction address, add address to history else if ($(inEvent.target).hasClass('insaddr')) { var address = get_address_from_class(inEvent.target); - r2ui._dis.selected = inEvent.target; - r2ui._dis.selected_offset = address; + r2ui.graph.selected = inEvent.target; + r2ui.graph.selected_offset = address; rehighlight_iaddress(address); r2ui.history_push(address); - render_history(); var get_more_instructions = false; var next_instruction; var prev_instruction; - if (r2ui._dis.display == "flat") { - next_instruction = $(r2ui._dis.selected).closest(".instructionbox").next().find('.insaddr')[0]; - if ($("#gbox .instructionbox").index( $(r2ui._dis.selected).closest(".instructionbox")[0]) > $("#gbox .instructionbox").length - 10) { - get_more_instructions = true; - address = get_address_from_class(next_instruction); - } - prev_instruction = $(r2ui._dis.selected).closest(".instructionbox").prev().find('.insaddr')[0]; - if ($("#gbox .instructionbox").index( $(r2ui._dis.selected).closest(".instructionbox")[0]) < 10) { - get_more_instructions = true; - address = get_address_from_class(prev_instruction); - } + + next_instruction = $(r2ui.graph.selected).closest(".instruction").next().find('.insaddr')[0]; + if (next_instruction === undefined || next_instruction === null) { + next_instruction = $(r2ui.graph.selected).closest(".basicblock").next().find('.insaddr')[0]; } - if (r2ui._dis.display == "graph") { - next_instruction = $(r2ui._dis.selected).closest(".instruction").next().find('.insaddr')[0]; - if (next_instruction === undefined || next_instruction === null) { - next_instruction = $(r2ui._dis.selected).closest(".basicblock").next().find('.insaddr')[0]; - } - prev_instruction = $(r2ui._dis.selected).closest(".instruction").prev().find('.insaddr')[0]; - if (prev_instruction === undefined || prev_instruction === null) { - prev_instruction = $(r2ui._dis.selected).closest(".basicblock").prev().find('.insaddr').last()[0]; - } + prev_instruction = $(r2ui.graph.selected).closest(".instruction").prev().find('.insaddr')[0]; + if (prev_instruction === undefined || prev_instruction === null) { + prev_instruction = $(r2ui.graph.selected).closest(".basicblock").prev().find('.insaddr').last()[0]; } + if (get_more_instructions) { r2ui.seek(address, false); rehighlight_iaddress(address); @@ -333,8 +296,8 @@ function handleClick(inEvent) { } else if ($(inEvent.target).hasClass('fvar') || $(inEvent.target).hasClass('farg')) { var eid = null; address = get_address_from_class(inEvent.target, "faddr"); - r2ui._dis.selected = inEvent.target; - r2ui._dis.selected_offset = address; + r2ui.graph.selected = inEvent.target; + r2ui.graph.selected_offset = address; var classes = inEvent.target.className.split(' '); for (var j in classes) { var klass = classes[j]; @@ -355,20 +318,19 @@ function handleDoubleClick (inEvent) { function handleKeypress(inEvent) { var keynum = inEvent.keyCode || inEvent.charCode || inEvent.which || 0; var key = String.fromCharCode(keynum); - // console.log(key); if (inEvent.ctrlKey||inEvent.metaKey) return; if ($(inEvent.target).prop("tagName") === "INPUT" || $(inEvent.target).prop("tagName") === "TEXTAREA") return; - if (r2ui._dis.renaming !== null) return; + if (r2ui.graph.renaming !== null) return; // Spacebar Switch flat and graph views - if (key === ' ') { - do_switchview(); - inEvent.preventDefault(); - } + // if (key === ' ') { + // do_switchview(); + // inEvent.preventDefault(); + // } - if (key === 'm' && r2ui._dis.display == "graph") toggle_minimap(); + if (key === 'm') toggle_minimap(); // h Seek to previous address in history if (key === 'h') do_jumpto(r2ui.history_prev()); @@ -379,28 +341,21 @@ function handleKeypress(inEvent) { // j Seek to next Instruction if (key === 'j') { var get_more_instructions = false; - if ($(r2ui._dis.selected).hasClass("insaddr")) { + if ($(r2ui.graph.selected).hasClass("insaddr")) { var next_instruction; - if (r2ui._dis.display == "flat") { - next_instruction = $(r2ui._dis.selected).closest(".instructionbox").next().find('.insaddr')[0]; - if ($("#gbox .instructionbox").index( $(r2ui._dis.selected).closest(".instructionbox")[0]) > $("#gbox .instructionbox").length - 10) get_more_instructions = true; - } - if (r2ui._dis.display == "graph") { - next_instruction = $(r2ui._dis.selected).closest(".instruction").next().find('.insaddr')[0]; - if (next_instruction === undefined || next_instruction === null) { - next_instruction = $(r2ui._dis.selected).closest(".basicblock").next().find('.insaddr')[0]; - } + + next_instruction = $(r2ui.graph.selected).closest(".instruction").next().find('.insaddr')[0]; + if (next_instruction === undefined || next_instruction === null) { + next_instruction = $(r2ui.graph.selected).closest(".basicblock").next().find('.insaddr')[0]; } - // if (next_instruction === null || next_instruction === undefined) return; var address = get_address_from_class(next_instruction); if (get_more_instructions) { r2ui.seek(address, false); } else { r2ui.history_push(address); - render_history(); - r2ui._dis.selected = next_instruction; - r2ui._dis.selected_offset = address; + r2ui.graph.selected = next_instruction; + r2ui.graph.selected_offset = address; } rehighlight_iaddress(address); scroll_to_address(address); @@ -409,36 +364,31 @@ function handleKeypress(inEvent) { // k Seek to previous instruction if (key === 'k') { var get_more_instructions = false; - if ($(r2ui._dis.selected).hasClass("insaddr")) { + if ($(r2ui.graph.selected).hasClass("insaddr")) { var prev_instruction; - if (r2ui._dis.display == "flat") { - prev_instruction = $(r2ui._dis.selected).closest(".instructionbox").prev().find('.insaddr')[0]; - if ($("#gbox .instructionbox").index( $(r2ui._dis.selected).closest(".instructionbox")[0]) < 10) get_more_instructions = true; - } - if (r2ui._dis.display == "graph") { - var prev_instruction = $(r2ui._dis.selected).closest(".instruction").prev().find('.insaddr')[0]; - if (prev_instruction === undefined || prev_instruction === null) { - prev_instruction = $(r2ui._dis.selected).closest(".basicblock").prev().find('.insaddr').last()[0]; - } + + var prev_instruction = $(r2ui.graph.selected).closest(".instruction").prev().find('.insaddr')[0]; + if (prev_instruction === undefined || prev_instruction === null) { + prev_instruction = $(r2ui.graph.selected).closest(".basicblock").prev().find('.insaddr').last()[0]; } + var address = get_address_from_class(prev_instruction); if (get_more_instructions) { r2ui.seek(address, false); } else { r2ui.history_push(address); - render_history(); - r2ui._dis.selected = prev_instruction; - r2ui._dis.selected_offset = address; + r2ui.graph.selected = prev_instruction; + r2ui.graph.selected_offset = address; } rehighlight_iaddress(address); scroll_to_address(address); } } // c Define function - if (key === 'c') do_define(r2ui._dis.selected); + if (key === 'c') do_define(r2ui.graph.selected); // u Clear function metadata - if (key === 'u') do_undefine(r2ui._dis.selected); + if (key === 'u') do_undefine(r2ui.graph.selected); // g Go to address if (key === 'g') { @@ -447,19 +397,19 @@ function handleKeypress(inEvent) { } // ; Add comment - if (key === ';') do_comment(r2ui._dis.selected); + if (key === ';') do_comment(r2ui.graph.selected); // n Rename - if (key === 'n') do_rename(r2ui._dis.selected, inEvent); + if (key === 'n') do_rename(r2ui.graph.selected, inEvent); if (key === 'R') do_randomcolors(); // esc if (keynum === 27) { // Esc belongs to renaming - if(r2ui._dis.renaming !== null) { - r2ui._dis.renaming.innerHTML = r2ui._dis.renameOldValue; - r2ui._dis.renaming = null; + if(r2ui.graph.renaming !== null) { + r2ui.graph.renaming.innerHTML = r2ui.graph.renameOldValue; + r2ui.graph.renaming = null; } else { // go back in history var addr = r2ui.history_prev(); @@ -469,27 +419,16 @@ function handleKeypress(inEvent) { } // enter if (keynum === 13) { - r2ui._dis.goToAddress(); + r2ui.graph.goToAddress(); } } -function do_switchview() { - var address = get_address_from_class(r2ui._dis.selected); - if (address !== undefined && address !== null) { - if (r2ui._dis.display === "flat") r2ui._dis.display_graph(); - else if (r2ui._dis.display === "graph") r2ui._dis.display_flat(); - r2ui.seek(address, true); - scroll_to_address(address); - } -} - function do_jumpto(address) { var element = $('.insaddr.addr_' + address); if (element.length > 0) { r2ui.history_push(address); - r2ui._dis.selected = element[0]; - r2ui._dis.selected_offset = address; - render_history(); + r2ui.graph.selected = element[0]; + r2ui.graph.selected_offset = address; } else { r2ui.seek(address, true); } @@ -515,45 +454,45 @@ function do_rename(element, inEvent) { r2ui.seek("$$", false); scroll_to_last_offset(); } - } else if (r2ui._dis.renaming === null && element !== null && $(element).hasClass("addr")) { - r2ui._dis.selected = element; - r2ui._dis.selected_offset = address; - r2ui._dis.renaming = element; - r2ui._dis.renameOldValue = element.innerHTML; - r2ui._dis.rbox = document.createElement('input'); - r2ui._dis.rbox.setAttribute("type", "text"); - r2ui._dis.rbox.setAttribute("id", "rename"); - r2ui._dis.rbox.setAttribute("style", "border-width: 0;padding: 0;"); - r2ui._dis.rbox.setAttribute("onChange", "handleInputTextChange()"); + } else if (r2ui.graph.renaming === null && element !== null && $(element).hasClass("addr")) { + r2ui.graph.selected = element; + r2ui.graph.selected_offset = address; + r2ui.graph.renaming = element; + r2ui.graph.renameOldValue = element.innerHTML; + r2ui.graph.rbox = document.createElement('input'); + r2ui.graph.rbox.setAttribute("type", "text"); + r2ui.graph.rbox.setAttribute("id", "rename"); + r2ui.graph.rbox.setAttribute("style", "border-width: 0;padding: 0;"); + r2ui.graph.rbox.setAttribute("onChange", "handleInputTextChange()"); if ($(element).hasClass('insaddr')) { var value = get_offset_flag(address); - r2ui._dis.rbox.setAttribute("value",value); - r2ui._dis.rbox.setSelectionRange(value.length, value.length); + r2ui.graph.rbox.setAttribute("value",value); + r2ui.graph.rbox.setSelectionRange(value.length, value.length); } else { - r2ui._dis.rbox.setAttribute("value", r2ui._dis.renameOldValue); - r2ui._dis.rbox.setSelectionRange(r2ui._dis.renameOldValue.length, r2ui._dis.renameOldValue.length); + r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue); + r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length); } - r2ui._dis.renaming.innerHTML = ""; - r2ui._dis.renaming.appendChild(r2ui._dis.rbox); - setTimeout('r2ui._dis.rbox.focus();', 200); + r2ui.graph.renaming.innerHTML = ""; + r2ui.graph.renaming.appendChild(r2ui.graph.rbox); + setTimeout('r2ui.graph.rbox.focus();', 200); inEvent.returnValue=false; inEvent.preventDefault(); - } else if (r2ui._dis.renaming === null && element !== null && $(element).hasClass("faddr")) { + } else if (r2ui.graph.renaming === null && element !== null && $(element).hasClass("faddr")) { address = get_address_from_class(element, "faddr"); - r2ui._dis.selected = element; - r2ui._dis.selected_offset = address; - r2ui._dis.renaming = element; - r2ui._dis.renameOldValue = element.innerText; - r2ui._dis.rbox = document.createElement('input'); - r2ui._dis.rbox.setAttribute("type", "text"); - r2ui._dis.rbox.setAttribute("id", "rename"); - r2ui._dis.rbox.setAttribute("style", "border-width: 0;padding: 0;"); - r2ui._dis.rbox.setAttribute("onChange", "handleInputTextChange()"); - r2ui._dis.rbox.setAttribute("value", r2ui._dis.renameOldValue); - r2ui._dis.rbox.setSelectionRange(r2ui._dis.renameOldValue.length, r2ui._dis.renameOldValue.length); - r2ui._dis.renaming.innerHTML = ""; - r2ui._dis.renaming.appendChild(r2ui._dis.rbox); - setTimeout('r2ui._dis.rbox.focus();', 200); + r2ui.graph.selected = element; + r2ui.graph.selected_offset = address; + r2ui.graph.renaming = element; + r2ui.graph.renameOldValue = element.innerText; + r2ui.graph.rbox = document.createElement('input'); + r2ui.graph.rbox.setAttribute("type", "text"); + r2ui.graph.rbox.setAttribute("id", "rename"); + r2ui.graph.rbox.setAttribute("style", "border-width: 0;padding: 0;"); + r2ui.graph.rbox.setAttribute("onChange", "handleInputTextChange()"); + r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue); + r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length); + r2ui.graph.renaming.innerHTML = ""; + r2ui.graph.renaming.appendChild(r2ui.graph.rbox); + setTimeout('r2ui.graph.rbox.focus();', 200); inEvent.returnValue=false; inEvent.preventDefault(); } @@ -575,7 +514,6 @@ function do_undefine(element) { r2.cmd("af-"); r2.update_flags(); update_binary_details(); - if (r2ui._dis.display == "graph") r2ui._dis.display_flat(); r2ui.seek(address, false); scroll_to_address(address); } diff --git a/src/html/graph/lib/js/r2_bokken.js b/src/html/graph/lib/js/r2.js similarity index 99% rename from src/html/graph/lib/js/r2_bokken.js rename to src/html/graph/lib/js/r2.js index fc4dd6fb..1c99c7b8 100644 --- a/src/html/graph/lib/js/r2_bokken.js +++ b/src/html/graph/lib/js/r2.js @@ -481,9 +481,6 @@ r2.getTextLogger = function(obj) { obj.refresh (function() { //obj.clear (); }); - if (r2ui.selected_panel === "Logs") - setTimeout (to, n * 1000); - else console.log("Not in logs :("); return true; } obj.interval = setTimeout (to, n * 1000); diff --git a/src/html/graph/lib/js/r2ui.js b/src/html/graph/lib/js/r2ui.js index baed5f82..4d0a3793 100644 --- a/src/html/graph/lib/js/r2ui.js +++ b/src/html/graph/lib/js/r2ui.js @@ -1,14 +1,8 @@ var r2ui = {}; -r2ui.selected_panel = "Disassembler"; - -r2ui.history = []; -r2ui.history_idx = 0; - +// Colors r2ui.colors = {}; - r2ui.load_colors = function () { - // change css on the fly! r2.cmdj("ecj", function(x) { for (var i in x) { r2ui.colors[".ec_" + i.replace("gui.","gui_")] = "rgb(" + String(x[i]) + ")"; @@ -21,26 +15,14 @@ r2ui.load_colors = function () { for (var j in myrules) { if (myrules[j].selectorText !== undefined && myrules[j].selectorText !== null) { if (myrules[j].selectorText.toLowerCase().indexOf(".ec_") === 0) { - var sel = myrules[j].selectorText; //.toLowerCase().replace("gui.","gui_"); - /* - var color = r2ui.colors[sel]; - if (color !== undefined && color !== null) { - if (sel == ".ec_gui_background" || sel == ".ec_gui_alt_background") { - myrules[j].style.backgroundColor = color; - } else if (sel == ".ec_border") myrules[j].style.borderColor = color; - else myrules[j].style.color = color; - } else { - if (sel == ".ec_gui_background" || sel == ".ec_gui_alt_background") r2ui.colors[sel] = myrules[j].style.backgroundColor; - else if (sel == ".ec_gui_border") r2ui.colors[sel] = myrules[j].style.borderColor; - else r2ui.colors[sel] = myrules[j].style.color; - } - */ + var sel = myrules[j].selectorText; } } } } }; +// Basic Blocks r2ui.basic_blocks = {}; r2ui.use_sdb = false; r2ui.get_fcn_BB = function(fcn_offset, bb_offset) { @@ -105,12 +87,10 @@ r2ui.update_fcn_BB = function(fcn_offset, bb_offset, bbinfo) { r2ui.current_fcn_offset = null; r2ui.graph = null; -r2ui.console_lang = "r2"; -r2ui.toggle_console_lang = function() { - if (r2ui.console_lang == "r2") r2ui.console_lang = "js"; - else if (r2ui.console_lang == "js") r2ui.console_lang = "r2"; - $("#cmd_input > label").html(r2ui.console_lang); -}; + +// History +r2ui.history = []; +r2ui.history_idx = 0; r2ui.history_push = function (x) { if (x != r2ui.history_last()) { @@ -122,9 +102,7 @@ r2ui.history_push = function (x) { }; r2ui.history_pop = function () { - // console.log("history pop"); if (r2ui.history_idx == r2ui.history.length) r2ui.history_idx--; - // console.log(r2ui.history_idx + "/" + r2ui.history.length); return r2ui.history.pop(); }; @@ -135,20 +113,17 @@ r2ui.history_last = function () { }; r2ui.history_prev = function () { - // console.log("history prev"); if (r2ui.history_idx > 1) r2ui.history_idx--; - // console.log(r2ui.history_idx + "/" + r2ui.history.length); return r2ui.history[r2ui.history_idx - 1]; }; r2ui.history_next = function () { - // console.log("history next"); var ret = r2ui.history[r2ui.history_idx]; if (r2ui.history_idx < r2ui.history.length) r2ui.history_idx++; - // console.log(r2ui.history_idx + "/" + r2ui.history.length); return ret; }; +// Seek r2ui.next_instruction = function() { var offset = parseInt(r2ui.history_last(), 16); r2.cmd ("pdl 1", function (x) { @@ -176,7 +151,6 @@ r2ui.prev_instruction = function() { r2ui.seek = function (addr, push, scroll) { if (addr === undefined) return; - // Resolve flag in case we dont have an address if (addr.indexOf("0x") === 0) { addr = address_canonicalize(addr); } else { @@ -192,61 +166,24 @@ r2ui.seek = function (addr, push, scroll) { if (push) r2ui.history_push(addr); - // if (r2ui.ra.getIndex ()==2) r2ui.ra.setIndex (1); - r2.cmd ("ss " + addr, function () { - r2ui._dis.seek(addr, scroll); - r2ui._hex.seek(addr, scroll); + r2ui.graph.seek(addr, scroll); }); - // if (r2ui._dis.tmp_address !== undefined) r2ui._dis.tmp_address = addr; }; r2ui.seek_in_graph = function (addr, push) { if (push) r2ui.history_push (addr); - // if (r2ui.ra.getIndex ()==2) r2ui.ra.setIndex (1); - r2.cmd ("ss "+addr, function () { rehighlight_iaddress(addr); - r2ui._hex.seek(addr); - r2ui._hex.scrollTo(0, 0); }); }; r2ui.seek_prev = function () { - // XXX. this is only for disasm var addr = r2ui.history.pop (); r2.cmd("ss "+addr, function () { - r2ui._dis.seek(addr); - r2ui._dis.scrollTo(0, 0); - r2ui._hex.seek(addr); - r2ui._hex.scrollTo(0, 0); + r2ui.graph.seek(addr); + r2ui.graph.scrollTo(0, 0); }); }; -/* used from mainpanel */ -r2ui.openpage = function(addr, idx) { - if (idx === undefined) { - idx = addr; - addr = undefined; - } - if (addr !== undefined) { - r2ui.seek(addr, true); - } - - // What is this for? - if (r2ui.ra.getIndex()==2) r2ui.ra.setIndex(1); - - r2ui.mp.openPage(idx); - -}; - -r2ui.opendis = function (addr) { - r2ui.openpage(addr, 0); -}; - -r2ui.openhex = function (addr) { - r2ui.openpage(addr, 2); -}; - - diff --git a/src/resources.qrc b/src/resources.qrc index 4a3f5404..3a9cba82 100644 --- a/src/resources.qrc +++ b/src/resources.qrc @@ -76,15 +76,14 @@ html/graph/lib/css/disasm.css html/graph/lib/css/joint.min.css html/graph/lib/css/main.css - html/graph/lib/js/bokken.js - html/graph/lib/js/disasm_panel.js + html/graph/lib/js/graph_panel.js html/graph/lib/js/disasm.js html/graph/lib/js/joint.js html/graph/lib/js/joint.layout.DirectedGraph.js html/graph/lib/js/jquery-1.9.0.js html/graph/lib/js/jquery-ui-latest.js html/graph/lib/js/jquery.scrollTo-latest.js - html/graph/lib/js/r2_bokken.js + html/graph/lib/js/r2.js html/graph/lib/js/r2ui.js