anchor.diff:      DATA: ms_result TYPE lcl_file_status=>ty_result,
             mo_diff   TYPE REF TO lcl_diff.
   
  +    METHODS styles       RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
  +    METHODS render_head  RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
  +    METHODS render_diff  RETURNING VALUE(ro_html) TYPE REF TO lcl_html_helper.
  +
   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 lo_html TYPE REF TO lcl_html_helper.
  +    CREATE OBJECT lo_html.
  +
  +    lo_html->add( '<style type="text/css">' ).                      "#EC NOTEXT
  +    lo_html->add( '/* DIFF */' ).                                   "#EC NOTEXT
  +    lo_html->add( 'div.diff {' ).                                   "#EC NOTEXT
  +    lo_html->add( '  background-color: #f2f2f2;' ).                 "#EC NOTEXT
  +    lo_html->add( '  padding: 0.7em    ' ).                         "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'div.diff_head {' ).                              "#EC NOTEXT
  +    lo_html->add( '  border-bottom: 1px solid #DDD;' ).             "#EC NOTEXT
  +    lo_html->add( '  padding-bottom: 0.7em;' ).                     "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'span.diff_name {' ).                             "#EC NOTEXT
  +    lo_html->add( '  padding-left: 0.5em;' ).                       "#EC NOTEXT
  +    lo_html->add( '  color: grey;' ).                               "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'span.diff_name strong {' ).                      "#EC NOTEXT
  +    lo_html->add( '  color: #333;' ).                               "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'span.diff_banner {' ).                           "#EC NOTEXT
  +    lo_html->add( '  border-style: solid;' ).                       "#EC NOTEXT
  +    lo_html->add( '  border-width: 1px;' ).                         "#EC NOTEXT
  +    lo_html->add( '  border-radius: 3px;' ).                        "#EC NOTEXT
  +    lo_html->add( '  padding-left: 0.3em;' ).                       "#EC NOTEXT
  +    lo_html->add( '  padding-right: 0.3em;' ).                      "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( '.diff_ins {' ).                                  "#EC NOTEXT
  +    lo_html->add( '  border-color: #38e038;' ).                     "#EC NOTEXT
  +    lo_html->add( '  background-color: #91ee91 !important;' ).      "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( '.diff_del {' ).                                  "#EC NOTEXT
  +    lo_html->add( '  border-color: #ff8093;' ).                     "#EC NOTEXT
  +    lo_html->add( '  background-color: #ffb3be !important;' ).      "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( '.diff_upd {' ).                                  "#EC NOTEXT
  +    lo_html->add( '  border-color: #dada00;' ).                     "#EC NOTEXT
  +    lo_html->add( '  background-color: #ffffb3 !important;' ).      "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'div.diff_content {' ).                           "#EC NOTEXT
  +    lo_html->add( '  background: #fff;' ).                          "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'table.diff_tab {' ).                             "#EC NOTEXT
  +    lo_html->add( '  width: 98%;' ).                                "#EC NOTEXT
  +    lo_html->add( '  border-collapse: collapse;' ).                 "#EC NOTEXT
  +    lo_html->add( '  font-family: Consolas, Courier, monospace;' ). "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'table.diff_tab th {' ).                          "#EC NOTEXT
  +    lo_html->add( '  color: grey;' ).                               "#EC NOTEXT
  +    lo_html->add( '  text-align: left;' ).                          "#EC NOTEXT
  +    lo_html->add( '  font-weight: normal;' ).                       "#EC NOTEXT
  +    lo_html->add( '  padding: 0.5em;' ).                            "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'table.diff_tab td {' ).                          "#EC NOTEXT
  +    lo_html->add( '  color: #333;' ).                               "#EC NOTEXT
  +    lo_html->add( '  padding-left: 0.5em;' ).                       "#EC NOTEXT
  +    lo_html->add( '  padding-right: 0.5em;' ).                      "#EC NOTEXT
  +    lo_html->add( '  font-size: smaller;' ).                        "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'table.diff_tab td.num, th.num {' ).              "#EC NOTEXT
  +    lo_html->add( '  text-align: right;' ).                         "#EC NOTEXT
  +    lo_html->add( '  color: #ccc;' ).                               "#EC NOTEXT
  +    lo_html->add( '  border-right: 1px solid #eee;' ).              "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( 'table.diff_tab td.cmd {' ).                      "#EC NOTEXT
  +    lo_html->add( '  text-align: center;' ).                        "#EC NOTEXT
  +    lo_html->add( '}' ).                                            "#EC NOTEXT
  +    lo_html->add( '</style>' ).                                     "#EC NOTEXT
  +
  +    ro_html = lo_html.
  +  ENDMETHOD.
  +
  +  METHOD render_head.
  +    DATA lo_html  TYPE REF TO lcl_html_helper.
  +    DATA ls_count TYPE lcl_diff=>ty_count.
  +    CREATE OBJECT lo_html.
  +
  +    ls_count = mo_diff->stats( ).
  +
  +    lo_html->add( '<div class="diff_head">' ).                  "#EC NOTEXT
  +    lo_html->add( |<span class="diff_banner diff_ins">+ { ls_count-insert }</span>| ). "#EC NOTEXT
  +    lo_html->add( |<span class="diff_banner diff_del">- { ls_count-delete }</span>| ). "#EC NOTEXT
  +    lo_html->add( |<span class="diff_banner diff_upd">~ { ls_count-update }</span>| ). "#EC NOTEXT
  +    lo_html->add( '<span class="diff_name">' ).                 "#EC NOTEXT
  +    lo_html->add( ms_result-obj_type ).                         "#EC NOTEXT
  +    lo_html->add( |<strong>{ ms_result-obj_name }</strong>| ).  "#EC NOTEXT
  +    lo_html->add( |({ ms_result-filename })| ).
  +    lo_html->add( '</span>' ).                                  "#EC NOTEXT
  +    lo_html->add( '</div>' ).                                   "#EC NOTEXT
  +
  +    ro_html = lo_html.
  +  ENDMETHOD.
  +
  +  METHOD render_diff.
  +
  +    DATA lo_html         TYPE REF TO lcl_html_helper.
  +    DATA lt_diffs        TYPE lcl_diff=>ty_diffs_tt.
  +    DATA lv_index        TYPE i.
  +    DATA lv_local        TYPE string.
  +    DATA lv_remote       TYPE string.
  +    DATA lv_attr_local   TYPE string.
  +    DATA lv_attr_remote  TYPE string.
  +    DATA lv_anchor_count LIKE sy-tabix.
  +    DATA lv_anchor_name  TYPE string.
  +
  +    FIELD-SYMBOLS: <ls_diff> LIKE LINE OF lt_diffs.
  +
  +    CREATE OBJECT lo_html.
  +    lt_diffs = mo_diff->get( ).
  +
  +    lo_html->add( '<div class="diff_content">' ).  "#EC NOTEXT
  +    lo_html->add( '<table class="diff_tab">' ).    "#EC NOTEXT
  +    lo_html->add( '<tr>' ).                        "#EC NOTEXT
  +    lo_html->add( '<th class="num"></th>' ).       "#EC NOTEXT
  +    lo_html->add( '<th>@LOCAL</th>' ).             "#EC NOTEXT
  +    lo_html->add( '<th class="num"></th>' ).       "#EC NOTEXT
  +    lo_html->add( '<th>@REMOTE</th>' ).            "#EC NOTEXT
  +    lo_html->add( '</tr>' ).                       "#EC NOTEXT
  +
  +    LOOP AT lt_diffs ASSIGNING <ls_diff>.
  +      lv_index  = 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 ).
  +
  +      CLEAR: lv_attr_local, lv_attr_remote.
  +      CASE <ls_diff>-result.
  +        WHEN lcl_diff=>c_diff-insert.
  +          lv_attr_local  = ' class="diff_ins"'.    "#EC NOTEXT
  +        WHEN lcl_diff=>c_diff-delete.
  +          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
  +      ENDCASE.
  +
  +      lo_html->add( '<tr>' ).                                    "#EC NOTEXT
  +      lo_html->add( |<td class="num">{ lv_index }</td>| ).       "#EC NOTEXT
  +      lo_html->add( |<td{ lv_attr_local }>{ lv_local }</td>| ).  "#EC NOTEXT
  +      lo_html->add( |<td class="num"></td>| ).                   "#EC NOTEXT
  +      lo_html->add( |<td{ lv_attr_remote }>{ lv_remote }</td>| )."#EC NOTEXT
  +      lo_html->add( '</tr>' ).                                   "#EC NOTEXT
  +
  +    ENDLOOP.
  +
  +    lo_html->add( '</table>' ).  "#EC NOTEXT
  +    lo_html->add( '</div>' ).    "#EC NOTEXT
  +
  +    ro_html = lo_html.
  +  ENDMETHOD.
  +
   
     METHOD lif_gui_page~on_event.
   
  
