From c1859f89d19ffcfc97c4eb15e1aa02eeb4e0bcc5 Mon Sep 17 00:00:00 2001 From: Michael M Slusarz Date: Tue, 14 Apr 2009 23:36:47 -0600 Subject: [PATCH] Trimming the fat that has built up over the last year or two. Cutting down on unneeded events, DOM IDs, dynamic DOM generation, duplicate ID lookups, noop function calls, etc. --- imp/js/src/DimpBase.js | 189 +++++++++++++++++-------------------- imp/js/src/DimpCore.js | 49 ++++------ imp/js/src/ViewPort.js | 15 +-- imp/templates/index/index-dimp.inc | 9 ++ imp/themes/screen-dimp.css | 4 +- 5 files changed, 118 insertions(+), 148 deletions(-) diff --git a/imp/js/src/DimpBase.js b/imp/js/src/DimpBase.js index 54ba1554d..7a18e4554 100644 --- a/imp/js/src/DimpBase.js +++ b/imp/js/src/DimpBase.js @@ -9,7 +9,7 @@ var DimpBase = { // Vars used and defaulting to null/false: - // cfolderaction, fl_visible, folder, folderswitch, isvisible, + // cfolderaction, fl_visible, folder, folderswitch, // message_list_template, offset, pollPE, pp, sfolder, uid, viewport bcache: $H(), cacheids: {}, @@ -20,6 +20,12 @@ var DimpBase = { searchid: 'dimp\x00qsearch', tcache: {}, + // Preview pane cache size is 20 entries. Given that a reasonable guess + // of an average e-mail size is 10 KB (including headers), also make + // an estimate that the JSON data size will be approx. 10 KB. 200 KB + // should be a fairly safe caching value for any recent browser. + ppcachesize: 20, + // Message selection functions // vs = (ViewPort_Selection) A ViewPort_Selection object. @@ -400,14 +406,14 @@ var DimpBase = { onSlide: settitle, onContent: function(row) { var bg, re, search, u, - thread = ((this.viewport.getMetaData('sortby') == DIMP.conf.sortthread) && this.viewport.getMetaData('thread')); + thread = this.viewport.getMetaData('thread') || $H(); row.subjectdata = row.status = ''; row.subjecttitle = row.subject; // Add thread graphics - if (thread && thread.get(row.imapuid)) { - u = thread.get(row.imapuid); + u = thread.get(row.imapuid); + if (u) { $R(0, u.length, true).each(function(i) { var c = u.charAt(i); if (!this.tcache[c]) { @@ -468,14 +474,18 @@ var DimpBase = { var row, ssc, tmp, l = this.viewport.getMetaData('label'); + this.setMessageListTitle(); + if (!this.isSearch()) { + this.setFolderLabel(this.folder, this.viewport.getMetaData('unseen') || 0); + } + this.updateTitle(); + rows.each(function(row) { // Add context menu this._addMouseEvents({ id: row.domid, type: row.menutype }); new Drag(row.domid, this._msgDragConfig); }, this); - this.setMessageListTitle(); - if (this.uid) { row = this.viewport.getSelection().search({ imapuid: { equal: [ this.uid ] }, view: { equal: [ this.folder ] } }); if (row.size()) { @@ -499,6 +509,7 @@ var DimpBase = { if (this.folderswitch) { this.folderswitch = false; + if (this.folder == DIMP.conf.spam_mbox) { if (!DIMP.conf.spam_spammbox && $('button_spam')) { [ $('button_spam').up(), $('ctx_message_spam') ].invoke('hide'); @@ -511,11 +522,7 @@ var DimpBase = { [ $('button_spam').up(), $('ctx_message_spam') ].invoke('show'); } if ($('button_ham')) { - if (DIMP.conf.ham_spammbox) { - [ $('button_ham').up(), $('ctx_message_ham') ].invoke('hide'); - } else { - [ $('button_ham').up(), $('ctx_message_ham') ].invoke('show'); - } + [ $('button_ham').up(), $('ctx_message_ham') ].invoke(DIMP.conf.ham_spammbox ? 'hide' : 'show'); } } @@ -539,13 +546,6 @@ var DimpBase = { } this.setSortColumns(ssc); - - if (this.isSearch()) { - this.resetSelected(); - } else { - this.setFolderLabel(this.folder, this.viewport.getMetaData('unseen') || 0); - } - this.updateTitle(); }.bind(this), onFetch: this.msgListLoading.bind(this, true), onEndFetch: this.msgListLoading.bind(this, false), @@ -563,9 +563,6 @@ var DimpBase = { } this.msgListLoading(false); }.bind(this), - onFirstContent: function() { - this.clearPreviewPane(); - }.bind(this), onClearRows: function(r) { r.each(function(row) { if (row.readAttribute('id')) { @@ -573,15 +570,6 @@ var DimpBase = { } }, this); }.bind(this), - onBeforeResize: function() { - var sel = this.viewport.getSelected(); - this.isvisible = (sel.size() == 1) && (this.viewport.isVisible(sel.get('rownum').first()) == 0); - }.bind(this), - onAfterResize: function() { - if (this.isvisible) { - this.viewport.scrollTo(this.viewport.getSelected().get('rownum').first()); - } - }.bind(this), onCachedList: function(id) { var tmp, vs; if (!this.cacheids[id]) { @@ -796,10 +784,10 @@ var DimpBase = { } }, - onResize: function(noupdate, nowait) + onResize: function() { if (this.viewport) { - this.viewport.onResize(noupdate, nowait); + this.viewport.onResize(false, false); } this._resizeIE6(); }, @@ -1031,6 +1019,7 @@ var DimpBase = { if (r.js) { eval(r.js.join(';')); } + this._addHistory('msg:' + row.view + ':' + row.imapuid); }, @@ -1066,11 +1055,8 @@ var DimpBase = { ids.each(function(i) { delete this.ppcache[i]; }, this); - // Preview pane cache size is 20 entries. Given that a reasonable guess - // of an average e-mail size is 10 KB (including headers), also make - // an estimate that the JSON data size will be approx. 10 KB. 200 KB - // should be a fairly safe caching value for any recent browser. - if (this.ppfifo.size() > 20) { + + if (this.ppfifo.size() > this.ppcachesize) { delete this.ppcache[this.ppfifo.shift()]; } }, @@ -1099,6 +1085,7 @@ var DimpBase = { if (this.viewport) { this.viewport.setMetaData({ unseen: unseen }, mbox); } + this.setFolderLabel(mbox, unseen); if (this.folder == mbox) { @@ -1110,6 +1097,7 @@ var DimpBase = { { var offset, rows = this.viewport.getMetaData('total_rows'); + if (rows > 0) { offset = this.viewport.currentOffset(); $('msgHeader').update(DIMP.text.messages + ' ' + (offset + 1) + ' - ' + (Math.min(offset + this.viewport.getPageSize(), rows)) + ' ' + DIMP.text.of + ' ' + rows); @@ -1120,8 +1108,9 @@ var DimpBase = { setFolderLabel: function(f, unseen) { - var elt, fid = this.getFolderId(f); - elt = $(fid); + var fid = this.getFolderId(f), + elt = $(fid); + if (!elt || !elt.hasAttribute('u')) { return; } @@ -1327,6 +1316,11 @@ var DimpBase = { elt = e.element(), kc = e.keyCode || e.charCode; + // Only catch keyboard shortcuts in message list view. + if (!$('dimpmain_folder').visible()) { + return; + } + // Form catching - normally we will ignore, but certain cases we want // to catch. form = e.findElement('FORM'); @@ -1363,11 +1357,6 @@ var DimpBase = { return; } - // Only catch keyboard shortcuts in message list view. - if (!$('dimpmain_folder').visible()) { - return; - } - sel = this.viewport.getSelected(); switch (kc) { @@ -1455,25 +1444,21 @@ var DimpBase = { return; } - var elt = orig = e.element(), + var elt = e.element(), tmp; - while (Object.isElement(elt)) { - switch (elt.readAttribute('id')) { - case 'msgList': - if (!orig.hasClassName('msgRow')) { - orig = orig.up('.msgRow'); - } - if (orig) { - tmp = this.viewport.createSelection('domid', orig.identify()).get('dataob').first(); - tmp.draft ? DimpCore.compose('resume', { folder: tmp.view, uid: tmp.imapuid }) : this.msgWindow(tmp); - } - e.stop(); - return; - } + if (!elt.hasClassName('msgRow')) { + elt = elt.up('.msgRow'); + } - elt = elt.up(); + if (elt) { + tmp = this.viewport.createSelection('domid', elt.identify()).get('dataob').first(); + tmp.draft + ? DimpCore.compose('resume', { folder: tmp.view, uid: tmp.imapuid }) + : this.msgWindow(tmp); } + + e.stop(); }, clickHandler: function(parentfunc, e) @@ -1489,16 +1474,6 @@ var DimpBase = { id = elt.readAttribute('id'); switch (id) { - case 'RB_Folder_ok': - this.cfolderaction(e); - e.stop(); - return; - - case 'RB_Folder_cancel': - this._closeRedBox(); - e.stop(); - return; - case 'normalfolders': case 'specialfolders': this._handleFolderMouseClick(e); @@ -1611,6 +1586,17 @@ var DimpBase = { case 'quicksearch_close': this.quicksearchClear(); break; + + default: + if (elt.hasClassName('RBFolderOk')) { + this.cfolderaction(e); + e.stop(); + return; + } else if (elt.hasClassName('RBFolderCancel')) { + this._closeRedBox(); + e.stop(); + return; + } } elt = elt.up(); @@ -1619,16 +1605,13 @@ var DimpBase = { parentfunc(e); }, - mouseHandler: function(e, type) + mouseoverHandler: function(e) { - var elt = e.element(); - - switch (type) { - case 'over': - if (DragDrop.Drags.drag && elt.hasClassName('exp')) { + if (DragDrop.Drags.drag) { + var elt = e.element(); + if (elt.hasClassName('exp')) { this._toggleSubFolder(elt.up(), 'exp'); } - break; } }, @@ -1640,36 +1623,27 @@ var DimpBase = { } folder = $(folder); - var n = this._createFolderForm(function(e) { this._folderAction(folder, e, 'rename'); return false; }.bindAsEventListener(this), DIMP.text.rename_prompt); + var n = this._createFolderForm(this._folderAction.bindAsEventListener(this, folder, 'rename'), DIMP.text.rename_prompt); n.down('input').setValue(folder.readAttribute('l')); }, /* Handle insert folder actions. */ createBaseFolder: function() { - this._createFolderForm(function(e) { this._folderAction('', e, 'create'); }.bindAsEventListener(this), DIMP.text.create_prompt); + this._createFolderForm(this._folderAction.bindAsEventListener(this, '', 'create'), DIMP.text.create_prompt); }, createSubFolder: function(folder) { - if (Object.isUndefined(folder)) { - return; + if (!Object.isUndefined(folder)) { + this._createFolderForm(this._folderAction.bindAsEventListener(this, $(folder), 'createsub'), DIMP.text.createsub_prompt); } - - this._createFolderForm(function(e) { this._folderAction($(folder), e, 'createsub'); }.bindAsEventListener(this), DIMP.text.createsub_prompt); }, _createFolderForm: function(action, text) { - var n = new Element('FORM', { action: '#', id: 'RB_folder' }).insert( - new Element('P').insert(text) - ).insert( - new Element('INPUT', { type: 'text', size: 15 }) - ).insert( - new Element('INPUT', { type: 'button', id: 'RB_Folder_ok', className: 'button', value: DIMP.text.ok }) - ).insert( - new Element('INPUT', { type: 'button', id: 'RB_Folder_cancel', className: 'button', value: DIMP.text.cancel }) - ); + var n = $($('folderform').down().cloneNode(true)); + n.down('P').insert(text); this.cfolderaction = action; @@ -1685,7 +1659,7 @@ var DimpBase = { this.cfolderaction = null; }, - _folderAction: function(folder, e, mode) + _folderAction: function(e, folder, mode) { this._closeRedBox(); @@ -1851,7 +1825,6 @@ var DimpBase = { case 'virtual': e.stop(); return this.go('folder:' + li.readAttribute('mbox')); - break; } } }, @@ -1859,8 +1832,16 @@ var DimpBase = { _toggleSubFolder: function(base, mode) { base = $(base); - var opts = { duration: 0.2, queue: { position: 'end', scope: 'subfolder', limit: 2 } }, - s = $(this.getSubFolderId(base.id)); + var opts = { + duration: 0.2, + queue: { + position: 'end', + scope: 'subfolder', + limit: 2 + } + }, + s = $(this.getSubFolderId(base.readAttribute('id'))); + if (s && (mode == 'tog' || (mode == 'exp' && !s.visible()) || @@ -1869,11 +1850,7 @@ var DimpBase = { opts.afterFinish = this._sizeFolderlist; } base.firstDescendant().writeAttribute({ className: s.visible() ? 'exp' : 'col' }); - if (s.visible()) { - Effect.BlindUp(s, opts); - } else { - Effect.BlindDown(s, opts); - } + Effect.toggle(s, 'blind', opts); } }, @@ -1913,7 +1890,7 @@ var DimpBase = { parent_e = $('specialfolders'); } else { parent_e = $(this.getSubFolderId(this.getFolderId(ob.pa))); - parent_e = (parent_e) ? parent_e.down() : $('normalfolders'); + parent_e = parent_e ? parent_e.down() : $('normalfolders'); } ll = mbox.toLowerCase(); @@ -2260,10 +2237,14 @@ var DimpBase = { /* Register global handlers now. */ document.observe('keydown', this.keydownHandler.bindAsEventListener(this)); - document.observe('mouseover', this.mouseHandler.bindAsEventListener(this, 'over')); - document.observe('dblclick', this.dblclickHandler.bindAsEventListener(this)); Event.observe(window, 'resize', this.onResize.bind(this, false, false)); + /* Limit to folders sidebar only. */ + $('foldersSidebar').observe('mouseover', this.mouseoverHandler.bindAsEventListener(this)); + + /* Limit to msgList only. */ + $('msgList').observe('dblclick', this.dblclickHandler.bindAsEventListener(this)); + $('dimpLoading').hide(); $('dimpPage').show(); @@ -2482,5 +2463,5 @@ DimpCore.clickHandler = DimpCore.clickHandler.wrap(DimpBase.clickHandler.bind(Di DimpCore.contextOnClick = DimpCore.contextOnClick.wrap(DimpBase.contextOnClick.bind(DimpBase)); DimpCore.contextOnShow = DimpCore.contextOnShow.wrap(DimpBase.contextOnShow.bind(DimpBase)); -/* Initialize global event handlers. */ +/* Initialize onload handler. */ document.observe('dom:loaded', DimpBase.onDomLoad.bind(DimpBase)); diff --git a/imp/js/src/DimpCore.js b/imp/js/src/DimpCore.js index 0244495c7..90e58459d 100644 --- a/imp/js/src/DimpCore.js +++ b/imp/js/src/DimpCore.js @@ -25,7 +25,7 @@ var DimpCore = { debug: function(label, e) { if (!this.is_logout && DIMP.conf.debug) { - if (console.error) { + if (console && console.error) { // Firebug error reporting. console.error(label, e); } else { @@ -172,9 +172,7 @@ var DimpCore = { } this.server_error = 0; - if (!r.msgs_noauto) { - this.showNotifications(r.msgs); - } + this.showNotifications(r.msgs); if (this.onDoActionComplete) { this.onDoActionComplete(r); @@ -195,6 +193,8 @@ var DimpCore = { } msgs.find(function(m) { + var log = 0; + switch (m.type) { case 'dimp.timeout': this.logout(DIMP.conf.timeout_url); @@ -204,20 +204,12 @@ var DimpCore = { case 'horde.message': case 'horde.success': case 'horde.warning': + log = 1; + // Fall through to below case. + case 'imp.reply': case 'imp.forward': case 'imp.redirect': - var log = 0; - - switch (m.type) { - case 'horde.error': - case 'horde.message': - case 'horde.success': - case 'horde.warning': - log = 1; - break; - } - this.Growler.growl(m.message, { className: m.type.replace('.', '-'), life: 8, @@ -283,8 +275,7 @@ var DimpCore = { cnt = alist.size(); if (cnt > 15) { - tmp = $('largeaddrspan').cloneNode(true); - tmp.writeAttribute('id', 'largeaddrspan_active'); + tmp = $('largeaddrspan').cloneNode(true).writeAttribute('id', 'largeaddrspan_active'); elt.insert(tmp); base = tmp.down('.dispaddrlist'); tmp = tmp.down(1); @@ -363,14 +354,15 @@ var DimpCore = { switch (id) { case 'partlist_toggle': - tmp = $('partlist'); $('partlist_col', 'partlist_exp').invoke('toggle'); - opts = { duration: 0.2, queue: { position: 'end', scope: 'partlist', limit: 2 } }; - if (tmp.visible()) { - Effect.BlindUp(tmp, opts); - } else { - Effect.BlindDown(tmp, opts); - } + Effect.toggle('partlist', 'blind', { + duration: 0.2, + queue: { + position: 'end', + scope: 'partlist', + limit: 2 + } + }); break; case 'msg_print': @@ -382,12 +374,7 @@ var DimpCore = { break; case 'alertsloglink': - tmp = $('alertsloglink').down('A'); - if (this.Growler.toggleLog()) { - tmp.update(DIMP.text.hidealog); - } else { - tmp.update(DIMP.text.showalog); - } + $('alertsloglink').down('A').update(this.Growler.toggleLog() ? DIMP.text.hidealog : DIMP.text.showalog); break; case 'largeaddrspan_active': @@ -463,7 +450,7 @@ var DimpCore = { } } catch (e) {} - /* Add Growler notifications. */ + /* Add Growler notification handler. */ this.Growler = new Growler({ location: 'br', log: true, diff --git a/imp/js/src/ViewPort.js b/imp/js/src/ViewPort.js index 359f17411..65db473f7 100644 --- a/imp/js/src/ViewPort.js +++ b/imp/js/src/ViewPort.js @@ -37,7 +37,7 @@ var ViewPort = Class.create({ this.splitbar_loc = opts.page_size; this.showSplitPane(opts.show_split_pane); - this.isbusy = this.line_height = this.page_size = this.splitbar = this.uc_run = this.view = this.viewport_init = null; + this.isbusy = this.line_height = this.old_page_size = this.page_size = this.splitbar = this.viewport_init = null; this.request_num = 1; }, @@ -230,7 +230,8 @@ var ViewPort = Class.create({ // nowait = (boolean) TODO onResize: function(noupdate, nowait) { - if (!this.uc_run || !this.opts.content.visible()) { + if (!this.opts.content.childElements().size() || + !this.opts.content.visible()) { return; } @@ -624,14 +625,6 @@ var ViewPort = Class.create({ return false; } - if (!this.uc_run) { - // Code for viewport that only needs to be initialized once. - this.uc_run = true; - if (this.opts.onFirstContent) { - this.opts.onFirstContent(); - } - } - var c = this.opts.content, c_nodes = [], page_size = this.getPageSize(), @@ -901,7 +894,7 @@ var ViewPort = Class.create({ }.bind(this), onEnd: function() { this.page_size = this.sp.lines; - this._renderViewport(); + this.onResize(false, true); if (this.opts.onSplitBarChange && this.sp.orig != this.sp.lines) { this.opts.onSplitBarChange(); diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc index acdfd0db9..00ebf20b9 100644 --- a/imp/templates/index/index-dimp.inc +++ b/imp/templates/index/index-dimp.inc @@ -423,3 +423,12 @@ function _simpleButton($id, $text, $image, $imagedir = null) + + diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css index db9ad2ddf..b1db5e4f3 100644 --- a/imp/themes/screen-dimp.css +++ b/imp/themes/screen-dimp.css @@ -833,12 +833,12 @@ a.address:hover img { } /* Redbox styles. */ -#RB_folder { +.RBForm { width: 20em; padding: 6px; border: 1px solid #ccc; } -#RB_folder input { +.RBForm input { margin: .2em; } -- 2.11.0