summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorthomascube <thomas@roundcube.net>2009-05-28 20:19:02 +0000
committerthomascube <thomas@roundcube.net>2009-05-28 20:19:02 +0000
commitd7f49d64d3e2d808e5fb037faef53ff5a5510909 (patch)
tree25976f371414abe25635e8be7f9290a46ec6f79e
parentfc1102509fe4b2a47217c82341dfa7edc5e38fed (diff)
Speedup UI by using CSS sprites and etags/expires/deflate for static files
-rw-r--r--.htaccess18
-rw-r--r--CHANGELOG1
-rw-r--r--INSTALL82
-rw-r--r--skins/default/addresses.css3
-rw-r--r--skins/default/common.css40
-rw-r--r--skins/default/ie6hacks.css14
-rw-r--r--skins/default/images/buttons/addressbook.gifbin788 -> 0 bytes
-rw-r--r--skins/default/images/buttons/addressbook.pngbin1768 -> 0 bytes
-rw-r--r--skins/default/images/buttons/inbox_sel.pngbin1744 -> 1707 bytes
-rw-r--r--skins/default/images/buttons/mail.gifbin833 -> 0 bytes
-rw-r--r--skins/default/images/buttons/mail.pngbin1827 -> 0 bytes
-rw-r--r--skins/default/images/buttons/settings.gifbin513 -> 0 bytes
-rw-r--r--skins/default/images/display/confirm.pngbin2135 -> 0 bytes
-rw-r--r--skins/default/images/display/icons.gifbin0 -> 2329 bytes
-rw-r--r--skins/default/images/display/icons.pngbin0 -> 4637 bytes
-rw-r--r--skins/default/images/display/info.pngbin2162 -> 0 bytes
-rw-r--r--skins/default/images/display/warning.pngbin1422 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-closed.pngbin662 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-drafts.pngbin511 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-inbox.pngbin586 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-junk.pngbin800 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-open.pngbin796 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-sent.pngbin629 -> 0 bytes
-rw-r--r--skins/default/images/icons/folder-trash.pngbin775 -> 0 bytes
-rw-r--r--skins/default/images/icons/folders.gifbin0 -> 1085 bytes
-rw-r--r--skins/default/images/icons/folders.pngbin0 -> 3216 bytes
-rw-r--r--skins/default/images/icons/sort.gifbin0 -> 148 bytes
-rw-r--r--skins/default/images/listheader.gifbin0 -> 538 bytes
-rw-r--r--skins/default/images/listheader_aqua.gifbin270 -> 0 bytes
-rw-r--r--skins/default/images/listheader_dark.gifbin280 -> 0 bytes
-rw-r--r--skins/default/images/listheader_light.gifbin261 -> 0 bytes
-rw-r--r--skins/default/images/sort_asc.gifbin123 -> 0 bytes
-rw-r--r--skins/default/images/sort_desc.gifbin121 -> 0 bytes
-rw-r--r--skins/default/images/taskicons.gifbin0 -> 2207 bytes
-rw-r--r--skins/default/mail.css29
-rw-r--r--skins/default/settings.css3
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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