Speedup UI by using CSS sprites and etags/expires/deflate for static files

36 files changed, 146 insertions, 44 deletions

diff --git a/.htaccess b/.htaccess
index 05a2ed7c2..98c5fecaf 100644
--- a/.htaccess
+++ b/.htaccess
@@ -28,6 +28,22 @@ php_value	mbstring.func_overload	0
 RewriteEngine On
 RewriteRule ^favicon.ico$ skins/default/images/favicon.ico
 </IfModule>
- 
+
+<IfModule mod_deflate.c>
+SetOutputFilter DEFLATE
+</IfModule>
+
+<IfModule mod_headers.c>
+# replace 'append' with 'merge' for Apache version 2.2.9 and later
+Header append Cache-Control public env=!NO_CACHE
+</IfModule>
+
+<IfModule mod_expires.c>
+ExpiresActive On
+ExpiresDefault "access plus 1 month"
+</IfModule>
+
+FileETag MTime
+
 Order deny,allow
 Allow from all
diff --git a/CHANGELOG b/CHANGELOG
index 4cdb5e860..d9d14a2e0 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,7 @@
 CHANGELOG RoundCube Webmail
 ===========================
 
+- Speedup UI by using CSS sprites and etags/expires/deflate in Apache config (#1484858,#1485800)
 - Support UID EXPUNGE: remove only moved/deleted messages
 - Add drag cancelling with ESC key (#1484344)
 - Support initial identity name from virtuser_query (#1484003)
diff --git a/INSTALL b/INSTALL
index 42fd4bbef..82f01ce6b 100644
--- a/INSTALL
+++ b/INSTALL
@@ -75,6 +75,11 @@ You need sqlite 2 (preferably 2.8) to setup the sqlite db
 an example how you can setup the sqlite.db for roundcube:
 
 # sqlite -init SQL/sqlite.initial.sql sqlite.db
+Loading resources from SQL/sqlite.initial.sql
+SQLite version 2.8.16
+Enter ".help" for instructions
+sqlite> .exit
+# chmod o+rw sqlite.db
 
 Make sure your configuration points to the sqlite.db file and that the
 webserver can write to the file and the directory containing the file.
@@ -119,3 +124,80 @@ If you already have a previous version of RoundCube installed,
 please refer to the instructions in UPGRADING guide.
 
 
+OPTIMISING
+==========
+
+There are two forms of optimisation here, compression and caching, both aimed
+at increasing an end user's experience using RoundCube Webmail. Compression
+allows the static web pages to be delivered with less bandwidth. The index.php
+of RoundCube Webmail already enables compression on its output. The settings
+below allow compression to occur for all static files. Caching sets HTTP 
+response headers that enable a user's web client to understand what is static
+and how to cache it.
+
+The caching directives used are:
+ * Etags - sets at tag so the client can request is the page has changed
+ * Cache-control - defines the age of the page and that the page is 'public'
+   This enables clients to cache javascript files that don't have private 
+   information between sessions even if using HTTPS. It also allows proxies
+   to share the same cached page between users.
+ * Expires - provides another hint to increase the lifetime of static pages.
+
+For more information refer to RFC 2616.
+
+Side effects:
+-------------
+These directives are designed for production use. If you are using this in
+a development environment you may get horribly confused if your webclient
+is caching stuff that you changed on the server. Disabling the expires 
+parts below should save you some grief.
+
+If you are changing the skins, it is recommended that you copy content to 
+a different directory apart from 'default'.
+
+Apache:
+-------
+To enable these features in apache the following modules need to be enabled:
+ * mod_compress
+ * mod_expire
+ * mod_headers
+
+The optimisation is already included in the .htaccess file in the top 
+directory of your installation.
+
+If you are using Apache version 2.2.9 and later, in the .htaccess file
+change the 'append' word to 'merge' for a more correct response. Keeping
+as 'append' shouldn't cause any problems though changing to merge will 
+eliminate the possibility of duplicate 'public' headers in Cache-control.
+
+Lighttpd:
+---------
+With Lightty the addition of Expire: tags by mod_expire is incompatible with
+the addition of "Cache-control: public". Using Cache-control 'public' is 
+used below as it is assumed to give a better caching result.
+
+Enable modules in server.modules:
+    "mod_setenv"
+    "mod_compress"
+
+Mod_compress is a server side cache of compressed files to improve its performance.
+
+$HTTP["host"] == "www.example.com" {
+
+    static-file.etags = "enable"
+    # http://redmine.lighttpd.net/projects/lighttpd/wiki/Etag.use-mtimeDetails
+    etag.use-mtime = "enable"
+
+    # http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ModSetEnv
+    $HTTP["url"] =~ "^/roundcubemail/(plugins|skins|program)" {
+        setenv.add-response-header  = ( "Cache-Control" => "public, max-age=2592000")
+    }
+
+    # http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ModCompress
+    # set compress.cache-dir to somewhere outside the docroot.
+    compress.cache-dir   = var.statedir + "/cache/compress"
+
+    compress.filetype = ("text/plain", "text/html", "text/javascript", "text/css", "text/xml", "image/gif", "image/png")
+}
+
+
diff --git a/skins/default/addresses.css b/skins/default/addresses.css
index d864811c9..70b148a2c 100644
--- a/skins/default/addresses.css
+++ b/skins/default/addresses.css
@@ -171,8 +171,7 @@ body.iframe,
   color: #333;
   font-size: 11px;
   font-weight: bold;
-  background-color: #EBEBEB;
-  background-image: url(images/listheader_aqua.gif);
+  background: url('images/listheader.gif') top left repeat-x #CCC;
   white-space: nowrap;
 }
 
diff --git a/skins/default/common.css b/skins/default/common.css
index 046843e94..24762f983 100644
--- a/skins/default/common.css
+++ b/skins/default/common.css
@@ -151,15 +151,13 @@ img
   z-index: 2;
 }
 
-#taskbar a,
-#taskbar a:active,
-#taskbar a:visited
+#taskbar a
 {
   font-size: 11px;
   color: #666666;
   text-decoration: none;
   padding: 6px 14px 6px 27px;
-  background-repeat: no-repeat;
+  background: url('images/taskicons.gif') no-repeat;
 }
 
 #taskbar a:hover
@@ -167,24 +165,24 @@ img
   color: #333333;
 }
 
