extract common css code to graph.css

src/html/graph/index.html

@@ -7,10 +7,10 @@
 
 	<title>radare2</title>
 
+        <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/graph.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" />
 
         <script type="text/javascript" src="qrc:/graph/html/graph/lib/js/joint.js"></script>
         <script type="text/javascript" src="qrc:/graph/html/graph/lib/js/joint.layout.DirectedGraph.js"></script>
@@ -24,12 +24,6 @@
         <script type="text/javascript">
             $(document).ready( 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());
-                };
-
                 // Load r2 settings (TODO: Do we need this?)
                 r2.load_settings();
 

src/html/graph/lib/css/graph.css

@@ -1,4 +1,139 @@
 
+
+/* Basic Block graph */
+.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; }
+
+.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;
+}
+
 /* CUSTOMIZE/OVERRIDE THE DEFAULT CSS */
 /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
 .ui-layout-center ,	/* has content-div */
@@ -234,29 +369,3 @@ p {
   right: 30px;
   width: 0%;
 }
-
-/*Hex panel */
-.hex {
-    font-family: monospace;
-    font-size: 10pt;
-    width: 650px;
-    height: 100%;
-}
-.hexdump {
-    float: left;
-    line-height: 20px;
-    width: 340px;
-}
-.hextext {
-    float: left;
-    line-height: 20px;
-    width: 140px;
-    color: white;
-}
-.hexoffset {
-    float: left;
-    line-height: 20px;
-    padding-right: 30px;
-    text-align: right;
-    width: 100px;
-}

src/html/graph/lib/css/graph_dark.css

@@ -1,50 +1,3 @@
-.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);}
@@ -83,94 +36,7 @@ input:focus {outline: none; }
 .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); }
+.ec_gui_border {border-color: rgb(0, 0, 0); }
 
 .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;
-}
-

src/html/graph/lib/css/graph_light.css

@@ -1,50 +1,3 @@
-.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);}
@@ -83,94 +36,7 @@ input:focus {outline: none; }
 .ec_gui_dataoffset {color: rgb(127,127,0);}
 .ec_gui_background {background-color: rgb(255,255,255); }
 .ec_gui_alt_background {background-color: rgb(234, 249, 255); }
-.ec_gui_border {border-color: rgb(234, 249, 255); }
+.ec_gui_border {border-color: rgb(0, 0, 0); }
 
 .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;
-}
-

src/html/graph/lib/js/disasm.js

@@ -1,3 +1,9 @@
+// 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());
+};
+
 // Basic Block Graph 
 var BBGraph = function () {
   this.vertices = {};

src/html/graph/lib/js/r2.js

@@ -225,11 +225,8 @@ r2.load_settings = function() {
   r2.cmd ("e asm.xrefs", function(x) {r2.settings['asm.xrefs'] = toBoolean(x.trim());});
   r2.cmd ("e asm.cmtright", function(x) {r2.settings['asm.cmtright'] = toBoolean(x.trim());});
   r2.cmd ("e asm.pseudo", function(x) {r2.settings['asm.pseudo'] = toBoolean(x.trim());});
-  // console.log("Loading settings from r2");
-  // console.log(r2.settings);
 }
 
-
 r2.flags = {};
 
 r2.update_flags = function() {

src/resources.qrc

@@ -73,10 +73,10 @@
     </qresource>
     <qresource prefix="/graph">
         <file>html/graph/index.html</file>
+        <file>html/graph/lib/css/graph.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>
         <file>html/graph/lib/js/disasm.js</file>
         <file>html/graph/lib/js/joint.js</file>