diff --git a/swh/web/browse/views/revision.py b/swh/web/browse/views/revision.py
index ab00138cd..cdace31d3 100644
--- a/swh/web/browse/views/revision.py
+++ b/swh/web/browse/views/revision.py
@@ -1,412 +1,460 @@
 # Copyright (C) 2017-2018  The Software Heritage developers
 # See the AUTHORS file at the top-level directory of this distribution
 # License: GNU General Public License version 3, or any later version
 # See top-level LICENSE file for more information
 
 import hashlib
 import json
 
+from django.http import HttpResponse
 from django.shortcuts import render
 from django.template.defaultfilters import filesizeformat
 from django.utils.safestring import mark_safe
 
 from swh.web.common import service
 from swh.web.common.utils import reverse, format_utc_iso_date, gen_path_info
 from swh.web.common.exc import handle_view_exception
 from swh.web.browse.browseurls import browse_route
 from swh.web.browse.utils import (
     gen_link, gen_person_link, gen_revision_link,
     prepare_revision_log_for_display,
     get_origin_context, gen_origin_directory_link,
     get_revision_log_url, get_directory_entries,
     gen_directory_link, request_content, prepare_content_for_display,
     content_display_max_size
 )
 
 
 def _gen_content_url(revision, query_string, path, origin_context):
     if origin_context:
         url_args = origin_context['url_args']
         url_args['path'] = path
         query_params = origin_context['query_params']
         query_params['revision'] = revision['id']
         content_url = reverse('browse-origin-content',
                               kwargs=url_args,
                               query_params=query_params)
     else:
         content_path = '%s/%s' % (revision['directory'], path)
         content_url = reverse('browse-content',
                               kwargs={'query_string': query_string},
                               query_params={'path': content_path})
     return content_url
 
 
+def _gen_diff_link(idx, diff_anchor, link_text):
+    if idx < _max_displayed_file_diffs:
+        return gen_link(diff_anchor, link_text)
+    else:
+        return link_text
+
+
+# TODO: put in conf
+_max_displayed_file_diffs = 1000
+
+
 def _gen_revision_changes_list(revision, changes, origin_context):
     """
     Returns a HTML string describing the file changes
     introduced in a revision.
     As this string will be displayed in the browse revision view,
     links to adequate file diffs are also generated.
 
     Args:
         revision (str): hexadecimal representation of a revision identifier
         changes (list): list of file changes in the revision
         origin_context (dict): optional origin context used to reverse
             the content urls
 
     Returns:
         A string to insert in a revision HTML view.
 
     """
     changes_msg = []
-    for change in changes:
+    for i, change in enumerate(changes):
         hasher = hashlib.sha1()
         from_query_string = ''
         to_query_string = ''
         diff_id = 'diff-'
         if change['from']:
             from_query_string = 'sha1_git:' + change['from']['target']
             diff_id += change['from']['target'] + '-' + change['from_path']
         diff_id += '-'
         if change['to']:
             to_query_string = 'sha1_git:' + change['to']['target']
             diff_id += change['to']['target'] + change['to_path']
         change['path'] = change['to_path'] or change['from_path']
         url_args = {'from_query_string': from_query_string,
                     'to_query_string': to_query_string}
         query_params = {'path': change['path']}
         change['diff_url'] = reverse('diff-contents',
                                      kwargs=url_args,
                                      query_params=query_params)
 
         hasher.update(diff_id.encode('utf-8'))
         diff_id = hasher.hexdigest()
         change['id'] = diff_id
         panel_diff_link = '#panel_' + diff_id
 
         if change['type'] == 'modify':
             change['content_url'] = \
                 _gen_content_url(revision, to_query_string,
                                  change['to_path'], origin_context)
-            changes_msg.append('modified:  %s' % gen_link(panel_diff_link,
-                                                          change['to_path']))
+            changes_msg.append('modified:  %s' %
+                               _gen_diff_link(i, panel_diff_link,
+                                              change['to_path']))
         elif change['type'] == 'insert':
             change['content_url'] = \
                 _gen_content_url(revision, to_query_string,
                                  change['to_path'], origin_context)
-            changes_msg.append('new file:  %s' % gen_link(panel_diff_link,
-                                                          change['to_path']))
+            changes_msg.append('new file:  %s' %
+                               _gen_diff_link(i, panel_diff_link,
+                                              change['to_path']))
         elif change['type'] == 'delete':
             parent = service.lookup_revision(revision['parents'][0])
             change['content_url'] = \
                 _gen_content_url(parent,
                                  from_query_string,
                                  change['from_path'], origin_context)
-            changes_msg.append('deleted:   %s' % gen_link(panel_diff_link,
-                                                          change['from_path']))
+            changes_msg.append('deleted:   %s' %
+                               _gen_diff_link(i, panel_diff_link,
+                                              change['from_path']))
         elif change['type'] == 'rename':
             change['content_url'] = \
                 _gen_content_url(revision, to_query_string,
                                  change['to_path'], origin_context)
             link_text = change['from_path'] + ' &rarr; ' + change['to_path']
-            changes_msg.append('renamed:   %s' % gen_link(panel_diff_link,
-                                                          link_text))
+            changes_msg.append('renamed:   %s' %
+                               _gen_diff_link(i, panel_diff_link, link_text))
     if not changes:
         changes_msg.append('No changes')
     return mark_safe('\n'.join(changes_msg))
 
 
