summary: don't load size on container expand, only on manual action.

- this is too heavy to open without explicit action
- increase locking timeout to 15min
- expose basic info on summary page without expand.

rhodecode/lib/rc_cache/backends.py

@@ -1,203 +1,203 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2015-2018 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 import time
 import errno
 import logging
 
 import gevent
 
 from dogpile.cache.backends import memory as memory_backend
 from dogpile.cache.backends import file as file_backend
 from dogpile.cache.backends import redis as redis_backend
 from dogpile.cache.backends.file import NO_VALUE, compat, FileLock
 from dogpile.cache.util import memoized_property
 
 from rhodecode.lib.memory_lru_dict import LRUDict, LRUDictDebug
 
 
 _default_max_size = 1024
 
 log = logging.getLogger(__name__)
 
 
 class LRUMemoryBackend(memory_backend.MemoryBackend):
     pickle_values = False
 
     def __init__(self, arguments):
         max_size = arguments.pop('max_size', _default_max_size)
 
         LRUDictClass = LRUDict
         if arguments.pop('log_key_count', None):
             LRUDictClass = LRUDictDebug
 
         arguments['cache_dict'] = LRUDictClass(max_size)
         super(LRUMemoryBackend, self).__init__(arguments)
 
     def delete(self, key):
         try:
             del self._cache[key]
         except KeyError:
             # we don't care if key isn't there at deletion
             pass
 
     def delete_multi(self, keys):
         for key in keys:
             self.delete(key)
 
 
 class Serializer(object):
     def _dumps(self, value, safe=False):
         try:
             return compat.pickle.dumps(value)
         except Exception:
             if safe:
                 return NO_VALUE
             else:
                 raise
 
     def _loads(self, value, safe=True):
         try:
             return compat.pickle.loads(value)
         except Exception:
             if safe:
                 return NO_VALUE
             else:
                 raise
 
 
 class CustomLockFactory(FileLock):
 
     @memoized_property
     def _module(self):
         import fcntl
         flock_org = fcntl.flock
 
         def gevent_flock(fd, operation):
             """
             Gevent compatible flock
             """
             # set non-blocking, this will cause an exception if we cannot acquire a lock
             operation |= fcntl.LOCK_NB
             start_lock_time = time.time()
-            timeout = 60 * 5  # 5min
+            timeout = 60 * 15  # 15min
             while True:
                 try:
                     flock_org(fd, operation)
                     # lock has been acquired
                     break
                 except (OSError, IOError) as e:
                     # raise on other errors than Resource temporarily unavailable
                     if e.errno != errno.EAGAIN:
                         raise
                     elif (time.time() - start_lock_time) > timeout:
                         # waited to much time on a lock, better fail than loop for ever
                         log.error('Failed to acquire lock on `%s` after waiting %ss',
                                   self.filename, timeout)
                         raise
                     wait_timeout = 0.03
                     log.debug('Failed to acquire lock on `%s`, retry in %ss',
                               self.filename, wait_timeout)
                     gevent.sleep(wait_timeout)
 
         fcntl.flock = gevent_flock
         return fcntl
 
 
 class FileNamespaceBackend(Serializer, file_backend.DBMBackend):
 
     def __init__(self, arguments):
         arguments['lock_factory'] = CustomLockFactory
         super(FileNamespaceBackend, self).__init__(arguments)
 
     def list_keys(self, prefix=''):
         def cond(v):
             if not prefix:
                 return True
 
             if v.startswith(prefix):
                 return True
             return False
 
         with self._dbm_file(True) as dbm:
 
             return filter(cond, dbm.keys())
 
     def get_store(self):
         return self.filename
 
     def get(self, key):
         with self._dbm_file(False) as dbm:
             if hasattr(dbm, 'get'):
                 value = dbm.get(key, NO_VALUE)
             else:
                 # gdbm objects lack a .get method
                 try:
                     value = dbm[key]
                 except KeyError:
                     value = NO_VALUE
             if value is not NO_VALUE:
                 value = self._loads(value)
             return value
 
     def set(self, key, value):
         with self._dbm_file(True) as dbm:
             dbm[key] = self._dumps(value)
 
     def set_multi(self, mapping):
         with self._dbm_file(True) as dbm:
             for key, value in mapping.items():
                 dbm[key] = self._dumps(value)
 
 
 class RedisPickleBackend(Serializer, redis_backend.RedisBackend):
     def list_keys(self, prefix=''):
         if prefix:
             prefix = prefix + '*'
         return self.client.keys(prefix)
 
     def get_store(self):
         return self.client.connection_pool
 
     def get(self, key):
         value = self.client.get(key)
         if value is None:
             return NO_VALUE
         return self._loads(value)
 
     def set(self, key, value):
         if self.redis_expiration_time:
             self.client.setex(key, self.redis_expiration_time,
                               self._dumps(value))
         else:
             self.client.set(key, self._dumps(value))
 
     def set_multi(self, mapping):
         mapping = dict(
             (k, self._dumps(v))
             for k, v in mapping.items()
         )
 
         if not self.redis_expiration_time:
             self.client.mset(mapping)
         else:
             pipe = self.client.pipeline()
             for key, value in mapping.items():
                 pipe.setex(key, self.redis_expiration_time, value)
             pipe.execute()