-a.button-mail
+#taskbar a.button-mail
 {
-  background-image: url(images/buttons/mail.gif);
+  background-position: 0 0;
 }
 
-a.button-addressbook
+#taskbar a.button-addressbook
 {
-  background-image: url(images/buttons/addressbook.gif);
+  background-position: 0 -25px;
 }
 
-a.button-settings
+#taskbar a.button-settings
 {
-  background-image: url(images/buttons/settings.gif);
+  background-position: 0 -50px;
 }
 
-a.button-logout
+#taskbar a.button-logout
 {
-  background-image: url(images/buttons/logout.gif);
+  background-position: 0 -75px;
 }
 
 
@@ -203,15 +201,15 @@ a.button-logout
 {
   width: 400px;
   margin: 0px auto;
-  height: 24px;
-  min-height: 24px;
+  height: 22px;
+  min-height: 22px;
   padding: 8px 10px 8px 46px;
 }
 
 #message div.notice,
 #remote-objects-message
 {
-  background: url(images/display/info.png) 6px 3px no-repeat;
+  background: url('images/display/icons.png') 6px 3px no-repeat;
   background-color: #F7FDCB;
   border: 1px solid #C2D071;
 }
@@ -219,21 +217,21 @@ a.button-logout
 #message div.error,
 #message div.warning
 {
-  background: url(images/display/warning.png) 6px 3px no-repeat;
+  background: url('images/display/icons.png') 6px -97px no-repeat;
   background-color: #EF9398;
   border: 1px solid #DC5757;
 }
 
 #message div.confirmation
 {
-  background: url(images/display/confirm.png) 6px 3px no-repeat;
+  background: url('images/display/icons.png') 6px -47px no-repeat;
   background-color: #A6EF7B;
   border: 1px solid #76C83F;
 }
 
 #message div.loading
 {
-  background: url(images/display/loading.gif) 6px 3px no-repeat;
+  background: url('images/display/loading.gif') 6px 3px no-repeat;
   background-color: #EBEBEB;
   border: 1px solid #CCCCCC;
 }