+@browse_route(r'revision/(?P<sha1_git>[0-9a-f]+)/diff/',
+              view_name='diff-revision')
+def _revision_diff(request, sha1_git):
+    """
+    Browse internal endpoint to compute revision diff
+    """
+    try:
+        revision = service.lookup_revision(sha1_git)
+        origin_context = None
+        origin_type = request.GET.get('origin_type', None)
+        origin_url = request.GET.get('origin_url', None)
+        timestamp = request.GET.get('timestamp', None)
+        visit_id = request.GET.get('visit_id', None)
+        if origin_type and origin_url:
+            origin_context = get_origin_context(origin_type, origin_url,
+                                                timestamp, visit_id)
+    except Exception as exc:
+        return handle_view_exception(request, exc)
+
+    changes = service.diff_revision(sha1_git)
+    changes_msg = _gen_revision_changes_list(revision, changes, origin_context)
+
+    diff_data = {
+        'total_nb_changes': len(changes),
+        'changes': changes[:_max_displayed_file_diffs],
+        'changes_msg': changes_msg
+    }
+    diff_data_json = json.dumps(diff_data, separators=(',', ': '))
+    return HttpResponse(diff_data_json, content_type='application/json')
+
+
 @browse_route(r'revision/(?P<sha1_git>[0-9a-f]+)/',
               view_name='browse-revision')
 def revision_browse(request, sha1_git):
     """
     Django view that produces an HTML display of a SWH revision
     identified by its id.
 
     The url that points to it is :http:get:`/browse/revision/(sha1_git)/`.
 
     Args:
         request: input django http request
         sha1_git: a SWH revision id
 
     Returns:
         The HMTL rendering for the metadata of the provided revision.
     """
     try:
         revision = service.lookup_revision(sha1_git)
         origin_info = None
         origin_context = None
         origin_type = request.GET.get('origin_type', None)
         origin_url = request.GET.get('origin_url', None)
         timestamp = request.GET.get('timestamp', None)
         visit_id = request.GET.get('visit_id', None)
         path = request.GET.get('path', None)
         dir_id = None
         dirs, files = None, None
         content_data = None
         if origin_type and origin_url:
             origin_context = get_origin_context(origin_type, origin_url,
                                                 timestamp, visit_id)
             origin_info = origin_context['origin_info']
         if path:
             path_info = \
                 service.lookup_directory_with_path(revision['directory'], path)
             if path_info['type'] == 'dir':
                 dir_id = path_info['target']
             else:
                 query_string = 'sha1_git:' + path_info['target']
                 content_data = request_content(query_string)
         else:
             dir_id = revision['directory']
 
         if dir_id:
             path = '' if path is None else (path + '/')
             dirs, files = get_directory_entries(dir_id)
     except Exception as exc:
         return handle_view_exception(request, exc)
 
     revision_data = {}
 
     revision_data['author'] = gen_person_link(
         revision['author']['id'], revision['author']['name'])
     revision_data['committer'] = gen_person_link(
         revision['committer']['id'], revision['committer']['name'])
     revision_data['committer date'] = format_utc_iso_date(
         revision['committer_date'])
     revision_data['date'] = format_utc_iso_date(revision['date'])
     if origin_context:
         revision_data['directory'] = \
             gen_origin_directory_link(origin_context, sha1_git,
                                       link_text='Browse',
                                       link_attrs={'class': 'btn btn-md btn-swh', # noqa
                                                   'role': 'button'})
     else:
         revision_data['directory'] = \
             gen_directory_link(revision['directory'], link_text='Browse',
                                link_attrs={'class': 'btn btn-md btn-swh',
                                            'role': 'button'})
     revision_data['id'] = sha1_git
     revision_data['merge'] = revision['merge']
     revision_data['metadata'] = json.dumps(revision['metadata'],
                                            sort_keys=True,
                                            indent=4, separators=(',', ': '))
 
     if origin_info:
         revision_data['context-independent revision'] = \
             gen_revision_link(sha1_git, link_text='Browse',
                               link_attrs={'class': 'btn btn-md btn-swh',
                                           'role': 'button'})
         revision_data['origin id'] = origin_info['id']
         revision_data['origin type'] = origin_info['type']
         revision_data['origin url'] = gen_link(origin_info['url'],
                                                origin_info['url'])
 
     parents = ''
     for p in revision['parents']:
         parent_link = gen_revision_link(p, origin_context=origin_context)
         parents += parent_link + '<br/>'
 
     revision_data['parents'] = mark_safe(parents)
     revision_data['synthetic'] = revision['synthetic']
     revision_data['type'] = revision['type']
 
     message_lines = revision['message'].split('\n')
 
     parents_links = '<b>%s parent%s</b> ' %  \
         (len(revision['parents']),
          '' if len(revision['parents']) == 1 else 's')
     parents_links += '<i class="octicon octicon-git-commit fa-fw"></i> '
     for p in revision['parents']:
         parent_link = gen_revision_link(p, shorten_id=True,
                                         origin_context=origin_context)
         parents_links += parent_link
         if p != revision['parents'][-1]:
             parents_links += ' + '
 
     path_info = gen_path_info(path)
 
     query_params = {'origin_type': origin_type,
                     'origin_url': origin_url,
                     'timestamp': timestamp,
                     'visit_id': visit_id}
 
     breadcrumbs = []
     breadcrumbs.append({'name': revision['directory'][:7],
                         'url': reverse('browse-revision',
                                        kwargs={'sha1_git': sha1_git},
                                        query_params=query_params)})
     for pi in path_info:
         query_params['path'] = pi['path']
         breadcrumbs.append({'name': pi['name'],
                             'url': reverse('browse-revision',
                                            kwargs={'sha1_git': sha1_git},
                                            query_params=query_params)})
 
     vault_cooking = {
         'directory_context': False,
         'directory_id': None,
         'revision_context': True,
         'revision_id': sha1_git
     }
 
     content = None
     content_size = None
     mimetype = None
     language = None
     readme_name = None
     readme_url = None
 
     if content_data:
         breadcrumbs[-1]['url'] = None
         content_size = content_data['length']
         mimetype = content_data['mimetype']
         if content_data['raw_data']:
             content_display_data = prepare_content_for_display(
                 content_data['raw_data'], content_data['mimetype'], path)
             content = content_display_data['content_data']
             language = content_display_data['language']
         query_params = {}
         if path:
             query_params['filename'] = path_info[-1]['name']
         top_right_link = reverse('browse-content-raw',
                                  kwargs={'query_string': query_string},
                                  query_params=query_params)
         top_right_link_text = mark_safe(
             '<i class="fa fa-file-text fa-fw" aria-hidden="true">'
             '</i>Raw File')
     else:
         for d in dirs:
             query_params['path'] = path + d['name']
             d['url'] = reverse('browse-revision',
                                kwargs={'sha1_git': sha1_git},
                                query_params=query_params)
         for f in files:
             query_params['path'] = path + f['name']
             f['url'] = reverse('browse-revision',
                                kwargs={'sha1_git': sha1_git},
                                query_params=query_params)
             f['length'] = filesizeformat(f['length'])
             if f['name'].lower().startswith('readme'):
                 readme_name = f['name']
                 readme_sha1 = f['checksums']['sha1']
                 readme_url = reverse('browse-content-raw',
                                      kwargs={'query_string': readme_sha1})
 
         top_right_link = get_revision_log_url(sha1_git, origin_context)
         top_right_link_text = mark_safe(
             '<i class="fa fa-history fa-fw" aria-hidden="true"></i>'
             'History')
 
         vault_cooking['directory_context'] = True
         vault_cooking['directory_id'] = dir_id
 
