- 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)

2 files changed, 47 insertions, 32 deletions

diff --git a/CHANGELOG b/CHANGELOG
index f4155ec52..486a73a8f 100644
--- a/CHANGELOG
+++ b/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)
diff --git a/skins/default/functions.js b/skins/default/functions.js
index 5d55447d6..8482e375a 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -570,7 +570,6 @@ function rcube_init_mail_ui()
       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 @@ function iframe_events()
 // 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 @@ function rcube_render_mailboxlist()
 // 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);
-
-    // 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);
-
-            // break loop if string fits size
-            if (span.offsetWidth <= len || offLeft < 3)
-              break;
-
-            cut++;
-        }
-
-        // build resulting string
-        result = str.substring(0,offLeft) + ellip + str.substring(offRight);
+  var w, span, result = str, ellip = '...';
+
+  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;
+
+  // 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;
+
+    while (true) {
+      offLeft = mid - cut;
+      offRight = mid + cut;
+      span.innerHTML = 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