rhodecode/public/js/src/rhodecode.js

@@ -1,578 +1,579 b''
 // # Copyright (C) 2010-2018 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 /**
 RhodeCode JS Files
 **/
 
 if (typeof console == "undefined" || typeof console.log == "undefined"){
     console = { log: function() {} }
 }
 
 // TODO: move the following function to submodules
 
 /**
  * show more
  */
 var show_more_event = function(){
   $('table .show_more').click(function(e) {
     var cid = e.target.id.substring(1);
     var button = $(this);
     if (button.hasClass('open')) {
       $('#'+cid).hide();
       button.removeClass('open');
     } else {
       $('#'+cid).show();
       button.addClass('open one');
     }
   });
 };
 
 var compare_radio_buttons = function(repo_name, compare_ref_type){
     $('#compare_action').on('click', function(e){
         e.preventDefault();
 
         var source = $('input[name=compare_source]:checked').val();
         var target = $('input[name=compare_target]:checked').val();
         if(source && target){
             var url_data = {
                 repo_name: repo_name,
                 source_ref: source,
                 source_ref_type: compare_ref_type,
                 target_ref: target,
                 target_ref_type: compare_ref_type,
                 merge: 1
             };
             window.location = pyroutes.url('repo_compare', url_data);
         }
     });
     $('.compare-radio-button').on('click', function(e){
         var source = $('input[name=compare_source]:checked').val();
         var target = $('input[name=compare_target]:checked').val();
         if(source && target){
             $('#compare_action').removeAttr("disabled");
             $('#compare_action').removeClass("disabled");
         }
     })
 };
 
 var showRepoSize = function(target, repo_name, commit_id, callback) {
     var container = $('#' + target);
     var url = pyroutes.url('repo_stats',
       {"repo_name": repo_name, "commit_id": commit_id});
 
+    container.show();
     if (!container.hasClass('loaded')) {
         $.ajax({url: url})
             .complete(function (data) {
                 var responseJSON = data.responseJSON;
                 container.addClass('loaded');
                 container.html(responseJSON.size);
                 callback(responseJSON.code_stats)
             })
             .fail(function (data) {
                 console.log('failed to load repo stats');
             });
     }
 
 };
 
 var showRepoStats = function(target, data){
     var container = $('#' + target);
 
     if (container.hasClass('loaded')) {
         return
     }
 
     var total = 0;
     var no_data = true;
     var tbl = document.createElement('table');
     tbl.setAttribute('class', 'trending_language_tbl');
 
     $.each(data, function(key, val){
         total += val.count;
     });
 
     var sortedStats = [];
     for (var obj in data){
         sortedStats.push([obj, data[obj]])
     }
     var sortedData = sortedStats.sort(function (a, b) {
         return b[1].count - a[1].count
     });
     var cnt = 0;
     $.each(sortedData, function(idx, val){
         cnt += 1;
         no_data = false;
 
         var hide = cnt > 2;
         var tr = document.createElement('tr');
         if (hide) {
             tr.setAttribute('style', 'display:none');
             tr.setAttribute('class', 'stats_hidden');
         }
 
         var key = val[0];
         var obj = {"desc": val[1].desc, "count": val[1].count};
 
         var percentage = Math.round((obj.count / total * 100), 2);
 
         var td1 = document.createElement('td');
         td1.width = 300;
         var trending_language_label = document.createElement('div');
         trending_language_label.innerHTML = obj.desc + " (.{0})".format(key);
         td1.appendChild(trending_language_label);
 
         var td2 = document.createElement('td');
         var trending_language = document.createElement('div');
         var nr_files = obj.count +" "+ _ngettext('file', 'files', obj.count);
 
         trending_language.title = key + " " + nr_files;
 
         trending_language.innerHTML = "<span>" + percentage + "% " + nr_files
                 + "</span><b>" + percentage + "% " + nr_files + "</b>";
 
         trending_language.setAttribute("class", 'trending_language');
         $('b', trending_language)[0].style.width = percentage + "%";
         td2.appendChild(trending_language);
 
         tr.appendChild(td1);
         tr.appendChild(td2);
         tbl.appendChild(tr);
         if (cnt == 3) {
             var show_more = document.createElement('tr');
             var td = document.createElement('td');
             lnk = document.createElement('a');
 
             lnk.href = '#';
             lnk.innerHTML = _gettext('Show more');
             lnk.id = 'code_stats_show_more';
             td.appendChild(lnk);
 
             show_more.appendChild(td);
             show_more.appendChild(document.createElement('td'));
             tbl.appendChild(show_more);
         }
     });
 
     $(container).html(tbl);
     $(container).addClass('loaded');
 
     $('#code_stats_show_more').on('click', function (e) {
         e.preventDefault();
         $('.stats_hidden').each(function (idx) {
             $(this).css("display", "");
         });
         $('#code_stats_show_more').hide();
     });
 
 };
 
 // returns a node from given html;
 var fromHTML = function(html){
   var _html = document.createElement('element');
   _html.innerHTML = html;
   return _html;
 };
 
 // Toggle Collapsable Content
 function collapsableContent() {
 
     $('.collapsable-content').not('.no-hide').hide();
 
     $('.btn-collapse').unbind(); //in case we've been here before
     $('.btn-collapse').click(function() {
         var button = $(this);
         var togglename = $(this).data("toggle");
         $('.collapsable-content[data-toggle='+togglename+']').toggle();
         if ($(this).html()=="Show Less")
             $(this).html("Show More");
         else
             $(this).html("Show Less");
     });
 };
 
 var timeagoActivate = function() {
     $("time.timeago").timeago();
 };
 
 
 var clipboardActivate = function() {
     /*
     *
     * <i class="tooltip icon-plus clipboard-action" data-clipboard-text="${commit.raw_id}" title="${_('Copy the full commit id')}"></i>
     * */
     var clipboard = new ClipboardJS('.clipboard-action');
 
     clipboard.on('success', function(e) {
         var callback = function () {
             $(e.trigger).animate({'opacity': 1.00}, 200)
         };
         $(e.trigger).animate({'opacity': 0.15}, 200, callback);
         e.clearSelection();
     });
 };
 
 
 // Formatting values in a Select2 dropdown of commit references
 var formatSelect2SelectionRefs = function(commit_ref){
   var tmpl = '';
   if (!commit_ref.text || commit_ref.type === 'sha'){
     return commit_ref.text;
   }
   if (commit_ref.type === 'branch'){
     tmpl = tmpl.concat('<i class="icon-branch"></i> ');
   } else if (commit_ref.type === 'tag'){
     tmpl = tmpl.concat('<i class="icon-tag"></i> ');
   } else if (commit_ref.type === 'book'){
     tmpl = tmpl.concat('<i class="icon-bookmark"></i> ');
   }
   return tmpl.concat(escapeHtml(commit_ref.text));
 };
 
 // takes a given html element and scrolls it down offset pixels
 function offsetScroll(element, offset) {
     setTimeout(function() {
         var location = element.offset().top;
         // some browsers use body, some use html
         $('html, body').animate({ scrollTop: (location - offset) });
     }, 100);
 }
 
 // scroll an element `percent`% from the top of page in `time` ms
 function scrollToElement(element, percent, time) {
     percent = (percent === undefined ? 25 : percent);
     time = (time === undefined ? 100 : time);
 
     var $element = $(element);
     if ($element.length == 0) {
         throw('Cannot scroll to {0}'.format(element))
     }
     var elOffset = $element.offset().top;
     var elHeight = $element.height();
     var windowHeight = $(window).height();
     var offset = elOffset;
     if (elHeight < windowHeight) {
         offset = elOffset - ((windowHeight / (100 / percent)) - (elHeight / 2));
     }
     setTimeout(function() {
         $('html, body').animate({ scrollTop: offset});
     }, time);
 }
 
 /**
  * global hooks after DOM is loaded
  */
 $(document).ready(function() {
     firefoxAnchorFix();
 
     $('.navigation a.menulink').on('click', function(e){
         var menuitem = $(this).parent('li');
         if (menuitem.hasClass('open')) {
             menuitem.removeClass('open');
         } else {
             menuitem.addClass('open');
             $(document).on('click', function(event) {
                 if (!$(event.target).closest(menuitem).length) {
                     menuitem.removeClass('open');
                 }
             });
         }
     });
 
     $('body').on('click', '.cb-lineno a', function(event) {
         function sortNumber(a,b) {
             return a - b;
         }
 
         var lineNo = $(this).data('lineNo');
         var lineName = $(this).attr('name');
 
         if (lineNo) {
             var prevLine = $('.cb-line-selected a').data('lineNo');
 
             // on shift, we do a range selection, if we got previous line
             if (event.shiftKey && prevLine !== undefined) {
                 var prevLine = parseInt(prevLine);
                 var nextLine = parseInt(lineNo);
                 var pos = [prevLine, nextLine].sort(sortNumber);
                 var anchor = '#L{0}-{1}'.format(pos[0], pos[1]);
 
             // single click
             } else {
                 var nextLine = parseInt(lineNo);
                 var pos = [nextLine, nextLine];
                 var anchor = '#L{0}'.format(pos[0]);
 
             }
             // highlight
             var range = [];
             for (var i = pos[0]; i <= pos[1]; i++) {
                 range.push(i);
             }
             // clear old selected lines
             $('.cb-line-selected').removeClass('cb-line-selected');
 
             $.each(range, function (i, lineNo) {
                 var line_td = $('td.cb-lineno#L' + lineNo);
 
                 if (line_td.length) {
                     line_td.addClass('cb-line-selected'); // line number td
                     line_td.prev().addClass('cb-line-selected'); // line data
                     line_td.next().addClass('cb-line-selected'); // line content
                 }
             });
 
         } else if (lineName !== undefined) { // lineName only occurs in diffs
             // clear old selected lines
             $('td.cb-line-selected').removeClass('cb-line-selected');
             var anchor = '#{0}'.format(lineName);
             var diffmode = templateContext.session_attrs.diffmode || "sideside";
 
             if (diffmode === "unified") {
                 $(this).closest('tr').find('td').addClass('cb-line-selected');
             } else {
                 var activeTd = $(this).closest('td');
                 activeTd.addClass('cb-line-selected');
                 activeTd.next('td').addClass('cb-line-selected');
             }
 
         }
 
         // Replace URL without jumping to it if browser supports.
         // Default otherwise
         if (history.pushState && anchor !== undefined) {
             var new_location = location.href.rstrip('#');
             if (location.hash) {
                 // location without hash
                 new_location = new_location.replace(location.hash, "");
             }
 
             // Make new anchor url
             new_location = new_location + anchor;
             history.pushState(true, document.title, new_location);
 
             return false;
         }
 
     });
 
     $('.collapse_file').on('click', function(e) {
         e.stopPropagation();
         if ($(e.target).is('a')) { return; }
         var node = $(e.delegateTarget).first();
         var icon = $($(node.children().first()).children().first());
         var id = node.attr('fid');
         var target = $('#'+id);
         var tr = $('#tr_'+id);
         var diff = $('#diff_'+id);
         if(node.hasClass('expand_file')){
             node.removeClass('expand_file');
             icon.removeClass('expand_file_icon');
             node.addClass('collapse_file');
             icon.addClass('collapse_file_icon');
             diff.show();
             tr.show();
             target.show();
         } else {
             node.removeClass('collapse_file');
             icon.removeClass('collapse_file_icon');
             node.addClass('expand_file');
             icon.addClass('expand_file_icon');
             diff.hide();
             tr.hide();
             target.hide();
         }
     });
 
     $('#expand_all_files').click(function() {
         $('.expand_file').each(function() {
             var node = $(this);
             var icon = $($(node.children().first()).children().first());
             var id = $(this).attr('fid');
             var target = $('#'+id);
             var tr = $('#tr_'+id);
             var diff = $('#diff_'+id);
             node.removeClass('expand_file');
             icon.removeClass('expand_file_icon');
             node.addClass('collapse_file');
             icon.addClass('collapse_file_icon');
             diff.show();
             tr.show();
             target.show();
         });
     });
 
     $('#collapse_all_files').click(function() {
         $('.collapse_file').each(function() {
             var node = $(this);
             var icon = $($(node.children().first()).children().first());
             var id = $(this).attr('fid');
             var target = $('#'+id);
             var tr = $('#tr_'+id);
             var diff = $('#diff_'+id);
             node.removeClass('collapse_file');
             icon.removeClass('collapse_file_icon');
             node.addClass('expand_file');
             icon.addClass('expand_file_icon');
             diff.hide();
             tr.hide();
             target.hide();
         });
     });
 
     // Mouse over behavior for comments and line selection
 
     // Select the line that comes from the url anchor
     // At the time of development, Chrome didn't seem to support jquery's :target
     // element, so I had to scroll manually
 
     if (location.hash) {
         var result = splitDelimitedHash(location.hash);
         var loc  = result.loc;
         if (loc.length > 1) {
 
             var highlightable_line_tds = [];
 
             // source code line format
             var page_highlights = loc.substring(
                 loc.indexOf('#') + 1).split('L');
 
             if (page_highlights.length > 1) {
                 var highlight_ranges = page_highlights[1].split(",");
                 var h_lines = [];
                 for (var pos in highlight_ranges) {
                     var _range = highlight_ranges[pos].split('-');
                     if (_range.length === 2) {
                         var start = parseInt(_range[0]);
                         var end = parseInt(_range[1]);
                         if (start < end) {
                             for (var i = start; i <= end; i++) {
                                 h_lines.push(i);
                             }
                         }
                     }
                     else {
                         h_lines.push(parseInt(highlight_ranges[pos]));
                     }
                 }
                 for (pos in h_lines) {
                     var line_td = $('td.cb-lineno#L' + h_lines[pos]);
                     if (line_td.length) {
                         highlightable_line_tds.push(line_td);
                     }
                 }
             }
 
             // now check a direct id reference (diff page)
             if ($(loc).length && $(loc).hasClass('cb-lineno')) {
                 highlightable_line_tds.push($(loc));
             }
             $.each(highlightable_line_tds, function (i, $td) {
                 $td.addClass('cb-line-selected'); // line number td
                 $td.prev().addClass('cb-line-selected'); // line data
                 $td.next().addClass('cb-line-selected'); // line content
             });
 
             if (highlightable_line_tds.length) {
                 var $first_line_td = highlightable_line_tds[0];
                 scrollToElement($first_line_td);
                 $.Topic('/ui/plugins/code/anchor_focus').prepareOrPublish({
                     td: $first_line_td,
                     remainder: result.remainder
                 });
             }
         }
     }
     collapsableContent();
 });
 
 var feedLifetimeOptions = function(query, initialData){
     var data = {results: []};
     var isQuery = typeof query.term !== 'undefined';
 
     var section = _gettext('Lifetime');
     var children = [];
 
     //filter results
     $.each(initialData.results, function(idx, value) {
 
         if (!isQuery || query.term.length === 0 || value.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
             children.push({
                 'id': this.id,
                 'text': this.text
             })
         }
 
     });
     data.results.push({
         'text': section,
         'children': children
     });
 
     if (isQuery) {
 
         var now = moment.utc();
 
         var parseQuery = function(entry, now){
             var fmt = 'DD/MM/YYYY H:mm';
             var parsed = moment.utc(entry, fmt);
             var diffInMin = parsed.diff(now, 'minutes');
 
             if (diffInMin > 0){
                 return {
                     id: diffInMin,
                     text: parsed.format(fmt)
                 }
             } else {
                 return {
                     id: undefined,
                     text: parsed.format('DD/MM/YYYY') + ' ' + _gettext('date not in future')
                 }
             }
 
 
         };
 
         data.results.push({
             'text': _gettext('Specified expiration date'),
             'children': [{
                 'id': parseQuery(query.term, now).id,
                 'text': parseQuery(query.term, now).text
             }]
         });
     }
 
     query.callback(data);
 };
 
 
 var storeUserSessionAttr = function (key, val) {
 
     var postData = {
         'key': key,
         'val': val,
         'csrf_token': CSRF_TOKEN
     };
 
     var success = function(o) {
         return true
     };
 
     ajaxPOST(pyroutes.url('store_user_session_value'), postData, success);
     return false;
 };