@@ -274,8 +272,7 @@ a.button-logout
   color: #333;
   font-size: 11px;
   font-weight: bold;
-  background-color: #EBEBEB;
-  background-image: url(images/listheader_aqua.gif);
+  background: url('images/listheader.gif') top left repeat-x #CCC;
 }
 
 /***** common table settings ******/
@@ -287,8 +284,7 @@ table.records-table thead tr td
   vertical-align: middle;
   border-bottom: 1px solid #999999;
   color: #333333;
-  background-color: #EBEBEB;
-  background-image: url(images/listheader_aqua.gif); 
+  background: url('images/listheader.gif') top left repeat-x #CCC;
   font-size: 11px;
   font-weight: bold;
 }
diff --git a/skins/default/ie6hacks.css b/skins/default/ie6hacks.css
index d86fbed51..53c287166 100644
--- a/skins/default/ie6hacks.css
+++ b/skins/default/ie6hacks.css
@@ -5,6 +5,15 @@ img
   behavior: url('skins/default/pngbehavior.htc');
 }
 
+#message div.notice,
+#message div.error,
+#message div.warning,
+#message div.confirmation,
+#remote-objects-message
+{
+  background-image: url(images/display/icons.gif);
+}
+
 ul.toolbarmenu li
 {
   width: 130px;
@@ -15,4 +24,7 @@ ul.toolbarmenu li
   background-image: url('images/messageactions.gif');
 }
 
