ch0ic3/cutter
1
0
Fork 0
mirror of https://github.com/rizinorg/cutter.git synced 2025-01-05 11:35:26 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

add dark theme support for graph view

Browse Source
This commit is contained in:
Alvaro Muñoz 2017-04-05 00:12:07 +02:00
parent 441ea351f8
commit cce1c150df
7 changed files with 296 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/html/graph/index.html
View File

@ -7,7 +7,8 @@
<title>radare2</title> <title>radare2</title>
<link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/disasm.css" /> <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/graph_dark.css" id="dark_theme"/>
<link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/graph_light.css" id="light_theme"/>
<link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/joint.min.css" /> <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/main.css" /> <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/main.css" />
@ -29,11 +30,13 @@
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM()); return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
}; };
r2ui.load_colors(); // Load r2 settings (TODO: Do we need this?)
r2.load_settings(); r2.load_settings();
r2ui.graph = new GraphPanel();
r2ui.graph.seek(location.hash.substring(1)); // Initialize and render graph
r2ui.graph.render(); r2ui.graph_panel = new GraphPanel();
r2ui.graph_panel.set_theme("dark");
r2ui.graph_panel.seek(location.hash.substring(1));
}); });
</script> </script>
</head> </head>

176
src/html/graph/lib/css/graph_dark.css Normal file
View File

@ -0,0 +1,176 @@
.bbcanvas { float: left; }
.flatcanvas { float: left; }
.insaddr {
min-width: 7em;
display: inline-block;
}
#outergbox {
position: absolute;
height: 100%;
width: 100%;
}
.instruction {
font-family: monospace;
white-space: nowrap;
}
.instructiondesc {
display: inline-block;
}
.data {
text-align: right;
min-width: 18px;
padding-top: 0px;
padding-bottom: 0px;
}
.instructionbox {
position: absolute;
}
#gbox {
position: relative;
/*margin: 10px;*/
}
.bytes {
display: inline-block;
width: 170px;
}
input:focus {outline: none; }
.ec_fline {color: rgb(0,127,127);}
.ec_help {color: rgb(0,127,127);}
.ec_args {color: rgb(0,127,127);}
.ec_label {color: rgb(0,127,127);}
.ec_flow {color: rgb(0,127,127);}
.ec_prompt {color: rgb(0,127,127);}
.ec_input {color: rgb(0,127,127);}
.ec_btext {color: rgb(0,127,127);}
.ec_swi {color: rgb(0,127,127);}
.ec_comment {color: rgb(0,127,127);}
.ec_fname {color: rgb(127,0,0);}
.ec_flag {color: rgb(0,127,127);}
.ec_offset {color: #0661FF;}
.ec_other {color: rgb(127,127,127);} /* byte color bu default */
.ec_b0x00 {color: rgb(0,127,0);}
.ec_b0x7f {color: rgb(0,127,127);}
.ec_b0xff {color: rgb(127,0,0);}
.ec_math {color: rgb(127,127,0);}
.ec_bin {color: rgb(127,127,0);}
.ec_push {color: rgb(127,0,127);}
.ec_pop {color: rgb(255,0,255);}
.ec_jmp {color: rgb(0,127,0);}
.ec_cjmp {color: rgb(0,127,0);}
.ec_call {color: #EC0000;}
.ec_nop {color: rgb(0,0,127);}
.ec_ret {color: rgb(127,0,0);}
.ec_trap {color: rgb(255,0,0);}
.ec_invalid {color: rgb(255,0,0);}
.ec_cmp {color: rgb(0,127,127);}
.ec_reg {color: rgb(0,127,127);} /* (also applies to qword, brackets, etc) */
.ec_creg {color: rgb(0,127,127);}
.ec_mov {color: #5C5C5C;}
.ec_num {color: #7B03B0;}
.ec_gui_cflow {color: rgb(255,255,0);}
.ec_gui_dataoffset {color: rgb(127,127,0);}
.ec_gui_background {background-color: rgb(255,255,255); }
.ec_gui_alt_background {background-color: rgb(50, 50, 50); }
.ec_gui_border {border-color: rgb(234, 249, 255); }
.autohighlight { background-color: #8AFF77 !important; }
.autohighlighti { background-color: #8AFF77; }
.hidden {display:none;}
.lines {margin-left: 100px;}
.basicblock {
border: 1px solid;
padding: 5px;
position: absolute;
pointer-events: none;
-webkit-user-select: none;
box-sizing: border-box;
z-index: 2;
}
.basicblock .instruction,
.basicblock input {
pointer-events: auto;
}
#canvas {
position: relative;
display: inline-block;
background: transparent;
width:100%;
height:100%;
margin:10px;
}
#canvas svg,
#minimap svg {
background: transparent;
}
#minimap svg .link,
#canvas svg .link {
pointer-events: none;
}
#minimap svg .connection {
stroke-width: 5;
}
#minimap {
border: 1px solid black;
position:absolute;
width:200px;
height:200px;
z-index: -10;
background: #EAF9FF;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
#minimap .basicblock {
display: none;
}
#canvas #minimap_area {
display: none;
z-index: 0;
}
#canvas #minimap_area svg {
stroke: transparent;
}
#minimap_area {
border: 1px solid black;
position:absolute;
background: black;
opacity: 0.2;
filter: alpha(opacity=20); /* For IE8 and earlier */
}
#radareApp_mp_panels_pageDisassembler {
padding: 0px;
}
#main_panel {
overflow: auto;
}
.right_label {
float: right;
}