rhodecode/templates/summary/components.mako

@@ -1,217 +1,231 b''
 <%def name="refs_counters(branches, closed_branches, tags, bookmarks)">
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
       <i class="icon-branch"></i>${_ungettext(
       '%(num)s Branch','%(num)s Branches', len(branches)) % {'num': len(branches)}}</a>
     </span>
 
     %if closed_branches:
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
       <i class="icon-branch"></i>${_ungettext(
       '%(num)s Closed Branch', '%(num)s Closed Branches', len(closed_branches)) % {'num': len(closed_branches)}}</a>
     </span>
     %endif
 
     <span class="tagtag tag">
     <a href="${h.route_path('tags_home',repo_name=c.repo_name)}" class="childs">
         <i class="icon-tag"></i>${_ungettext(
         '%(num)s Tag', '%(num)s Tags', len(tags)) % {'num': len(tags)}}</a>
     </span>
 
     %if bookmarks:
     <span class="booktag tag">
     <a href="${h.route_path('bookmarks_home',repo_name=c.repo_name)}" class="childs">
         <i class="icon-bookmark"></i>${_ungettext(
         '%(num)s Bookmark', '%(num)s Bookmarks', len(bookmarks)) % {'num': len(bookmarks)}}</a>
     </span>
     %endif
 </%def>
 
 <%def name="summary_detail(breadcrumbs_links, show_downloads=True)">
     <% summary = lambda n:{False:'summary-short'}.get(n) %>
 
     <div id="summary-menu-stats" class="summary-detail">
         <div class="summary-detail-header">
             <div class="breadcrumbs files_location">
                 <h4>
                   ${breadcrumbs_links}
                 </h4>
             </div>
             <div id="summary_details_expand" class="btn-collapse" data-toggle="summary-details">
                 ${_('Show More')}
             </div>
         </div>
 
         <div class="fieldset">
 
             <div class="left-clone">
                 <select id="clone_option" name="clone_option">
                     <option value="http" selected="selected">HTTP</option>
                     <option value="http_id">HTTP UID</option>
                     % if c.ssh_enabled:
                         <option value="ssh">SSH</option>
                     % endif
                 </select>
             </div>
             <div class="right-clone">
                 <%
                     maybe_disabled = ''
                     if h.is_svn_without_proxy(c.rhodecode_db_repo):
                         maybe_disabled = 'disabled'
                 %>
 
                 <span id="clone_option_http">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url}" title="${_('Copy the clone url')}"></i>
                 </span>
 
                 <span style="display: none;" id="clone_option_http_id">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url_id}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_id}" title="${_('Copy the clone by id url')}"></i>
                 </span>
 
                 <span style="display: none;" id="clone_option_ssh">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url_ssh}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_ssh}" title="${_('Copy the clone by ssh url')}"></i>
                 </span>
 
                 % if maybe_disabled:
                     <p class="help-block">${_('SVN Protocol is disabled. To enable it, see the')} <a href="${h.route_url('enterprise_svn_setup')}" target="_blank">${_('documentation here')}</a>.</p>
                 % endif
 
             </div>
         </div>
 
