Changeset 2558 in subversion

Timestamp:

May 28, 2009 4:19:02 PM (4 years ago)

Author:

thomasb

Message:

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

Location:

trunk/roundcubemail

Files:

• .htaccess (modified) (1 diff)
• CHANGELOG (modified) (1 diff)
• INSTALL (modified) (2 diffs)
• skins/default/addresses.css (modified) (1 diff)
• skins/default/common.css (modified) (10 diffs)
• skins/default/ie6hacks.css (modified) (2 diffs)
• skins/default/images/buttons/addressbook.gif (deleted)
• skins/default/images/buttons/addressbook.png (deleted)
• skins/default/images/buttons/inbox_sel.png (modified) (previous)
• skins/default/images/buttons/mail.gif (deleted)
• skins/default/images/buttons/mail.png (deleted)
• skins/default/images/buttons/settings.gif (deleted)
• skins/default/images/display/confirm.png (deleted)
• skins/default/images/display/icons.gif (added)
• skins/default/images/display/icons.png (added)
• skins/default/images/display/info.png (deleted)
• skins/default/images/display/warning.png (deleted)
• skins/default/images/icons/folder-closed.png (deleted)
• skins/default/images/icons/folder-drafts.png (deleted)
• skins/default/images/icons/folder-inbox.png (deleted)
• skins/default/images/icons/folder-junk.png (deleted)
• skins/default/images/icons/folder-open.png (deleted)
• skins/default/images/icons/folder-sent.png (deleted)
• skins/default/images/icons/folder-trash.png (deleted)
• skins/default/images/icons/folders.gif (added)
• skins/default/images/icons/folders.png (added)
• skins/default/images/icons/sort.gif (added)
• skins/default/images/listheader.gif (added)
• skins/default/images/listheader_aqua.gif (deleted)
• skins/default/images/listheader_dark.gif (deleted)
• skins/default/images/listheader_light.gif (deleted)
• skins/default/images/sort_asc.gif (deleted)
• skins/default/images/sort_desc.gif (deleted)
• skins/default/images/taskicons.gif (added)
• skins/default/mail.css (modified) (5 diffs)
• skins/default/settings.css (modified) (1 diff)

trunk/roundcubemail/.htaccess

@@ -29 +29 @@
 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

trunk/roundcubemail/CHANGELOG

@@ -2 +2 @@
 ===========================
 
+- 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)

trunk/roundcubemail/INSTALL

@@ -76 +76 @@
 
 # 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
@@ -120 +125 @@
 
 
+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")
+}
+
+

trunk/roundcubemail/skins/default/addresses.css

@@ -172 +172 @@
   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;
 }

trunk/roundcubemail/skins/default/common.css

@@ -152 +152 @@
 }
 
-#taskbar a,
-#taskbar a:active,
-#taskbar a:visited
+#taskbar a
 {
   font-size: 11px;
@@ -160 +158 @@
   text-decoration: none;
   padding: 6px 14px 6px 27px;
-  background-repeat: no-repeat;
+  background: url('images/taskicons.gif') no-repeat;
 }
 
@@ -168 +166 @@
 }
 
-a.button-mail
-{
-  background-image: url(images/buttons/mail.gif);
-}
-
-a.button-addressbook
-{
-  background-image: url(images/buttons/addressbook.gif);
-}
-
-a.button-settings
-{
-  background-image: url(images/buttons/settings.gif);
-}
-
-a.button-logout
-{
-  background-image: url(images/buttons/logout.gif);
+#taskbar a.button-mail
+{
+  background-position: 0 0;
+}
+
+#taskbar a.button-addressbook
+{
+  background-position: 0 -25px;
+}
+
+#taskbar a.button-settings
+{
+  background-position: 0 -50px;
+}
+
+#taskbar a.button-logout
+{
+  background-position: 0 -75px;
 }
 
@@ -204 +202 @@
   width: 400px;
   margin: 0px auto;
-  height: 24px;
-  min-height: 24px;
+  height: 22px;
+  min-height: 22px;
   padding: 8px 10px 8px 46px;
 }
@@ -212 +210 @@
 #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;
@@ -220 +218 @@
 #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;
@@ -227 +225 @@
 #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;
@@ -234 +232 @@
 #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;
@@ -275 +273 @@
   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;
 }
 
@@ -288 +285 @@
   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;

trunk/roundcubemail/skins/default/ie6hacks.css

@@ -4 +4 @@
 {
   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);
 }
 
@@ -16 +25 @@
 }
 
-
+#mailboxlist li
+{
+  background-image: url('images/icons/folders.gif');
+}

trunk/roundcubemail/skins/default/mail.css

@@ -342 +342 @@
   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;
@@ -379 +378 @@
   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;
 }
@@ -402 +400 @@
 #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;
 }
 
@@ -538 +536 @@
   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;
@@ -547 +544 @@
 #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;
 }
 

trunk/roundcubemail/skins/default/settings.css

@@ -245 +245 @@
   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;
 }