mirror of
https://github.com/rizinorg/cutter.git
synced 2024-12-18 19:06:10 +00:00
add dark theme support for graph view
This commit is contained in:
Alvaro Muñoz
parent
441ea351f8
commit
cce1c150df
@ -7,7 +7,8 @@
|
||||
|
||||
<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/main.css" />
|
||||
|
||||
@ -29,11 +30,13 @@
|
||||
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
|
||||
};
|
||||
|
||||
r2ui.load_colors();
|
||||
// Load r2 settings (TODO: Do we need this?)
|
||||
r2.load_settings();
|
||||
r2ui.graph = new GraphPanel();
|
||||
r2ui.graph.seek(location.hash.substring(1));
|
||||
r2ui.graph.render();
|
||||
|
||||
// Initialize and render graph
|
||||
r2ui.graph_panel = new GraphPanel();
|
||||
r2ui.graph_panel.set_theme("dark");
|
||||
r2ui.graph_panel.seek(location.hash.substring(1));
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
176
src/html/graph/lib/css/graph_dark.css
Normal file
176
src/html/graph/lib/css/graph_dark.css
Normal 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;
|
||||
}
|
||||
|
||||
@ -146,7 +146,7 @@ BBGraph.prototype.render = function() {
|
||||
// render graph
|
||||
joint.layout.DirectedGraph.layout(graph);
|
||||
|
||||
r2ui.graph = graph;
|
||||
r2ui.graph_panel.graph = graph;
|
||||
|
||||
// reposition graph
|
||||
reposition_graph();
|
||||
@ -193,7 +193,7 @@ BBGraph.prototype.render = function() {
|
||||
}
|
||||
});
|
||||
|
||||
if (r2ui.graph.minimap) {
|
||||
if (r2ui.graph_panel.minimap) {
|
||||
update_minimap();
|
||||
$("#minimap_area").draggable({
|
||||
containment: "parent",
|
||||
@ -222,19 +222,19 @@ BBGraph.prototype.render = function() {
|
||||
// Functions
|
||||
|
||||
function toggle_minimap() {
|
||||
if (r2ui.graph.minimap) {
|
||||
r2ui.graph.minimap = false;
|
||||
r2ui.seek(r2ui.graph.selected_offset, false);
|
||||
if (r2ui.graph_panel.minimap) {
|
||||
r2ui.graph_panel.minimap = false;
|
||||
r2ui.seek(r2ui.graph_panel.selected_offset, false);
|
||||
$('#minimap').hide();
|
||||
} else {
|
||||
r2ui.graph.minimap = true;
|
||||
r2ui.seek(r2ui.graph.selected_offset, false);
|
||||
r2ui.graph_panel.minimap = true;
|
||||
r2ui.seek(r2ui.graph_panel.selected_offset, false);
|
||||
$('#minimap').show();
|
||||
}
|
||||
}
|
||||
|
||||
function update_minimap() {
|
||||
if (r2ui.graph.minimap && $('#canvas svg').length) {
|
||||
if (r2ui.graph_panel.minimap && $('#canvas svg').length) {
|
||||
var minimap_width = 200;
|
||||
var minimap_height = 200;
|
||||
var svg_width = $('#canvas svg')[0].getBBox().width;
|
||||
@ -263,7 +263,7 @@ function update_minimap() {
|
||||
}
|
||||
|
||||
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 bb_offsets = Object.keys(blocks);
|
||||
for (var i in bbs) {
|
||||
@ -282,7 +282,9 @@ function reposition_graph() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var flag = 0;
|
||||
|
||||
function render_graph(x) {
|
||||
var obj;
|
||||
try {
|
||||
@ -292,7 +294,7 @@ function render_graph(x) {
|
||||
}
|
||||
if (obj[0] === 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;
|
||||
|
||||
for (var bn = 0; bn < obj[0].blocks.length; bn++) {
|
||||
@ -325,17 +327,17 @@ function render_graph(x) {
|
||||
dom.id = "bb_" + addr;
|
||||
dom.className = "basicblock eny0-selectable ec_gui_background ec_gui_border";
|
||||
dom.innerHTML = idump;
|
||||
graph.addVertex(addr, cnt, dom);
|
||||
bbgraph.addVertex(addr, cnt, dom);
|
||||
if (bb.fail > 0) {
|
||||
graph.addEdge(addr, bb.fail, "red");
|
||||
bbgraph.addEdge(addr, bb.fail, "red");
|
||||
if (bb.jump > 0) {
|
||||
graph.addEdge(addr, bb.jump, "green");
|
||||
bbgraph.addEdge(addr, bb.jump, "green");
|
||||
}
|
||||
} 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");
|
||||
element.on("mousedown", function(event){
|
||||
@ -854,7 +856,7 @@ function has_scrollbar(divnode) {
|
||||
}
|
||||
|
||||
function on_scroll(event) {
|
||||
if (!r2ui.graph.scrolling) {
|
||||
if (!r2ui.graph_panel.scrolling) {
|
||||
var panel_disas = $("#main_panel").tabs("option", "active") === 0 ? true : false;
|
||||
event.preventDefault();
|
||||
}
|
||||
@ -864,15 +866,15 @@ 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.graph.scroll_offset = top;
|
||||
r2ui.graph_panel.scroll_offset = top;
|
||||
}
|
||||
|
||||
function store_scroll_offset() {
|
||||
r2ui.graph.scroll_offset = $('#center_panel').scrollTop();
|
||||
r2ui.graph_panel.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'});
|
||||
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) {
|
||||
@ -923,11 +925,11 @@ function contains(a, obj) {
|
||||
}
|
||||
|
||||
function handleInputTextChange() {
|
||||
r2ui.graph.handleInputTextChange();
|
||||
r2ui.graph_panel.handleInputTextChange();
|
||||
}
|
||||
|
||||
function show_contextMenu(x,y) {
|
||||
r2ui.graph.showContextMenu(x,y);
|
||||
r2ui.graph_panel.showContextMenu(x,y);
|
||||
}
|
||||
|
||||
function get_offset_flag(offset) {
|
||||
@ -987,14 +989,5 @@ function get_reloc_flag(reloc) {
|
||||
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";
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
|
||||
// Graph Panel
|
||||
var GraphPanel = function () {
|
||||
this.graph = null;
|
||||
this.min = 0;
|
||||
this.max = 0;
|
||||
this.block = 512;
|
||||
@ -174,6 +175,17 @@ GraphPanel.prototype.render = function(mode) {
|
||||
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) {
|
||||
var panel = this.panel;
|
||||
var error = false;
|
||||
@ -211,26 +223,26 @@ GraphPanel.prototype.goToAddress = 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.graph.selected_offset);
|
||||
var old_value = get_offset_flag(r2ui.graph_panel.selected_offset);
|
||||
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 ("0x" + x[0].offset.toString(16) === r2ui.graph.selected_offset) {
|
||||
if ("0x" + x[0].offset.toString(16) === r2ui.graph_panel.selected_offset) {
|
||||
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')) {
|
||||
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'))
|
||||
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 {
|
||||
// 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 = "";
|
||||
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;
|
||||
instruction = $(this.selected).closest(".instruction").find('.insaddr')[0];
|
||||
@ -254,7 +266,7 @@ function scroll_to_address(address, pos) {
|
||||
var top = elements[0].documentOffsetTop() - offset;
|
||||
top = Math.max(0,top);
|
||||
$('#center_panel').scrollTo(top, {axis: 'y'});
|
||||
r2ui.graph.scroll_offset = top;
|
||||
r2ui.graph_panel.scroll_offset = top;
|
||||
}
|
||||
|
||||
function handleClick(inEvent) {
|
||||
@ -269,8 +281,8 @@ 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.graph.selected = inEvent.target;
|
||||
r2ui.graph.selected_offset = address;
|
||||
r2ui.graph_panel.selected = inEvent.target;
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
rehighlight_iaddress(address);
|
||||
|
||||
r2ui.history_push(address);
|
||||
@ -278,13 +290,13 @@ function handleClick(inEvent) {
|
||||
var next_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) {
|
||||
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) {
|
||||
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) {
|
||||
@ -296,8 +308,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.graph.selected = inEvent.target;
|
||||
r2ui.graph.selected_offset = address;
|
||||
r2ui.graph_panel.selected = inEvent.target;
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
var classes = inEvent.target.className.split(' ');
|
||||
for (var j in classes) {
|
||||
var klass = classes[j];
|
||||
@ -322,13 +334,7 @@ function handleKeypress(inEvent) {
|
||||
if (inEvent.ctrlKey||inEvent.metaKey) return;
|
||||
if ($(inEvent.target).prop("tagName") === "INPUT" || $(inEvent.target).prop("tagName") === "TEXTAREA") return;
|
||||
|
||||
if (r2ui.graph.renaming !== null) return;
|
||||
|
||||
// Spacebar Switch flat and graph views
|
||||
// if (key === ' ') {
|
||||
// do_switchview();
|
||||
// inEvent.preventDefault();
|
||||
// }
|
||||
if (r2ui.graph_panel.renaming !== null) return;
|
||||
|
||||
if (key === 'm') toggle_minimap();
|
||||
|
||||
@ -341,12 +347,12 @@ function handleKeypress(inEvent) {
|
||||
// j Seek to next Instruction
|
||||
if (key === 'j') {
|
||||
var get_more_instructions = false;
|
||||
if ($(r2ui.graph.selected).hasClass("insaddr")) {
|
||||
if ($(r2ui.graph_panel.selected).hasClass("insaddr")) {
|
||||
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) {
|
||||
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);
|
||||
@ -354,8 +360,8 @@ function handleKeypress(inEvent) {
|
||||
r2ui.seek(address, false);
|
||||
} else {
|
||||
r2ui.history_push(address);
|
||||
r2ui.graph.selected = next_instruction;
|
||||
r2ui.graph.selected_offset = address;
|
||||
r2ui.graph_panel.selected = next_instruction;
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
}
|
||||
rehighlight_iaddress(address);
|
||||
scroll_to_address(address);
|
||||
@ -364,12 +370,12 @@ function handleKeypress(inEvent) {
|
||||
// k Seek to previous instruction
|
||||
if (key === 'k') {
|
||||
var get_more_instructions = false;
|
||||
if ($(r2ui.graph.selected).hasClass("insaddr")) {
|
||||
if ($(r2ui.graph_panel.selected).hasClass("insaddr")) {
|
||||
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) {
|
||||
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);
|
||||
@ -377,18 +383,18 @@ function handleKeypress(inEvent) {
|
||||
r2ui.seek(address, false);
|
||||
} else {
|
||||
r2ui.history_push(address);
|
||||
r2ui.graph.selected = prev_instruction;
|
||||
r2ui.graph.selected_offset = address;
|
||||
r2ui.graph_panel.selected = prev_instruction;
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
}
|
||||
rehighlight_iaddress(address);
|
||||
scroll_to_address(address);
|
||||
}
|
||||
}
|
||||
// c Define function
|
||||
if (key === 'c') do_define(r2ui.graph.selected);
|
||||
if (key === 'c') do_define(r2ui.graph_panel.selected);
|
||||
|
||||
// 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
|
||||
if (key === 'g') {
|
||||
@ -397,19 +403,19 @@ function handleKeypress(inEvent) {
|
||||
}
|
||||
|
||||
// ; Add comment
|
||||
if (key === ';') do_comment(r2ui.graph.selected);
|
||||
if (key === ';') do_comment(r2ui.graph_panel.selected);
|
||||
|
||||
// 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();
|
||||
|
||||
// esc
|
||||
if (keynum === 27) {
|
||||
// Esc belongs to renaming
|
||||
if(r2ui.graph.renaming !== null) {
|
||||
r2ui.graph.renaming.innerHTML = r2ui.graph.renameOldValue;
|
||||
r2ui.graph.renaming = null;
|
||||
if(r2ui.graph_panel.renaming !== null) {
|
||||
r2ui.graph_panel.renaming.innerHTML = r2ui.graph_panel.renameOldValue;
|
||||
r2ui.graph_panel.renaming = null;
|
||||
} else {
|
||||
// go back in history
|
||||
var addr = r2ui.history_prev();
|
||||
@ -419,7 +425,7 @@ function handleKeypress(inEvent) {
|
||||
}
|
||||
// enter
|
||||
if (keynum === 13) {
|
||||
r2ui.graph.goToAddress();
|
||||
r2ui.graph_panel.goToAddress();
|
||||
}
|
||||
}
|
||||
|
||||
@ -427,8 +433,8 @@ function do_jumpto(address) {
|
||||
var element = $('.insaddr.addr_' + address);
|
||||
if (element.length > 0) {
|
||||
r2ui.history_push(address);
|
||||
r2ui.graph.selected = element[0];
|
||||
r2ui.graph.selected_offset = address;
|
||||
r2ui.graph_panel.selected = element[0];
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
} else {
|
||||
r2ui.seek(address, true);
|
||||
}
|
||||
@ -454,45 +460,45 @@ function do_rename(element, inEvent) {
|
||||
r2ui.seek("$$", false);
|
||||
scroll_to_last_offset();
|
||||
}
|
||||
} 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()");
|
||||
} else if (r2ui.graph_panel.renaming === null && element !== null && $(element).hasClass("addr")) {
|
||||
r2ui.graph_panel.selected = element;
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
r2ui.graph_panel.renaming = element;
|
||||
r2ui.graph_panel.renameOldValue = element.innerHTML;
|
||||
r2ui.graph_panel.rbox = document.createElement('input');
|
||||
r2ui.graph_panel.rbox.setAttribute("type", "text");
|
||||
r2ui.graph_panel.rbox.setAttribute("id", "rename");
|
||||
r2ui.graph_panel.rbox.setAttribute("style", "border-width: 0;padding: 0;");
|
||||
r2ui.graph_panel.rbox.setAttribute("onChange", "handleInputTextChange()");
|
||||
if ($(element).hasClass('insaddr')) {
|
||||
var value = get_offset_flag(address);
|
||||
r2ui.graph.rbox.setAttribute("value",value);
|
||||
r2ui.graph.rbox.setSelectionRange(value.length, value.length);
|
||||
r2ui.graph_panel.rbox.setAttribute("value",value);
|
||||
r2ui.graph_panel.rbox.setSelectionRange(value.length, value.length);
|
||||
} else {
|
||||
r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue);
|
||||
r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length);
|
||||
r2ui.graph_panel.rbox.setAttribute("value", r2ui.graph_panel.renameOldValue);
|
||||
r2ui.graph_panel.rbox.setSelectionRange(r2ui.graph_panel.renameOldValue.length, r2ui.graph_panel.renameOldValue.length);
|
||||
}
|
||||
r2ui.graph.renaming.innerHTML = "";
|
||||
r2ui.graph.renaming.appendChild(r2ui.graph.rbox);
|
||||
setTimeout('r2ui.graph.rbox.focus();', 200);
|
||||
r2ui.graph_panel.renaming.innerHTML = "";
|
||||
r2ui.graph_panel.renaming.appendChild(r2ui.graph_panel.rbox);
|
||||
setTimeout('r2ui.graph_panel.rbox.focus();', 200);
|
||||
inEvent.returnValue=false;
|
||||
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");
|
||||
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);
|
||||
r2ui.graph_panel.selected = element;
|
||||
r2ui.graph_panel.selected_offset = address;
|
||||
r2ui.graph_panel.renaming = element;
|
||||
r2ui.graph_panel.renameOldValue = element.innerText;
|
||||
r2ui.graph_panel.rbox = document.createElement('input');
|
||||
r2ui.graph_panel.rbox.setAttribute("type", "text");
|
||||
r2ui.graph_panel.rbox.setAttribute("id", "rename");
|
||||
r2ui.graph_panel.rbox.setAttribute("style", "border-width: 0;padding: 0;");
|
||||
r2ui.graph_panel.rbox.setAttribute("onChange", "handleInputTextChange()");
|
||||
r2ui.graph_panel.rbox.setAttribute("value", r2ui.graph_panel.renameOldValue);
|
||||
r2ui.graph_panel.rbox.setSelectionRange(r2ui.graph_panel.renameOldValue.length, r2ui.graph_panel.renameOldValue.length);
|
||||
r2ui.graph_panel.renaming.innerHTML = "";
|
||||
r2ui.graph_panel.renaming.appendChild(r2ui.graph_panel.rbox);
|
||||
setTimeout('r2ui.graph_panel.rbox.focus();', 200);
|
||||
inEvent.returnValue=false;
|
||||
inEvent.preventDefault();
|
||||
}
|
||||
|
||||
@ -23,6 +23,8 @@ r2ui.load_colors = function () {
|
||||
};
|
||||
|
||||
// Basic Blocks
|
||||
r2ui.current_fcn_offset = null;
|
||||
r2ui.graph_panel = null;
|
||||
r2ui.basic_blocks = {};
|
||||
r2ui.use_sdb = false;
|
||||
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
|
||||
r2ui.history = [];
|
||||
@ -167,7 +167,7 @@ r2ui.seek = function (addr, push, scroll) {
|
||||
if (push) r2ui.history_push(addr);
|
||||
|
||||
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 () {
|
||||
var addr = r2ui.history.pop ();
|
||||
r2.cmd("ss "+addr, function () {
|
||||
r2ui.graph.seek(addr);
|
||||
r2ui.graph.scrollTo(0, 0);
|
||||
r2ui.graph_panel.seek(addr);
|
||||
r2ui.graph_panel.scrollTo(0, 0);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -73,7 +73,8 @@
|
||||
</qresource>
|
||||
<qresource prefix="/graph">
|
||||
<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/main.css</file>
|
||||
<file>html/graph/lib/js/graph_panel.js</file>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user