-        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+        <div class="fieldset">
           <div class="left-label-summary">
-            ${_('Information')}:
+            &nbsp;
           </div>
           <div class="right-content">
             <div class="commit-info">
                 <div class="tags">
                 <% commit_rev = c.rhodecode_db_repo.changeset_cache.get('revision') %>
                 % if c.rhodecode_repo:
                     ${refs_counters(
                         c.rhodecode_repo.branches,
                         c.rhodecode_repo.branches_closed,
                         c.rhodecode_repo.tags,
                         c.rhodecode_repo.bookmarks)}
                 % else:
                     ## missing requirements can make c.rhodecode_repo None
                     ${refs_counters([], [], [], [])}
                 % endif
 
                 ## commits
                 <span class="tag">
                   % if commit_rev == -1:
-                      ${_ungettext('%(num)s Commit', '%(num)s Commits', 0) % {'num': 0}},
+                      ${_ungettext('%(num)s Commit', '%(num)s Commits', 0) % {'num': 0}}
                   % else:
                       <a href="${h.route_path('repo_changelog', repo_name=c.repo_name)}">
-                        ${_ungettext('%(num)s Commit', '%(num)s Commits', commit_rev) % {'num': commit_rev}}</a>,
+                        ${_ungettext('%(num)s Commit', '%(num)s Commits', commit_rev) % {'num': commit_rev}}</a>
                   % endif
                 </span>
 
                 ## forks
                 <span class="tag">
                   <a title="${_('Number of Repository Forks')}" href="${h.route_path('repo_forks_show_all', repo_name=c.repo_name)}">
