- Fix fit_string_to_size() renders browser and ui unresponsive (#1488207): ...

alecpl

2011-11-27 79db33098381dd843cd8b9a1932688d3bafd5cc4

- Fix fit_string_to_size() renders browser and ui unresponsive (#1488207):
  1) improve its performance by half,
  2) don't call it on UI init, it's called after getunread action
  3) don't call it for big number of folders (limit is 100 for IE and 500 for others)

 CHANGELOG

@@ -1,6 +1,7 @@
CHANGELOG Roundcube Webmail
===========================

- Fix fit_string_to_size() renders browser and ui unresponsive (#1488207)
- Fix handling of invalid characters in request (#1488124)
- Fix merging some configuration options in update.sh script (#1485864)
- Fix so TEXT key will remove all HEADER keys in IMAP SEARCH (#1488208)

 skins/default/functions.js

@@ -570,7 +570,6 @@
      rcmail.addEventListener('responseaftergetunread', rcube_render_mailboxlist);
      rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist);
      rcmail.addEventListener('aftercollapse-folder', rcube_render_mailboxlist);
      rcube_render_mailboxlist();
    }

    if (rcmail.env.action == 'compose')
@@ -592,12 +591,16 @@
// Abbreviate mailbox names to fit width of the container
function rcube_render_mailboxlist()
{
  if (bw.ie6)  // doesn't work well on IE6
  var list = $('#mailboxlist > li a, #mailboxlist ul:visible > li a');

  // it's too slow with really big number of folders, especially on IE
  if (list.length > 500 * (bw.ie ? 0.2 : 1))
    return;

  $('#mailboxlist > li a, #mailboxlist ul:visible > li a').each(function(){
    var elem = $(this);
    var text = elem.data('text');
  list.each(function(){
    var elem = $(this),
      text = elem.data('text');

    if (!text) {
      text = elem.text().replace(/\s+\(.+$/, '');
      elem.data('text', text);
@@ -615,34 +618,45 @@
// inspired by https://gist.github.com/24261/7fdb113f1e26111bd78c0c6fe515f6c0bf418af5
function fit_string_to_size(str, elem, len)
{
    var result = str;
    var ellip = '...';
    var span = $('<b>').css({ visibility:'hidden', padding:'0px' }).appendTo(elem).get(0);
  var w, span, result = str, ellip = '...';

    // on first run, check if string fits into the length already.
    span.innerHTML = result;
    if (span.offsetWidth > len) {
        var cut = Math.max(1, Math.floor(str.length * ((span.offsetWidth - len) / span.offsetWidth) / 2)),
          mid = Math.floor(str.length / 2);
        var offLeft = mid, offRight = mid;
        while (true) {
            offLeft = mid - cut;
            offRight = mid + cut;
            span.innerHTML = str.substring(0,offLeft) + ellip + str.substring(offRight);
  if (!rcmail.env.tmp_span) {
    // it should be appended to elem to use the same css style
    // but for performance reasons we'll append it to body (once)
    span = $('<b>').css({visibility: 'hidden', padding: '0px'})
      .appendTo($('body', document)).get(0);
    rcmail.env.tmp_span = span;
  }
  else {
    span = rcmail.env.tmp_span;
  }
  span.innerHTML = result;

            // break loop if string fits size
            if (span.offsetWidth <= len || offLeft < 3)
              break;
  // on first run, check if string fits into the length already.
  w = span.offsetWidth;
  if (w > len) {
    var cut = Math.max(1, Math.floor(str.length * ((w - len) / w) / 2)),
      mid = Math.floor(str.length / 2),
      offLeft = mid,
      offRight = mid;

            cut++;
        }
    while (true) {
      offLeft = mid - cut;
      offRight = mid + cut;
      span.innerHTML = str.substring(0,offLeft) + ellip + str.substring(offRight);

        // build resulting string
        result = str.substring(0,offLeft) + ellip + str.substring(offRight);
      // break loop if string fits size
      if (offLeft < 3 || span.offsetWidth)
        break;

      cut++;
    }
    
    span.parentNode.removeChild(span);
    return result;

    // build resulting string
    result = str.substring(0,offLeft) + ellip + str.substring(offRight);
  }

  return result;
}

// Optional parameters used by TinyMCE