-    changes = service.diff_revision(sha1_git)
-    changes_msg = _gen_revision_changes_list(revision, changes, origin_context)
+    diff_revision_url = reverse('diff-revision', kwargs={'sha1_git': sha1_git},
+                                query_params={'origin_type': origin_type,
+                                              'origin_url': origin_url,
+                                              'timestamp': timestamp,
+                                              'visit_id': visit_id})
 
     return render(request, 'revision.html',
                   {'empty_browse': False,
                    'heading': 'Revision information',
                    'top_panel_visible': True,
                    'top_panel_collapsible': True,
                    'top_panel_text': 'SWH object: Revision',
                    'swh_object_metadata': revision_data,
                    'message_header': message_lines[0],
                    'message_body': '\n'.join(message_lines[1:]),
                    'parents_links': mark_safe(parents_links),
                    'main_panel_visible': True,
                    'origin_context': origin_context,
                    'dirs': dirs,
                    'files': files,
                    'content': content,
                    'content_size': content_size,
                    'max_content_size': content_display_max_size,
                    'mimetype': mimetype,
                    'language': language,
                    'readme_name': readme_name,
                    'readme_url': readme_url,
                    'breadcrumbs': breadcrumbs,
                    'top_right_link': top_right_link,
                    'top_right_link_text': top_right_link_text,
                    'vault_cooking': vault_cooking,
-                   'changes': changes,
-                   'changes_msg': changes_msg})
+                   'diff_revision_url': diff_revision_url})
 
 
 NB_LOG_ENTRIES = 20
 
 
 @browse_route(r'revision/(?P<sha1_git>[0-9a-f]+)/log/',
               view_name='browse-revision-log')
 def revision_log_browse(request, sha1_git):
     """
     Django view that produces an HTML display of the history
     log for a SWH revision identified by its id.
 
     The url that points to it is :http:get:`/browse/revision/(sha1_git)/log/`.
 
     Args:
         request: input django http request
         sha1_git: a SWH revision id
 
     Returns:
         The HMTL rendering of the revision history log.
     """ # noqa
     try:
         per_page = int(request.GET.get('per_page', NB_LOG_ENTRIES))
         revision_log = service.lookup_revision_log(sha1_git,
                                                    limit=per_page+1)
         revision_log = list(revision_log)
     except Exception as exc:
         return handle_view_exception(request, exc)
 
     revs_breadcrumb = request.GET.get('revs_breadcrumb', None)
 
     revision_log_display_data = prepare_revision_log_for_display(
         revision_log, per_page, revs_breadcrumb)
 
     prev_rev = revision_log_display_data['prev_rev']
     prev_revs_breadcrumb = revision_log_display_data['prev_revs_breadcrumb']
     prev_log_url = None
     if prev_rev:
         prev_log_url = \
             reverse('browse-revision-log',
                     kwargs={'sha1_git': prev_rev},
                     query_params={'revs_breadcrumb': prev_revs_breadcrumb,
                                   'per_page': per_page})
 
     next_rev = revision_log_display_data['next_rev']
     next_revs_breadcrumb = revision_log_display_data['next_revs_breadcrumb']
     next_log_url = None
     if next_rev:
         next_log_url = \
             reverse('browse-revision-log',
                     kwargs={'sha1_git': next_rev},
                     query_params={'revs_breadcrumb': next_revs_breadcrumb,
                                   'per_page': per_page})
 
     revision_log_data = revision_log_display_data['revision_log_data']
 
     for log in revision_log_data:
         log['directory'] = gen_directory_link(
             log['directory'],
             link_text='<i class="fa fa-folder-open fa-fw" aria-hidden="true">'
                       '</i>Browse files',
             link_attrs={'class': 'btn btn-md btn-swh',
                         'role': 'button'})
 
     return render(request, 'revision-log.html',
                   {'empty_browse': False,
                    'heading': 'Revision history information',
                    'top_panel_visible': False,
                    'top_panel_collapsible': False,
                    'top_panel_text': 'SWH object: Revision history',
                    'swh_object_metadata': None,
                    'main_panel_visible': True,
                    'revision_log': revision_log_data,
                    'next_log_url': next_log_url,
                    'prev_log_url': prev_log_url,
                    'breadcrumbs': None,
                    'top_right_link': None,
                    'top_right_link_text': None,
                    'origin_context': None,
                    'vault_cooking': None})