positive.code: 
  ENDCLASS.                    "lcl_porcelain DEFINITION
  
  INTERFACE lif_gui_page.
  
    METHODS:
  
negative.code:       WHEN 'back'.
          lcl_gui=>back( ).
        WHEN OTHERS.
          _raise 'Unknown action'. "#EC NOTEXT
      ENDCASE.
  
    ENDMETHOD.
  
    METHOD lif_gui_page~render.
  
      DATA: lv_html         TYPE string.
      DATA  lo_html  TYPE REF TO lcl_html_helper.
  
  * REDO
      lv_html = lcl_gui=>header( ).
  
      "TODO: crutch, redo later after unification
      replace first occurrence of '</style>' in lv_html
        with '</style>' && styles( )->mv_html.
  
      "TODO: crutch, move to SAP back button (code almost ready)
      lv_html = lv_html && '<div>' && '<a href="sapevent:back">Back</a>' && '</div>'.
      lo_html->add( lv_html ).
  * ^^^ REDO
  
      lo_html->add( '<div class="diff">' ).  "#EC NOTEXT
      lo_html->add( render_head( ) ).
      lo_html->add( render_diff( ) ).
      lo_html->add( '</div>' ).              "#EC NOTEXT
      lo_html->add( lcl_gui=>footer( ) ).
  
      rv_html = lo_html->mv_html.
  
    ENDMETHOD.
  
  