anchor.diff:      DATA: lv_html         TYPE string,
             lv_local        TYPE string,
             lv_remote       TYPE string,
  -          lv_clocal       TYPE string,
  -          lv_cremote      TYPE string,
  +          lv_attr_local   TYPE string,
  +          lv_attr_remote  TYPE string,
             ls_count        TYPE lcl_diff=>ty_count,
             lt_diffs        TYPE lcl_diff=>ty_diffs_tt,
             lv_anchor_count LIKE sy-tabix,
             lv_anchor_name  TYPE string.
   
  +    DATA  h_main TYPE REF TO lcl_html_helper.
  +    DATA  h_head TYPE REF TO lcl_html_helper.
  +    DATA  h_cont TYPE REF TO lcl_html_helper.
  +    DATA  lv_cnt TYPE i.
  +
       FIELD-SYMBOLS: <ls_diff> LIKE LINE OF lt_diffs.
   
  -
  -    lv_html = lcl_gui=>header( ) &&
  -      '<div id="header">' &&
  -      '<h1>diff</h1>&nbsp;<a href="sapevent:back">Back</a>' &&
  -      '</div>' &&
  -      '<div id="toc">' &&
  -      '<h3>' &&
  -      ms_result-obj_type && '&nbsp;' &&
  -      ms_result-obj_name && '&nbsp;' &&
  -      ms_result-filename && '</h3><br><br>'.
  -
  +    CREATE OBJECT h_main.
  +    CREATE OBJECT h_head.
  +    CREATE OBJECT h_cont.
  +
  +    " Diff header
       ls_count = mo_diff->stats( ).
  -    lv_html = lv_html &&
  -      '<table border="1">' && gc_newline &&
  -      '<tr>'               && gc_newline &&
  -      '<td>Insert</td>'    && gc_newline &&
  -      '<td>'               &&
  -      ls_count-insert      &&
  -      '</td>'              && gc_newline &&
  -      '</tr>'              && gc_newline &&
  -      '<tr>'               && gc_newline &&
  -      '<td>Delete</td>'    && gc_newline &&
  -      '<td>'               &&
  -      ls_count-delete      &&
  -      '</td>'              && gc_newline &&
  -      '</tr>'              && gc_newline &&
  -      '<tr>'               && gc_newline &&
  -      '<td>Update</td>'    && gc_newline &&
  -      '<td>'               &&
  -      ls_count-update      &&
  -      '</td>'              && gc_newline &&
  -      '</tr>'              && gc_newline &&
  -      '</table><br>'       && gc_newline.
  -
  -    lv_html = lv_html &&
  -      '<table border="0">'                    && gc_newline &&
  -      '<tr>'                                  && gc_newline &&
  -      '<th><h2>Local</h2></th>'               && gc_newline &&
  -      |<th><a href=#diff_1>&lt;&gt;</a></th>| && gc_newline &&
  -      '<th><h2>Remote</h2></th>'              && gc_newline &&
  -      '</tr>'.
  -
  +
  +    h_head->add( '<div class="diff_head">' ).
  +    h_head->add( |<span class="diff_banner diff_ins">+ { ls_count-insert }</span>| ).
  +    h_head->add( |<span class="diff_banner diff_del">- { ls_count-delete }</span>| ).
  +    h_head->add( |<span class="diff_banner diff_upd">~ { ls_count-update }</span>| ).
  +    h_head->add( '<span class="diff_name">' ).
  +    h_head->add( ms_result-obj_type ).
  +    h_head->add( |<strong>{ ms_result-obj_name }</strong>| ).
  +    h_head->add( |({ ms_result-filename })| ).
  +    h_head->add( '</span>' ).
  +    h_head->add( '</div>' ).
  +
  +    " Diff content
       lt_diffs = mo_diff->get( ).
   
  +    h_cont->add( '<div class="diff_content">' ).
  +    h_cont->add( '<table class="diff_tab">' ).
  +    h_cont->add( '<tr>' ).
  +    h_cont->add( '<th class="num"></th>' ).
  +    h_cont->add( '<th>@LOCAL</th>' ).
  +    h_cont->add( '<th></th>' ).
  +    h_cont->add( '<th>@REMOTE</th>' ).
  +    h_cont->add( '</tr>' ).
  +
       LOOP AT lt_diffs ASSIGNING <ls_diff>.
  -      lv_local = escape( val    = <ls_diff>-local
  -                         format = cl_abap_format=>e_html_attr ).
  +      lv_cnt    = sy-tabix.
  +      lv_local  = escape( val    = <ls_diff>-local
  +                          format = cl_abap_format=>e_html_attr ).
         lv_remote = escape( val    = <ls_diff>-remote
                             format = cl_abap_format=>e_html_attr ).
   
         CASE <ls_diff>-result.
           WHEN lcl_diff=>c_diff-insert.
  -          lv_clocal = ' style="background:lightgreen;"'.    "#EC NOTEXT
  -          lv_cremote = ''.
  +          lv_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
  +          lv_attr_remote = ''.
           WHEN lcl_diff=>c_diff-delete.
  -          lv_clocal = ''.
  -          lv_cremote = ' style="background:lightpink;"'.    "#EC NOTEXT
  +          lv_attr_local  = ''.
  +          lv_attr_remote = ' class="diff_del"'.    "#EC NOTEXT
           WHEN lcl_diff=>c_diff-update.
  -          lv_clocal = ' style="background:lightgreen;"'.    "#EC NOTEXT
  -          lv_cremote = ' style="background:lightpink;"'.    "#EC NOTEXT
  +          lv_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
  +          lv_attr_remote = ' class="diff_del"'.    "#EC NOTEXT
           WHEN OTHERS.
  -          lv_clocal = ''.
  -          lv_cremote = ''.
  +          lv_attr_local  = ''.
  +          lv_attr_remote = ''.
         ENDCASE.
   
  -      IF <ls_diff>-result = lcl_diff=>c_diff-delete
  -          OR <ls_diff>-result = lcl_diff=>c_diff-insert
  -          OR <ls_diff>-result = lcl_diff=>c_diff-update.
  -        lv_anchor_count = lv_anchor_count + 1.
  -        lv_anchor_name = | name="diff_{ lv_anchor_count }"|.
  -      ELSE.
  -        CLEAR lv_anchor_name.
  -      ENDIF.
  -
  -      lv_html = lv_html &&
  -        |<tr>| && gc_newline &&
  -        '<td' && lv_clocal && '><pre>' && lv_local && '</pre></td>' &&
  -        gc_newline &&
  -        '<td>&nbsp;' &&
  -        |<a{ lv_anchor_name } href="#diff_{ lv_anchor_count + 1 }">{ <ls_diff>-result }</a>| &&
  -        '&nbsp;</td>' &&
  -        gc_newline &&
  -        '<td' && lv_cremote && '><pre>' && lv_remote && '</pre></td>' &&
  -        gc_newline &&
  -        '</tr>' && gc_newline.
  +      h_cont->add( '<tr>' ).
  +      h_cont->add( |<td class="num">{ lv_cnt }</td>| ).
  +      h_cont->add( |<td{ lv_attr_local }>{ lv_local }</td>| ).
  +      h_cont->add( |<td class="cmd"></td>| ). " TODO, ANCHOR ????
  +      h_cont->add( |<td{ lv_attr_remote }>{ lv_remote }</td>| ).
  +      h_cont->add( '</tr>' ).
  +
       ENDLOOP.
   
  -    rv_html = lv_html && gc_newline &&
  -      '</table>' && gc_newline &&
  -      '</div>' && gc_newline &&
  -      lcl_gui=>footer( ).
  +    h_cont->add( '</table>' ).
  +    h_cont->add( '</div>' ).
  +
  +    " Build all together all
  +* REDO
  +    lv_html = lcl_gui=>header( ).
  +
  +    replace first occurrence of '</style>' in lv_html
  +      with '</style>' && styles( ). "TODO: crutch, redo later after unification
  +
  +    "TODO: crutch, move to SAP back button (code almost ready)
  +    lv_html = lv_html && '<div>' && '<a href="sapevent:back">Back</a>' && '</div>'.
  +    h_main->add( lv_html ).
  +* ^^^ REDO
  +
  +    h_main->add( '<div class="diff">' ).
  +    h_main->add( h_head ).
  +    h_main->add( h_cont ).
  +    h_main->add( '</div>' ).
  +    h_main->add( lcl_gui=>footer( ) ).
  +
  +    rv_html = h_main->mv_html.
   
     ENDMETHOD.
   
  