diff --git a/swh/web/templates/revision.html b/swh/web/templates/revision.html
index 61afeaae1..260779cd7 100644
--- a/swh/web/templates/revision.html
+++ b/swh/web/templates/revision.html
@@ -1,559 +1,593 @@
 {% extends "browse.html" %}
 {% load static %}
 
 {% block header %}
   {% include "includes/content-scripts.html" %}
   <script src="{% static 'js/jquery-waypoints/jquery.waypoints.min.js' %}"></script>
 {% endblock %}
 
 {% block swh-browse-before-panels %}
 {% if origin_context %}
   {% include "includes/origin-visit-snapshot.html" %}
 {% endif %}
 {% endblock %}
 
 {% block swh-browse-main-panel-content %}
 <div style="height: 35px;margin: 4px;">
 <i class="octicon octicon-git-commit fa-fw"></i>Revision <b>{{ swh_object_metadata.id }}</b>
 authored by {{ swh_object_metadata.author }} on <b>{{ swh_object_metadata.date }}</b>
 </div>
 
 <div class="panel panel-default" style="overflow-x: auto;">
   <div class="panel-heading" style="padding: 10px">
     <a data-toggle="collapse" id="swh-collapse-revision-message" href="#swh-revision-message">
       <div class="pull-left">
         <pre style="white-space: pre-wrap; background-color: inherit; padding: 0px; margin: 0px; border: none;"><h2 style="padding-bottom: 0px;">{{ message_header }}</h2></pre>
       </div>
       <div class="clearfix"></div>
     </a>
   </div>
 
   <div id="swh-revision-message" class="panel-collapse collapse">
     <pre style="white-space: pre-wrap; margin: 0px; border: none; border-radius: 0px;">{{ message_body }}</pre>
   </div>
 </div>
 
 <div style="margin: 4px; padding-bottom: 5px;">
 {{ parents_links }}
 </div>
 
 <ul class="nav nav-tabs" style="padding-left: 5px;">
   <li class="active"><a data-toggle="tab" href="#swh-revision-tree">Files</a></li>
   <li><a data-toggle="tab" href="#swh-revision-changes">Changes</a></li>
 </ul>
 
 <div class="tab-content">
   <div id="swh-revision-tree" class="tab-pane active">
 
     {% include "includes/top-navigation.html" %}
 
     {% if content_size %}
 
     {% include "includes/content-display.html" %}
 
     {% else %}
 
     {% include "includes/directory-display.html" %}
 
     {% endif %}
   </div>
   <div id="swh-revision-changes" class="tab-pane">
 
-    <div class="panel-group" style="padding: 5px;">
+    <div id="swh-too-large-revision-diff" class="alert alert-warning" role="alert" style="display: none; margin: 5px 5px 0px 5px">
+      The diff you're trying to view is too large. Only the first <span id="swh-nb-loaded-diffs">1000</span> changed files have been loaded.
+    </div>
+
+    <div id="swh-revision-diffs" class="panel-group" style="padding: 5px;">
 
       <div class="panel panel-default" style="overflow-x: auto;">
         <div class="panel-heading">
           <a data-toggle="collapse" href="#swh-revision-changes-list">
             <div class="pull-left">
               Showing <strong id="swh-revision-changed-files"></strong>
               with <strong id="swh-revision-lines-added" style="color:green">0 additions</strong>
               and <strong id="swh-revision-lines-deleted" style="color:red">0 deletions</strong>
-               (<span id="swh-nb-diffs-computed">0</span> / {{ changes|length }} diffs computed)
+              (<span id="swh-nb-diffs-computed">0</span> / <span id="swh-total-nb-diffs">0</span> diffs computed)
             </div>
             <div class="pull-right">
               <button class="btn btn-md btn-swh" type="button" onclick="compute_all_diffs(event)" id="swh-compute-all-diffs"
                       title="By default, diffs will be computed as the view is scrolled.
-Pushing that button will request the immediate computation of all diffs.">Compute all diffs</button>
+Pushing that button will request the immediate computation of all diffs." style="visibility: hidden;">Compute all diffs</button>
             </div>
             <div class="clearfix"></div>
           </a>
         </div>
-
-        <div id="swh-revision-changes-list" class="panel-collapse collapse">
-          <pre style="background: none; border: none;">{{ changes_msg }}</pre>
-        </div>
-      </div>
-
-      {% for change in changes %}
-      <div id="panel_{{ change.id }}" class="panel panel-default swh-file-diff-panel" style="overflow-x: auto;">
-        <div class="panel-heading">
-          <a data-toggle="collapse" href="#panel_{{ change.id }}_content">
-            <div class="pull-left swh-title-color">
-              {% if change.type != 'rename' %}
-                <strong>{{ change.path }}</strong>
-              {% else %}
-                <strong>{{ change.from_path }} &rarr; {{ change.to_path }}</strong>
-              {% endif %}
-            </div>
-          </a>
-          <div class="pull-right">
-            {% if change.type != 'rename' %}
-              <div class="btn-group diff-styles" data-toggle="buttons" style="visibility: hidden;">
-                <button class="btn btn-md btn-swh active unified-diff-button" type="button" onclick="show_unified_diff(event, '{{ change.id }}')">Unified</button>
-                <button class="btn btn-md btn-swh splitted-diff-button" type="button" onclick="show_splitted_diff(event, '{{ change.id }}')">Side-by-side</button>
-              </div>
-            {% endif %}
-            <a href="{{ change.content_url }}" class="btn btn-md btn-swh" role="button">View file</a>
-          </div>
-          <div class="clearfix"></div>
-
-        </div>
-
-        <div id="panel_{{ change.id }}_content" class="panel-collapse collapse in">
-          <div class="swh-diff-loading" id="{{ change.id }}-loading" style="text-align: center;visibility: hidden;">
-            <img src="{% static 'img/swh-spinner.gif' %}"></img>
-            <p>Loading diff ...</p>
-          </div>
-
-          <div class="highlightjs swh-content" style="display: none;" id="{{ change.id }}-highlightjs">
-            <div id="{{ change.id }}-unified-diff">
-              <pre><code class="{{ change.id }}" id="{{ change.id }}"></code></pre>
-            </div>
-            <div style="width: 100%; display: none;" id="{{ change.id }}-splitted-diff">
-              <pre style="width: 50%; float: left;"><code class="{{ change.id }}" id="{{ change.id }}-from"></code></pre>
-              <pre style="width: 50%"><code class="{{ change.id }}" id="{{ change.id }}-to"></code></pre>
-            </div>
+        <div id="swh-revision-changes-list" class="panel-collapse collapse in">
+          <div id="swh-revision-changes-loading" style="text-align: center">
+            <img src="{% static "img/swh-spinner.gif" %}"></img>
+            <p>Computing file changes ...</p>
           </div>