-
+#mailboxlist li
+{
+  background-image: url('images/icons/folders.gif');
+}
\ No newline at end of file
diff --git a/skins/default/images/buttons/addressbook.gif b/skins/default/images/buttons/addressbook.gif
deleted file mode 100644
index d8c0c1787..000000000
--- a/skins/default/images/buttons/addressbook.gif
+++ /dev/null
diff --git a/skins/default/images/buttons/addressbook.png b/skins/default/images/buttons/addressbook.png
deleted file mode 100644
index 359f33e0f..000000000
--- a/skins/default/images/buttons/addressbook.png
+++ /dev/null
diff --git a/skins/default/images/buttons/inbox_sel.png b/skins/default/images/buttons/inbox_sel.png
index ce65ca791..fe1fa051e 100644
--- a/skins/default/images/buttons/inbox_sel.png
+++ b/skins/default/images/buttons/inbox_sel.png
diff --git a/skins/default/images/buttons/mail.gif b/skins/default/images/buttons/mail.gif
deleted file mode 100644
index 712735daf..000000000
--- a/skins/default/images/buttons/mail.gif
+++ /dev/null
diff --git a/skins/default/images/buttons/mail.png b/skins/default/images/buttons/mail.png
deleted file mode 100644
index 30c1e7635..000000000
--- a/skins/default/images/buttons/mail.png
+++ /dev/null
diff --git a/skins/default/images/buttons/settings.gif b/skins/default/images/buttons/settings.gif
deleted file mode 100644
index 9c609b7a9..000000000
--- a/skins/default/images/buttons/settings.gif
+++ /dev/null
diff --git a/skins/default/images/display/confirm.png b/skins/default/images/display/confirm.png
deleted file mode 100644
index 27265f8a6..000000000
--- a/skins/default/images/display/confirm.png
+++ /dev/null
diff --git a/skins/default/images/display/icons.gif b/skins/default/images/display/icons.gif
new file mode 100644
index 000000000..e6dfb1bc6
--- /dev/null
+++ b/skins/default/images/display/icons.gif
diff --git a/skins/default/images/display/icons.png b/skins/default/images/display/icons.png
new file mode 100644
index 000000000..995ac30e9
--- /dev/null
+++ b/skins/default/images/display/icons.png
diff --git a/skins/default/images/display/info.png b/skins/default/images/display/info.png
deleted file mode 100644
index 85462e4b9..000000000
--- a/skins/default/images/display/info.png
+++ /dev/null
diff --git a/skins/default/images/display/warning.png b/skins/default/images/display/warning.png
deleted file mode 100644
index 9909617f4..000000000
--- a/skins/default/images/display/warning.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-closed.png b/skins/default/images/icons/folder-closed.png
deleted file mode 100644
index 5cbf72a6a..000000000
--- a/skins/default/images/icons/folder-closed.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-drafts.png b/skins/default/images/icons/folder-drafts.png
deleted file mode 100644
index d828b5687..000000000
--- a/skins/default/images/icons/folder-drafts.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-inbox.png b/skins/default/images/icons/folder-inbox.png
deleted file mode 100644
index 995ca8128..000000000
--- a/skins/default/images/icons/folder-inbox.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-junk.png b/skins/default/images/icons/folder-junk.png
deleted file mode 100644
index 06fbd49d5..000000000
--- a/skins/default/images/icons/folder-junk.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-open.png b/skins/default/images/icons/folder-open.png
deleted file mode 100644
index 09ba4b323..000000000
--- a/skins/default/images/icons/folder-open.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-sent.png b/skins/default/images/icons/folder-sent.png
deleted file mode 100644
index 2968ab5e9..000000000
--- a/skins/default/images/icons/folder-sent.png
+++ /dev/null
diff --git a/skins/default/images/icons/folder-trash.png b/skins/default/images/icons/folder-trash.png
deleted file mode 100644
index 0712aaa71..000000000
--- a/skins/default/images/icons/folder-trash.png
+++ /dev/null
diff --git a/skins/default/images/icons/folders.gif b/skins/default/images/icons/folders.gif
new file mode 100644
index 000000000..b5984b823
--- /dev/null
+++ b/skins/default/images/icons/folders.gif
diff --git a/skins/default/images/icons/folders.png b/skins/default/images/icons/folders.png
new file mode 100644
index 000000000..d244f326c
--- /dev/null
+++ b/skins/default/images/icons/folders.png
diff --git a/skins/default/images/icons/sort.gif b/skins/default/images/icons/sort.gif
new file mode 100644
index 000000000..f8f275690
--- /dev/null
+++ b/skins/default/images/icons/sort.gif
diff --git a/skins/default/images/listheader.gif b/skins/default/images/listheader.gif
new file mode 100644
index 000000000..e7f501537
--- /dev/null
+++ b/skins/default/images/listheader.gif
diff --git a/skins/default/images/listheader_aqua.gif b/skins/default/images/listheader_aqua.gif
deleted file mode 100644
index 59f44ea98..000000000
--- a/skins/default/images/listheader_aqua.gif
+++ /dev/null
diff --git a/skins/default/images/listheader_dark.gif b/skins/default/images/listheader_dark.gif
deleted file mode 100644
index cd35555b5..000000000
--- a/skins/default/images/listheader_dark.gif
+++ /dev/null
diff --git a/skins/default/images/listheader_light.gif b/skins/default/images/listheader_light.gif
deleted file mode 100644
index 8d9e6cac0..000000000
--- a/skins/default/images/listheader_light.gif
+++ /dev/null
diff --git a/skins/default/images/sort_asc.gif b/skins/default/images/sort_asc.gif
deleted file mode 100644
index 2427311b4..000000000
--- a/skins/default/images/sort_asc.gif
+++ /dev/null
diff --git a/skins/default/images/sort_desc.gif b/skins/default/images/sort_desc.gif
deleted file mode 100644
index 244db104c..000000000
--- a/skins/default/images/sort_desc.gif
+++ /dev/null
diff --git a/skins/default/images/taskicons.gif b/skins/default/images/taskicons.gif
new file mode 100644
index 000000000..53376c3d2
--- /dev/null
+++ b/skins/default/images/taskicons.gif
diff --git a/skins/default/mail.css b/skins/default/mail.css
index a9c2d8d1c..649699be1 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -341,8 +341,7 @@ td.formlinks a:visited
   height: 12px;
   margin: 0;
   padding: 3px 10px 4px 10px;