0
src/html/graph/lib/css/disasm.css → src/html/graph/lib/css/graph_light.css
View File

53
src/html/graph/lib/js/disasm.js
View File

@ -146,7 +146,7 @@ BBGraph.prototype.render = function() {
// render graph // render graph
joint.layout.DirectedGraph.layout(graph); joint.layout.DirectedGraph.layout(graph);
r2ui.graph = graph; r2ui.graph_panel.graph = graph;
// reposition graph // reposition graph
reposition_graph(); reposition_graph();
@ -193,7 +193,7 @@ BBGraph.prototype.render = function() {
} }
}); });
if (r2ui.graph.minimap) { if (r2ui.graph_panel.minimap) {
update_minimap(); update_minimap();
$("#minimap_area").draggable({ $("#minimap_area").draggable({
containment: "parent", containment: "parent",
@ -222,19 +222,19 @@ BBGraph.prototype.render = function() {
// Functions // Functions
function toggle_minimap() { function toggle_minimap() {
if (r2ui.graph.minimap) { if (r2ui.graph_panel.minimap) {
r2ui.graph.minimap = false; r2ui.graph_panel.minimap = false;
r2ui.seek(r2ui.graph.selected_offset, false); r2ui.seek(r2ui.graph_panel.selected_offset, false);
$('#minimap').hide(); $('#minimap').hide();
} else { } else {
r2ui.graph.minimap = true; r2ui.graph_panel.minimap = true;
r2ui.seek(r2ui.graph.selected_offset, false); r2ui.seek(r2ui.graph_panel.selected_offset, false);
$('#minimap').show(); $('#minimap').show();
} }
} }
function update_minimap() { function update_minimap() {
if (r2ui.graph.minimap && $('#canvas svg').length) { if (r2ui.graph_panel.minimap && $('#canvas svg').length) {
var minimap_width = 200; var minimap_width = 200;
var minimap_height = 200; var minimap_height = 200;
var svg_width = $('#canvas svg')[0].getBBox().width; var svg_width = $('#canvas svg')[0].getBBox().width;
@ -263,7 +263,7 @@ function update_minimap() {
} }
function reposition_graph() { function reposition_graph() {
var bbs = r2ui.graph.getElements(); var bbs = r2ui.graph_panel.graph.getElements();
var blocks = r2ui.get_fcn_BBs(r2ui.current_fcn_offset); var blocks = r2ui.get_fcn_BBs(r2ui.current_fcn_offset);
var bb_offsets = Object.keys(blocks); var bb_offsets = Object.keys(blocks);
for (var i in bbs) { for (var i in bbs) {
@ -282,7 +282,9 @@ function reposition_graph() {
} }
} }
} }
var flag = 0; var flag = 0;
function render_graph(x) { function render_graph(x) {
var obj; var obj;
try { try {
@ -292,7 +294,7 @@ function render_graph(x) {
} }
if (obj[0] === undefined) return false; if (obj[0] === undefined) return false;
if (obj[0].blocks === undefined) return false; if (obj[0].blocks === undefined) return false;
var graph = new BBGraph(); var bbgraph = new BBGraph();
r2ui.current_fcn_offset = obj[0].blocks[0].ops[0].offset; r2ui.current_fcn_offset = obj[0].blocks[0].ops[0].offset;
for (var bn = 0; bn < obj[0].blocks.length; bn++) { for (var bn = 0; bn < obj[0].blocks.length; bn++) {
@ -325,17 +327,17 @@ function render_graph(x) {
dom.id = "bb_" + addr; dom.id = "bb_" + addr;
dom.className = "basicblock eny0-selectable ec_gui_background ec_gui_border"; dom.className = "basicblock eny0-selectable ec_gui_background ec_gui_border";
dom.innerHTML = idump; dom.innerHTML = idump;
graph.addVertex(addr, cnt, dom); bbgraph.addVertex(addr, cnt, dom);
if (bb.fail > 0) { if (bb.fail > 0) {
graph.addEdge(addr, bb.fail, "red"); bbgraph.addEdge(addr, bb.fail, "red");
if (bb.jump > 0) { if (bb.jump > 0) {
graph.addEdge(addr, bb.jump, "green"); bbgraph.addEdge(addr, bb.jump, "green");
} }
} else if (bb.jump > 0) { } else if (bb.jump > 0) {
graph.addEdge(addr, bb.jump, "blue"); bbgraph.addEdge(addr, bb.jump, "blue");
} }
} }
graph.render(); bbgraph.render();
var element = $("#canvas svg g .element"); var element = $("#canvas svg g .element");
element.on("mousedown", function(event){ element.on("mousedown", function(event){
@ -854,7 +856,7 @@ function has_scrollbar(divnode) {
} }
function on_scroll(event) { function on_scroll(event) {
if (!r2ui.graph.scrolling) { if (!r2ui.graph_panel.scrolling) {
var panel_disas = $("#main_panel").tabs("option", "active") === 0 ? true : false; var panel_disas = $("#main_panel").tabs("option", "active") === 0 ? true : false;
event.preventDefault(); event.preventDefault();
} }
@ -864,15 +866,15 @@ function scroll_to_element(element) {
if (element === undefined || element === null) return; if (element === undefined || element === null) return;
var top = Math.max(0,element.documentOffsetTop() - ( window.innerHeight / 2 )); var top = Math.max(0,element.documentOffsetTop() - ( window.innerHeight / 2 ));
$('#center_panel').scrollTo(top, {axis: 'y'}); $('#center_panel').scrollTo(top, {axis: 'y'});
r2ui.graph.scroll_offset = top; r2ui.graph_panel.scroll_offset = top;
} }
function store_scroll_offset() { function store_scroll_offset() {
r2ui.graph.scroll_offset = $('#center_panel').scrollTop(); r2ui.graph_panel.scroll_offset = $('#center_panel').scrollTop();
} }
function scroll_to_last_offset() { function scroll_to_last_offset() {
if (r2ui.graph.scroll_offset !== null) $('#center_panel').scrollTo(r2ui.graph.scroll_offset, {axis: 'y'}); if (r2ui.graph_panel.scroll_offset !== null) $('#center_panel').scrollTo(r2ui.graph_panel.scroll_offset, {axis: 'y'});
} }
function rename(offset, old_value, new_value, space) { function rename(offset, old_value, new_value, space) {
@ -923,11 +925,11 @@ function contains(a, obj) {
} }
function handleInputTextChange() { function handleInputTextChange() {
r2ui.graph.handleInputTextChange(); r2ui.graph_panel.handleInputTextChange();
} }
function show_contextMenu(x,y) { function show_contextMenu(x,y) {
r2ui.graph.showContextMenu(x,y); r2ui.graph_panel.showContextMenu(x,y);
} }
function get_offset_flag(offset) { function get_offset_flag(offset) {
@ -987,14 +989,5 @@ function get_reloc_flag(reloc) {
return full_name; return full_name;
} }
function do_randomcolors(element, inEvent) {
r2.cmd ('ecr;ec gui.background rgb:000', function() {
r2ui.load_colors ();
});
}
function inColor(x) {
return "e scr.color=true;"+x+";e scr.color=false";
}

158
src/html/graph/lib/js/graph_panel.js
View File

@ -1,6 +1,7 @@
// Graph Panel // Graph Panel
var GraphPanel = function () { var GraphPanel = function () {
this.graph = null;
this.min = 0; this.min = 0;
this.max = 0; this.max = 0;
this.block = 512; this.block = 512;
@ -174,6 +175,17 @@ GraphPanel.prototype.render = function(mode) {
scroll_to_address(addr); scroll_to_address(addr);
}; };
GraphPanel.prototype.set_theme = function(theme) {
if (theme === "dark") {
document.getElementById('dark_theme').disabled = false;
document.getElementById('light_theme').disabled = true;
} else if (theme === "light") {
document.getElementById('dark_theme').disabled = true;
document.getElementById('light_theme').disabled = false;
}
r2ui.load_colors();
}
GraphPanel.prototype.seek = function(addr, scroll) { GraphPanel.prototype.seek = function(addr, scroll) {
var panel = this.panel; var panel = this.panel;
var error = false; var error = false;
@ -211,26 +223,26 @@ GraphPanel.prototype.goToAddress = function() {
GraphPanel.prototype.handleInputTextChange = function() { GraphPanel.prototype.handleInputTextChange = function() {
if (this.renaming !== null && this.rbox.value.length > 0) { if (this.renaming !== null && this.rbox.value.length > 0) {
if ($(this.selected).hasClass('insaddr')) { if ($(this.selected).hasClass('insaddr')) {
var old_value = get_offset_flag(r2ui.graph.selected_offset); var old_value = get_offset_flag(r2ui.graph_panel.selected_offset);
var type = "offsets"; var type = "offsets";
r2.cmdj("afij @ " + r2ui.graph.selected_offset, function(x) { r2.cmdj("afij @ " + r2ui.graph_panel.selected_offset, function(x) {
if (x !== null && x !== undefined) { if (x !== null && x !== undefined) {
if ("0x" + x[0].offset.toString(16) === r2ui.graph.selected_offset) { if ("0x" + x[0].offset.toString(16) === r2ui.graph_panel.selected_offset) {
type = "functions"; type = "functions";
} }
} }
}); });
rename(r2ui.graph.selected_offset, old_value, this.rbox.value, type); rename(r2ui.graph_panel.selected_offset, old_value, this.rbox.value, type);
} else if ($(this.selected).hasClass('faddr')) { } else if ($(this.selected).hasClass('faddr')) {
if ($(this.selected).hasClass('fvar')) if ($(this.selected).hasClass('fvar'))
r2.cmd("afvn " + r2ui.graph.renameOldValue + " " + r2ui.graph.rbox.value + " @ " + r2ui.graph.selected_offset, function(x){}); r2.cmd("afvn " + r2ui.graph_panel.renameOldValue + " " + r2ui.graph_panel.rbox.value + " @ " + r2ui.graph_panel.selected_offset, function(x){});
else if ($(this.selected).hasClass('farg')) else if ($(this.selected).hasClass('farg'))
r2.cmd("afan " + r2ui.graph.renameOldValue + " " + r2ui.graph.rbox.value + " @ " + r2ui.graph.selected_offset, function(x){}); r2.cmd("afan " + r2ui.graph_panel.renameOldValue + " " + r2ui.graph_panel.rbox.value + " @ " + r2ui.graph_panel.selected_offset, function(x){});
} else { } else {
// TODO, try to recognize other spaces // TODO, try to recognize other spaces
var old_value = r2ui.graph.renameOldValue; var old_value = r2ui.graph_panel.renameOldValue;
if (old_value.indexOf("0x") === 0) old_value = ""; if (old_value.indexOf("0x") === 0) old_value = "";
rename(r2ui.graph.selected_offset, old_value, r2ui.graph.rbox.value, "*"); rename(r2ui.graph_panel.selected_offset, old_value, r2ui.graph_panel.rbox.value, "*");
} }
var instruction; var instruction;
instruction = $(this.selected).closest(".instruction").find('.insaddr')[0]; instruction = $(this.selected).closest(".instruction").find('.insaddr')[0];
@ -254,7 +266,7 @@ function scroll_to_address(address, pos) {
var top = elements[0].documentOffsetTop() - offset; var top = elements[0].documentOffsetTop() - offset;
top = Math.max(0,top); top = Math.max(0,top);
$('#center_panel').scrollTo(top, {axis: 'y'}); $('#center_panel').scrollTo(top, {axis: 'y'});
r2ui.graph.scroll_offset = top; r2ui.graph_panel.scroll_offset = top;
} }
function handleClick(inEvent) { function handleClick(inEvent) {
@ -269,8 +281,8 @@ function handleClick(inEvent) {
// If instruction address, add address to history // If instruction address, add address to history
else if ($(inEvent.target).hasClass('insaddr')) { else if ($(inEvent.target).hasClass('insaddr')) {
var address = get_address_from_class(inEvent.target); var address = get_address_from_class(inEvent.target);
r2ui.graph.selected = inEvent.target; r2ui.graph_panel.selected = inEvent.target;
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
rehighlight_iaddress(address); rehighlight_iaddress(address);
r2ui.history_push(address); r2ui.history_push(address);
@ -278,13 +290,13 @@ function handleClick(inEvent) {
var next_instruction; var next_instruction;
var prev_instruction; var prev_instruction;
next_instruction = $(r2ui.graph.selected).closest(".instruction").next().find('.insaddr')[0]; next_instruction = $(r2ui.graph_panel.selected).closest(".instruction").next().find('.insaddr')[0];
if (next_instruction === undefined || next_instruction === null) { if (next_instruction === undefined || next_instruction === null) {
next_instruction = $(r2ui.graph.selected).closest(".basicblock").next().find('.insaddr')[0]; next_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").next().find('.insaddr')[0];
} }
prev_instruction = $(r2ui.graph.selected).closest(".instruction").prev().find('.insaddr')[0]; prev_instruction = $(r2ui.graph_panel.selected).closest(".instruction").prev().find('.insaddr')[0];
if (prev_instruction === undefined || prev_instruction === null) { if (prev_instruction === undefined || prev_instruction === null) {
prev_instruction = $(r2ui.graph.selected).closest(".basicblock").prev().find('.insaddr').last()[0]; prev_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
} }
if (get_more_instructions) { if (get_more_instructions) {
@ -296,8 +308,8 @@ function handleClick(inEvent) {
} else if ($(inEvent.target).hasClass('fvar') || $(inEvent.target).hasClass('farg')) { } else if ($(inEvent.target).hasClass('fvar') || $(inEvent.target).hasClass('farg')) {
var eid = null; var eid = null;
address = get_address_from_class(inEvent.target, "faddr"); address = get_address_from_class(inEvent.target, "faddr");
r2ui.graph.selected = inEvent.target; r2ui.graph_panel.selected = inEvent.target;
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
var classes = inEvent.target.className.split(' '); var classes = inEvent.target.className.split(' ');
for (var j in classes) { for (var j in classes) {
var klass = classes[j]; var klass = classes[j];
@ -322,13 +334,7 @@ function handleKeypress(inEvent) {
if (inEvent.ctrlKey||inEvent.metaKey) return; if (inEvent.ctrlKey||inEvent.metaKey) return;
if ($(inEvent.target).prop("tagName") === "INPUT" || $(inEvent.target).prop("tagName") === "TEXTAREA") return; if ($(inEvent.target).prop("tagName") === "INPUT" || $(inEvent.target).prop("tagName") === "TEXTAREA") return;
if (r2ui.graph.renaming !== null) return; if (r2ui.graph_panel.renaming !== null) return;
// Spacebar Switch flat and graph views
// if (key === ' ') {
// do_switchview();
// inEvent.preventDefault();
// }
if (key === 'm') toggle_minimap(); if (key === 'm') toggle_minimap();
@ -341,12 +347,12 @@ function handleKeypress(inEvent) {
// j Seek to next Instruction // j Seek to next Instruction
if (key === 'j') { if (key === 'j') {
var get_more_instructions = false; var get_more_instructions = false;
if ($(r2ui.graph.selected).hasClass("insaddr")) { if ($(r2ui.graph_panel.selected).hasClass("insaddr")) {
var next_instruction; var next_instruction;
next_instruction = $(r2ui.graph.selected).closest(".instruction").next().find('.insaddr')[0]; next_instruction = $(r2ui.graph_panel.selected).closest(".instruction").next().find('.insaddr')[0];
if (next_instruction === undefined || next_instruction === null) { if (next_instruction === undefined || next_instruction === null) {
next_instruction = $(r2ui.graph.selected).closest(".basicblock").next().find('.insaddr')[0]; next_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").next().find('.insaddr')[0];
} }
var address = get_address_from_class(next_instruction); var address = get_address_from_class(next_instruction);
@ -354,8 +360,8 @@ function handleKeypress(inEvent) {
r2ui.seek(address, false); r2ui.seek(address, false);
} else { } else {
r2ui.history_push(address); r2ui.history_push(address);
r2ui.graph.selected = next_instruction; r2ui.graph_panel.selected = next_instruction;
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
} }
rehighlight_iaddress(address); rehighlight_iaddress(address);
scroll_to_address(address); scroll_to_address(address);
@ -364,12 +370,12 @@ function handleKeypress(inEvent) {
// k Seek to previous instruction // k Seek to previous instruction
if (key === 'k') { if (key === 'k') {
var get_more_instructions = false; var get_more_instructions = false;
if ($(r2ui.graph.selected).hasClass("insaddr")) { if ($(r2ui.graph_panel.selected).hasClass("insaddr")) {
var prev_instruction; var prev_instruction;
var prev_instruction = $(r2ui.graph.selected).closest(".instruction").prev().find('.insaddr')[0]; var prev_instruction = $(r2ui.graph_panel.selected).closest(".instruction").prev().find('.insaddr')[0];
if (prev_instruction === undefined || prev_instruction === null) { if (prev_instruction === undefined || prev_instruction === null) {
prev_instruction = $(r2ui.graph.selected).closest(".basicblock").prev().find('.insaddr').last()[0]; prev_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
} }
var address = get_address_from_class(prev_instruction); var address = get_address_from_class(prev_instruction);
@ -377,18 +383,18 @@ function handleKeypress(inEvent) {
r2ui.seek(address, false); r2ui.seek(address, false);
} else { } else {
r2ui.history_push(address); r2ui.history_push(address);
r2ui.graph.selected = prev_instruction; r2ui.graph_panel.selected = prev_instruction;
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
} }
rehighlight_iaddress(address); rehighlight_iaddress(address);
scroll_to_address(address); scroll_to_address(address);
} }
} }
// c Define function // c Define function
if (key === 'c') do_define(r2ui.graph.selected); if (key === 'c') do_define(r2ui.graph_panel.selected);
// u Clear function metadata // u Clear function metadata
if (key === 'u') do_undefine(r2ui.graph.selected); if (key === 'u') do_undefine(r2ui.graph_panel.selected);
// g Go to address // g Go to address
if (key === 'g') { if (key === 'g') {
@ -397,19 +403,19 @@ function handleKeypress(inEvent) {
} }
// ; Add comment // ; Add comment
if (key === ';') do_comment(r2ui.graph.selected); if (key === ';') do_comment(r2ui.graph_panel.selected);
// n Rename // n Rename
if (key === 'n') do_rename(r2ui.graph.selected, inEvent); if (key === 'n') do_rename(r2ui.graph_panel.selected, inEvent);
if (key === 'R') do_randomcolors(); if (key === 'R') do_randomcolors();
// esc // esc
if (keynum === 27) { if (keynum === 27) {
// Esc belongs to renaming // Esc belongs to renaming
if(r2ui.graph.renaming !== null) { if(r2ui.graph_panel.renaming !== null) {
r2ui.graph.renaming.innerHTML = r2ui.graph.renameOldValue; r2ui.graph_panel.renaming.innerHTML = r2ui.graph_panel.renameOldValue;
r2ui.graph.renaming = null; r2ui.graph_panel.renaming = null;
} else { } else {
// go back in history // go back in history
var addr = r2ui.history_prev(); var addr = r2ui.history_prev();
@ -419,7 +425,7 @@ function handleKeypress(inEvent) {
} }
// enter // enter
if (keynum === 13) { if (keynum === 13) {
r2ui.graph.goToAddress(); r2ui.graph_panel.goToAddress();
} }
} }
@ -427,8 +433,8 @@ function do_jumpto(address) {
var element = $('.insaddr.addr_' + address); var element = $('.insaddr.addr_' + address);
if (element.length > 0) { if (element.length > 0) {
r2ui.history_push(address); r2ui.history_push(address);
r2ui.graph.selected = element[0]; r2ui.graph_panel.selected = element[0];
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
} else { } else {
r2ui.seek(address, true); r2ui.seek(address, true);
} }
@ -454,45 +460,45 @@ function do_rename(element, inEvent) {
r2ui.seek("$$", false); r2ui.seek("$$", false);
scroll_to_last_offset(); scroll_to_last_offset();
} }
} else if (r2ui.graph.renaming === null && element !== null && $(element).hasClass("addr")) { } else if (r2ui.graph_panel.renaming === null && element !== null && $(element).hasClass("addr")) {
r2ui.graph.selected = element; r2ui.graph_panel.selected = element;
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
r2ui.graph.renaming = element; r2ui.graph_panel.renaming = element;
r2ui.graph.renameOldValue = element.innerHTML; r2ui.graph_panel.renameOldValue = element.innerHTML;
r2ui.graph.rbox = document.createElement('input'); r2ui.graph_panel.rbox = document.createElement('input');
r2ui.graph.rbox.setAttribute("type", "text"); r2ui.graph_panel.rbox.setAttribute("type", "text");
r2ui.graph.rbox.setAttribute("id", "rename"); r2ui.graph_panel.rbox.setAttribute("id", "rename");
r2ui.graph.rbox.setAttribute("style", "border-width: 0;padding: 0;"); r2ui.graph_panel.rbox.setAttribute("style", "border-width: 0;padding: 0;");
r2ui.graph.rbox.setAttribute("onChange", "handleInputTextChange()"); r2ui.graph_panel.rbox.setAttribute("onChange", "handleInputTextChange()");
if ($(element).hasClass('insaddr')) { if ($(element).hasClass('insaddr')) {
var value = get_offset_flag(address); var value = get_offset_flag(address);
r2ui.graph.rbox.setAttribute("value",value); r2ui.graph_panel.rbox.setAttribute("value",value);
r2ui.graph.rbox.setSelectionRange(value.length, value.length); r2ui.graph_panel.rbox.setSelectionRange(value.length, value.length);
} else { } else {
r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue); r2ui.graph_panel.rbox.setAttribute("value", r2ui.graph_panel.renameOldValue);
r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length); r2ui.graph_panel.rbox.setSelectionRange(r2ui.graph_panel.renameOldValue.length, r2ui.graph_panel.renameOldValue.length);
} }
r2ui.graph.renaming.innerHTML = ""; r2ui.graph_panel.renaming.innerHTML = "";
r2ui.graph.renaming.appendChild(r2ui.graph.rbox); r2ui.graph_panel.renaming.appendChild(r2ui.graph_panel.rbox);
setTimeout('r2ui.graph.rbox.focus();', 200); setTimeout('r2ui.graph_panel.rbox.focus();', 200);
inEvent.returnValue=false; inEvent.returnValue=false;
inEvent.preventDefault(); inEvent.preventDefault();
} else if (r2ui.graph.renaming === null && element !== null && $(element).hasClass("faddr")) { } else if (r2ui.graph_panel.renaming === null && element !== null && $(element).hasClass("faddr")) {
address = get_address_from_class(element, "faddr"); address = get_address_from_class(element, "faddr");
r2ui.graph.selected = element; r2ui.graph_panel.selected = element;
r2ui.graph.selected_offset = address; r2ui.graph_panel.selected_offset = address;
r2ui.graph.renaming = element; r2ui.graph_panel.renaming = element;
r2ui.graph.renameOldValue = element.innerText; r2ui.graph_panel.renameOldValue = element.innerText;
r2ui.graph.rbox = document.createElement('input'); r2ui.graph_panel.rbox = document.createElement('input');
r2ui.graph.rbox.setAttribute("type", "text"); r2ui.graph_panel.rbox.setAttribute("type", "text");
r2ui.graph.rbox.setAttribute("id", "rename"); r2ui.graph_panel.rbox.setAttribute("id", "rename");
r2ui.graph.rbox.setAttribute("style", "border-width: 0;padding: 0;"); r2ui.graph_panel.rbox.setAttribute("style", "border-width: 0;padding: 0;");
r2ui.graph.rbox.setAttribute("onChange", "handleInputTextChange()"); r2ui.graph_panel.rbox.setAttribute("onChange", "handleInputTextChange()");
r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue); r2ui.graph_panel.rbox.setAttribute("value", r2ui.graph_panel.renameOldValue);
r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length); r2ui.graph_panel.rbox.setSelectionRange(r2ui.graph_panel.renameOldValue.length, r2ui.graph_panel.renameOldValue.length);
r2ui.graph.renaming.innerHTML = ""; r2ui.graph_panel.renaming.innerHTML = "";
r2ui.graph.renaming.appendChild(r2ui.graph.rbox); r2ui.graph_panel.renaming.appendChild(r2ui.graph_panel.rbox);
setTimeout('r2ui.graph.rbox.focus();', 200); setTimeout('r2ui.graph_panel.rbox.focus();', 200);
inEvent.returnValue=false; inEvent.returnValue=false;
inEvent.preventDefault(); inEvent.preventDefault();
} }

10
src/html/graph/lib/js/r2ui.js
View File

@ -23,6 +23,8 @@ r2ui.load_colors = function () {
}; };
// Basic Blocks // Basic Blocks
r2ui.current_fcn_offset = null;
r2ui.graph_panel = null;
r2ui.basic_blocks = {}; r2ui.basic_blocks = {};
r2ui.use_sdb = false; r2ui.use_sdb = false;
r2ui.get_fcn_BB = function(fcn_offset, bb_offset) { r2ui.get_fcn_BB = function(fcn_offset, bb_offset) {
@ -85,8 +87,6 @@ r2ui.update_fcn_BB = function(fcn_offset, bb_offset, bbinfo) {
} }
}; };
r2ui.current_fcn_offset = null;
r2ui.graph = null;
// History // History
r2ui.history = []; r2ui.history = [];
@ -167,7 +167,7 @@ r2ui.seek = function (addr, push, scroll) {
if (push) r2ui.history_push(addr); if (push) r2ui.history_push(addr);
r2.cmd ("ss " + addr, function () { r2.cmd ("ss " + addr, function () {
r2ui.graph.seek(addr, scroll); r2ui.graph_panel.seek(addr, scroll);
}); });
}; };
@ -182,8 +182,8 @@ r2ui.seek_in_graph = function (addr, push) {
r2ui.seek_prev = function () { r2ui.seek_prev = function () {
var addr = r2ui.history.pop (); var addr = r2ui.history.pop ();
r2.cmd("ss "+addr, function () { r2.cmd("ss "+addr, function () {
r2ui.graph.seek(addr); r2ui.graph_panel.seek(addr);
r2ui.graph.scrollTo(0, 0); r2ui.graph_panel.scrollTo(0, 0);
}); });
}; };

3
src/resources.qrc
View File

@ -73,7 +73,8 @@
</qresource> </qresource>
<qresource prefix="/graph"> <qresource prefix="/graph">
<file>html/graph/index.html</file> <file>html/graph/index.html</file>
<file>html/graph/lib/css/disasm.css</file> <file>html/graph/lib/css/graph_light.css</file>
<file>html/graph/lib/css/graph_dark.css</file>
<file>html/graph/lib/css/joint.min.css</file> <file>html/graph/lib/css/joint.min.css</file>
<file>html/graph/lib/css/main.css</file> <file>html/graph/lib/css/main.css</file>
<file>html/graph/lib/js/graph_panel.js</file> <file>html/graph/lib/js/graph_panel.js</file>