+          <pre style="background: none; border: none;display: none;"></pre>
         </div>
       </div>
-      {% endfor %}
-
   </div>
 
 </div>
 
 <script>
 
   // number of changed files in the revision
-  var nb_changed_files = {{ changes|length }};
+  var changes = null;
+  var nb_changed_files = 0;
   // to track the number of already computed files diffs
   var nb_diffs_computed = 0;
 
   // the no newline at end of file marker from Github
   var no_nl_marker = '<span class="no-nl-marker" title="No newline at end of file">' +
                      '<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">' +
                      '  <path fill-rule="evenodd" d="M16 5v3c0 .55-.45 1-1 1h-3v2L9 8l3-3v2h2V5h2zM8 8c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zM1.5 9.66L5.66 5.5C5.18 5.19 4.61 5 4 5 2.34 5 1 6.34 1 8c0 .61.19 1.17.5 1.66zM7 8c0-.61-.19-1.17-.5-1.66L2.34 10.5c.48.31 1.05.5 1.66.5 1.66 0 3-1.34 3-3z"></path>' +
                      '</svg>' +
                      '</span>';
 
   // to track the total number of added lines in files diffs
   var nb_additions = 0;
   // to track the total number of deleted lines in files diffs
   var nb_deletions = 0;
   // to track the already computed diffs by id
   var computed_diffs = {};
   // map a diff id to its computation url
   var diffs_urls = {};
 
   // to check if a DOM element is in the viewport
   function is_in_viewport(elt) {
     var elementTop = $(elt).offset().top;
     var elementBottom = elementTop + $(elt).outerHeight();
 
     var viewportTop = $(window).scrollTop();
     var viewportBottom = viewportTop + $(window).height();
 
     return elementBottom > viewportTop && elementTop < viewportBottom;
   }
 
   // to format the diffs line numbers
   function format_ln_diff(from_line, to_line, max_number_chars) {
     var ret = '';
     if (from_line != null) {
       for (var i = 0 ; i < (max_number_chars - from_line.length); ++i) {
         ret += ' ';
       }
       ret += from_line;
     }
     if (from_line != null && to_line != null) {
       ret += '  ';
     }
     if (to_line != null) {
       for (var i = 0 ; i < (max_number_chars - to_line.length); ++i) {
         ret += ' ';
       }
       ret += to_line;
     }
     return ret;
   }
 
   // callback to switch from side-by-side diff to unified one
   function show_unified_diff(event, diff_id) {
     $('#' + diff_id + '-splitted-diff').css('display', 'none');
     $('#' + diff_id + '-unified-diff').css('display', 'block');
     $(event.target).parent().find('.splitted-diff-button').removeClass('active');
     $(event.target).parent().find('.unified-diff-button').addClass('active');
   }
 
   // callback to switch from unified diff to side-by-side one
   function show_splitted_diff(event, diff_id) {
     $('#' + diff_id + '-unified-diff').css('display', 'none');
     $('#' + diff_id + '-splitted-diff').css('display', 'block');
     $(event.target).parent().find('.unified-diff-button').removeClass('active');
     $(event.target).parent().find('.splitted-diff-button').addClass('active');
   }
 
   // to compute diff and process it for display
   function compute_diff(diff_url, diff_id) {
 
     // force diff computation ?
     var force = diff_url.indexOf('force=true') != -1;
 
     // it no forced computation and diff already computed, do nothing
     if (!force && computed_diffs.hasOwnProperty(diff_id)) {
       return;
     }
 
     // mark diff computation as already requested
     computed_diffs[diff_id] = true;
 
     $('#' + diff_id + '-loading').css('visibility', 'visible');
 
     // set spinner visible while requesting diff
     $('#' + diff_id + '-loading').css('display', 'block');
     $('#' + diff_id + '-highlightjs').css('display', 'none');
 
     // request diff computation and process it
     $.ajax({
       url: diff_url,
       dataType: 'json',
       success: function (data) {
 
         // increment number of computed diffs
         ++nb_diffs_computed;
         // toggle the 'Compute all diffs' button if all diffs have been computed
-        if (nb_diffs_computed == nb_changed_files) {
+        if (nb_diffs_computed == changes.length) {
           $('#swh-compute-all-diffs').addClass('active');
         }
 
         // Large diff (> threshold) are not automatically computed,
         // add a button to force its computation
         if (data.diff_str.indexOf('Large diff') == 0) {
           $('#' + diff_id)[0].innerHTML = data.diff_str +
             '<br/><button class="btn btn-md btn-swh" type="button" onclick="compute_diff(\'' +
-            diff_url + '&force=true\', \'' + diff_id + '\')">Request diff</button>'
+            diff_url + '&force=true\', \'' + diff_id + '\')">Request diff</button>';
         } else {
 
           // prepare code highlighting
           $('.' + diff_id).removeClass('nohighlight-swh');
           $('.' + diff_id).addClass(data.language);
 
           // set unified diff text
           $('#' + diff_id).text(data.diff_str);
 
           // code highlighting for unified diff
           $('#' + diff_id).each(function(i, block) {
             hljs.highlightBlock(block);
             hljs.lineNumbersBlock(block);
           });
 
           // process unified diff lines in order to generate side-by-side diffs text
           // but also compute line numbers for unified and side-by-side difss
           var lines_info_regexp = new RegExp(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/g);
           var base_from_line = '';
           var base_to_line = '';
           var from_to_lines = [];
           var from_lines = [];
           var to_lines = [];
           var max_number_chars = 0;
           var diff_from_str = '';
           var diff_to_str = '';
           var lines_offset = 0;
           $('#' + diff_id + ' .hljs-ln-numbers').each(function(i, ln_elt) {
             var ln_text = ln_elt.nextSibling.innerText;
             var lines_info = lines_info_regexp.exec(ln_text);
             var from_line = '';
             var to_line = '';
             // parsed lines info from the diff output
             if (lines_info) {
               base_from_line = parseInt(lines_info[1]) - 1;
               base_to_line = parseInt(lines_info[3]) - 1;
               lines_offset = 0;
               diff_from_str += (ln_text + '\n');
               diff_to_str += (ln_text + '\n');
               from_lines.push('');
               to_lines.push('');
             // line removed in the from file
             } else if (ln_text.length > 0 && ln_text[0] == '-') {
               base_from_line = base_from_line + 1;
               from_line = base_from_line.toString();
               from_lines.push(from_line);
               ++nb_deletions;
               diff_from_str += (ln_text + '\n');
               ++lines_offset;
             // line added in the from file
             } else if (ln_text.length > 0 && ln_text[0] == '+') {
               base_to_line = base_to_line + 1;
               to_line = base_to_line.toString();
               to_lines.push(to_line);
               ++nb_additions;
               diff_to_str += (ln_text + '\n');
               --lines_offset;
             // line present in both files
             } else {
               base_from_line = base_from_line + 1;
               base_to_line = base_to_line + 1;
               from_line = base_from_line.toString();
               to_line = base_to_line.toString();
               for (var j = 0 ; j < Math.abs(lines_offset) ; ++j) {
                 if (lines_offset > 0) {
                   diff_to_str += '\n';
                   to_lines.push('');
                 } else {
                   diff_from_str += '\n';
                   from_lines.push('');
                 }
               }
               lines_offset = 0;
               diff_from_str += (ln_text + '\n');
               diff_to_str += (ln_text + '\n');
               to_lines.push(to_line);
               from_lines.push(from_line);
             }
             if (!base_from_line) {
               from_line = '';
             }
             if (!base_to_line) {
               to_line = '';
             }
             from_to_lines[i] = [from_line, to_line];
             max_number_chars = Math.max(max_number_chars, from_line.length);
             max_number_chars = Math.max(max_number_chars, to_line.length);
           });
 
           // set side-by-side diffs text
           $('#' + diff_id + '-from').text(diff_from_str);
           $('#' + diff_id + '-to').text(diff_to_str);
 
           // code highlighting for side-by-side diffs
           $('#' + diff_id + '-from, #' + diff_id + '-to').each(function(i, block) {
             hljs.highlightBlock(block);
             hljs.lineNumbersBlock(block);
           });
 
           // diff highlighting for added/removed lines on top of code highlighting
           $('.' + diff_id + ' .hljs-ln-numbers').each(function(i, ln_elt) {
             var ln_text = ln_elt.nextSibling.innerText;
             var lines_info = lines_info_regexp.exec(ln_text);
             if (lines_info) {
               $(ln_elt).parent().addClass('swh-diff-lines-info');
             } else if (ln_text.length > 0 && ln_text[0] == '-') {
               $(ln_elt).parent().addClass('swh-diff-removed-line');
             } else if (ln_text.length > 0 && ln_text[0] == '+') {
               $(ln_elt).parent().addClass('swh-diff-added-line');
             }
           });
 
 
           // set line numbers for unified diff
           $('#' + diff_id + ' .hljs-ln-numbers').each(function(i, ln_elt) {
             $(ln_elt).children().attr('data-line-number',
                                       format_ln_diff(from_to_lines[i][0], from_to_lines[i][1],
                                       max_number_chars));
           });
 
           // set line numbers for the from side-by-side diff
           $('#' + diff_id + '-from .hljs-ln-numbers').each(function(i, ln_elt) {
             $(ln_elt).children().attr('data-line-number',
                                       format_ln_diff(from_lines[i], null,
                                       max_number_chars));
           });
 
           // set line numbers for the to side-by-side diff
           $('#' + diff_id + '-to .hljs-ln-numbers').each(function(i, ln_elt) {
             $(ln_elt).children().attr('data-line-number',
                                       format_ln_diff(null, to_lines[i],
                                       max_number_chars));
           });
 
           // last processings:
           //  - remove the '+' and '-' at the beginning of the diff lines
           //    from code highlighting
           //  - add the "no new line at end of file marker" if needed
           $('.' + diff_id + ' .hljs-ln-line').each(function(i, ln_elt) {
             if (ln_elt.firstChild) {
               if (ln_elt.firstChild.nodeName != "#text") {
                 var line_text = ln_elt.firstChild.innerHTML;
                 if (line_text[0] == '-' || line_text[0] == '+') {
                   ln_elt.firstChild.innerHTML = line_text.substr(1);
                   var new_text_node = document.createTextNode(line_text[0]);
                   $(ln_elt).prepend(new_text_node);
                 }
               }
               $(ln_elt).contents().filter(function() {
                 return this.nodeType === 3; //Node.TEXT_NODE
               }).each(function(i, textNode) {
                 var swh_no_nl_marker = '[swh-no-nl-marker]';
                 if (textNode.textContent.indexOf(swh_no_nl_marker) != -1) {
                   textNode.textContent = textNode.textContent.replace(swh_no_nl_marker, '');
                   $(ln_elt).append($(no_nl_marker));
                 }
               });
             }
           });
 
           // remove empty last line added by highlight.js
           $('#' + diff_id + ' tr:last').remove();
           $('#' + diff_id + '-from tr:last').remove();
           $('#' + diff_id + '-to tr:last').remove();
           $('#' + diff_id + '-from tr:last').remove();
           $('#' + diff_id + '-to tr:last').remove();
 
           // hide the diff mode switch button in case of not generated diffs
           if (data.diff_str.indexOf('Diffs are not generated for non textual content') != 0) {
             $('#panel_' + diff_id + ' .diff-styles').css('visibility', 'visible');
           }
 
         }
 
         // set the unified diff visible by default
         $('#' + diff_id + '-loading').css('display', 'none');
         $('#' + diff_id + '-highlightjs').css('display', 'block');
 
         // update displayed counters
         $('#swh-revision-lines-added').text(nb_additions + ' additions');
         $('#swh-revision-lines-deleted').text(nb_deletions + ' deletions');
         $('#swh-nb-diffs-computed').text(nb_diffs_computed);
 
         // refresh the waypoints triggering diffs computation as
         // the DOM layout has been updated
         Waypoint.refreshAll();
 
       }
     });
   }
 
-  // callback when the 'Changes' tab is activated
-  $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
-    if (e.target.text == 'Changes') {
-      // iterate on list of file changes
-      {% for change in changes %}
-        // map diff id to diff computation url
-        diffs_urls['{{ change.id }}'] = '{{ change.diff_url }}';
-
-        // in order to not send too much diff computation requests
-        // (as the file changes list can be large),
-        // diffs computation will be requested on the fly
-        // as the view is scrolled
-
-        // create a waypoint that will trigger diff computation when
-        // the top of the diff panel hits the bottom of the viewport
-        $('#panel_{{ change.id }}').waypoint({
-          handler: function() {
-            if (is_in_viewport($('#panel_{{ change.id }}'))) {
-              compute_diff('{{ change.diff_url }}', '{{ change.id }}');
-              this.destroy();
-            }
-          },
-          offset: '100%'
-        });
-
-        // create a waypoint that will trigger diff computation when
-        // the bottom of the diff panel hits the top of the viewport
-        $('#panel_{{ change.id }}').waypoint({
-          handler: function() {
-            if (is_in_viewport($('#panel_{{ change.id }}'))) {
-              compute_diff('{{ change.diff_url }}', '{{ change.id }}');
-              this.destroy();
-            }
-          },
-          offset: function() {
-            return -$('#panel_{{ change.id }}').height();
-          }
-        });
-      {% endfor %}
-
-      // compute visible diffs when navigating to the 'Changes' tab
-      compute_visible_diffs();
-
-      $('#readme-panel').css('display', 'none');
-
-    } else if (e.target.text == 'Files') {
-      $('#readme-panel').css('display', 'block');
-    }
-  });
-
   // to compute all visible diffs in the viewport
   function compute_visible_diffs() {
     $('.swh-file-diff-panel').each(function(i, elt) {
       if (is_in_viewport(elt)) {
         diff_id = elt.id.replace('panel_', '');
         compute_diff(diffs_urls[diff_id], diff_id);
       }
     });
   }
 
   // callback when the user clicks on the 'Compute all diffs' button
   function compute_all_diffs(event) {
     $(event.target).addClass('active');
     for (var diff_id in diffs_urls) {
       if (diffs_urls.hasOwnProperty(diff_id)) {
         compute_diff(diffs_urls[diff_id], diff_id);
       }
     }
     event.stopPropagation();
   }
 