-  background-color: #EBEBEB;
-  background-image: url(images/listheader_aqua.gif); 
+  background: url('images/listheader.gif') top left repeat-x #CCC;
   border-bottom: 1px solid #999;
   color: #333333;
   font-size: 11px;
@@ -378,8 +377,7 @@ td.formlinks a:visited
   display: block;
   position: relative;
   font-size: 11px;
-  background: url(images/icons/folder-closed.png) no-repeat;
-  background-position: 5px 1px;
+  background: url('images/icons/folders.png') 5px 1px no-repeat;
   border-bottom: 1px solid #EBEBEB;
 }
 
@@ -401,37 +399,37 @@ td.formlinks a:visited
 
 #mailboxlist li div.collapsed
 {
-  background: url(images/icons/collapsed.png) bottom right no-repeat;
+  background: url('images/icons/collapsed.png') bottom right no-repeat;
 }
 
 #mailboxlist li div.expanded
 {
-  background: url(images/icons/expanded.png) bottom right no-repeat;
+  background: url('images/icons/expanded.png') bottom right no-repeat;
 }
 
 #mailboxlist li.inbox
 {
-  background-image: url(images/icons/folder-inbox.png);
+  background-position: 5px -15px;
 }
 
 #mailboxlist li.drafts
 {
-  background-image: url(images/icons/folder-drafts.png);
+  background-position: 5px -31px;
 }
 
 #mailboxlist li.sent
 {
-  background-image: url(images/icons/folder-sent.png);
+  background-position: 5px -47px;
 }
 
 #mailboxlist li.junk
 {
-  background-image: url(images/icons/folder-junk.png);
+  background-position: 5px -63px;
 }
 
 #mailboxlist li.trash
 {
-  background-image: url(images/icons/folder-trash.png);
+  background-position: 5px -79px;
 }
 
 #mailboxlist li a
@@ -537,8 +535,7 @@ body.messagelist
   vertical-align: middle;
   border-bottom: 1px solid #999999;
   color: #333333;
-  background-color: #EBEBEB;
-  background-image: url(images/listheader_aqua.gif); 
+  background: url('images/listheader.gif') top left repeat-x #CCC;
   font-size: 11px;
   font-weight: bold;
 }
@@ -546,17 +543,17 @@ body.messagelist
 #messagelist thead tr td.sortedASC,
 #messagelist thead tr td.sortedDESC
 {
-  background-image: url(images/listheader_dark.gif); 
+  background-position: 0 -20px;
 }
 
 #messagelist thead tr td.sortedASC a
 {
-  background: url(images/sort_asc.gif) top right no-repeat;
+  background: url('images/icons/sort.gif') right 0 no-repeat;
 }
 
 #messagelist thead tr td.sortedDESC a
 {
-  background: url(images/sort_desc.gif) top right no-repeat;
+  background: url('images/icons/sort.gif') right -14px no-repeat;
 }
 
 #messagelist thead tr td a
diff --git a/skins/default/settings.css b/skins/default/settings.css
index f0024fcf9..e7c6cb5a7 100644
--- a/skins/default/settings.css
+++ b/skins/default/settings.css
@@ -244,8 +244,7 @@ div.boxtitle
   color: #333333;
   font-size: 11px;
   font-weight: bold;
-  background-color: #EBEBEB;
-  background-image: url(images/listheader_aqua.gif); 
+  background: url('images/listheader.gif') top left repeat-x #CCC;
 }
 
 div.settingsbox