Offline icons (#2454)

* font

* css fix and icon rendering

* assets and font link in html head

* more icons

* more css fixes

* replace icon names

* dev docs

* Fonts update

* icons rename

* doc update

* linter fixes

* fix for abapmerge

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 package-lock.json
 zabapgit.abap
+.vscode

README.md

@@ -38,3 +38,7 @@ See [dotabap.org](http://dotabap.org)
 For questions/comments/bugs/feature requests/wishes please create an [issue](https://github.com/larshp/abapGit/issues)
 
 ![abapgit](http://docs.abapgit.org/img/abapgit_1_73_0.png)
+
+## Credits and references
+
+Icons used in abapGit are created from [Font Awesome](https://fontawesome.com/) free icon set ([CC BY 4.0 License](https://fontawesome.com/license/free)).

docs/collections/_development/adding-icons.md

@@ -0,0 +1,24 @@
+---
+title: Adding icons
+order: 90
+---
+
+abapGit uses SIL and MIT licensed fonts, they are included in the distribution as a MIME object. This includes MIME objects:
+
+- ZABAPGIT_ICON_FONT - font in WOFF format containing the custom icon set. WOFF is used due to compatibility, SAP GUI for Windows reuse IE (11)
+- ZABAPGIT_ICON_FONT_CSS - CSS icon map
+
+To add an icon to the icon set follow the next procedure:
+
+1. You need `nodejs` installed (version 10 at the time of this doc creation)
+2. Download this repo https://github.com/sbcgua/abapgit-icon-font
+3. Run `npm install`
+4. Download Font Awesome free version from [here](https://fontawesome.com/download)
+5. Copy new SVGs to `svg` folder of the repo
+6. Run `npm run build`, this will generate `woff` and `css` files in the `build` dir
+7. Upload them to the system via SMW0 to the respective objects
+8. Preferable commit the change in a separate commit
+
+Please **mind the licensing** when adding icons not from Font Awesome
+
+P.S. Alternatively you can use [w3mipoller](https://github.com/sbcgua/abap_w3mi_poller) for upload step

src/ui/zabapgit_css_common.w3mi.data.css

@@ -141,7 +141,7 @@ div.log {
   border-radius: 4px;
 }
 div.log > span   { display:block; }
-div.log .octicon { padding-right: 6px; }
+div.log .icon { padding-right: 6px; }
 
 /* REPOSITORY */
 div.repo {
@@ -165,9 +165,8 @@ div.repo {
   font-size: 12pt;
   margin-left: 0.5em;
 }
-.repo_name img {
+.repo_name .icon {
-  vertical-align: baseline;
+  padding-right: 4px;
-  margin: 0 5px 0 5px;
 }
 .repo_attr {
   color: grey;
@@ -784,7 +783,7 @@ div.tutorial h2 {
 /* icons - text-align strictly left - otherwise look ugly
    + bite a bit of left padding for nicer look 
    + forbids item text wrapping (maybe can be done differently) */
-.nav-container ul ul li a .octicon {
+.nav-container ul ul li a .icon {
   padding-right: 10px;
   margin-left: -3px;
 }

src/ui/zabapgit_css_common.w3mi.xml

@@ -21,7 +21,7 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
      <NAME>mimetype</NAME>
-     <VALUE>text/css</VALUE>
+     <VALUE>text/plain</VALUE>
     </WWWPARAMS>
    </PARAMS>
   </asx:values>

src/ui/zabapgit_icon_font.w3mi.xml

@@ -0,0 +1,29 @@
+<?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_ICON_FONT</NAME>
+   <TEXT>Icon set for abapgit</TEXT>
+   <PARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_ICON_FONT</OBJID>
+     <NAME>fileextension</NAME>
+     <VALUE>.woff</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_ICON_FONT</OBJID>
+     <NAME>filename</NAME>
+     <VALUE>ag-icons.woff</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_ICON_FONT</OBJID>
+     <NAME>mimetype</NAME>
+     <VALUE>font/woff</VALUE>
+    </WWWPARAMS>
+   </PARAMS>
+  </asx:values>
+ </asx:abap>
+</abapGit>

src/ui/zabapgit_icon_font_css.w3mi.data.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: "ag-icons";
+    font-weight: normal;
+    font-style: normal;
+    src: url("../font/ag-icons.woff") format("woff");
+}
+
+.icon {
+    line-height: 1;
+}
+
+.icon:before {
+    font-family: ag-icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+
+    display: inline-block;
+    text-decoration: none;
+    text-align: center;
+    vertical-align: text-top;
+    width: 1em;
+
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+}
+
+.icon.large { font-size: 200%; }
+
+.icon-arrow-circle-up:before { content: "\f101"; }
+.icon-bars:before { content: "\f102"; }
+.icon-bolt:before { content: "\f103"; }
+.icon-box:before { content: "\f104"; }
+.icon-briefcase:before { content: "\f105"; }
+.icon-check:before { content: "\f106"; }
+.icon-cloud-upload-alt:before { content: "\f107"; }
+.icon-code-branch:before { content: "\f108"; }
+.icon-cog:before { content: "\f109"; }
+.icon-exclamation-circle:before { content: "\f10a"; }
+.icon-exclamation-triangle:before { content: "\f10b"; }
+.icon-file-alt:before { content: "\f10c"; }
+.icon-file-code:before { content: "\f10d"; }
+.icon-file-image:before { content: "\f10e"; }
+.icon-file:before { content: "\f10f"; }
+.icon-fire-alt:before { content: "\f110"; }
+.icon-folder:before { content: "\f111"; }
+.icon-lock:before { content: "\f112"; }
+.icon-plug:before { content: "\f113"; }
+.icon-sliders-h:before { content: "\f114"; }
+.icon-snowflake:before { content: "\f115"; }
+.icon-star:before { content: "\f116"; }

src/ui/zabapgit_icon_font_css.w3mi.xml

@@ -0,0 +1,29 @@
+<?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_ICON_FONT_CSS</NAME>
+   <TEXT>Icon set for abapgit, css map</TEXT>
+   <PARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_ICON_FONT_CSS</OBJID>
+     <NAME>fileextension</NAME>
+     <VALUE>.css</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_ICON_FONT_CSS</OBJID>
+     <NAME>filename</NAME>
+     <VALUE>ag-icons.css</VALUE>
+    </WWWPARAMS>
+    <WWWPARAMS>
+     <RELID>MI</RELID>
+     <OBJID>ZABAPGIT_ICON_FONT_CSS</OBJID>
+     <NAME>mimetype</NAME>
+     <VALUE>text/plain</VALUE>
+    </WWWPARAMS>
+   </PARAMS>
+  </asx:values>
+ </asx:abap>
+</abapGit>

src/ui/zcl_abapgit_gui_asset_manager.clas.abap

@@ -202,13 +202,30 @@ CLASS ZCL_ABAPGIT_GUI_ASSET_MANAGER IMPLEMENTATION.
         rs_asset-subtype = 'javascript'.
         lv_mime_name     = 'ZABAPGIT_JS_COMMON'.
         " @@abapmerge include zabapgit_js_common.w3mi.data.js > _inline '$$'.
+      WHEN 'css/ag-icons.css'.
+        rs_asset-url     = iv_asset_url.
+        rs_asset-type    = 'text'.
+        rs_asset-subtype = 'css'.
+        lv_mime_name     = 'ZABAPGIT_ICON_FONT_CSS'.
+        " @@abapmerge include zabapgit_icon_font_css.w3mi.data.css > _inline '$$'.
+      WHEN 'font/ag-icons.woff'.
+        rs_asset-url     = iv_asset_url.
+        rs_asset-type    = 'font'.
+        rs_asset-subtype = 'woff'.
+        lv_mime_name     = 'ZABAPGIT_ICON_FONT'.
+        " @@abapmerge include-base64 zabapgit_icon_font.w3mi.data.woff > _inline '$$'.
       WHEN OTHERS.
         zcx_abapgit_exception=>raise( |No inline resource: { iv_asset_url }| ).
     ENDCASE.
 
     IF lt_data IS NOT INITIAL.
-      CONCATENATE LINES OF lt_data INTO lv_str SEPARATED BY zif_abapgit_definitions=>c_newline.
+      IF rs_asset-type = 'text'. " TODO refactor
-      rs_asset-content = zcl_abapgit_string_utils=>string_to_xstring( lv_str ).
+        CONCATENATE LINES OF lt_data INTO lv_str SEPARATED BY zif_abapgit_definitions=>c_newline.
+        rs_asset-content = zcl_abapgit_string_utils=>string_to_xstring( lv_str ).
+      ELSE.
+        CONCATENATE LINES OF lt_data INTO lv_str.
+        rs_asset-content = zcl_abapgit_string_utils=>base64_to_xstring( lv_str ).
+      ENDIF.
     ELSE.
       rs_asset-content = get_mime_asset( lv_mime_name ).
     ENDIF.
@@ -230,6 +247,10 @@ CLASS ZCL_ABAPGIT_GUI_ASSET_MANAGER IMPLEMENTATION.
     APPEND ls_asset TO rt_assets.
     ls_asset = get_textlike_asset( 'js/common.js' ).
     APPEND ls_asset TO rt_assets.
+    ls_asset = get_textlike_asset( 'css/ag-icons.css' ).
+    APPEND ls_asset TO rt_assets.
+    ls_asset = get_textlike_asset( 'font/ag-icons.woff' ).
+    APPEND ls_asset TO rt_assets.
 
     lt_assets = get_inline_images( ).
     APPEND LINES OF lt_assets TO rt_assets.

src/ui/zcl_abapgit_gui_chunk_lib.clas.abap

@@ -102,7 +102,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
 
     CREATE OBJECT ro_html.
     ro_html->add( |<span class="{ lv_class }">| ).
-    ro_html->add_icon( iv_name = 'git-branch/darkgrey' iv_hint = 'Current branch' ).
+    ro_html->add_icon( iv_name = 'code-branch/grey70' iv_hint = 'Current branch' ).
     IF iv_interactive = abap_true.
       ro_html->add_a( iv_act = |{ zif_abapgit_definitions=>c_action-git_branch_switch }?{ io_repo->get_key( ) }|
                       iv_txt = lv_text ).
@@ -147,7 +147,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
     ENDIF.
 
     ro_html->add( '<div class="dummydiv error">' ).
-    ro_html->add( |{ zcl_abapgit_html=>icon( 'alert/red' ) } Error: { lv_error }| ).
+    ro_html->add( |{ zcl_abapgit_html=>icon( 'exclamation-circle/red' ) } Error: { lv_error }| ).
     ro_html->add( '</div>' ).
 
   ENDMETHOD.
@@ -239,7 +239,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
 
     IF iv_hint IS NOT INITIAL.
       ro_html->add( '<div class="info-hint">'
-        && zcl_abapgit_html=>icon( iv_name = 'alert' iv_class = 'pad-right' )
+        && zcl_abapgit_html=>icon( iv_name = 'exclamation-triangle' iv_class = 'pad-right' )
         && iv_hint
         && '</div>' ).
     ENDIF.
@@ -297,7 +297,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
   METHOD render_js_error_banner.
     CREATE OBJECT ro_html.
     ro_html->add( '<div id="js-error-banner" class="dummydiv error">' ).
-    ro_html->add( |{ zcl_abapgit_html=>icon( 'alert/red' ) }| &&
+    ro_html->add( |{ zcl_abapgit_html=>icon( 'exclamation-triangle/red' ) }| &&
                   ' If this does not disappear soon,' &&
                   ' then there is a JS init error, please log an issue' ).
     ro_html->add( '</div>' ).
@@ -366,7 +366,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
       lv_icon = 'plug/darkgrey' ##NO_TEXT.
       lv_hint = 'Offline repository' ##NO_TEXT.
     ELSE.
-      lv_icon = 'cloud-upload/blue' ##NO_TEXT.
+      lv_icon = 'cloud-upload-alt/blue' ##NO_TEXT.
       lv_hint = 'On-line repository' ##NO_TEXT.
     ENDIF.
 
@@ -390,9 +390,9 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
     " News
     IF io_news IS BOUND AND io_news->has_news( ) = abap_true.
       IF io_news->has_updates( ) = abap_true.
-        lv_icon = 'arrow-up/warning'.
+        lv_icon = 'arrow-circle-up/warning'.
       ELSE.
-        lv_icon = 'arrow-up/grey80'.
+        lv_icon = 'arrow-circle-up/grey80'.
       ENDIF.
       ro_html->add_a( iv_act = |toggleDisplay('news')|
                       iv_typ = zif_abapgit_definitions=>c_action_type-onclick
@@ -422,7 +422,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
 
     " Write protect
     IF io_repo->get_local_settings( )-write_protected = abap_true.
-      ro_html->add_icon( iv_name = 'lock/darkgrey' iv_hint = 'Locked from pulls' ).
+      ro_html->add_icon( iv_name = 'lock/grey70' iv_hint = 'Locked from pulls' ).
     ENDIF.
 
     " Branch
@@ -443,7 +443,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
 
     " Package
     IF iv_show_package = abap_true.
-      ro_html->add_icon( iv_name = 'package/darkgrey' iv_hint = 'SAP package' ).
+      ro_html->add_icon( iv_name = 'box/grey70' iv_hint = 'SAP package' ).
       ro_html->add( '<span>' ).
       ro_html->add_a( iv_txt = io_repo->get_package( )
                       iv_act = |{ zif_abapgit_definitions=>c_action-jump_pkg }?{ io_repo->get_package( ) }| ).

src/ui/zcl_abapgit_gui_page.clas.abap

@@ -77,13 +77,7 @@ ENDCLASS.
 
 
 
-CLASS zcl_abapgit_gui_page IMPLEMENTATION.
+CLASS ZCL_ABAPGIT_GUI_PAGE IMPLEMENTATION.
-
-  METHOD constructor.
-
-    mo_settings = zcl_abapgit_persist_settings=>get_instance( )->read( ).
-
-  ENDMETHOD.
 
 
   METHOD add_hotkeys.
@@ -138,6 +132,13 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
   ENDMETHOD.
 
 
+  METHOD constructor.
+
+    mo_settings = zcl_abapgit_persist_settings=>get_instance( )->read( ).
+
+  ENDMETHOD.
+
+
   METHOD footer.
 
     CREATE OBJECT ro_html.
@@ -184,17 +185,9 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
 
     ro_html->add( '<title>abapGit</title>' ).               "#EC NOTEXT
     ro_html->add( '<link rel="stylesheet" type="text/css" href="css/common.css">' ).
+    ro_html->add( '<link rel="stylesheet" type="text/css" href="css/ag-icons.css">' ).
     ro_html->add( '<script type="text/javascript" src="js/common.js"></script>' ). "#EC NOTEXT
 
-    IF mo_settings->get_octicons_disabled( ) = abap_false.
-
-      lv_font = |<link rel="stylesheet" type="text/css" href="|
-        && 'https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css'
-        && '">'.                                            "#EC NOTEXT
-      ro_html->add( lv_font ). " Web fonts
-
-    ENDIF.
-
     ro_html->add( '</head>' ).                              "#EC NOTEXT
 
   ENDMETHOD.

src/ui/zcl_abapgit_gui_page_main.clas.abap

@@ -200,7 +200,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_MAIN IMPLEMENTATION.
       IF lo_repo->is_offline( ) = abap_true.
         lv_icon = 'plug/darkgrey'.
       ELSE.
-        lv_icon = 'cloud-upload/blue'.
+        lv_icon = 'cloud-upload-alt/blue'.
       ENDIF.
 
       lo_allbar->add( iv_txt = lv_repo_title
@@ -238,7 +238,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_MAIN IMPLEMENTATION.
 
     ro_html->add( '<td>' ).
     ro_html->add( lo_allbar->render_as_droplist(
-      iv_label  = zcl_abapgit_html=>icon( iv_name = 'three-bars/blue' )
+      iv_label  = zcl_abapgit_html=>icon( iv_name = 'bars/blue' )
       iv_action = c_actions-overview
       iv_right  = abap_true
       iv_sort   = abap_true ) ).

src/ui/zcl_abapgit_gui_page_repo_over.clas.abap

@@ -454,7 +454,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
       IF <ls_overview>-type = abap_true.
         lv_type_icon = 'plug/darkgrey'.
       ELSE.
-        lv_type_icon = 'cloud-upload/blue'.
+        lv_type_icon = 'cloud-upload-alt/darkgrey'.
       ENDIF.
 
       IF <ls_overview>-favorite = abap_true.

src/ui/zcl_abapgit_gui_view_repo.clas.abap

@@ -26,6 +26,7 @@ CLASS zcl_abapgit_gui_view_repo DEFINITION
       RAISING
         zcx_abapgit_exception .
 
+  PROTECTED SECTION.
   PRIVATE SECTION.
 
     DATA: mo_repo         TYPE REF TO zcl_abapgit_repo,
@@ -285,7 +286,7 @@ CLASS ZCL_ABAPGIT_GUI_VIEW_REPO IMPLEMENTATION.
                      io_sub = lo_tb_advanced ) ##NO_TEXT.
     ro_toolbar->add( iv_txt = 'Refresh'
                      iv_act = |{ zif_abapgit_definitions=>c_action-repo_refresh }?{ lv_key }| ).
-    ro_toolbar->add( iv_txt = zcl_abapgit_html=>icon( iv_name = 'settings/grey70' )
+    ro_toolbar->add( iv_txt = zcl_abapgit_html=>icon( iv_name = 'cog/grey70' )
                      io_sub = build_grid_menu( ) ).
 
   ENDMETHOD.
@@ -295,7 +296,7 @@ CLASS ZCL_ABAPGIT_GUI_VIEW_REPO IMPLEMENTATION.
 
     IF is_item-inactive = abap_true.
       rv_inactive_html_code = zcl_abapgit_html=>icon(
-        iv_name  = 'zap/orange'
+        iv_name  = 'bolt/orange'
         iv_hint  = 'Object or object part is inactive'
         iv_class = 'inactive' ).
     ENDIF.
@@ -360,15 +361,15 @@ CLASS ZCL_ABAPGIT_GUI_VIEW_REPO IMPLEMENTATION.
       WHEN 'PROG' OR 'CLAS' OR 'FUGR'.
         rv_html = zcl_abapgit_html=>icon( 'file-code/darkgrey' ).
       WHEN 'W3MI' OR 'W3HT'.
-        rv_html = zcl_abapgit_html=>icon( 'file-binary/darkgrey' ).
+        rv_html = zcl_abapgit_html=>icon( 'file-image/darkgrey' ).
       WHEN ''.
         rv_html = space. " no icon
       WHEN OTHERS.
-        rv_html = zcl_abapgit_html=>icon( 'file/darkgrey' ).
+        rv_html = zcl_abapgit_html=>icon( 'file-alt/darkgrey' ).
     ENDCASE.
 
     IF is_item-is_dir = abap_true.
-      rv_html = zcl_abapgit_html=>icon( 'file-directory/darkgrey' ).
+      rv_html = zcl_abapgit_html=>icon( 'folder/darkgrey' ).
     ENDIF.
 
   ENDMETHOD.
@@ -639,7 +640,7 @@ CLASS ZCL_ABAPGIT_GUI_VIEW_REPO IMPLEMENTATION.
     CREATE OBJECT ro_html.
 
     ro_html->add( '<tr class="folder">' ).
-    ro_html->add( |<td class="icon">{ zcl_abapgit_html=>icon( 'dir' ) }</td>| ).
+    ro_html->add( |<td class="icon">{ zcl_abapgit_html=>icon( 'folder' ) }</td>| ).
     ro_html->add( |<td class="object" colspan="4">{ build_dir_jump_link( '..' ) }</td>| ).
     IF mo_repo->has_remote_source( ) = abap_true.
       ro_html->add( |<td colspan="1"></td>| ). " Dummy for online

src/ui/zcl_abapgit_gui_view_tutorial.clas.abap

@@ -5,6 +5,7 @@ CLASS zcl_abapgit_gui_view_tutorial DEFINITION PUBLIC FINAL CREATE PUBLIC.
     INTERFACES zif_abapgit_gui_page_hotkey.
     ALIASES render FOR zif_abapgit_gui_page~render.
 
+  PROTECTED SECTION.
   PRIVATE SECTION.
     METHODS render_content
       RETURNING VALUE(ro_html) TYPE REF TO zcl_abapgit_html.
@@ -45,7 +46,7 @@ CLASS ZCL_ABAPGIT_GUI_VIEW_TUTORIAL IMPLEMENTATION.
     ro_html->add( '<h2>Repository list and favorites</h2>' ).
     ro_html->add( '<p><ul>' ).
     ro_html->add( |<li>To choose a repo press {
-                  zcl_abapgit_html=>icon( 'three-bars/blue' ) } at the favorite bar.</li>| ).
+                  zcl_abapgit_html=>icon( 'bars/blue' ) } at the favorite bar.</li>| ).
     ro_html->add( |<li>To favorite a repo click {
                   zcl_abapgit_html=>icon( 'star/darkgrey' ) } icon at repo toolbar.</li>| ).
     ro_html->add( '</ul></p>' ).

src/ui/zcl_abapgit_html.clas.abap

@@ -50,6 +50,7 @@ CLASS zcl_abapgit_html DEFINITION
         !iv_class     TYPE string OPTIONAL
       RETURNING
         VALUE(rv_str) TYPE string .
+  PROTECTED SECTION.
   PRIVATE SECTION.
     CLASS-DATA: go_single_tags_re TYPE REF TO cl_abap_regex.
 
@@ -90,7 +91,7 @@ ENDCLASS.
 
 
 
-CLASS zcl_abapgit_html IMPLEMENTATION.
+CLASS ZCL_ABAPGIT_HTML IMPLEMENTATION.
 
 
   METHOD a.
@@ -214,7 +215,7 @@ CLASS zcl_abapgit_html IMPLEMENTATION.
           lv_name          TYPE string,
           lv_color         TYPE string,
           lv_class         TYPE string,
-          lv_octicon_class TYPE string,
+          lv_large_icon    TYPE string,
           lv_xpixel        TYPE i.
 
     SPLIT iv_name AT '/' INTO lv_name lv_color.
@@ -231,12 +232,10 @@ CLASS zcl_abapgit_html IMPLEMENTATION.
 
     lv_xpixel = cl_gui_cfw=>compute_pixel_from_metric( x_or_y = 'X' in = 1 ).
     IF lv_xpixel >= 2.
-      lv_octicon_class = 'mega-octicon'.
+      lv_large_icon = ' large'.
-    ELSE.
-      lv_octicon_class = 'octicon'.
     ENDIF.
 
-    rv_str = |<i class="{ lv_octicon_class } octicon-{ lv_name }{ lv_color }{ lv_class }" { lv_hint }></i>|.
+    rv_str = |<i class="icon{ lv_large_icon } icon-{ lv_name }{ lv_color }{ lv_class }" { lv_hint }></i>|.
 
   ENDMETHOD.
 

src/ui/zcl_abapgit_html_toolbar.clas.abap

@@ -37,6 +37,7 @@ CLASS zcl_abapgit_html_toolbar DEFINITION
         RETURNING
           VALUE(ro_html) TYPE REF TO zcl_abapgit_html.
 
+  PROTECTED SECTION.
   PRIVATE SECTION.
     TYPES:
       BEGIN OF ty_item,
@@ -68,7 +69,7 @@ ENDCLASS.
 
 
 
-CLASS zcl_abapgit_html_toolbar IMPLEMENTATION.
+CLASS ZCL_ABAPGIT_HTML_TOOLBAR IMPLEMENTATION.
 
 
   METHOD add.

src/utils/zcl_abapgit_log.clas.abap

@@ -57,11 +57,13 @@ CLASS zcl_abapgit_log DEFINITION
     METHODS prepare_log_for_display
       RETURNING
         VALUE(rt_log_out) TYPE zcl_abapgit_log=>tty_log_out .
+
+  PRIVATE SECTION.
 ENDCLASS.
 
 
 
-CLASS zcl_abapgit_log IMPLEMENTATION.
+CLASS ZCL_ABAPGIT_LOG IMPLEMENTATION.
 
 
   METHOD add.
@@ -216,13 +218,13 @@ CLASS zcl_abapgit_log IMPLEMENTATION.
     LOOP AT mt_log ASSIGNING <ls_log>.
       CASE <ls_log>-type.
         WHEN 'W'.
-          lv_icon  = 'alert'.
+          lv_icon  = 'attention'.
           lv_class = 'warning'.
         WHEN 'E'.
-          lv_icon  = 'flame'.
+          lv_icon  = 'error'.
           lv_class = 'error'.
         WHEN OTHERS. " ??? unexpected
-          lv_icon  = 'flame'.
+          lv_icon  = 'error'.
           lv_class = 'error'.
       ENDCASE.