-                     ${c.repository_forks} ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>,
+                     ${c.repository_forks} ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>
                 </span>
 
-                ## repo size
-                % if commit_rev == -1:
-                      <span class="stats-bullet">0 B</span>
-                % else:
-                      <span class="stats-bullet" id="repo_size_container">
-                          ${_('Calculating Repository Size...')}
-                      </span>
-                % endif
+                </div>
+            </div>
+          </div>
+        </div>
 
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
+            ${_('Repository size')}:
+          </div>
+          <div class="right-content">
+            <div class="commit-info">
+                <div class="tags">
+                   ## repo size
+                    % if commit_rev == -1:
+                          <span class="stats-bullet">0 B</span>
+                    % else:
+                          <span>
+                              <a href="#showSize" onclick="calculateSize(); $(this).hide(); return false" id="show-repo-size">Show repository size</a>
+                          </span>
+                          <span class="stats-bullet" id="repo_size_container" style="display:none">
+                              ${_('Calculating Repository Size...')}
+                          </span>
+                    % endif
                 </div>
             </div>
           </div>
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
             ${_('Description')}:
           </div>
           <div class="right-content">
             <div class="input ${summary(c.show_stats)}">
                 <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
                 ${dt.repo_desc(c.rhodecode_db_repo.description_safe, c.visual.stylify_metatags)}
             </div>
           </div>
         </div>
 
         % if show_downloads:
           <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
             <div class="left-label-summary">
               ${_('Downloads')}:
             </div>
             <div class="right-content">
               <div class="input ${summary(c.show_stats)} downloads">
                 % if c.rhodecode_repo and len(c.rhodecode_repo.commit_ids) == 0:
                   <span class="disabled">
                     ${_('There are no downloads yet')}
                   </span>
                 % elif not c.enable_downloads:
                     <span class="disabled">
                         ${_('Downloads are disabled for this repository')}.
                     </span>
                     % if h.HasPermissionAll('hg.admin')('enable downloads on from summary'):
                        ${h.link_to(_('Enable downloads'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_downloads'))}
                     % endif
                 % else:
                     <span class="enabled">
                         <a id="archive_link" class="btn btn-small" href="${h.route_path('repo_archivefile',repo_name=c.rhodecode_db_repo.repo_name,fname='tip.zip')}">
                             <i class="icon-archive"></i> tip.zip
                             ## replaced by some JS on select
                         </a>
                     </span>
                     ${h.hidden('download_options')}
                 % endif
               </div>
             </div>
           </div>
         % endif
 
         ## Statistics
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
             ${_('Statistics')}:
           </div>
           <div class="right-content">
             <div class="input ${summary(c.show_stats)} statistics">
               % if c.show_stats:
                 <div id="lang_stats" class="enabled">
                     ${_('Calculating Code Statistics...')}
                 </div>
               % else:
                   <span class="disabled">
                       ${_('Statistics are disabled for this repository')}.
                   </span>
                   % if h.HasPermissionAll('hg.admin')('enable stats on from summary'):
                      ${h.link_to(_('Enable statistics'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_statistics'))}
                   % endif
               % endif
             </div>
 
           </div>
         </div>
 
     </div><!--end summary-detail-->
 </%def>
 
 <%def name="summary_stats(gravatar_function)">
     <div class="sidebar-right">
       <div class="summary-detail-header">
         <h4 class="item">
              ${_('Owner')}
         </h4>
       </div>
       <div class="sidebar-right-content">
         ${gravatar_function(c.rhodecode_db_repo.user.email, 16)}
       </div>
     </div><!--end sidebar-right-->
 </%def>

rhodecode/templates/summary/summary.mako

@@ -1,129 +1,125 b''
 <%inherit file="/summary/summary_base.mako"/>
 
 <%namespace name="components" file="/summary/components.mako"/>
 
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='summary')}
 </%def>
 
 <%def name="main()">
 
 <div class="title">
     ${self.repo_page_title(c.rhodecode_db_repo)}
     <ul class="links icon-only-links block-right">
       <li>
      %if c.rhodecode_user.username != h.DEFAULT_USER:
        <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}"><i class="icon-rss-sign"></i></a>
      %else:
        <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name)}" title="${_('RSS Feed')}"><i class="icon-rss-sign"></i></a>
      %endif
       </li>
     </ul>
 </div>
 
 <div id="repo-summary" class="summary">
     ${components.summary_detail(breadcrumbs_links=self.breadcrumbs_links(), show_downloads=True)}
     ${components.summary_stats(gravatar_function=self.gravatar_with_user)}
 </div><!--end repo-summary-->
 
 
 <div class="box" >
     %if not c.repo_commits:
         <div class="title">
           <h3>${_('Quick start')}</h3>
         </div>
      %endif
     <div class="table">
         <div id="shortlog_data">
             <%include file='summary_commits.mako'/>
         </div>
     </div>
 </div>
 
 %if c.readme_data:
 <div id="readme" class="anchor">
 <div class="box" >
     <div class="title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_rev[0], c.rhodecode_db_repo.landing_rev[1]))}">
         <h3 class="breadcrumbs">
             <a href="${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.rhodecode_db_repo.landing_rev[1],f_path=c.readme_file)}">${c.readme_file}</a>
         </h3>
     </div>
     <div class="readme codeblock">
       <div class="readme_box">
         ${c.readme_data|n}
       </div>
     </div>
 </div>
 </div>
 %endif
 
 <script type="text/javascript">
 $(document).ready(function(){
 
     var showCloneField = function(clone_url_format){
         $.each(['http', 'http_id', 'ssh'], function (idx, val) {
             if(val === clone_url_format){
                 $('#clone_option_' + val).show();
                 $('#clone_option').val(val)
             } else {
                 $('#clone_option_' + val).hide();
             }
         });
     };
     // default taken from session
     showCloneField(templateContext.session_attrs.clone_url_format);
 
     $('#clone_option').on('change', function(e) {
         var selected = $(this).val();
 
         storeUserSessionAttr('rc_user_session_attr.clone_url_format', selected);
         showCloneField(selected)
     });
 
     var initialCommitData = {
         id: null,
         text: 'tip',
         type: 'tag',
         raw_id: null,
         files_url: null
     };
 
     select2RefSwitcher('#download_options', initialCommitData);
 
     // on change of download options
     $('#download_options').on('change', function(e) {
         // format of Object {text: "v0.0.3", type: "tag", id: "rev"}
         var ext = '.zip';
         var selected_cs = e.added;
         var fname = e.added.raw_id + ext;
         var href = pyroutes.url('repo_archivefile', {'repo_name': templateContext.repo_name, 'fname':fname});
         // set new label
         $('#archive_link').html('<i class="icon-archive"></i> {0}{1}'.format(escapeHtml(e.added.text), ext));
 
         // set new url to button,
         $('#archive_link').attr('href', href)
     });
 
 
-    // load details on summary page expand
-    $('#summary_details_expand').on('click', function() {
+    // calculate size of repository
+    calculateSize = function () {
 
         var callback = function (data) {
             % if c.show_stats:
                 showRepoStats('lang_stats', data);
             % endif
         };
 
-        showRepoSize(
-            'repo_size_container',
-            templateContext.repo_name,
-            templateContext.repo_landing_commit,
-            callback);
+        showRepoSize('repo_size_container', templateContext.repo_name, templateContext.repo_landing_commit, callback);
 
-    })
+    }
 
 })
 </script>
 
 </%def>