positive.code: 
  ENDCLASS.                    "lcl_porcelain DEFINITION
  
  INTERFACE lif_gui_page.
  
    METHODS:
  
negative.code:     DATA: ms_result TYPE lcl_file_status=>ty_result,
            mo_diff   TYPE REF TO lcl_diff.
  
      METHODS styles RETURNING VALUE(rv_html) TYPE string.
  
  ENDCLASS.
  
  CLASS lcl_gui_page_diff IMPLEMENTATION.
  
    METHOD constructor.
      ms_result = is_result.
      mo_diff   = io_diff.
    ENDMETHOD.
  
    METHOD styles.
      DATA h TYPE REF TO lcl_html_helper.
      CREATE OBJECT h.
  
      h->add( '<style type="text/css">' ).
  
      h->add( '/* DIFF */' ).
      h->add( 'div.diff {' ).
      h->add( '  background-color: #f2f2f2;' ).
      h->add( '  padding: 0.7em    ' ).
      h->add( '}' ).
      h->add( 'div.diff_head {' ).
      h->add( '  border-bottom: 1px solid #DDD;' ).
      h->add( '  padding-bottom: 0.7em;' ).
      h->add( '}' ).
      h->add( 'span.diff_name {' ).
      h->add( '  padding-left: 0.5em;' ).
      h->add( '  color: grey;' ).
      h->add( '}' ).
      h->add( 'span.diff_name strong {' ).
      h->add( '  color: #333;' ).
      h->add( '}' ).
      h->add( 'span.diff_banner {' ).
      h->add( '  border-style: solid;' ).
      h->add( '  border-width: 1px;' ).
      h->add( '  border-radius: 3px;' ).
      h->add( '  padding-left: 0.3em;' ).
      h->add( '  padding-right: 0.3em;' ).
      h->add( '}' ).
      h->add( '.diff_ins {' ).
      h->add( '  border-color: #38e038;' ).
      h->add( '  background-color: #91ee91 !important;' ).
      h->add( '}' ).
      h->add( '.diff_del {' ).
      h->add( '  border-color: #ff8093;' ).
      h->add( '  background-color: #ffb3be !important;' ).
      h->add( '}' ).
      h->add( '.diff_upd {' ).
      h->add( '  border-color: #dada00;' ).
      h->add( '  background-color: #ffffb3 !important;' ).
      h->add( '}' ).
      h->add( 'div.diff_content {' ).
      h->add( '  background: #fff;' ).
      h->add( '}' ).
      h->add( 'table.diff_tab {' ).
      h->add( '  width: 98%;' ).
      h->add( '  border-collapse: collapse;' ).
      h->add( '  font-family: Consolas, Courier, monospace;' ).
      h->add( '}' ).
      h->add( 'table.diff_tab th {' ).
      h->add( '  color: grey;' ).
      h->add( '  text-align: left;' ).
      h->add( '  font-weight: normal;' ).
      h->add( '  padding: 0.5em;' ).
      h->add( '}' ).
      h->add( 'table.diff_tab td {' ).
      h->add( '  color: #333;' ).
      h->add( '  padding-left: 0.5em;' ).
      h->add( '  padding-right: 0.5em;' ).
      h->add( '  font-size: smaller;' ).
      h->add( '}' ).
      h->add( 'table.diff_tab td.num, th.num {' ).
      h->add( '  text-align: right;' ).
      h->add( '  color: #ccc;' ).
      h->add( '  border-right: 1px solid #eee;' ).
      h->add( '}' ).
      h->add( 'table.diff_tab td.cmd {' ).
      h->add( '  text-align: center;' ).
      h->add( '}' ).
  
      h->add( '</style>' ).
  
      rv_html = h->mv_html.
    ENDMETHOD.
  
    METHOD lif_gui_page~on_event.
  