mirror of
https://github.com/geohot/qira
synced 2025-03-13 10:33:30 +03:00
refactored the css
This commit is contained in:
George Hotz
parent
266adaa518
commit
8548913bb3
21
go.sh
21
go.sh
@ -1,9 +1,9 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
#BIN=../tests/ctf/hudak
|
||||
BIN=../tests/ctf/hudak
|
||||
#BIN=../tests/ctf/simple
|
||||
SRC=../tests/hello.c
|
||||
#SRC=../tests/hello.c
|
||||
#SRC=../tests/algo.c
|
||||
|
||||
if [ $SRC != "" ]; then
|
||||
@ -18,15 +18,16 @@ cd scripts
|
||||
#echo "hello" | ./run_qemu.sh $BIN
|
||||
#echo "4t_l34st_it_was_1mperat1v3..." | ./run_qemu.sh $BIN
|
||||
echo "i wish i were a valid key bob" | ./run_qemu.sh $BIN
|
||||
#./run_qemu.sh $BIN
|
||||
|
||||
# build the Program database
|
||||
python db_commit_asm.py $BIN $SRC
|
||||
# build the Change database
|
||||
python db_commit_log.py
|
||||
# build the memory json
|
||||
python mem_json_extract.py
|
||||
# build the pmaps database
|
||||
python segment_extract.py
|
||||
echo "*** build the Program database"
|
||||
time python db_commit_asm.py $BIN $SRC
|
||||
echo "*** build the Change database"
|
||||
time python db_commit_log.py
|
||||
echo "*** build the memory json"
|
||||
time python mem_json_extract.py
|
||||
echo "*** build the pmaps database"
|
||||
time python segment_extract.py
|
||||
|
||||
#python db_commit_blocks.py
|
||||
#python memory_server.py
|
||||
|
||||
@ -28,7 +28,7 @@ for (address, data, clnum, flags) in dat:
|
||||
|
||||
#coll = db.tinychange
|
||||
coll = db.change
|
||||
print "doing db insert"
|
||||
print "doing db insert of",len(ds),"changes"
|
||||
coll.drop()
|
||||
coll.insert(ds)
|
||||
print "db insert done, building indexes"
|
||||
|
||||
@ -6,6 +6,6 @@ cd ~/build/qemu
|
||||
make -j32
|
||||
popd
|
||||
|
||||
~/build/qemu/i386-linux-user/qemu-i386 -singlestep -d in_asm $1 2> /tmp/qira_disasm
|
||||
~/build/qemu/i386-linux-user/qemu-i386 -singlestep -d in_asm $@ 2> /tmp/qira_disasm
|
||||
ls -l /tmp/qira*
|
||||
|
||||
|
||||
@ -10,6 +10,12 @@ Meteor.startup(function() {
|
||||
});
|
||||
});
|
||||
|
||||
function get_data_type(v) {
|
||||
var a = Pmaps.findOne({address: v - v%0x1000});
|
||||
if (a === undefined) return "";
|
||||
else return "data"+a.type;
|
||||
}
|
||||
|
||||
stream.on('memory', function(msg) {
|
||||
// render the hex editor
|
||||
var addr = msg['address'];
|
||||
@ -29,14 +35,14 @@ stream.on('memory', function(msg) {
|
||||
var t = msg['dat'][addr+i+j];
|
||||
if (t !== undefined) v += t;
|
||||
}
|
||||
var a = Pmaps.findOne({address: v - v%0x1000});
|
||||
if (a !== undefined) {
|
||||
var a = get_data_type(v);
|
||||
if (a !== "") {
|
||||
var me = v.toString(16);
|
||||
//while (me.length != 8) me = "0" + me;
|
||||
me = "0x"+me;
|
||||
var exclass = "";
|
||||
if (addr+i == Session.get('daddr')) { exclass = "highlight"; }
|
||||
html += '<td colspan="4" class="data data'+a.type+' '+exclass+'" daddr='+(addr+i)+">"+me+"</td>";
|
||||
html += '<td colspan="4" class="data '+a+' '+exclass+'" daddr='+(addr+i)+">"+me+"</td>";
|
||||
} else {
|
||||
for (var j = 0; j < 4; j++) {
|
||||
var ii = msg['dat'][addr+i+j];
|
||||
@ -78,6 +84,17 @@ function update_dview(addr) {
|
||||
Session.set('dview', (addr-0x20)-(addr-0x20)%0x10);
|
||||
}
|
||||
|
||||
var baseevents = {
|
||||
'click .datamemory': function(e) {
|
||||
var daddr = parseInt(e.target.innerHTML, 16);
|
||||
update_dview(daddr);
|
||||
},
|
||||
'click .datainstruction': function(e) {
|
||||
var iaddr = parseInt(e.target.innerHTML, 16);
|
||||
Session.set('iaddr', iaddr);
|
||||
},
|
||||
};
|
||||
|
||||
Template.memviewer.events({
|
||||
'dblclick .datamemory': function(e) {
|
||||
var daddr = parseInt(e.target.innerHTML, 16);
|
||||
@ -93,6 +110,9 @@ Template.memviewer.events({
|
||||
},
|
||||
});
|
||||
|
||||
Template.datachanges.events(baseevents);
|
||||
Template.regviewer.events(baseevents);
|
||||
|
||||
stream.on('registers', function(msg) {
|
||||
$('#regviewer')[0].innerHTML = "";
|
||||
UI.insert(UI.renderWithData(Template.regviewer, {regs: msg}), $('#regviewer')[0]);
|
||||
@ -113,11 +133,9 @@ Template.regviewer.hexvalue = function() {
|
||||
return hex(this.value);
|
||||
};
|
||||
|
||||
Template.regviewer.events({
|
||||
'click .daddress': function() {
|
||||
update_dview(this.value);
|
||||
},
|
||||
});
|
||||
Template.regviewer.datatype = function() {
|
||||
return get_data_type(this.value);
|
||||
};
|
||||
|
||||
Template.datachanges.memactions = function() {
|
||||
var clnum = Session.get("clnum");
|
||||
@ -139,6 +157,14 @@ Template.datachanges.hexdata = function() {
|
||||
return hex(this.data);
|
||||
};
|
||||
|
||||
Template.datachanges.addrtype = function() {
|
||||
return get_data_type(this.address);
|
||||
};
|
||||
|
||||
Template.datachanges.datatype = function() {
|
||||
return get_data_type(this.data);
|
||||
};
|
||||
|
||||
// keep these updated
|
||||
Deps.autorun(function() {
|
||||
var daddr = Session.get('daddr');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
Meteor.startup(function() {
|
||||
Deps.autorun(function() {
|
||||
zoom_out_max();
|
||||
zoom_out_max(true);
|
||||
});
|
||||
|
||||
/*$("#vtimeline").click(function(e) {
|
||||
@ -24,14 +24,14 @@ Meteor.startup(function() {
|
||||
Session.set("cview", [cview[0] + move, cview[1] + move]);
|
||||
}
|
||||
});
|
||||
|
||||
register_drag_zoom();
|
||||
});
|
||||
|
||||
function zoom_out_max() {
|
||||
function zoom_out_max(dontforce) {
|
||||
var max = Session.get("max_clnum");
|
||||
if (max === undefined) return;
|
||||
Session.set("cview", [0, max]);
|
||||
if (dontforce === true) Session.setDefault("cview", [0, max]);
|
||||
else Session.set("cview", [0, max]);
|
||||
}
|
||||
|
||||
function register_drag_zoom() {
|
||||
@ -95,12 +95,32 @@ function redraw_flags() {
|
||||
var cscale = get_cscale();
|
||||
if (cscale === undefined) return;
|
||||
$(".flag").remove();
|
||||
var colors = {
|
||||
"change": "blue",
|
||||
"ciaddr": "#AA0000", // keep it alphabetical
|
||||
"daddrr": "#888800",
|
||||
"daddrw": "yellow"
|
||||
};
|
||||
for (clnum in flags) {
|
||||
var classes = "flag";
|
||||
clnum = parseInt(clnum);
|
||||
if (clnum < cview[0] || clnum > cview[1]) continue;
|
||||
for (var i = 0; i < flags[clnum].length; i++) classes += " flag"+flags[clnum][i];
|
||||
var flag = $('<div id="flag'+clnum+'" class="'+classes+'">'+clnum+'</div>');
|
||||
sty = "";
|
||||
if (flags[clnum].length == 0) continue;
|
||||
else if (flags[clnum].length == 1) {
|
||||
var col = colors[flags[clnum][0]];
|
||||
sty = "background-color:"+col+"; color:"+col;
|
||||
}
|
||||
else {
|
||||
sty = "background: linear-gradient(to right"
|
||||
var cols = flags[clnum].sort()
|
||||
for (var i = 0; i < cols.length; i++) {
|
||||
sty += ","+colors[cols[i]];
|
||||
}
|
||||
sty += ")";
|
||||
}
|
||||
|
||||
var flag = $('<div id="flag'+clnum+'" class="flag" style="'+sty+'">'+clnum+'</div>');
|
||||
flag[0].style.marginTop = ((clnum-cview[0])/cscale) + "px";
|
||||
flag.click(function(cln) { Session.set("clnum", cln); }.bind(undefined, clnum));
|
||||
$('#vtimeline').append(flag);
|
||||
@ -130,10 +150,9 @@ Deps.autorun(function() {
|
||||
Deps.autorun(function() {
|
||||
var clnum = Session.get("clnum");
|
||||
var iaddr = Session.get('iaddr');
|
||||
remove_flags("iaddr");
|
||||
remove_flags("ciaddr");
|
||||
Change.find({address: iaddr, type: "I"}).forEach(function(x) {
|
||||
if (x.clnum == clnum) return;
|
||||
add_flag("iaddr", x.clnum);
|
||||
add_flag("ciaddr", x.clnum);
|
||||
});
|
||||
redraw_flags();
|
||||
});
|
||||
@ -145,7 +164,6 @@ Deps.autorun(function() {
|
||||
remove_flags("daddrw");
|
||||
//Change.find({address: daddr, $or: [{type: "L"}, {type: "S"}] }).forEach(function(x) {
|
||||
Change.find({address: daddr}).forEach(function(x) {
|
||||
if (x.clnum == clnum) return;
|
||||
if (x.type == "L") add_flag("daddrr", x.clnum);
|
||||
if (x.type == "S") add_flag("daddrw", x.clnum);
|
||||
});
|
||||
|
||||
187
web/qira.css
187
web/qira.css
@ -1,28 +1,29 @@
|
||||
.block {
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
border: 1px solid black;
|
||||
padding: 2px;
|
||||
margin-top: 5px;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
/* universal things */
|
||||
|
||||
td {
|
||||
font-family: monospace;
|
||||
}
|
||||
.blockloop {
|
||||
background-color: #f8e8ff;
|
||||
|
||||
body {
|
||||
margin: 0px 0px 0px 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.name {
|
||||
color: purple;
|
||||
|
||||
.highlight {
|
||||
background-color: #FF7777;
|
||||
}
|
||||
.comment {
|
||||
color: purple;
|
||||
}
|
||||
#daddr_input {
|
||||
border: 1px solid black !important;
|
||||
font-family: monospace !important;
|
||||
font-size: 8px !important;
|
||||
|
||||
.control {
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
width: 180px;
|
||||
border: 1px solid black;
|
||||
padding: 2px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* vertical timeline and flags */
|
||||
|
||||
#vtimelinebox {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
@ -36,65 +37,13 @@
|
||||
|
||||
.flag {
|
||||
width: 100px;
|
||||
height: 1px;
|
||||
height: 2px;
|
||||
position: fixed;
|
||||
font-family: monospace;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.flagchange {
|
||||
background-color: blue !important;
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
.flagiaddr {
|
||||
background-color: red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.flagdaddrr {
|
||||
background-color: #888800;
|
||||
color: #888800;
|
||||
}
|
||||
|
||||
.flagdaddrw {
|
||||
background-color: yellow;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
#idump {
|
||||
height: 180px;
|
||||
padding: 10px;
|
||||
border: 1px solid black !important;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
#timeline {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: gray;
|
||||
border: 1px solid black;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#cfg {
|
||||
background-color: #FFFFCC;
|
||||
width: calc(100% - 700px);
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
border: 1px solid black;
|
||||
padding-left: 20px;
|
||||
/*text-align: center;*/
|
||||
}
|
||||
|
||||
#rightpanel {
|
||||
right: 0px;
|
||||
width: 700px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background-color: #FFCCCC;
|
||||
border: 1px solid black;
|
||||
}
|
||||
/* everything in the right panel */
|
||||
|
||||
#onlypanel {
|
||||
background-color: #AAAAAA;
|
||||
@ -105,12 +54,27 @@
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
#clviewer {
|
||||
height: 320px;
|
||||
.panelthing {
|
||||
border: 1px solid gray;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
/* instruction dump */
|
||||
|
||||
#idump {
|
||||
height: 180px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: purple;
|
||||
}
|
||||
.comment {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
/* regviewer and datachanges */
|
||||
|
||||
#regviewer {
|
||||
height: 80px;
|
||||
border: 1px solid gray;
|
||||
@ -120,78 +84,17 @@
|
||||
}
|
||||
|
||||
#datachanges {
|
||||
border: 1px solid gray;
|
||||
background-color: #DDDDDD;
|
||||
font-family: monospace;
|
||||
padding: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#hexeditor {
|
||||
border: 1px solid gray;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
#cl_selector {
|
||||
font-size: 14px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.ui-slider-track {
|
||||
margin-left: 80px !important;
|
||||
margin-right: 40px !important;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.address {
|
||||
color: #880000;
|
||||
}
|
||||
|
||||
.daddress {
|
||||
color: #228822;
|
||||
}
|
||||
|
||||
.change {
|
||||
color: blue;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px 0px 0px 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bigcltable td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: #FF7777;
|
||||
}
|
||||
|
||||
.reg {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.control {
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
width: 180px;
|
||||
border: 1px solid black;
|
||||
padding: 2px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
font-family: monospace;
|
||||
}
|
||||
@ -212,11 +115,17 @@ body {
|
||||
color: #888800;
|
||||
}
|
||||
|
||||
.reg {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.regread {
|
||||
background-color: #888800;
|
||||
background-color: #666644;
|
||||
}
|
||||
|
||||
.regwrite {
|
||||
background-color: yellow !important;
|
||||
background-color: #EEEE44 !important;
|
||||
}
|
||||
|
||||
|
||||
@ -17,30 +17,25 @@
|
||||
<div id="controls">
|
||||
{{> controls}}
|
||||
</div>
|
||||
<div id="idump">
|
||||
<div class="panelthing" id="idump">
|
||||
{{> idump}}
|
||||
</div>
|
||||
<div id="regviewer">
|
||||
<div class="panelthing" id="regviewer">
|
||||
</div>
|
||||
<div id="datachanges">
|
||||
<div class="panelthing" id="datachanges">
|
||||
{{>datachanges}}
|
||||
</div>
|
||||
<div id="hexeditor">
|
||||
<div class="panelthing" id="hexeditor">
|
||||
{{> memviewer}}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<template name="datachanges">
|
||||
{{#each memactions}}
|
||||
<span class="datachanges {{typeclass}}">{{hexaddress}} {{type}} {{hexdata}}</span>
|
||||
{{/each}}
|
||||
</template>
|
||||
|
||||
<template name="controls">
|
||||
<input id="control_clnum" class="control datachange" value={{clnum}} />
|
||||
<input id="control_iaddr" class="control datainstruction" value="{{iaddr}}" />
|
||||
<input id="control_daddr" class="control datamemory" value="{{daddr}}" />
|
||||
<input spellcheck="false" id="control_clnum" class="control datachange" value={{clnum}} />
|
||||
<input spellcheck="false" id="control_iaddr" class="control datainstruction" value="{{iaddr}}" />
|
||||
<input spellcheck="false" id="control_daddr" class="control datamemory" value="{{daddr}}" />
|
||||
</template>
|
||||
|
||||
<template name="idump">
|
||||
@ -49,7 +44,7 @@
|
||||
<div class="change {{ischange}}">{{clnum}}</div>
|
||||
{{#with program_instruction}}
|
||||
<span class="name">{{name}}</span>
|
||||
<span class="address {{isiaddr}}">{{hexaddress}}</span>
|
||||
<span class="datainstruction {{isiaddr}}">{{hexaddress}}</span>
|
||||
{{instruction}}
|
||||
<span class="comment">{{comment}}</span>
|
||||
{{/with}}
|
||||
@ -60,11 +55,21 @@
|
||||
<template name="regviewer">
|
||||
{{#each regs}}
|
||||
<div class="reg {{regactions}}">
|
||||
{{name}}: <span class="daddress">{{hexvalue}}</span>
|
||||
{{name}}: <span class="{{datatype}}">{{hexvalue}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</template>
|
||||
|
||||
<template name="datachanges">
|
||||
{{#each memactions}}
|
||||
<span class="datachanges {{typeclass}}">
|
||||
<span class="{{addrtype}}">{{hexaddress}}</span>
|
||||
<--
|
||||
<span class="{{datatype}}">{{hexdata}}</span>
|
||||
</span>
|
||||
{{/each}}
|
||||
</template>
|
||||
|
||||
<template name="memviewer">
|
||||
<div id="hexdump"></div>
|
||||
</template>
|
||||
|
||||
@ -41,8 +41,3 @@ Meteor.publish('dat_daddr', function(daddr) {
|
||||
}
|
||||
});
|
||||
|
||||
Meteor.publish('dat_iaddr', function(iaddr) {
|
||||
// fetch the static info about the range
|
||||
return Change.find({address: iaddr, type: "I"}, {sort: {clnum: 1}, limit:30})
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user