-  $(document).ready(function() {
+  function gen_diff_panel(diff_data) {
+    var diff_panel_title = diff_data.path;
+    if (diff_data.type == 'rename') {
+      diff_panel_title = diff_data.from_path + ' &rarr; ' + diff_data.to_path;
+    }
+    var diff_panel_html =
+    '<div id="panel_' + diff_data.id + '" class="panel panel-default swh-file-diff-panel" style="overflow-x: auto;"> \
+      <div class="panel-heading"> \
+        <a data-toggle="collapse" href="#panel_' + diff_data.id + '_content"> \
+          <div class="pull-left swh-title-color"> \
+            <strong>' + diff_panel_title + '</strong> \
+          </div> \
+        </a> \
+        <div class="pull-right"> \
+          <div class="btn-group diff-styles" data-toggle="buttons" style="visibility: hidden;"> \
+            <button class="btn btn-md btn-swh active unified-diff-button" type="button" onclick="show_unified_diff(event, \'' + diff_data.id + '\')">Unified</button> \
+            <button class="btn btn-md btn-swh splitted-diff-button" type="button" onclick="show_splitted_diff(event, \'' + diff_data.id + '\')">Side-by-side</button> \
+          </div> \
+          <a href="' + diff_data.content_url + '" class="btn btn-md btn-swh" role="button">View file</a> \
+        </div> \
+        <div class="clearfix"></div> \
+      </div> \
+      <div id="panel_' + diff_data.id + '_content" class="panel-collapse collapse in"> \
+        <div class="swh-diff-loading" id="' + diff_data.id + '-loading" style="text-align: center;visibility: hidden;"> \
+          <img src="{% static "img/swh-spinner.gif" %}"></img> \
+          <p>Loading diff ...</p> \
+        </div> \
+        <div class="highlightjs swh-content" style="display: none;" id="' + diff_data.id + '-highlightjs"> \
+          <div id="' + diff_data.id + '-unified-diff"> \
+            <pre><code class="' + diff_data.id + '" id="' + diff_data.id + '"></code></pre> \
+          </div> \
+          <div style="width: 100%; display: none;" id="' + diff_data.id + '-splitted-diff"> \
+            <pre style="width: 50%; float: left;"><code class="' + diff_data.id + '" id="' + diff_data.id + '-from"></code></pre> \
+            <pre style="width: 50%"><code class="' + diff_data.id + '" id="' + diff_data.id + '-to"></code></pre> \
+          </div> \
+        </div> \
+      </div> \
+    </div>';
+    return diff_panel_html;
+  }
 
-    var changed_files_text = nb_changed_files + ' changed file';
-    if (nb_changed_files != 1) {
-      changed_files_text += 's';
+  // setup waypoints to request diffs computation on the fly while scrolling
+  function setup_waypoints() {
+    for (var i = 0 ; i < changes.length ; ++i) {
+      var diff_data = changes[i];
+
+      // create a waypoint that will trigger diff computation when
+      // the top of the diff panel hits the bottom of the viewport
+      $('#panel_' + diff_data.id).waypoint({
+        handler: function() {
+          if (is_in_viewport(this.element)) {
+            var diff_id = this.element.id.replace('panel_', '');
+            compute_diff(diffs_urls[diff_id], diff_id);
+            this.destroy();
+          }
+        },
+        offset: '100%'
+      });
+
+      // create a waypoint that will trigger diff computation when
+      // the bottom of the diff panel hits the top of the viewport
+      $('#panel_' + diff_data.id).waypoint({
+        handler: function() {
+          if (is_in_viewport(this.element)) {
+            var diff_id = this.element.id.replace('panel_', '');
+            compute_diff(diffs_urls[diff_id], diff_id);
+            this.destroy();
+          }
+        },
+        offset: function() {
+          return -$(this.element).height();
+        }
+      });
+
+    }
+  }
+
+  // callback when the 'Changes' tab is activated
+  $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
+    if (e.target.text == 'Changes') {
+
+      $('#readme-panel').css('display', 'none');
+
+      // request computation of revision file changes list
+      // when navigating to the 'Changes' tab and add diff panels
+      // to the DOM when receiving the result
+      $.ajax({
+        url: '{{ diff_revision_url }}',
+        dataType: 'json',
+        success: function (data) {
+
+          changes = data.changes;
+          nb_changed_files = data.total_nb_changes;
+          var changed_files_text = nb_changed_files + ' changed file';
+          if (nb_changed_files != 1) {
+            changed_files_text += 's';
+          }
+          $('#swh-revision-changed-files').text(changed_files_text);
+          $('#swh-total-nb-diffs').text(changes.length);
+          $('#swh-revision-changes-list pre')[0].innerHTML = data.changes_msg;
+
+          $('#swh-revision-changes-loading').css('display', 'none');
+          $('#swh-revision-changes-list pre').css('display', 'block');
+          $('#swh-compute-all-diffs').css('visibility', 'visible');
+          $('#swh-revision-changes-list').removeClass('in');
+
+          if (nb_changed_files > changes.length) {
+            $('#swh-too-large-revision-diff').css('display', 'block');
+            $('#swh-nb-loaded-diffs').text(changes.length);
+          }
+
+          for (var i = 0 ; i < changes.length ; ++i) {
+            var diff_data = changes[i];
+            diffs_urls[diff_data.id] = diff_data.diff_url;
+            $('#swh-revision-diffs').append(gen_diff_panel(diff_data));
+          }
+
+          setup_waypoints();
+          compute_visible_diffs();
+        }
+      });
+
+    } else if (e.target.text == 'Files') {
+      $('#readme-panel').css('display', 'block');
     }
-    $('#swh-revision-changed-files').text(changed_files_text);
+  });
+
+  $(document).ready(function() {
 
     {% if message_body|length  > 0 %}
       $('#swh-revision-message').addClass('in');
     {% else %}
       $('#swh-collapse-revision-message').attr('data-toggle', '');
     {% endif %}
 
     var $root = $('html, body');
 
     // callback when the user requests to scroll on a specific diff or back to top
     $('#swh-revision-changes-list a[href^="#"], #back-to-top a[href^="#"]').click(function() {
-      var href = $.attr(this, 'href');
-      // disable waypoints while scrolling as we do not want to
-      // launch computation of diffs the user is not interested in
-      // (file changes list can be large)
-      Waypoint.disableAll();
-
-      $root.animate(
-        {
-          scrollTop: $(href).offset().top
-        },
-        {
-          duration: 500,
-          complete: function () {
-            window.location.hash = href;
-            // enable waypoints back after scrolling
-            Waypoint.enableAll();
-            // compute diffs visible in the viewport
-            compute_visible_diffs();
-          }
-      });
+       var href = $.attr(this, 'href');
+       // disable waypoints while scrolling as we do not want to
+       // launch computation of diffs the user is not interested in
+       // (file changes list can be large)
+       Waypoint.disableAll();
+
+       $root.animate(
+         {
+           scrollTop: $(href).offset().top
+         },
+         {
+           duration: 500,
+           complete: function () {
+             window.location.hash = href;
+             // enable waypoints back after scrolling
+             Waypoint.enableAll();
+             // compute diffs visible in the viewport
+             compute_visible_diffs();
+           }
+       });
 
       return false;
     });
 
   });
 
 </script>
 
 {% endblock %}
 
 {% block swh-browse-after-panels %}
 
 {% include "includes/readme-display.html" %}
 
 {% endblock %}