From f7ba61641f23f93f327a3b51ef1b127f116d548a Mon Sep 17 00:00:00 2001
From: TheWirtschaftsmann <b.petrushchak@gmail.com>
Date: Mon, 23 Jan 2017 22:18:17 +0200
Subject: [PATCH 1/2] XML highlighter for db_pages Extension of XML-syntax
 highliting to yet another page in abapGit.

---
 src/zabapgit_css_common.w3mi.data.css |  6 ++++++
 src/zabapgit_css_common.w3mi.xml      |  2 +-
 src/zabapgit_page_db.prog.abap        | 15 +++++++++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/zabapgit_css_common.w3mi.data.css b/src/zabapgit_css_common.w3mi.data.css
index 95d64ab1e..9377720f8 100644
--- a/src/zabapgit_css_common.w3mi.data.css
+++ b/src/zabapgit_css_common.w3mi.data.css
@@ -593,6 +593,7 @@ div.db_entry {
   background-color: #f2f2f2;
   padding: 0.5em;
 }
+
 div.db_entry pre {
   display: block;
   overflow: hidden;
@@ -603,6 +604,11 @@ div.db_entry pre {
   margin: 0.5em 0em;
   width: 50em;
 }
+
+div.db_entry span.xml_tag  { color: #457ce3; }
+div.db_entry span.attr     { color: #b777fb; }
+div.db_entry span.attr_val { color: #7a02f9; }
+
 div.db_entry table.toolbar {
   width: 50em;
 }
diff --git a/src/zabapgit_css_common.w3mi.xml b/src/zabapgit_css_common.w3mi.xml
index 7f7372fc2..cd7ffb220 100644
--- a/src/zabapgit_css_common.w3mi.xml
+++ b/src/zabapgit_css_common.w3mi.xml
@@ -15,7 +15,7 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
      <NAME>filename</NAME>
-     <VALUE>~wwwtmp.css</VALUE>
+     <VALUE>ZABAPGIT_CSS_COMMON.css</VALUE>
     </WWWPARAMS>
     <WWWPARAMS>
      <RELID>MI</RELID>
diff --git a/src/zabapgit_page_db.prog.abap b/src/zabapgit_page_db.prog.abap
index bb637d5a9..f40bc3936 100644
--- a/src/zabapgit_page_db.prog.abap
+++ b/src/zabapgit_page_db.prog.abap
@@ -26,9 +26,11 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
 
   METHOD render_content.
 
-    DATA: lv_data   TYPE lcl_persistence_db=>ty_content-data_str,
-          ls_action TYPE lcl_persistence_db=>ty_content,
-          lv_action TYPE string.
+    DATA:
+      lo_highlighter  TYPE REF TO lcl_syntax_highlighter,
+      lv_data         TYPE lcl_persistence_db=>ty_content-data_str,
+      ls_action       TYPE lcl_persistence_db=>ty_content,
+      lv_action       TYPE string.
 
     TRY.
         lv_data = lcl_app=>db( )->read(
@@ -37,13 +39,14 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
       CATCH lcx_not_found ##NO_HANDLER.
     ENDTRY.
 
+    " Create syntax highlighter
+    lo_highlighter  = lcl_syntax_highlighter=>create( '*.xml' ).
+
     ls_action-type  = ms_key-type.
     ls_action-value = ms_key-value.
     lv_action       = lcl_html_action_utils=>dbkey_encode( ls_action ).
-
     lv_data         = lcl_xml_pretty=>print( lv_data ).
-    lv_data         = escape( val    = lv_data
-                              format = cl_abap_format=>e_html_attr ).
+    lv_data         = lo_highlighter->process_line( lv_data ).
 
     CREATE OBJECT ro_html.
 

From 92d1c6308954502ce9dd3621e5a35b296bc71c42 Mon Sep 17 00:00:00 2001
From: TheWirtschaftsmann <b.petrushchak@gmail.com>
Date: Thu, 26 Jan 2017 10:55:07 +0200
Subject: [PATCH 2/2] XML highlighter for db_pages - fine tuning Small
 finetuning for display of tables.

---
 src/zabapgit_css_common.w3mi.data.css | 38 ++++++++++++++++-----------
 src/zabapgit_css_common.w3mi.xml      |  2 +-
 src/zabapgit_page_db.prog.abap        |  6 ++++-
 src/zabapgit_page_diff.prog.abap      |  2 +-
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/zabapgit_css_common.w3mi.data.css b/src/zabapgit_css_common.w3mi.data.css
index 9377720f8..5a8ee5538 100644
--- a/src/zabapgit_css_common.w3mi.data.css
+++ b/src/zabapgit_css_common.w3mi.data.css
@@ -537,16 +537,17 @@ table.diff_tab td.code {
   overflow: visible;
 }
 
-table.diff_tab .code span.keyword { color: #0a69ce; }
-table.diff_tab .code span.text    { color: #48ce4f; }
-table.diff_tab .code span.comment { color: #808080; font-style: italic; }
-table.diff_tab .code span.xml_tag { color: #457ce3; }
-table.diff_tab .code span.attr    { color: #b777fb; }
-table.diff_tab .code span.attr_val { color: #7a02f9; }
-
 table.diff_tab tbody tr:first-child td { padding-top: 0.5em; }
 table.diff_tab tbody tr:last-child td { padding-bottom: 0.5em; }
 
+/* STYLES for Syntax Highlighting */
+.syntax-hl span.keyword  { color: #0a69ce; }
+.syntax-hl span.text     { color: #48ce4f; }
+.syntax-hl span.comment  { color: #808080; font-style: italic; }
+.syntax-hl span.xml_tag  { color: #457ce3; }
+.syntax-hl span.attr     { color: #b777fb; }
+.syntax-hl span.attr_val { color: #7a02f9; }
+
 /* DEBUG INFO STYLES */
 div.debug_container {
   padding: 0.5em;
@@ -554,15 +555,17 @@ div.debug_container {
   color: #444;
   font-family: Consolas, Courier, monospace;
 }
+
 div.debug_container p {
   margin: 0px;
 }
 
 /* DB ENTRIES */
 div.db_list {
-  background-color: #f2f2f2;
+  background-color: #fff;
   padding: 0.5em;
 }
+
 table.db_tab pre {
   display: inline-block;
   overflow: hidden;
@@ -571,10 +574,11 @@ table.db_tab pre {
   margin: 0px;
   width: 30em;
 }
+
 table.db_tab tr.firstrow td { padding-top: 0.5em; }
 table.db_tab th {
+  color: #888888;
   text-align: left;
-  color: #888;
   padding: 0.5em;
   border-bottom: 1px #ddd solid;
 }
@@ -588,6 +592,10 @@ table.db_tab td.data {
   font-style: italic;
 }
 
+table.db_tab tbody tr:hover, tr:active {
+  background-color: #f4f4f4;
+}
+
 /* DB ENTRY DISPLAY */
 div.db_entry {
   background-color: #f2f2f2;
@@ -596,22 +604,22 @@ div.db_entry {
 
 div.db_entry pre {
   display: block;
+  font-size: 10pt;
   overflow: hidden;
   word-wrap:break-word;
   white-space: pre-wrap;
-  background-color: #eaeaea;
+  background-color: #fcfcfc;
+  border: 1px #eaeaea solid;
+  border-radius: 3px;
   padding: 0.5em;
   margin: 0.5em 0em;
-  width: 50em;
+  width: 60em;
 }
 
-div.db_entry span.xml_tag  { color: #457ce3; }
-div.db_entry span.attr     { color: #b777fb; }
-div.db_entry span.attr_val { color: #7a02f9; }
-
 div.db_entry table.toolbar {
   width: 50em;
 }
+
 table.tag {
   display: inline-block;
   border: 1px #b3c1cc solid;
diff --git a/src/zabapgit_css_common.w3mi.xml b/src/zabapgit_css_common.w3mi.xml
index cd7ffb220..7f7372fc2 100644
--- a/src/zabapgit_css_common.w3mi.xml
+++ b/src/zabapgit_css_common.w3mi.xml
@@ -15,7 +15,7 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
      <NAME>filename</NAME>
-     <VALUE>ZABAPGIT_CSS_COMMON.css</VALUE>
+     <VALUE>~wwwtmp.css</VALUE>
     </WWWPARAMS>
     <WWWPARAMS>
      <RELID>MI</RELID>
diff --git a/src/zabapgit_page_db.prog.abap b/src/zabapgit_page_db.prog.abap
index f40bc3936..0d9054d9b 100644
--- a/src/zabapgit_page_db.prog.abap
+++ b/src/zabapgit_page_db.prog.abap
@@ -62,7 +62,7 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
     ro_html->add_a( iv_txt = 'Edit' iv_act = |{ gc_action-db_edit }?{ lv_action }| ).
     ro_html->add( '</td></tr></table>' ).
 
-    ro_html->add( |<pre>{ lv_data }</pre>| ).
+    ro_html->add( |<pre class="syntax-hl">{ lv_data }</pre>| ).
     ro_html->add( '</div>' ).
 
   ENDMETHOD.  "render_content
@@ -188,12 +188,15 @@ CLASS lcl_gui_page_db IMPLEMENTATION.
     ro_html->add( '<table class="db_tab">' ).
 
     " Header
+    ro_html->add( '<thead>' ).
     ro_html->add( '<tr>' ).
     ro_html->add( '<th>Type</th>' ).
     ro_html->add( '<th>Key</th>' ).
     ro_html->add( '<th>Data</th>' ).
     ro_html->add( '<th></th>' ).
     ro_html->add( '</tr>' ).
+    ro_html->add( '</thead>' ).
+    ro_html->add( '<tbody>' ).
 
     " Lines
     LOOP AT lt_data ASSIGNING <ls_data>.
@@ -219,6 +222,7 @@ CLASS lcl_gui_page_db IMPLEMENTATION.
       ro_html->add( '</tr>' ).
     ENDLOOP.
 
+    ro_html->add( '</tbody>' ).
     ro_html->add( '</table>' ).
     ro_html->add( '</div>' ).
 
diff --git a/src/zabapgit_page_diff.prog.abap b/src/zabapgit_page_diff.prog.abap
index c00b09add..31b99dba5 100644
--- a/src/zabapgit_page_diff.prog.abap
+++ b/src/zabapgit_page_diff.prog.abap
@@ -239,7 +239,7 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
 
     " Content
     ro_html->add( '<div class="diff_content">' ).           "#EC NOTEXT
-    ro_html->add( '<table class="diff_tab">' ).             "#EC NOTEXT
+    ro_html->add( '<table class="diff_tab syntax-hl">' ).   "#EC NOTEXT
     ro_html->add( render_table_head( ) ).
     ro_html->add( render_lines( is_diff ) ).
     ro_html->add( '</table>' ).                             "#EC NOTEXT