anchor.diff:      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.
  +    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.
  
positive.code: 
  ENDCLASS.                    "lcl_porcelain DEFINITION
  
  INTERFACE lif_gui_page.
  
    METHODS:
  
negative.code:     DATA: lv_html         TYPE string,
            lv_local        TYPE string,
            lv_remote       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.
  
      CREATE OBJECT h_main.
      CREATE OBJECT h_head.
      CREATE OBJECT h_cont.
  
      " Diff header
      ls_count = mo_diff->stats( ).
  
      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_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_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
            lv_attr_remote = ''.
          WHEN lcl_diff=>c_diff-delete.
            lv_attr_local  = ''.
            lv_attr_remote = ' class="diff_del"'.    "#EC NOTEXT
          WHEN lcl_diff=>c_diff-update.
            lv_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
            lv_attr_remote = ' class="diff_del"'.    "#EC NOTEXT
          WHEN OTHERS.
            lv_attr_local  = ''.
            lv_attr_remote = ''.
        ENDCASE.
  
        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.
  
      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.
  
  