Assets manager, first working code #374

src/zabapgit.prog.abap

@@ -69,6 +69,7 @@ INCLUDE zabapgit_background.
 INCLUDE zabapgit_transport.
 
 INCLUDE zabapgit_services.            " All services here
+INCLUDE zabapgit_gui_asset_manager.
 INCLUDE zabapgit_gui_pages.           " All GUI pages here
 INCLUDE zabapgit_gui_pages_userexit IF FOUND.
 INCLUDE zabapgit_gui_router.

src/zabapgit_css_common.w3mi.data.css

@@ -0,0 +1,584 @@
+/*
+ * ABAPGIT COMMON CSS
+ */
+
+/* GLOBALS */
+
+body {
+  font-family: Arial,Helvetica,sans-serif;
+  font-size:   12pt;
+  background:  #E8E8E8;
+}
+
+a, a:visited {
+  color:            #4078c0;
+  text-decoration:  none;
+}
+
+a:hover, a:active {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+img               { border: 0px; vertical-align: middle; }
+table             { border-collapse: collapse; }
+pre               { display: inline; }
+
+form input, textarea, select {
+  border: 1px solid #DDD;
+  padding: 3px 6px;
+}
+
+form input:focus, textarea:focus {
+  border: 1px solid #8cadd9;
+}
+
+/* MODIFIERS */
+.grey             { color: lightgrey  !important; }
+.emphasis         { font-weight: bold !important; }
+.attention        { color: red        !important; }
+.crossout         { text-decoration: line-through !important; }
+.right            { text-align:right; }
+.paddings         { padding: 0.5em 0.5em; }
+.pad-sides        { padding: 0 0.3em; }
+.pad4px           { padding: 4px; }
+
+/* STRUCTURE DIVS, HEADER & FOOTER */
+td.headpad { padding-top: 11px; }
+td.logo    { width: 164px; }
+
+div#header {
+  padding:          0.5em 0.5em;
+  border-bottom:    3px double lightgrey;
+}
+
+div#toc {
+  padding:          0.5em 1em;
+  background-color: #f2f2f2;
+}
+
+div#toc div.toc_grid {
+  margin:           -0.3em 0em;
+}
+
+div#toc div.toc_grid a {
+  color:            #ccc;
+}
+
+div#toc:hover div.toc_grid a {
+  color:            #4078c0;
+}
+
+div#toc div.toc_row {
+  margin:           0.3em 0em;
+}
+
+div#footer {
+  padding:          0.5em 1em;
+  border-top:       3px double lightgrey;
+  text-align:       center;
+}
+
+div.dummydiv {
+  background-color: #f2f2f2;
+  padding:          0.5em 1em;
+  text-align:       center;
+}
+
+span.version {
+  display: block;
+  color: grey;
+  margin-top: 0.3em;
+}
+
+span.page_title {
+  font-weight: normal;
+  font-size: 18pt;
+  color: #bbb;
+  padding-left: 0.4em;
+}
+
+/* MENU */
+div.menu           { display: inline; }
+div.menu .menu_end { border-right: 0px !important; }
+div.menu a {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  border-right: 1px solid lightgrey;
+  font-size: 12pt;
+}
+div.menu_vertical   { display: inline; }
+div.menu_vertical a {
+  display: block;
+  font-size: 12pt;
+}
+
+/*DROP DOWN*/
+.dropdown {
+  position: relative;
+  display: inline;
+}
+.dropdown_angle {
+  position: absolute !important;
+  right: -4px;
+  top: -1px;
+}
+.dropbtn_angle {
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #4078c0;
+  transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+}
+.dropdown_content {
+  display: none;
+  z-index: 1;
+  position: absolute;
+  right: -12px;
+  top: 1em;
+  padding: 6px 10px 10px 10px;
+  white-space: nowrap;
+}
+.dropdown div.minizone {
+  display: none;
+  z-index: 1;
+  position: absolute;
+  padding: 0px;
+  width: 16px;
+  height: 16px;
+  bottom: 0px;
+  left: -16px;
+}
+.dropdown_angle .dropdown_content {
+  top: -1px;
+}
+.dropdown:hover .dropdown_content { display: block; }
+.dropdown:hover .minizone { display: block; }
+.dropdown_content a {
+  padding: 0.2em;
+  background-color: #f9f9f9;
+  text-decoration: none;
+  display: block;
+  border: none !important;
+}
+.dropdown_content div.box {
+  border-bottom: 1px solid #C0C0C0;
+  border-right: 1px solid #C0C0C0;
+  background-color: #f9f9f9;
+  padding: 2px;
+}
+.dropdown_content td      { text-align: left; padding: 2px; }
+.dropdown_content td a    { padding: 0em 0.2em; }
+.dropdown_content td.icon { padding: 0 3px 0 6px; }
+.dropdown_content a:hover { background-color: #f1f1f1 }
+.dropdown:hover .dropbtn  { color: #79a0d2; }
+
+/* REPOSITORY */
+div.repo {
+  margin-top:       3px;
+  background-color: #f2f2f2;
+  padding: 0.5em 1em 0.5em 1em;
+}
+.repo_name span.name {
+  font-weight: bold;
+  color: #333;
+  font-size: 14pt;
+}
+.repo_name span.url {
+  color: #ccc;
+  font-size: 12pt;
+  margin-left: 0.5em;
+}
+.repo_name img {
+  vertical-align: baseline;
+  margin: 0 5px 0 5px;
+}
+.repo_attr {
+  color: grey;
+  font-size: 12pt;
+}
+.repo_attr span {
+  margin-left: 0.2em;
+  margin-right: 0.5em;
+}
+.repo_attr span.bg_marker {
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+  background: #d8d8d8;
+  color: #fff;
+  font-size: 8pt;
+  padding: 4px 2px 3px 2px;
+}
+.repo_attr span.branch {
+  padding: 2px 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background-color: #e2e2e2;
+}
+.repo_attr span.branch_head {
+  border-color: #d8dff3;
+  background-color: #eceff9;
+}
+.repo_attr span.branch_branch {
+  border-color: #e7d9b1;
+  background-color: #f8f0d8;
+}
+
+/* MISC AND REFACTOR */
+.hidden-submit {
+  border: 0 none;
+  height: 0;
+  width: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+#stdout {
+  text-align: right;
+  padding-right: 0.5em;
+  color: #ccc;
+  font-style: italic;
+  font-size: small;
+}
+
+/* REPOSITORY TABLE*/
+div.repo_container {
+  position: relative;
+}
+.repo_tab {
+  border: 1px solid #DDD;
+  border-radius: 3px;
+  background: #fff;
+  margin-top: 0.5em;
+}
+.repo_tab td {
+  border-top: 1px solid #eee;
+  vertical-align: middle;
+  color: #333;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.repo_tab td.icon {
+  width: 32px;
+  text-align: center;
+}
+.repo_tab td.type {
+  width: 3em;
+}
+.repo_tab td.object {
+  padding-left: 0.5em;
+}
+.repo_tab td.files {
+  padding-left: 0.5em;
+}
+.repo_tab td.cmd {
+  text-align: right;
+  padding-left: 0.5em;
+  padding-right: 0.7em;
+}
+.repo_tab tr.unsupported    { color: lightgrey; }
+.repo_tab tr.modified       { background: #fbf7e9; }
+.repo_tab tr:first-child td { border-top: 0px; }
+.repo_tab td.current_dir    { color: #ccc; }
+.repo_tab td.cmd span.state-block {
+  margin-left: 1em;
+  font-family: Consolas, Lucida Console, Courier, monospace;
+  font-size: x-small;
+  vertical-align: 13%;
+  display: inline-block;
+  text-align: center;
+}
+.repo_tab td.cmd span.state-block span {
+  display: inline-block;
+  padding: 0px 2px;
+  border: 1px solid #000;
+}
+.repo_tab td.cmd span.state-block span.added {
+  background-color: #69ad74;
+  border-color: #579e64;
+  color: white;
+}
+.repo_tab td.cmd span.state-block span.changed {
+  background-color: #e0c150;
+  border-color: #d4af25;
+  color: white;
+}
+.repo_tab td.cmd span.state-block span.mixed {
+  background-color: #e0c150;
+  border-color: #579e64;
+  color: #69ad74;
+}
+.repo_tab td.cmd span.state-block span.deleted {
+  background-color: #c76861;
+  border-color: #b8605a;
+  color: white;
+}
+.repo_tab td.cmd span.state-block span.none {
+  background-color: #e8e8e8;
+  border-color: #dbdbdb;
+  color: #c8c8c8;
+}
+
+/* STAGE */
+.stage_tab {
+  border: 1px solid #DDD;
+  background: #fff;
+  margin-top: 0.2em;
+}
+.stage_tab td {
+  border-top: 1px solid #eee;
+  color: #333;
+  vertical-align: middle;
+  padding: 2px 0.5em;
+}
+.stage_tab th {
+  color: #BBB;
+  font-size: 10pt;
+  text-align: left;
+  font-weight: normal;
+  background-color: #edf2f9;
+  padding: 4px 0.5em;
+}
+.stage_tab td.status {
+  width: 2em;
+  text-align: center;
+}
+.stage_tab tbody tr:first-child td { padding-top: 0.5em; }
+.stage_tab tbody tr:last-child td { padding-bottom: 0.5em; }
+.stage_tab td.cmd a { padding: 0px 4px; }
+
+/* STAGE */
+.stage_tab td.method {
+  color: #ccc;
+}
+.stage_tab tr.firstrow td { border-top: 0px; }
+.stage_tab tr.title td {
+  color: #BBB;
+  font-size: 10pt;
+  background-color: #edf2f9;
+  padding: 4px 0.5em;
+  text-align: center;
+}
+
+/* COMMIT */
+div.form_div {
+  margin: 0.5em 0em;
+  background-color: #F8F8F8;
+  padding: 1em 1em;
+}
+
+div.form_div td.field_name {
+  color: #BBB;
+  padding-right: 1em;
+}
+
+/* SETTINGS STYLES */
+div.settings_container {
+  padding: 0.5em;
+  font-size: 10pt;
+  color: #444;
+  background-color: #f2f2f2;
+}
+
+/* DIFF */
+div.diff {
+  background-color: #f2f2f2;
+  padding: 0.7em
+}
+div.diff_head {
+  padding-bottom: 0.7em;
+}
+span.diff_name {
+  padding-left: 0.5em;
+  color: grey;
+}
+span.diff_name strong {
+  color: #333;
+}
+span.diff_banner {
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 3px;
+  padding-left: 0.3em;
+  padding-right: 0.3em;
+}
+.diff_ins {
+  border-color: #7bea7b;
+  background-color: #d3f8d3;
+}
+.diff_del {
+  border-color: #ff667d;
+  background-color: #ffccd4;
+}
+.diff_upd {
+  border-color: #dada00;
+  background-color: #ffffcc;
+}
+div.diff_content {
+  background: #fff;
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+}
+div.diff_head span.state-block {
+  margin-left: 0.5em;
+  font-family: Consolas, Lucida Console, Courier, monospace;
+  display: inline-block;
+  text-align: center;
+}
+div.diff_head span.state-block span {
+  display: inline-block;
+  padding: 0px 4px;
+  border: 1px solid #000;
+}
+div.diff_head span.state-block span.added {
+  background-color: #69ad74;
+  border-color: #579e64;
+  color: white;
+}
+div.diff_head span.state-block span.changed {
+  background-color: #e0c150;
+  border-color: #d4af25;
+  color: white;
+}
+div.diff_head span.state-block span.mixed {
+  background-color: #e0c150;
+  border-color: #579e64;
+  color: #69ad74;
+}
+div.diff_head span.state-block span.deleted {
+  background-color: #c76861;
+  border-color: #b8605a;
+  color: white;
+}
+div.diff_head span.state-block span.none {
+  background-color: #e8e8e8;
+  border-color: #dbdbdb;
+  color: #c8c8c8;
+}
+
+/* DIFF TABLE */
+table.diff_tab {
+  font-family: Consolas, Courier, monospace;
+  font-size: 10pt;
+}
+table.diff_tab td,th {
+  color: #444;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+table.diff_tab th {
+  text-align: left;
+  font-weight: normal;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+table.diff_tab thead.header th {
+  color: #EEE;
+  background-color: #BBB;
+  text-align: left;
+  font-weight: bold;
+  padding-left: 0.5em;
+  font-size: 9pt;
+}
+table.diff_tab thead.nav_line {
+  background-color: #edf2f9;
+}
+table.diff_tab thead.nav_line th {
+  color: #bbb;
+}
+table.diff_tab td.num, th.num {
+  text-align: right;
+  color: #ccc;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+}
+table.diff_tab code {
+  font-family: inherit;
+  white-space: pre;
+}
+table.diff_tab tbody tr:first-child td { padding-top: 0.5em; }
+table.diff_tab tbody tr:last-child td { padding-bottom: 0.5em; }
+
+/* DEBUG INFO STYLES */
+div.debug_container {
+  padding: 0.5em;
+  font-size: 10pt;
+  color: #444;
+  font-family: Consolas, Courier, monospace;
+}
+div.debug_container p {
+  margin: 0px;
+}
+
+/* DB ENTRIES */
+div.db_list {
+  background-color: #f2f2f2;
+  padding: 0.5em;
+}
+table.db_tab pre {
+  display: inline-block;
+  overflow: hidden;
+  word-wrap:break-word;
+  white-space: pre-wrap;
+  margin: 0px;
+  width: 30em;
+}
+table.db_tab tr.firstrow td { padding-top: 0.5em; }
+table.db_tab th {
+  text-align: left;
+  color: #888;
+  padding: 0.5em;
+  border-bottom: 1px #ddd solid;
+}
+table.db_tab td {
+  color: #333;
+  padding: 0.5em;
+  vertical-align: top;
+}
+table.db_tab td.data {
+  color: #888;
+  font-style: italic;
+}
+
+/* DB ENTRY DISPLAY */
+div.db_entry {
+  background-color: #f2f2f2;
+  padding: 0.5em;
+}
+div.db_entry pre {
+  display: block;
+  overflow: hidden;
+  word-wrap:break-word;
+  white-space: pre-wrap;
+  background-color: #eaeaea;
+  padding: 0.5em;
+  margin: 0.5em 0em;
+  width: 50em;
+}
+div.db_entry table.toolbar {
+  width: 50em;
+}
+table.tag {
+  display: inline-block;
+  border: 1px #b3c1cc solid;
+  background-color: #eee;
+  border-radius: 3px;
+  margin-right: 0.5em;
+}
+table.tag td { padding: 0.2em 0.5em; }
+table.tag td.label { background-color: #b3c1cc; }
+
+/* DB ENTRY DISPLAY */
+div.db_entry textarea { margin: 0.5em 0em; }
+table.tag {
+  display: inline-block;
+  border: 1px #b3c1cc solid;
+  background-color: #eee;
+  border-radius: 3px;
+  margin-right: 0.5em;
+}
+table.tag td { padding: 0.2em 0.5em; }
+table.tag td.label { background-color: #b3c1cc; }

src/zabapgit_css_common.w3mi.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_W3MI" serializer_version="v2.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <NAME>ZABAPGIT_CSS_COMMON</NAME>
+   <TEXT>AbapGit common styles</TEXT>
+   <PARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
+     <NAME>fileextension</NAME>
+     <VALUE>.css</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
+     <NAME>filename</NAME>
+     <VALUE>styles.css</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
+     <NAME>filesize</NAME>
+     <VALUE>    12130</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
+     <NAME>mimetype</NAME>
+     <VALUE>text/css</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
+     <NAME>version</NAME>
+     <VALUE>00001</VALUE>
+    </WWWPARAMS>
+   </PARAMS>
+  </asx:values>
+ </asx:abap>
+</abapGit>

src/zabapgit_gui.prog.abap

@@ -31,6 +31,7 @@ CLASS lcl_gui DEFINITION FINAL CREATE PRIVATE FRIENDS lcl_app.
           mt_stack       TYPE STANDARD TABLE OF ty_page_stack,
           mt_assets      TYPE tt_w3urls,
           mo_router      TYPE REF TO lcl_gui_router,
+          mo_asset_man   TYPE REF TO lcl_gui_asset_manager,
           mo_html_viewer TYPE REF TO cl_gui_html_viewer.
 
     METHODS constructor
@@ -41,10 +42,19 @@ CLASS lcl_gui DEFINITION FINAL CREATE PRIVATE FRIENDS lcl_app.
 
     METHODS cache_image
       IMPORTING iv_url    TYPE w3url
-                iv_base64 TYPE string.
+                iv_base64 TYPE string
+      RETURNING VALUE(rv_url) TYPE w3url.
 
     METHODS cache_html
-      IMPORTING iv_html       TYPE string
+      IMPORTING iv_text       TYPE string
+      RETURNING VALUE(rv_url) TYPE w3url.
+
+    METHODS cache_asset
+      IMPORTING iv_text       TYPE string OPTIONAL
+                iv_xdata      TYPE xstring OPTIONAL
+                iv_url        TYPE w3url OPTIONAL
+                iv_type       TYPE c
+                iv_subtype    TYPE c
       RETURNING VALUE(rv_url) TYPE w3url.
 
     METHODS render
@@ -219,17 +229,27 @@ CLASS lcl_gui IMPLEMENTATION.
           ls_event  LIKE LINE OF lt_events.
 
     CREATE OBJECT mo_router.
+    CREATE OBJECT mo_asset_man.
     CREATE OBJECT mo_html_viewer
       EXPORTING
         query_table_disabled = abap_true
         parent               = cl_gui_container=>screen0.
 
-    CLEAR ls_event.
+    cache_asset( iv_xdata   = mo_asset_man->get_asset( 'css_common' )
+                 iv_url     = 'css/common.css'
+                 iv_type    = 'text'
+                 iv_subtype = 'css' ).
+
+*    cache_asset( iv_xdata   = mo_asset_man->get_asset( 'js_common' )
+*                 iv_url     = 'js/common.js'
+*                 iv_type    = 'text'
+*                 iv_subtype = 'javascript' ).
+
     ls_event-eventid    = mo_html_viewer->m_id_sapevent.
     ls_event-appl_event = abap_true.
     APPEND ls_event TO lt_events.
-    mo_html_viewer->set_registered_events( lt_events ).
 
+    mo_html_viewer->set_registered_events( lt_events ).
     SET HANDLER me->on_event FOR mo_html_viewer.
 
   ENDMETHOD.                    "startup
@@ -246,57 +266,80 @@ CLASS lcl_gui IMPLEMENTATION.
 
   METHOD cache_html.
 
-    DATA: lt_data TYPE TABLE OF text200.
+    rv_url = cache_asset( iv_text    = iv_text
-
+                          iv_type    = 'text'
-    CALL FUNCTION 'SCMS_STRING_TO_FTEXT'
+                          iv_subtype = 'html' ).
-      EXPORTING
-        text      = iv_html
-      TABLES
-        ftext_tab = lt_data.
-
-    mo_html_viewer->load_data(
-      IMPORTING
-        assigned_url = rv_url
-      CHANGING
-        data_table   = lt_data ).
 
   ENDMETHOD.                    "cache_html
 
   METHOD cache_image.
 
-    DATA lv_xtmp  TYPE xstring.
+    DATA lv_xstr  TYPE xstring.
-    DATA lv_size  TYPE int4.
-    DATA lt_xdata TYPE TABLE OF w3_mime. " RAW255
 
     CALL FUNCTION 'SSFC_BASE64_DECODE'
       EXPORTING
         b64data = iv_base64
       IMPORTING
-        bindata = lv_xtmp
+        bindata = lv_xstr
       EXCEPTIONS
         OTHERS  = 1.
 
     ASSERT sy-subrc = 0. " Image data error
 
+    rv_url = cache_asset( iv_xdata   = lv_xstr
+                          iv_url     = iv_url
+                          iv_type    = 'image'
+                          iv_subtype = 'png' ).
+
+  ENDMETHOD.                  "cache_image
+
+  METHOD cache_asset.
+
+    DATA: lv_xstr  TYPE xstring,
+          lt_xdata TYPE TABLE OF w3_mime, " RAW255
+          lv_size  TYPE int4.
+
+    ASSERT iv_text IS SUPPLIED OR iv_xdata IS SUPPLIED.
+
+    IF iv_text IS SUPPLIED. " String input
+
+      CALL FUNCTION 'SCMS_STRING_TO_XSTRING'
+        EXPORTING
+          text      = iv_text
+        IMPORTING
+          buffer    = lv_xstr
+        EXCEPTIONS
+          OTHERS    = 1.
+      ASSERT sy-subrc = 0.
+
+    ELSE. " Raw input
+      lv_xstr = iv_xdata.
+    ENDIF.
+
     CALL FUNCTION 'SCMS_XSTRING_TO_BINARY'
       EXPORTING
-        buffer        = lv_xtmp
+        buffer        = lv_xstr
       IMPORTING
         output_length = lv_size
       TABLES
         binary_tab    = lt_xdata.
 
     mo_html_viewer->load_data(
-      EXPORTING  type         = 'image'
+      EXPORTING
-                 subtype      = 'png'
+        type         = iv_type
+        subtype      = iv_subtype
         size         = lv_size
         url          = iv_url
-      CHANGING   data_table   = lt_xdata
+      IMPORTING
-      EXCEPTIONS OTHERS       = 1 ) ##NO_TEXT.
+        assigned_url = rv_url
+      CHANGING
+        data_table   = lt_xdata
+      EXCEPTIONS
+        OTHERS       = 1 ) ##NO_TEXT.
 
     ASSERT sy-subrc = 0. " Image data error
 
-  ENDMETHOD.                  "cache_image
+  ENDMETHOD.  " cache_asset.
 
   METHOD get_current_page_name.
     IF mi_cur_page IS BOUND.

src/zabapgit_gui_asset_manager.prog.abap

@@ -0,0 +1,140 @@
+*&---------------------------------------------------------------------*
+*&  Include           ZABAPGIT_GUI_ASSET_MANAGER
+*&---------------------------------------------------------------------*
+
+CLASS lcl_gui_asset_manager DEFINITION FINAL CREATE PRIVATE FRIENDS lcl_gui.
+  PUBLIC SECTION.
+
+    METHODS get_asset
+      IMPORTING iv_asset_name  TYPE string
+      RETURNING VALUE(rv_data) TYPE xstring
+      RAISING   lcx_exception.
+
+  PRIVATE SECTION.
+
+    METHODS get_inline_asset
+      IMPORTING iv_asset_name  TYPE string
+      RETURNING VALUE(rv_data) TYPE xstring
+      RAISING   lcx_exception.
+
+    METHODS get_mime_asset
+      IMPORTING iv_asset_name  TYPE c
+      RETURNING VALUE(rv_data) TYPE xstring
+      RAISING   lcx_exception.
+
+ENDCLASS. "lcl_gui_asset_manager
+
+CLASS lcl_gui_asset_manager IMPLEMENTATION.
+
+  METHOD get_asset.
+
+    DATA: lv_asset_name TYPE string,
+          lv_mime_name  TYPE wwwdatatab-objid.
+
+    lv_asset_name = to_upper( iv_asset_name ).
+
+    CASE lv_asset_name.
+      WHEN 'CSS_COMMON'.
+        lv_mime_name = 'ZABAPGIT_CSS_COMMON'.
+      WHEN 'JS_COMMON'.
+        lv_mime_name = 'ZABAPGIT_JS_COMMON'.
+      WHEN OTHERS.
+        lcx_exception=>raise( |Improper resource name: { iv_asset_name }| ).
+    ENDCASE.
+
+    rv_data = get_mime_asset( lv_mime_name ).
+    IF rv_data IS INITIAL. " Fallback to inline asset
+      rv_data = get_inline_asset( lv_asset_name ).
+    ENDIF.
+
+    IF rv_data IS INITIAL.
+      lcx_exception=>raise( |Failed to get GUI resource: { iv_asset_name }| ).
+    ENDIF.
+
+  ENDMETHOD.  " get_asset.
+
+  METHOD get_mime_asset.
+
+    DATA: ls_key    TYPE wwwdatatab,
+          lv_size_c TYPE wwwparams-value,
+          lv_size   TYPE i,
+          lt_w3mime TYPE STANDARD TABLE OF w3mime.
+
+    ls_key-relid = 'MI'.
+    ls_key-objid = iv_asset_name.
+
+    " Get exact file size
+    CALL FUNCTION 'WWWPARAMS_READ'
+      EXPORTING
+        relid            = ls_key-relid
+        objid            = ls_key-objid
+        name             = 'filesize'
+      IMPORTING
+        value            = lv_size_c
+      EXCEPTIONS
+        entry_not_exists = 1.
+
+    IF sy-subrc IS NOT INITIAL.
+      RETURN.
+    ENDIF.
+
+    lv_size = lv_size_c.
+
+    " Get binary data
+    CALL FUNCTION 'WWWDATA_IMPORT'
+      EXPORTING
+        key               = ls_key
+      TABLES
+        mime              = lt_w3mime
+      EXCEPTIONS
+        wrong_object_type = 1
+        import_error      = 2.
+
+    IF sy-subrc IS NOT INITIAL.
+      RETURN.
+    ENDIF.
+
+    CALL FUNCTION 'SCMS_BINARY_TO_XSTRING'
+      EXPORTING
+        input_length = lv_size
+      IMPORTING
+        buffer       = rv_data
+      TABLES
+        binary_tab   = lt_w3mime
+      EXCEPTIONS
+        failed       = 1.
+
+    IF sy-subrc IS NOT INITIAL.
+      RETURN.
+    ENDIF.
+
+  ENDMETHOD.  " get_mime_asset.
+
+  METHOD get_inline_asset.
+
+    DATA: lt_data TYPE ty_string_tt,
+          lv_str  TYPE string.
+
+    CASE iv_asset_name.
+      WHEN 'CSS_COMMON'.
+        " @@abapmerge include src/zabapgit_css_common.data.css > APPEND '$$' TO lt_data.
+      WHEN 'JS_COMMON'.
+
+      WHEN OTHERS.
+        lcx_exception=>raise( |No inline resource: { iv_asset_name }| ).
+    ENDCASE.
+
+    CONCATENATE LINES OF lt_data INTO lv_str SEPARATED BY gc_newline.
+
+    CALL FUNCTION 'SCMS_STRING_TO_XSTRING'
+      EXPORTING
+        text      = lv_str
+      IMPORTING
+        buffer    = rv_data
+      EXCEPTIONS
+        OTHERS    = 1.
+    ASSERT sy-subrc = 0.
+
+  ENDMETHOD.  " get_inline_asset.
+
+ENDCLASS. "lcl_gui_asset_manager

src/zabapgit_gui_asset_manager.prog.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_PROG" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <PROGDIR>
+    <NAME>ZABAPGIT_GUI_ASSET_MANAGER</NAME>
+    <STATE>A</STATE>
+    <SQLX/>
+    <EDTX/>
+    <VARCL>X</VARCL>
+    <DBAPL/>
+    <DBNA/>
+    <CLAS/>
+    <TYPE/>
+    <OCCURS/>
+    <SUBC>I</SUBC>
+    <APPL/>
+    <SECU/>
+    <CNAM/>
+    <CDAT>0000-00-00</CDAT>
+    <UNAM/>
+    <UDAT>0000-00-00</UDAT>
+    <VERN/>
+    <LEVL/>
+    <RSTAT/>
+    <RMAND/>
+    <RLOAD>E</RLOAD>
+    <FIXPT/>
+    <SSET/>
+    <SDATE>0000-00-00</SDATE>
+    <STIME/>
+    <IDATE>0000-00-00</IDATE>
+    <ITIME/>
+    <LDBNAME/>
+    <UCCHECK>X</UCCHECK>
+   </PROGDIR>
+   <TPOOL>
+    <item>
+     <ID>R</ID>
+     <KEY/>
+     <ENTRY>Include ZABAPGIT_GUI_ASSET_MANAGER</ENTRY>
+     <LENGTH>34</LENGTH>
+     <SPLIT/>
+    </item>
+   </TPOOL>
+  </asx:values>
+ </asx:abap>
+</abapGit>

src/zabapgit_page.prog.abap

@@ -227,13 +227,14 @@ CLASS lcl_gui_page_super IMPLEMENTATION.
     ro_html->add( '<html>' ).                               "#EC NOTEXT
     ro_html->add( '<head>' ).                               "#EC NOTEXT
     ro_html->add( '<title>abapGit</title>' ).               "#EC NOTEXT
-    ro_html->add( styles( ) ).
+    ro_html->add( '<link rel="stylesheet" type="text/css" href="css/common.css">' ).
+*    ro_html->add( styles( ) ).
 
-    IF io_include_style IS BOUND.
+*    IF io_include_style IS BOUND.
-      ro_html->add( '<style type="text/css">' ).            "#EC NOTEXT
+*      ro_html->add( '<style type="text/css">' ).            "#EC NOTEXT
-      ro_html->add( io_include_style ).
+*      ro_html->add( io_include_style ).
-      ro_html->add( '</style>' ).                           "#EC NOTEXT
+*      ro_html->add( '</style>' ).                           "#EC NOTEXT
-    ENDIF.
+*    ENDIF.
 
     ro_html->add( '<meta http-equiv="content-type" content="text/html; charset=utf-8">' ). "#EC NOTEXT
     ro_html->add( '</head>' ).                              "#EC NOTEXT