Merge lp:~edwin-grubbs/launchpad/auto-gen-sprites into lp:launchpad/db-devel

[Edwin Grubbs]

[Edwin Grubbs (edwin-grubbs)]

Summary
-------

Added the ability to easily generate the sprite image file
and the css using it. The immediate benefit is to increase the
margin between the images, so that elements that wrap to multiple
lines will not show the next sprite in the file.

Implementation details
----------------------

Added sprite_image and sprite_css targets. sprite_css is a dependency
of css_combine, so it is automatically built for "make run" unless
build/style-3-0.css already exists.
    Makefile

Added bin/sprite-util to support the Makefile targets.
    buildout-templates/bin/sprite-util.in

The SpriteUtil class:
    lib/lp/services/spriteutils.py

The icing/style-3-0.css file was moved to the icing/build/
directory, since it is now autogenerated, and this will
help prevent people from opening and editing it instead
of sprite-3-0.css.in.
    buildout-templates/bin/combine-css.in

"make sprite_css" takes this file and icon-sprites.positioning
as inputs to generate icing/build/style-3-0.css.
    lib/canonical/launchpad/icing/style-3-0.css.in

These two files are automatically generated by "make sprite_image".
    lib/canonical/launchpad/icing/icon-sprites
    lib/canonical/launchpad/icing/icon-sprites.positioning

Testing:
    lib/lp/services/doc/sprites.txt
    lib/lp/services/tests/test_doc.py
    lib/lp/services/tests/testfiles/template.css

Since the margin has increased, more results can be shown
in the picker.
    lib/canonical/launchpad/browser/vocabulary.py

The search field at the bottom of all the launchpad pages had
an search sprite stuck at the end of the form element. It wasn't
clickable, and the css for ".footer .lp-arcana .search-icon"
seemed unnecesarily specific to that usage.
    lib/lp/app/templates/base-layout-macros.pt

Tests
-----

./bin/test -vv -t sprites

Demo and Q/A
------------

* Open http://launchpad.dev/bazaar
    * Check that all the sprites look right.
    * Check that you can click on the search icon in the footer.

[Brad Crittenden (bac)]

Hi Edwin,

This new system looks very well thought out. I've got a few
suggestions but it should be landable quickly.

Also note that the MP is targeted to db-devel, which messed up your diff. I assume you do plan to land against devel, so be careful.

--Brad

> === modified file 'Makefile'
> --- Makefile 2010-01-29 16:03:04 +0000
+++ Makefile 2010-02-09 17:18:07 +0000
> @@ -18,7 +18,8 @@
> LPCONFIG=development
>
> JSFLAGS=
> -LP_BUILT_JS_ROOT=lib/canonical/launchpad/icing/build
> +ICING=lib/canonical/launchpad/icing
> +LP_BUILT_JS_ROOT=${ICING}/build
> LAZR_BUILT_JS_ROOT=lazr-js/build
>
> MINS_TO_SHUTDOWN=15
> @@ -111,9 +112,19 @@
>
> build: $(BZR_VERSION_INFO) compile apidoc jsbuild css_combine
>
> -css_combine:
> +css_combine: sprite_css
> ${SHHH} bin/combine-css
>
> +sprite_css: ${LP_BUILT_JS_ROOT}/style-3-0.css
> +
> +${LP_BUILT_JS_ROOT}/style-3-0.css: ${ICING}/style-3-0.css.in ${ICING}/icon-sprites.positioning
> + ${SHHH} bin/sprite-util create-css
> +
> +${ICING}/icon-sprites:
> + ${SHHH} bin/sprite-util create-image
> +
> +sprite_image: ${ICING}/icon-sprites

This should have a dependency rule so it isn't run every time or it
should not be part of the 'make build' chain if it is just to be run
on demand.

> +
> jsbuild_lazr:
> # We absolutely do not want to include the lazr.testing module and its
> # jsTestDriver test harness modifications in the lazr.js and launchpad.js

> === added file 'buildout-templates/bin/sprite-util.in'
> --- buildout-templates/bin/sprite-util.in 1970-01-01 00:00:00 +0000
> +++ buildout-templates/bin/sprite-util.in 2010-02-09 16:59:33 +0000
> @@ -0,0 +1,41 @@
> +#! /usr/bin/env ${buildout:directory}/bin/py

Why the space between ! and /? I know you're following the pattern
but it's ugly.

> +
> +import os
> +import sys
> +
> +from lp.services.spriteutils import SpriteUtil
> +
> +command_options = ('create-image', 'create-css')
> +
> +if len(sys.argv) != 2:
> + print >> sys.stderr, "Expected a single argument."
> + print >> sys.stderr, " Usage: %s %s" % (
> + sys.argv[0], '|'.join(command_options))
> + sys.exit(1)
> +else:
> + command = sys.argv[1]
> + if command not in command_options:
> + print >> sys.stderr, "Unknown argument: %s" % command
> + print >> sys.stderr, " Usage: %s %s" % (
> + sys.argv[0], '|'.join(command_options))
> + sys.exit(2)

Refactor a usage() method.

> +
> +root = '${buildout:directory}'
> +icing = os.path.join(root, 'lib/canonical/launchpad/icing')
> +combined_image_file = os.path.join(icing, 'icon-sprites')
> +positioning_file = os.path.join(icing, 'icon-sprites.positioning')
> +css_template_file = os.path.join(icing, 'style-3-0.css.in')
> +css_file = os.path.join(icing, 'build/style-3-0.css')

I'm concerned that the paths are here and in the Makefile. Could the
makefile pass it in?

> === renamed file 'lib/canonical/launchpad/icing/style-3-0.css' => 'lib/canonical/launchpad/icing/style-3-0.css.in'
> --- lib/canonical/launchpad/icing/style-3-0.css 2010-02-05 09:48:47 +0000
> +++ lib/canonical/launchpad/icing/style-3-0.css.in 2010-02-09 16:59:33 +0000

Were these changes don...

review: Approve (code)

[Edwin Grubbs (edwin-grubbs)]

> Hi Edwin,
>
> This new system looks very well thought out. I've got a few
> suggestions but it should be landable quickly.
>
> Also note that the MP is targeted to db-devel, which messed up your diff. I
> assume you do plan to land against devel, so be careful.
>
> --Brad

Hi Brad,

Thanks for the review. Sorry about the bad diff.

>
> > === modified file 'Makefile'
> > --- Makefile 2010-01-29 16:03:04 +0000
> +++ Makefile 2010-02-09 17:18:07 +0000
> > @@ -18,7 +18,8 @@
> > LPCONFIG=development
> >
> > JSFLAGS=
> > -LP_BUILT_JS_ROOT=lib/canonical/launchpad/icing/build
> > +ICING=lib/canonical/launchpad/icing
> > +LP_BUILT_JS_ROOT=${ICING}/build
> > LAZR_BUILT_JS_ROOT=lazr-js/build
> >
> > MINS_TO_SHUTDOWN=15
> > @@ -111,9 +112,19 @@
> >
> > build: $(BZR_VERSION_INFO) compile apidoc jsbuild css_combine
> >
> > -css_combine:
> > +css_combine: sprite_css
> > ${SHHH} bin/combine-css
> >
> > +sprite_css: ${LP_BUILT_JS_ROOT}/style-3-0.css
> > +
> > +${LP_BUILT_JS_ROOT}/style-3-0.css: ${ICING}/style-3-0.css.in ${ICING}/icon-
> sprites.positioning
> > + ${SHHH} bin/sprite-util create-css
> > +
> > +${ICING}/icon-sprites:
> > + ${SHHH} bin/sprite-util create-image
> > +
> > +sprite_image: ${ICING}/icon-sprites
>
> This should have a dependency rule so it isn't run every time or it
> should not be part of the 'make build' chain if it is just to be run
> on demand.

sprite_css is a dependency of css_combine, but sprite_image is not a dependency
of anything, so it is only run manually when a new image needs to be added.

> > +
> > jsbuild_lazr:
> > # We absolutely do not want to include the lazr.testing module and its
> > # jsTestDriver test harness modifications in the lazr.js and
> launchpad.js
>
> > === added file 'buildout-templates/bin/sprite-util.in'
> > --- buildout-templates/bin/sprite-util.in 1970-01-01 00:00:00 +0000
> > +++ buildout-templates/bin/sprite-util.in 2010-02-09 16:59:33 +0000
> > @@ -0,0 +1,41 @@
> > +#! /usr/bin/env ${buildout:directory}/bin/py
>
> Why the space between ! and /? I know you're following the pattern
> but it's ugly.

Yeah, I just copied another file and never looked at that. Fixed.

> > +
> > +import os
> > +import sys
> > +
> > +from lp.services.spriteutils import SpriteUtil
> > +
> > +command_options = ('create-image', 'create-css')
> > +
> > +if len(sys.argv) != 2:
> > + print >> sys.stderr, "Expected a single argument."
> > + print >> sys.stderr, " Usage: %s %s" % (
> > + sys.argv[0], '|'.join(command_options))
> > + sys.exit(1)
> > +else:
> > + command = sys.argv[1]
> > + if command not in command_options:
> > + print >> sys.stderr, "Unknown argument: %s" % command
> > + print >> sys.stderr, " Usage: %s %s" % (
> > + sys.argv[0], '|'.join(command_options))
> > + sys.exit(2)
>
> Refactor a usage() method.

Fixed.

> > +
> > +root = '${buildout:directory}'
> > +icing = os.path.join(root, 'lib/canonical/launchpad/icing')
> > +combined_image_file = os.path.join(icing, 'icon-sprites')
> > +positioning_file = os.path.join(icing, 'icon-sprites.positioning')
> > +css_template_file = os.path.join(icing, '...

=== modified file 'Makefile'
--- Makefile	2010-01-29 16:03:04 +0000
+++ Makefile	2010-02-11 05:00:37 +0000
@@ -18,7 +18,8 @@
 LPCONFIG=development
 
 JSFLAGS=
-LP_BUILT_JS_ROOT=lib/canonical/launchpad/icing/build
+ICING=lib/canonical/launchpad/icing
+LP_BUILT_JS_ROOT=${ICING}/build
 LAZR_BUILT_JS_ROOT=lazr-js/build
 
 MINS_TO_SHUTDOWN=15
@@ -111,9 +112,17 @@
 
 build: $(BZR_VERSION_INFO) compile apidoc jsbuild css_combine
 
-css_combine:
+css_combine: sprite_css
 	${SHHH} bin/combine-css
 
+sprite_css: ${LP_BUILT_JS_ROOT}/style-3-0.css
+
+${LP_BUILT_JS_ROOT}/style-3-0.css: ${ICING}/style-3-0.css.in ${ICING}/icon-sprites.positioning
+	${SHHH} bin/sprite-util create-css
+
+sprite_image:
+	${SHHH} bin/sprite-util create-image
+
 jsbuild_lazr:
 	# We absolutely do not want to include the lazr.testing module and its
 	# jsTestDriver test harness modifications in the lazr.js and launchpad.js

=== modified file 'buildout-templates/bin/combine-css.in'
--- buildout-templates/bin/combine-css.in	2009-12-17 14:32:03 +0000
+++ buildout-templates/bin/combine-css.in	2010-02-11 05:00:37 +0000
@@ -1,4 +1,4 @@
-#! /usr/bin/env ${buildout:directory}/bin/py
+#!/usr/bin/env ${buildout:directory}/bin/py
 
 import os
 
@@ -26,7 +26,7 @@
     'lazr/build/choiceedit/assets/choiceedit-core.css',
     # This one goes at the end because it's our main stylesheet and should
     # take precedence over the others.
-    'style-3-0.css']
+    'build/style-3-0.css']
 result = ''
 for content in combine_files(names, icing):
     result += content

=== added file 'buildout-templates/bin/sprite-util.in'
--- buildout-templates/bin/sprite-util.in	1970-01-01 00:00:00 +0000
+++ buildout-templates/bin/sprite-util.in	2010-02-11 05:00:37 +0000
@@ -0,0 +1,43 @@
+#!/usr/bin/env ${buildout:directory}/bin/py
+
+import os
+import sys
+
+from lp.services.spriteutils import SpriteUtil
+
+command_options = ('create-image', 'create-css')
+
+def usage():
+    return " Usage: %s %s" % (sys.argv[0], '|'.join(command_options))
+
+if len(sys.argv) != 2:
+    print >> sys.stderr, "Expected a single argument."
+    print >> sys.stderr, usage()
+    sys.exit(1)
+else:
+    command = sys.argv[1]
+    if command not in command_options:
+        print >> sys.stderr, "Unknown argument: %s" % command
+        print >> sys.stderr, usage()
+        sys.exit(2)
+
+root = '${buildout:directory}'
+icing = os.path.join(root, 'lib/canonical/launchpad/icing')
+combined_image_file = os.path.join(icing, 'icon-sprites')
+positioning_file = os.path.join(icing, 'icon-sprites.positioning')
+css_template_file = os.path.join(icing, 'style-3-0.css.in')
+css_file = os.path.join(icing, 'build/style-3-0.css')
+
+sprite_util = SpriteUtil(
+    css_template_file, 'icon-sprites',
+    url_prefix_substitutions={'/@@/': '../images/'})
+
+if command == 'create-image':
+    sprite_util.combineImages(icing)
+    sprite_util.savePNG(combined_image_file)
+    sprite_util.savePositioning(positioning_file)
+elif command == 'create-css':
+    sprite_util.loadPositioning(positioning_file)
+    # The icing/icon-sprites file is relative to the css file
+    # in the icing/build/ directory.
+    sprite_util.saveConvertedCSS(css_file, '../icon-sprites')

=== modified file 'lib/canonical/launchpad/browser/vocabulary.py'
--- lib/canonical/launchpad/browser/vocabulary.py	2010-01-18 19:46:26 +0000
+++ lib/canonical/launchpad/browser/vocabulary.py	2010-02-11 05:00:37 +0000
@@ -43,7 +43,7 @@
 # This limits the output to one line of text, since the sprite class
 # cannot clip the background image effectively for vocabulary items
 # with more than single line description below the title.
-MAX_DESCRIPTION_LENGTH = 55
+MAX_DESCRIPTION_LENGTH = 120
 
 
 class IPickerEntry(Interface):

=== modified file 'lib/canonical/launchpad/icing/icon-sprites'
Binary files lib/canonical/launchpad/icing/icon-sprites	2009-06-02 18:15:08 +0000 and lib/canonical/launchpad/icing/icon-sprites	2010-02-11 05:00:37 +0000 differ
=== removed file 'lib/canonical/launchpad/icing/icon-sprites-2'
Binary files lib/canonical/launchpad/icing/icon-sprites-2	2009-07-30 02:26:46 +0000 and lib/canonical/launchpad/icing/icon-sprites-2	1970-01-01 00:00:00 +0000 differ
=== removed file 'lib/canonical/launchpad/icing/icon-sprites-3'
Binary files lib/canonical/launchpad/icing/icon-sprites-3	2009-12-10 10:22:04 +0000 and lib/canonical/launchpad/icing/icon-sprites-3	1970-01-01 00:00:00 +0000 differ
=== removed file 'lib/canonical/launchpad/icing/icon-sprites-large'
Binary files lib/canonical/launchpad/icing/icon-sprites-large	2009-06-02 18:15:08 +0000 and lib/canonical/launchpad/icing/icon-sprites-large	1970-01-01 00:00:00 +0000 differ
=== removed file 'lib/canonical/launchpad/icing/icon-sprites-logo'
Binary files lib/canonical/launchpad/icing/icon-sprites-logo	2009-06-02 18:15:08 +0000 and lib/canonical/launchpad/icing/icon-sprites-logo	1970-01-01 00:00:00 +0000 differ
=== removed file 'lib/canonical/launchpad/icing/icon-sprites-logo-2'
Binary files lib/canonical/launchpad/icing/icon-sprites-logo-2	2009-06-02 18:15:08 +0000 and lib/canonical/launchpad/icing/icon-sprites-logo-2	1970-01-01 00:00:00 +0000 differ
=== added file 'lib/canonical/launchpad/icing/icon-sprites.positioning'
--- lib/canonical/launchpad/icing/icon-sprites.positioning	1970-01-01 00:00:00 +0000
+++ lib/canonical/launchpad/icing/icon-sprites.positioning	2010-02-11 05:00:37 +0000
@@ -0,0 +1,472 @@
+/* DO NOT EDIT THIS FILE BY HAND!!!    */
+/* It is autogenerated by spriteutils. */
+{
+    "../images/arrowLeft.png": [
+        0, 
+        -14590
+    ], 
+    "../images/cancel.png": [
+        0, 
+        -7376
+    ], 
+    "../images/milestone.png": [
+        0, 
+        -3276
+    ], 
+    "../images/zoom-out.png": [
+        0, 
+        -11802
+    ], 
+    "../images/team.png": [
+        0, 
+        -2130
+    ], 
+    "../images/bug-undecided.png": [
+        0, 
+        -7872
+    ], 
+    "../images/blueprint-low.png": [
+        0, 
+        -5736
+    ], 
+    "../images/meeting.png": [
+        0, 
+        -10326
+    ], 
+    "../images/no.png": [
+        0, 
+        -1312
+    ], 
+    "../images/distribution-badge.png": [
+        0, 
+        -9020
+    ], 
+    "../images/arrowTop.png": [
+        0, 
+        -14262
+    ], 
+    "../images/zoom-in.png": [
+        0, 
+        -11638
+    ], 
+    "../images/team-badge.png": [
+        0, 
+        -2294
+    ], 
+    "../images/blue-bar.png": [
+        0, 
+        -14754
+    ], 
+    "../images/arrowStart.png": [
+        0, 
+        -13934
+    ], 
+    "../images/ppa-icon-inactive.png": [
+        0, 
+        -12294
+    ], 
+    "../images/build-needed.png": [
+        0, 
+        -13114
+    ], 
+    "../images/purple-bar.png": [
+        0, 
+        -15082
+    ], 
+    "../images/bullet.png": [
+        0, 
+        -11474
+    ], 
+    "../images/info-large.png": [
+        0, 
+        -17012
+    ], 
+    "../images/trash-logo.png": [
+        0, 
+        -20030
+    ], 
+    "../images/warning.png": [
+        0, 
+        -9998
+    ], 
+    "../images/mail.png": [
+        0, 
+        -3768
+    ], 
+    "../images/build-failure.png": [
+        0, 
+        -13278
+    ], 
+    "../images/branch-large.png": [
+        0, 
+        -15738
+    ], 
+    "../images/download-large.png": [
+        0, 
+        -16830
+    ], 
+    "../images/private-large.png": [
+        0, 
+        -17922
+    ], 
+    "../images/launchpad-large.png": [
+        0, 
+        -17194
+    ], 
+    "../images/translation-file.png": [
+        0, 
+        -10654
+    ], 
+    "../images/read-only.png": [
+        0, 
+        -9834
+    ], 
+    "../images/project-logo.png": [
+        0, 
+        -18532
+    ], 
+    "../images/bug-medium.png": [
+        0, 
+        -4588
+    ], 
+    "../images/architecture.png": [
+        0, 
+        -11966
+    ], 
+    "../images/trash-icon.png": [
+        0, 
+        -10982
+    ], 
+    "../images/person-inactive.png": [
+        0, 
+        -6558
+    ], 
+    "../images/arrowBottom.png": [
+        0, 
+        -14426
+    ], 
+    "../images/project.png": [
+        0, 
+        -9344
+    ], 
+    "../images/crowd.png": [
+        0, 
+        -1640
+    ], 
+    "../images/info.png": [
+        0, 
+        -492
+    ], 
+    "../images/flame-icon.png": [
+        0, 
+        -7708
+    ], 
+    "../images/ubuntu-icon.png": [
+        0, 
+        -6392
+    ], 
+    "../images/link.png": [
+        0, 
+        -3604
+    ], 
+    "../images/stop.png": [
+        0, 
+        -11146
+    ], 
+    "../images/person-logo.png": [
+        0, 
+        -18960
+    ], 
+    "../images/distribution-logo.png": [
+        0, 
+        -18318
+    ], 
+    "../images/retry.png": [
+        0, 
+        -8856
+    ], 
+    "../images/rss.png": [
+        0, 
+        -6228
+    ], 
+    "../images/private.png": [
+        0, 
+        -10162
+    ], 
+    "../images/merge-proposal-icon.png": [
+        0, 
+        -12622
+    ], 
+    "../images/download.png": [
+        0, 
+        -984
+    ], 
+    "../images/arrowDown.png": [
+        0, 
+        -13770
+    ], 
+    "../images/package-binary.png": [
+        0, 
+        -8692
+    ], 
+    "../images/maybe.png": [
+        0, 
+        -7048
+    ], 
+    "../images/bug-status-expand.png": [
+        0, 
+        -12458
+    ], 
+    "../images/crowd-large.png": [
+        0, 
+        -16102
+    ], 
+    "../images/blueprint.png": [
+        0, 
+        -5080
+    ], 
+    "../images/project-badge.png": [
+        0, 
+        -9182
+    ], 
+    "../images/bug-high.png": [
+        0, 
+        -4424
+    ], 
+    "../images/blueprint-undefined.png": [
+        0, 
+        -5900
+    ], 
+    "../images/blueprint-not.png": [
+        0, 
+        -6064
+    ], 
+    "../images/mentoring.png": [
+        0, 
+        -6884
+    ], 
+    "../images/flame-large.png": [
+        0, 
+        -16648
+    ], 
+    "../images/bug-dupe-icon.png": [
+        0, 
+        -8364
+    ], 
+    "../images/bug-critical.png": [
+        0, 
+        -4260
+    ], 
+    "../images/build-success.png": [
+        0, 
+        -12950
+    ], 
+    "../images/haspatch-icon.png": [
+        0, 
+        -15574
+    ], 
+    "../images/person-inactive-badge.png": [
+        0, 
+        -6722
+    ], 
+    "../images/ppa-icon.png": [
+        0, 
+        -12130
+    ], 
+    "../images/yes.png": [
+        0, 
+        -1476
+    ], 
+    "../images/team-logo.png": [
+        0, 
+        -19388
+    ], 
+    "../images/arrowRight.png": [
+        0, 
+        -2456
+    ], 
+    "../images/blueprint-high.png": [
+        0, 
+        -5408
+    ], 
+    "../images/product.png": [
+        0, 
+        -9670
+    ], 
+    "../images/bug-low.png": [
+        0, 
+        -4752
+    ], 
+    "../images/package-source.png": [
+        0, 
+        -3112
+    ], 
+    "../images/language.png": [
+        0, 
+        -3440
+    ], 
+    "../images/person.png": [
+        0, 
+        -1804
+    ], 
+    "../images/arrowUp.png": [
+        0, 
+        -13606
+    ], 
+    "../images/distribution.png": [
+        0, 
+        -2948
+    ], 
+    "../images/error-large.png": [
+        0, 
+        -16466
+    ], 
+    "../images/news.png": [
+        0, 
+        -15410
+    ], 
+    "../images/treeExpanded.png": [
+        0, 
+        -2784
+    ], 
+    "../images/build-depwait.png": [
+        0, 
+        -13442
+    ], 
+    "../images/blueprint-essential.png": [
+        0, 
+        -5244
+    ], 
+    "../images/question.png": [
+        0, 
+        -656
+    ], 
+    "../images/error.png": [
+        0, 
+        -7212
+    ], 
+    "../images/bug-unknown.png": [
+        0, 
+        -8200
+    ], 
+    "../images/product-logo.png": [
+        0, 
+        -18746
+    ], 
+    "../images/blueprint-medium.png": [
+        0, 
+        -5572
+    ], 
+    "../images/product-badge.png": [
+        0, 
+        -9508
+    ], 
+    "../images/list.png": [
+        0, 
+        -11310
+    ], 
+    "../images/launchpad-logo.png": [
+        0, 
+        -18104
+    ], 
+    "../images/flame-logo.png": [
+        0, 
+        -19816
+    ], 
+    "../images/translation-template.png": [
+        0, 
+        -10818
+    ], 
+    "../images/bugtracker-icon.png": [
+        0, 
+        -8528
+    ], 
+    "../images/meeting-logo.png": [
+        0, 
+        -19602
+    ], 
+    "../images/treeCollapsed.png": [
+        0, 
+        -2620
+    ], 
+    "../images/green-bar.png": [
+        0, 
+        -14918
+    ], 
+    "../images/build-superseded.png": [
+        0, 
+        -12786
+    ], 
+    "../images/trash-large.png": [
+        0, 
+        -17740
+    ], 
+    "../images/red-bar.png": [
+        0, 
+        -15246
+    ], 
+    "../images/add.png": [
+        0, 
+        0
+    ], 
+    "../images/remove.png": [
+        0, 
+        -328
+    ], 
+    "../images/person-inactive-logo.png": [
+        0, 
+        -19174
+    ], 
+    "../images/edit.png": [
+        0, 
+        -164
+    ], 
+    "../images/bug-wishlist.png": [
+        0, 
+        -4916
+    ], 
+    "../images/warning-large.png": [
+        0, 
+        -15920
+    ], 
+    "../images/arrowEnd.png": [
+        0, 
+        -14098
+    ], 
+    "../images/cve.png": [
+        0, 
+        -3932
+    ], 
+    "../images/merge-proposal-large.png": [
+        0, 
+        -17558
+    ], 
+    "../images/person-badge.png": [
+        0, 
+        -1968
+    ], 
+    "../images/mentoring-large.png": [
+        0, 
+        -17376
+    ], 
+    "../images/bug.png": [
+        0, 
+        -4096
+    ], 
+    "../images/bug-remote.png": [
+        0, 
+        -8036
+    ], 
+    "../images/translation.png": [
+        0, 
+        -10490
+    ], 
+    "../images/confirm.png": [
+        0, 
+        -7542
+    ], 
+    "../images/search.png": [
+        0, 
+        -1148
+    ]
+}
\ No newline at end of file

=== renamed file 'lib/canonical/launchpad/icing/style-3-0.css' => 'lib/canonical/launchpad/icing/style-3-0.css.in'
--- lib/canonical/launchpad/icing/style-3-0.css	2010-02-05 09:48:47 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css.in	2010-02-11 05:00:37 +0000
@@ -31,9 +31,6 @@
 .footer .lp-arcana img {
     vertical-align: middle;
     }
-.footer .lp-arcana .search-icon {
-    background: url(icon-sprites) 100% -191px no-repeat;
-    }
 .footer .sitemessage {
     text-align: right;
 }
@@ -813,6 +810,15 @@
     padding: 2px 0 5px 18px;
     line-height: 18px;
 }
+input[type="submit"].icon-only {
+    vertical-align: middle;
+    border: 0; 
+    padding: 0;
+    height: 16px;
+    width: 16px;
+    background-color: inherit;
+    cursor: pointer;
+}
 .vertical .sprite {
     /* XXX: EdwinGrubbs 2009-10-29 bug=463032
        The reduced padding is only necessary to prevent parts of the
@@ -846,140 +852,493 @@
  */
 .yui-picker-results li.sprite {
     padding:2px 0 0 18px;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.add {background:url(icon-sprites) 0 0 no-repeat;}
-.edit {background:url(icon-sprites) 0 -32px no-repeat;}
-.remove {background:url(icon-sprites) 0 -64px no-repeat;}
-.info {background:url(icon-sprites) 0 -96px no-repeat;}
-.question {background:url(icon-sprites) 0 -128px no-repeat;}
-.download-icon {background:url(icon-sprites) 0 -160px no-repeat;}
-.download {background:url(icon-sprites) 0 -160px no-repeat;}
-.search-icon {background:url(icon-sprites) 0 -187px no-repeat;}
-.no {background:url(icon-sprites) 0 -224px no-repeat;}
-.yes {background:url(icon-sprites) 0 -256px no-repeat;}
-.crowd {background:url(icon-sprites) 0 -288px no-repeat;}
-.person {background:url(icon-sprites) 0 -320px no-repeat;}
-.person-tabs {background:url(icon-sprites) 5px -314px no-repeat;}
-.person-badge {background:url(icon-sprites) 0 -352px no-repeat;}
-.team {background:url(icon-sprites) 0 -384px no-repeat;}
-.team-badge {background:url(icon-sprites) 0 -416px no-repeat;}
-.arrowRight {background:url(icon-sprites) 0 -448px no-repeat;}
-.treeCollapsed {background:url(icon-sprites) 0 -480px no-repeat;}
-.treeExpanded {background:url(icon-sprites) 0 -512px no-repeat;}
-.branch, .bzr-favicon {background:url(icon-sprites) 0 -544px no-repeat;}
-.bzr-favicon {background:url(icon-sprites) 5px -538px no-repeat;}
-.distribution {background:url(icon-sprites) 0 -576px no-repeat;}
-.package-source {background:url(icon-sprites) 0 -608px no-repeat;}
-.milestone {background:url(icon-sprites) 0 -640px no-repeat;}
-.language {background:url(icon-sprites) 0 -672px no-repeat;}
-.external-link {background:url(icon-sprites) 0 -704px no-repeat;}
-.mail {background:url(icon-sprites) 0 -736px no-repeat;}
-.cve {background:url(icon-sprites) 0 -768px no-repeat;}
-.cves {float: right; text-align: right;}
-.bug {background:url(icon-sprites) 0 -800px no-repeat;}
-.bug-critical {background:url(icon-sprites) 0 -832px no-repeat;}
-.bug-high {background:url(icon-sprites) 0 -864px no-repeat;}
-.bug-medium {background:url(icon-sprites) 0 -896px no-repeat;}
-.bug-low {background:url(icon-sprites) 0 -928px no-repeat;}
-.bug-wishlist {background:url(icon-sprites) 0 -960px no-repeat;}
-.blueprint {background:url(icon-sprites) 0 -992px no-repeat;}
-.blueprint-essential {background:url(icon-sprites) 0 -1024px no-repeat;}
-.blueprint-high {background:url(icon-sprites) 0 -1056px no-repeat;}
-.blueprint-medium {background:url(icon-sprites) 0 -1088px no-repeat;}
-.blueprint-low {background:url(icon-sprites) 0 -1120px no-repeat;}
-.blueprint-undefined {background:url(icon-sprites) 0 -1152px no-repeat;}
-.blueprint-not {background:url(icon-sprites) 0 -1184px no-repeat;}
-.rss {background:url(icon-sprites) 0 -1216px no-repeat;}
-.ubuntu-logo {background:url(icon-sprites-2) 0 0px no-repeat;}
-.person-inactive {background:url(icon-sprites-2) 0 -32px no-repeat;}
-.person-inactive-badge {background:url(icon-sprites-2) 0 -64px no-repeat;}
-.mentoring {background:url(icon-sprites-2) 0 -96px no-repeat;}
-.undecided {background:url(icon-sprites-2) 0 -128px no-repeat;}
-.error-icon {background:url(icon-sprites-2) 0 -160px no-repeat;}
-.cancel {background:url(icon-sprites-2) 0 -192px no-repeat;}
-.confirm {background:url(icon-sprites-2) 0 -224px no-repeat;}
-.flame {background:url(icon-sprites-2) 0 -256px no-repeat;}
-.bug-undecided {background:url(icon-sprites-2) 0 -288px no-repeat;}
-.bug-remote {background:url(icon-sprites-2) 0 -320px no-repeat;}
-.bug-unknown {background:url(icon-sprites-2) 0 -352px no-repeat;}
-.bug-dupe {background:url(icon-sprites-2) 0 -384px no-repeat;}
-.bug-tracker {background:url(icon-sprites-2) 0 -416px no-repeat;}
-.package-binary {background:url(icon-sprites-2) 0 -448px no-repeat;}
-.retry {background:url(icon-sprites-2) 0 -480px no-repeat;}
-.distribution-badge {background:url(icon-sprites-2) 0 -512px no-repeat;}
-.project-badge {background:url(icon-sprites-2) 0 -544px no-repeat;}
-.project {background:url(icon-sprites-2) 0 -576px no-repeat;}
-.product-badge {background:url(icon-sprites-2) 0 -608px no-repeat;}
-.product {background:url(icon-sprites-2) 0 -640px no-repeat;}
-.read-only {background:url(icon-sprites-2) 0 -672px no-repeat;}
-.warning-icon, .security {background:url(icon-sprites-2) 0 -704px no-repeat;}
-.private {background:url(icon-sprites-2) 0 -736px no-repeat;}
-.meeting {background:url(icon-sprites-2) 0 -768px no-repeat;}
-.translate-icon {background:url(icon-sprites-2) 0 -800px no-repeat;}
-.translation-file {background:url(icon-sprites-2) 0 -832px no-repeat;}
-.translation-template {background:url(icon-sprites-2) 0 -864px no-repeat;}
-.trash-icon {background:url(icon-sprites-2) 0 -896px no-repeat;}
-.stop {background:url(icon-sprites-2) 0 -928px no-repeat;}
-.list {background:url(icon-sprites-2) 0 -992px no-repeat;}
-.bullet {background:url(icon-sprites-2) 0 -1024px no-repeat;}
-.zoom-in {background:url(icon-sprites-2) 0 -1056px no-repeat;}
-.zoom-out {background:url(icon-sprites-2) 0 -1088px no-repeat;}
-.architecture {background:url(icon-sprites-2) 0 -1120px no-repeat;}
-.ppa-icon {background:url(icon-sprites-2) 0 -1147px no-repeat;}
-.ppa-icon-inactive {background:url(icon-sprites-2) 0 -1171px no-repeat;}
-
-.bug-status-expand {background:url(icon-sprites-3) 0 -10px no-repeat;}
+}
+
+.add {
+    background-image: url(/@@/add.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.edit {
+    background-image: url(/@@/edit.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.remove {
+    background-image: url(/@@/remove.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.info {
+    background-image: url(/@@/info.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.question {
+    background-image: url(/@@/question.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.download-icon {
+    background-image: url(/@@/download.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.download {
+    background-image: url(/@@/download.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.search-icon {
+    background-image: url(/@@/search.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.no {
+    background-image: url(/@@/no.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.yes {
+    background-image: url(/@@/yes.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.crowd {
+    background-image: url(/@@/crowd.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.person {
+    background-image: url(/@@/person.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.person-badge {
+    background-image: url(/@@/person-badge.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.team {
+    background-image: url(/@@/team.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.team-badge {
+    background-image: url(/@@/team-badge.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowRight {
+    background-image: url(/@@/arrowRight.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.treeCollapsed {
+    background-image: url(/@@/treeCollapsed.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.treeExpanded {
+    background-image: url(/@@/treeExpanded.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.distribution {
+    background-image: url(/@@/distribution.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.package-source {
+    background-image: url(/@@/package-source.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.milestone {
+    background-image: url(/@@/milestone.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.language {
+    background-image: url(/@@/language.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.external-link {
+    background-image: url(/@@/link.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.mail {
+    background-image: url(/@@/mail.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.cve {
+    background-image: url(/@@/cve.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug {
+    background-image: url(/@@/bug.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-critical {
+    background-image: url(/@@/bug-critical.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-high {
+    background-image: url(/@@/bug-high.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-medium {
+    background-image: url(/@@/bug-medium.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-low {
+    background-image: url(/@@/bug-low.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-wishlist {
+    background-image: url(/@@/bug-wishlist.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint {
+    background-image: url(/@@/blueprint.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint-essential {
+    background-image: url(/@@/blueprint-essential.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint-high {
+    background-image: url(/@@/blueprint-high.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint-medium {
+    background-image: url(/@@/blueprint-medium.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint-low {
+    background-image: url(/@@/blueprint-low.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint-undefined {
+    background-image: url(/@@/blueprint-undefined.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.blueprint-not {
+    background-image: url(/@@/blueprint-not.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.rss {
+    background-image: url(/@@/rss.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+
+.ubuntu-logo {
+    background-image: url(/@@/ubuntu-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.person-inactive {
+    background-image: url(/@@/person-inactive.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.person-inactive-badge {
+    background-image: url(/@@/person-inactive-badge.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.mentoring {
+    background-image: url(/@@/mentoring.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.undecided {
+    background-image: url(/@@/maybe.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.error-icon {
+    background-image: url(/@@/error.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.cancel {
+    background-image: url(/@@/cancel.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.confirm {
+    background-image: url(/@@/confirm.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.flame {
+    background-image: url(/@@/flame-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-undecided {
+    background-image: url(/@@/bug-undecided.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-remote {
+    background-image: url(/@@/bug-remote.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-unknown {
+    background-image: url(/@@/bug-unknown.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-dupe {
+    background-image: url(/@@/bug-dupe-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bug-tracker {
+    background-image: url(/@@/bugtracker-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.package-binary {
+    background-image: url(/@@/package-binary.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.retry {
+    background-image: url(/@@/retry.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.distribution-badge {
+    background-image: url(/@@/distribution-badge.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.project-badge {
+    background-image: url(/@@/project-badge.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.project {
+    background-image: url(/@@/project.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.product-badge {
+    background-image: url(/@@/product-badge.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.product {
+    background-image: url(/@@/product.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.read-only {
+    background-image: url(/@@/read-only.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.warning-icon, .security {
+    background-image: url(/@@/warning.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.private {
+    background-image: url(/@@/private.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.meeting {
+    background-image: url(/@@/meeting.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.translate-icon {
+    background-image: url(/@@/translation.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.translation-file {
+    background-image: url(/@@/translation-file.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.translation-template {
+    background-image: url(/@@/translation-template.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.trash-icon {
+    background-image: url(/@@/trash-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.stop {
+    background-image: url(/@@/stop.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.list {
+    background-image: url(/@@/list.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bullet {
+    background-image: url(/@@/bullet.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.zoom-in {
+    background-image: url(/@@/zoom-in.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.zoom-out {
+    background-image: url(/@@/zoom-out.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.architecture {
+    background-image: url(/@@/architecture.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.ppa-icon {
+    background-image: url(/@@/ppa-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.ppa-icon-inactive {
+    background-image: url(/@@/ppa-icon-inactive.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+
+.bug-status-expand {
+    background-image: url(/@@/bug-status-expand.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
 .merge-proposal {
-  background:url(icon-sprites-3) 0 -46px no-repeat;
-  padding-left: 22px}
-.build-superseded {background:url(icon-sprites-3) 0 -80px no-repeat;}
-.build-sucess {background:url(icon-sprites-3) 0 -112px no-repeat;}
-.build-needed {background:url(icon-sprites-3) 0 -144px no-repeat;}
-.build-failure {background:url(icon-sprites-3) 0 -176px no-repeat;}
-.build-depwait {background:url(icon-sprites-3) 0 -208px no-repeat;}
-.arrowUp {background:url(icon-sprites-3) 0 -240px no-repeat;}
-.arrowDown {background:url(icon-sprites-3) 0 -256px no-repeat;}
-.arrowStart {background:url(icon-sprites-3) 0 -288px no-repeat;}
-.arrowEnd {background:url(icon-sprites-3) 0 -304px no-repeat;}
-.arrowTop {background:url(icon-sprites-3) 0 -328px no-repeat;}
-.arrowBottom {background:url(icon-sprites-3) 0 -356px no-repeat;}
-.arrowLeft {background:url(icon-sprites-3) 0 -384px no-repeat;}
-.bluebar {background:url(icon-sprites-3) 0 -416px repeat-x;}
-.redbar {background:url(icon-sprites-3) 0 -505px repeat-x;}
-.greenbar {background:url(icon-sprites-3) 0 -446px repeat-x;}
-.purplebar {background:url(icon-sprites-3) 0 -476px repeat-x;}
-.favorite-yes {background:url(icon-sprites-3) 0 -530px no-repeat;}
-.haspatch-icon {background:url(icon-sprites-3) 0 -562px no-repeat;}
+    background-image: url(/@@/merge-proposal-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+    padding-left: 22px
+}
+.build-superseded {
+    background-image: url(/@@/build-superseded.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.build-success {
+    background-image: url(/@@/build-success.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.build-needed {
+    background-image: url(/@@/build-needed.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.build-failure {
+    background-image: url(/@@/build-failure.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.build-depwait {
+    background-image: url(/@@/build-depwait.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowUp {
+    background-image: url(/@@/arrowUp.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowDown {
+    background-image: url(/@@/arrowDown.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowStart {
+    background-image: url(/@@/arrowStart.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowEnd {
+    background-image: url(/@@/arrowEnd.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowTop {
+    background-image: url(/@@/arrowTop.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowBottom {
+    background-image: url(/@@/arrowBottom.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.arrowLeft {
+    background-image: url(/@@/arrowLeft.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.bluebar {
+    background-image: url(/@@/blue-bar.png); /* sprite-ref: icon-sprites */
+    background-repeat: repeat-x;
+}
+.greenbar {
+    background-image: url(/@@/green-bar.png); /* sprite-ref: icon-sprites */
+    background-repeat: repeat-x;
+}
+.purplebar {
+    background-image: url(/@@/purple-bar.png); /* sprite-ref: icon-sprites */
+    background-repeat: repeat-x;
+}
+.redbar {
+    background-image: url(/@@/red-bar.png); /* sprite-ref: icon-sprites */
+    background-repeat: repeat-x;
+}
+.favorite-yes {
+    background-image: url(/@@/news.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.haspatch-icon {
+    background-image: url(/@@/haspatch-icon.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+
 
 /*large*/
-.large-branch {background:url(icon-sprites-large) 0 0 no-repeat;}
-.large-warning {background:url(icon-sprites-large) 0 -48px no-repeat;}
-.large-crowd {background:url(icon-sprites-large) 0 -96px no-repeat;}
-.large-download {background:url(icon-sprites-large) 0 -144px no-repeat;}
-.large-error {background:url(icon-sprites-large) 0 -144px no-repeat;}
-.large-flame {background:url(icon-sprites-large) 0 -192px no-repeat;}
-.large-download {background:url(icon-sprites-large) 0 -240px no-repeat;}
-.large-info {background:url(icon-sprites-large) 0 -288px no-repeat;}
-.large-launchpad {background:url(icon-sprites-large) 0 -336px no-repeat;}
-.large-mentoring {background:url(icon-sprites-large) 0 -384px no-repeat;}
-.large-proposal {background:url(icon-sprites-large) 0 -432px no-repeat;}
-.large-trash {background:url(icon-sprites-large) 0 -480px no-repeat;}
-.large-private {background:url(icon-sprites-large) 0 -528px no-repeat;}
+.large-branch {
+    background-image: url(/@@/branch-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-warning {
+    background-image: url(/@@/warning-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-crowd {
+    background-image: url(/@@/crowd-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-download {
+    background-image: url(/@@/download-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-error {
+    background-image: url(/@@/error-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-flame {
+    background-image: url(/@@/flame-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-download {
+    background-image: url(/@@/download-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-info {
+    background-image: url(/@@/info-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-launchpad {
+    background-image: url(/@@/launchpad-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-mentoring {
+    background-image: url(/@@/mentoring-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-proposal {
+    background-image: url(/@@/merge-proposal-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-trash {
+    background-image: url(/@@/trash-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.large-private {
+    background-image: url(/@@/private-large.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
 
 /*logo*/
-.logo-launchpad {background:url(icon-sprites-logo) 0 0 no-repeat;}
-.logo-distribution {background:url(icon-sprites-logo) 0 -80px no-repeat;}
-.logo-project {background:url(icon-sprites-logo) 0 -160px no-repeat;}
-.logo-product {background:url(icon-sprites-logo) 0 -240 no-repeat;}
-.logo-person {background:url(icon-sprites-logo) 0 -320 no-repeat;}
-.logo-inactive {background:url(icon-sprites-logo-2) 0 0 no-repeat;}
-.logo-team {background:url(icon-sprites-logo-2) 0 -80px no-repeat;}
-.logo-meeting {background:url(icon-sprites-logo-2) 0 -160px no-repeat;}
-.logo-flame {background:url(icon-sprites-logo-2) 0 -240 no-repeat;}
-.logo-trash {background:url(icon-sprites-logo-2) 0 -320 no-repeat;}
+.logo-launchpad {
+    background-image: url(/@@/launchpad-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-distribution {
+    background-image: url(/@@/distribution-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-project {
+    background-image: url(/@@/project-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-product {
+    background-image: url(/@@/product-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-person {
+    background-image: url(/@@/person-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+
+.logo-inactive {
+    background-image: url(/@@/person-inactive-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-team {
+    background-image: url(/@@/team-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-meeting {
+    background-image: url(/@@/meeting-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-flame {
+    background-image: url(/@@/flame-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
+.logo-trash {
+    background-image: url(/@@/trash-logo.png); /* sprite-ref: icon-sprites */
+    background-repeat: no-repeat;
+}
 
 /* Code styles */
 .branchstatusMATURE, .branchstatusMATURE a  {color: #090;}

=== modified file 'lib/canonical/launchpad/images/branch-large.png'
Binary files lib/canonical/launchpad/images/branch-large.png	2007-04-28 17:55:27 +0000 and lib/canonical/launchpad/images/branch-large.png	2010-02-11 05:00:37 +0000 differ
=== added file 'lib/canonical/launchpad/images/build-failure.png'
Binary files lib/canonical/launchpad/images/build-failure.png	1970-01-01 00:00:00 +0000 and lib/canonical/launchpad/images/build-failure.png	2010-02-11 05:00:37 +0000 differ
=== added file 'lib/canonical/launchpad/images/haspatch-icon.png'
Binary files lib/canonical/launchpad/images/haspatch-icon.png	1970-01-01 00:00:00 +0000 and lib/canonical/launchpad/images/haspatch-icon.png	2010-02-11 05:00:37 +0000 differ
=== modified file 'lib/canonical/launchpad/images/mentoring-large.png'
Binary files lib/canonical/launchpad/images/mentoring-large.png	2007-04-27 21:21:18 +0000 and lib/canonical/launchpad/images/mentoring-large.png	2010-02-11 05:00:37 +0000 differ
=== modified file 'lib/canonical/launchpad/images/mentoring.png'
Binary files lib/canonical/launchpad/images/mentoring.png	2007-04-27 21:21:18 +0000 and lib/canonical/launchpad/images/mentoring.png	2010-02-11 05:00:37 +0000 differ
=== modified file 'lib/canonical/launchpad/images/rss-large.png'
Binary files lib/canonical/launchpad/images/rss-large.png	2007-11-15 06:14:42 +0000 and lib/canonical/launchpad/images/rss-large.png	2010-02-11 05:00:37 +0000 differ
=== modified file 'lib/lp/app/browser/tests/base-layout.txt'
--- lib/lp/app/browser/tests/base-layout.txt	2010-01-30 22:39:54 +0000
+++ lib/lp/app/browser/tests/base-layout.txt	2010-02-11 05:00:37 +0000
@@ -218,14 +218,13 @@
 
     >>> print html
     <!DOCTYPE html ...
-    ...
-          <form id="globalsearch" method="get"
-                accept-charset="UTF-8"
-                class="sprite-after search-icon"
-                action="http://launchpad.dev/+search">
-            <input type="search" id="search-text" name="field.text" />
-          </form>
-        </div>
+      <form id="globalsearch" method="get"
+            accept-charset="UTF-8"
+            action="http://launchpad.dev/+search">
+        <input type="search" id="search-text" name="field.text" />
+        <input type="submit" value="" class="icon-only sprite search-icon" />
+      </form>
+    </div>
     ...
 
 Footer.

=== modified file 'lib/lp/app/templates/base-layout-macros.pt'
--- lib/lp/app/templates/base-layout-macros.pt	2010-01-30 18:15:36 +0000
+++ lib/lp/app/templates/base-layout-macros.pt	2010-02-11 05:00:37 +0000
@@ -338,10 +338,10 @@
           <a href="https://help.launchpad.net/">Read the guide</a>
           &nbsp;
           <form id="globalsearch" method="get" accept-charset="UTF-8"
-            class="sprite-after search-icon"
             tal:condition="view/macro:pagehas/globalsearch"
             tal:attributes="action string:${rooturl}+search">
             <input type="search" id="search-text" name="field.text" />
+            <input type="submit" value="" class="icon-only sprite search-icon" />
           </form>
         </div>
         <metal:site-message

=== added directory 'lib/lp/services/doc'
=== added file 'lib/lp/services/doc/sprites.txt'
--- lib/lp/services/doc/sprites.txt	1970-01-01 00:00:00 +0000
+++ lib/lp/services/doc/sprites.txt	2010-02-11 05:00:37 +0000
@@ -0,0 +1,185 @@
+Sprites
+=======
+
+Many small images in Launchpad are combined into a single image file,
+so that browsers do not have to make as many requests when they first
+view a page. An individual sprite is displayed as a background image
+on an element by setting the background position.
+
+A new image can be added to the combined file with the command:
+    make sprite_image
+
+The resulting icon-sprites and icon-sprites.positioning files must
+be committed to the repository. Any changes to the CSS template will
+be automatically picked up when Launchpad is restarted. If you don't
+want to restart launchpad.dev, you can run:
+    make css_combine
+
+
+CSS Template
+------------
+
+SpriteUtil takes a template css file that contains special comments
+indicating that the background-image for a given rule should be
+added to the combined image file and the rule should be updated.
+
+For example:
+    .add {
+        background-image: url(/@@/edit.png); /* sprite-ref: group1 */
+    }
+would become
+    .add {
+        background-image: url(foo/combined_image.png);
+        background-position: 0px 234px;
+    }
+
+The sprite-ref parameter specifies not only that the given image
+should become a sprite but also that all the images with sprite-ref
+value (in this case: "group1") will be combined to a single file.
+A SpriteUtil object currently can only process a single group.
+
+Loading the CSS Template
+------------------------
+
+Instatiating a new SpriteUtil object will parse the css template and
+find all the css rules for the specified group. The url_prefix_substitutions
+parameter allows you to convert url prefixes into file paths relative
+to the directory passed into combineImages(). The space between sprites
+in the file can be changed with the margin parameter.
+
+    >>> import os, tempfile
+    >>> import Image
+    >>> from lp.services.spriteutils import SpriteUtil
+    >>> root = os.path.abspath(os.path.join(__file__, '../../../../..'))
+    >>> icing = os.path.join(root, 'lib/canonical/launchpad/icing')
+    >>> new_png_file = tempfile.NamedTemporaryFile()
+    >>> new_positioning_file = tempfile.NamedTemporaryFile()
+    >>> new_css_file = tempfile.NamedTemporaryFile()
+    >>> def get_sprite_util(margin=0):
+    ...     return SpriteUtil(
+    ...         os.path.join(
+    ...             root, 'lib/lp/services/tests/testfiles/template.css'),
+    ...         'group1',
+    ...         url_prefix_substitutions={'/@@/': '../images/'},
+    ...         margin=margin)
+    >>> sprite_util = get_sprite_util()
+
+
+Generate Image File
+-------------------
+
+The combined image will have a width equal to that of the widest image,
+and the height will be the sum of all the image heights, since the margin
+is currently zero.
+
+    >>> sprite_util.combineImages(icing)
+    >>> sprite_util.savePNG(new_png_file.name)
+    >>> image = Image.open(new_png_file.name)
+    >>> print image.size
+    (32, 87)
+
+The height will increase when the margin is increased.
+
+    >>> sprite_util = get_sprite_util(margin=100)
+    >>> sprite_util.combineImages(icing)
+    >>> sprite_util.savePNG(new_png_file.name)
+    >>> image = Image.open(new_png_file.name)
+    >>> print image.size
+    (32, 587)
+
+
+Positioning File
+----------------
+
+The positioning file contains locations of each sprite in the combined
+image file. This allows the css file to be regenerated when the template
+changes without requiring the combined image file to be recreated.
+
+    >>> sprite_util.savePositioning(new_positioning_file.name)
+    >>> print new_positioning_file.read()
+    /*...
+    {
+        "../images/edit.png": [
+            0,
+            -228
+        ],
+        "../images/flame-large.png": [
+            0,
+            -456
+        ],
+        "../images/blue-bar.png": [
+            0,
+            -342
+        ],
+        "../images/add.png": [
+            0,
+            -114
+        ]
+    }
+
+The positions attribute can be cleared and loaded from the file.
+
+    >>> print pretty(sprite_util.positions)
+    {u'../images/add.png': (0, -114),
+     u'../images/blue-bar.png': (0, -342),
+     u'../images/edit.png': (0, -228),
+     u'../images/flame-large.png': (0, -456)}
+    >>> sprite_util.positions = None
+    >>> sprite_util.loadPositioning(new_positioning_file.name)
+    >>> print pretty(sprite_util.positions)
+    {'../images/add.png': [0, -114],
+     '../images/blue-bar.png': [0, -342],
+     '../images/edit.png': [0, -228],
+     '../images/flame-large.png': [0, -456]}
+
+
+Generate CSS File
+-----------------
+
+When the css file is generated, the second parameter is the relative
+path from the css file to the combined image file. The .add and .foo
+classes have the same background-position, since they both originally
+referenced /@@/add.png, which was only added once to the combined file.
+.bar and .info do not have a background-position and the background-image
+is not group1.png, since its sprite-ref is "group2".
+
+    >>> sprite_util.saveConvertedCSS(new_css_file.name, 'group1.png')
+    >>> print new_css_file.read()
+    /*...
+    .add {
+        background-image: url(group1.png);
+        /* sprite-ref: group1 */
+        background-position: 0 -114px
+        }
+    .foo {
+        background-image: url(group1.png);
+        /* sprite-ref: group1 */
+        background-position: 0 -114px
+        }
+    .bar {
+        background-image: url(/@@/add.png);
+        /* sprite-ref: group2 */
+        }
+    .edit {
+        background-image: url(group1.png);
+        /* sprite-ref: group1 */
+        background-repeat: no-repeat;
+        background-position: 0 -228px
+        }
+    .info {
+        background-image: url(/@@/info.png);
+        /* sprite-ref: group2 */
+        background-repeat: no-repeat
+        }
+    .bluebar {
+        background-image: url(group1.png);
+        /* sprite-ref: group1 */
+        background-repeat: repeat-x;
+        background-position: 0 -342px
+        }
+    .large-flame {
+        background-image: url(group1.png);
+        /* sprite-ref: group1 */
+        background-repeat: no-repeat;
+        background-position: 0 -456px
+        }

=== added file 'lib/lp/services/spriteutils.py'
--- lib/lp/services/spriteutils.py	1970-01-01 00:00:00 +0000
+++ lib/lp/services/spriteutils.py	2010-02-11 05:00:37 +0000
@@ -0,0 +1,243 @@
+# Copyright 2010 Canonical Ltd.  This software is licensed under the
+# GNU Affero General Public License version 3 (see the file LICENSE).
+#
+# Derived from make_master.py by Oran Looney.
+# http://oranlooney.com/make-css-sprites-python-image-library/
+
+"""Library to create sprites."""
+
+from __future__ import with_statement
+
+__metaclass__ = type
+
+__all__ = [
+    'SpriteUtil',
+    ]
+
+import os
+import sys
+import re
+import cssutils
+import Image
+import simplejson
+from textwrap import dedent
+
+
+class SpriteUtil:
+    EDIT_WARNING = dedent("""\
+        /* DO NOT EDIT THIS FILE BY HAND!!!    */
+        /* It is autogenerated by spriteutils. */
+        """)
+
+    def __init__(self, css_template_file, group_name,
+                 url_prefix_substitutions=None, margin=150):
+        """Initialize with the specified css template file.
+
+        :param css_template_file: (str) Name of the file containing
+            css rules with a background-image style that needs to be
+            combined into the sprite file, a comment allowing sprites to
+            be grouped into different image files, and a
+            background-repeat style if necessary. Currently, "repeat-y"
+            is not supported since the file is combined vertically, so
+            repeat-y would show the entire combined image file.
+
+            Example css template:
+                edit-icon {
+                    background-image: url(../edit.png)
+                    /* sprite-ref: group1 */
+                }
+                blue-bar {
+                    background-image: url(../blue-bar.png)
+                    /* sprite-ref: group1 */
+                    background-repeat: repeat-x
+                }
+
+        :param group_name: (str) Only add sprites to the
+            combined image file whose sprite-ref comment in the
+            css template match this group-name.
+
+        :param url_prefix_substitutions: (dict) The css template
+            will contain references to image files by their url
+            path, but the filesystem path relative to the css
+            template is needed.
+
+        :param margin: (int) The number of pixels between each sprite.
+            Be aware that Firefox will ignore extremely large images,
+            for example 64x34000 pixels.
+
+        If the css_template_file has been modified, a new
+        css file using an existing combined image and positioning
+        file can be generated using:
+            sprite_util = SpriteUtil(...)
+            sprite_util.loadPositioning(...)
+            sprite_util.saveConvertedCSS(...)
+
+        If a new image file needs to be added to the combined image
+        and the positioning file, they can be regenerated with:
+            sprite_util = SpriteUtil(...)
+            sprite_util.combineImages(...)
+            sprite_util.savePNG(...)
+            sprite_util.savePositioning(...)
+
+        If the image file is regenerated any time the css file is
+        regenerated, then the step for saving and loading the positioning
+        information could be removed. For example:
+            sprite_util = SpriteUtil(...)
+            sprite_util.combineImages(...)
+            sprite_util.savePNG(...)
+            sprite_util.saveConvertedCSS(...)
+        """
+        self.combined_image = None
+        self.positions = None
+        self.group_name = group_name
+        self.margin = margin
+        self._loadCSSTemplate(
+            css_template_file, group_name, url_prefix_substitutions)
+
+    def _loadCSSTemplate(self, css_template_file, group_name,
+                        url_prefix_substitutions=None):
+        """See `__init__`."""
+        smartsprites_exp = re.compile(
+            r'/\*+([^*]*sprite-ref: [^*]*)\*/')
+        self.css_object = cssutils.parseFile(css_template_file)
+        self.sprite_info = []
+        for rule in self.css_object:
+            if rule.cssText is None:
+                continue
+            match = smartsprites_exp.search(rule.cssText)
+            if match is not None:
+                smartsprites_info = match.group(1)
+                parameters = self._parseCommentParameters(match.group(1))
+                # Currently, only a single combined image is supported.
+                if parameters['sprite-ref'] == group_name:
+                    filename = self._getSpriteImagePath(
+                        rule, url_prefix_substitutions)
+                    self.sprite_info.append(
+                        dict(filename=filename, rule=rule))
+
+        if len(self.sprite_info) == 0:
+            raise AssertionError(
+                "No sprite-ref comments for group %r found" % group_name)
+
+    def _getSpriteImagePath(self, rule, url_prefix_substitutions=None):
+        """Convert the url path to a filesystem path."""
+        # Remove url() from string.
+        filename = rule.style.backgroundImage[4:-1]
+        # Convert urls to paths relative to the css
+        # file, e.g. '/@@/foo.png' => '../images/foo.png'.
+        if url_prefix_substitutions is not None:
+            for old, new in url_prefix_substitutions.items():
+                if filename.startswith(old):
+                    filename = new + filename[len(old):]
+        return filename
+
+    def _parseCommentParameters(self, parameter_string):
+        """Parse parameters out of javascript comments.
+
+        Currently only used for the group name specified
+        by "sprite-ref".
+        """
+        results = {}
+        for parameter in parameter_string.split(';'):
+            if parameter.strip() != '':
+                name, value = parameter.split(':')
+                name = name.strip()
+                value = value.strip()
+                results[name] = value
+        return results
+
+    def combineImages(self, css_dir):
+        """Copy all the sprites into a single PIL image."""
+
+        # Open all the sprite images.
+        sprite_images = {}
+        max_sprite_width = 0
+        total_sprite_height = 0
+        for sprite in self.sprite_info:
+            abs_filename = os.path.join(css_dir, sprite['filename'])
+            sprite_images[sprite['filename']] = Image.open(abs_filename)
+            width, height = sprite_images[sprite['filename']].size
+            max_sprite_width = max(width, max_sprite_width)
+            total_sprite_height += height
+
+        # The combined image is the height of all the sprites
+        # plus the margin between each of them.
+        combined_image_height = (
+            total_sprite_height + (self.margin * len(self.sprite_info) - 1))
+        transparent = (0, 0, 0, 0)
+        combined_image = Image.new(
+            mode='RGBA',
+            size=(max_sprite_width, combined_image_height),
+            color=transparent)
+
+        # Paste each sprite into the combined image.
+        y = 0
+        positions = {}
+        for index, sprite in enumerate(self.sprite_info):
+            sprite_image = sprite_images[sprite['filename']]
+            try:
+                position = [0, y]
+                combined_image.paste(sprite_image, tuple(position))
+                # An icon in a vertically combined image can be repeated
+                # horizontally, but we have to repeat it in the combined
+                # image so that we don't repeat white space.
+                if sprite['rule'].style.backgroundRepeat == 'repeat-x':
+                    width = sprite_image.size[0]
+                    for x_position in range(width, max_sprite_width, width):
+                        position[0] = x_position
+                        combined_image.paste(sprite_image, tuple(position))
+            except:
+                print >> sys.stderr, (
+                    "Error with image file %s" % sprite['filename'])
+                raise
+            # This is the position of the combined image on an HTML
+            # element. Therefore, it subtracts the position of the
+            # sprite in the file to move it to the top of the element.
+            positions[sprite['filename']] = (0, -y)
+            y += sprite_image.size[1] + self.margin
+
+        # If there is an exception earlier, these attributes will remain None.
+        self.positions = positions
+        self.combined_image = combined_image
+
+    def savePNG(self, filename):
+        """Save the PIL image object to disk."""
+        self.combined_image.save(filename, format='png', optimize=True)
+
+    def savePositioning(self, filename):
+        """Save the positions of sprites in the combined image.
+
+        This allows the final css to be generated after making
+        changes to the css template without recreating the combined
+        image file.
+        """
+        fp = open(filename, 'w')
+        fp.write(self.EDIT_WARNING)
+        simplejson.dump(self.positions, fp=fp, indent=4)
+
+    def loadPositioning(self, filename):
+        """Load file with the positions of sprites in the combined image."""
+        json = open(filename).read()
+        # Remove comments from the beginning of the file.
+        start = json.index('{')
+        json = json[start:]
+        self.positions = simplejson.loads(json)
+
+    def saveConvertedCSS(self, css_file, combined_image_url_path):
+        """Generate new css from the template and the positioning info.
+
+        Example css template:
+            background-image: url(../edit.png); /* sprite-ref: group1 */
+        Example css output:
+            background-image: url(combined_image_url_path)
+            background-position: 0px 2344px
+        """
+        for sprite in self.sprite_info:
+            rule = sprite['rule']
+            rule.style.backgroundImage = 'url(%s)' % combined_image_url_path
+            position = self.positions[sprite['filename']]
+            rule.style.backgroundPosition = '%dpx %dpx' % tuple(position)
+
+        with open(css_file, 'w') as fp:
+            fp.write(self.EDIT_WARNING)
+            fp.write(self.css_object.cssText)

=== added file 'lib/lp/services/tests/test_doc.py'
--- lib/lp/services/tests/test_doc.py	1970-01-01 00:00:00 +0000
+++ lib/lp/services/tests/test_doc.py	2010-02-11 05:00:37 +0000
@@ -0,0 +1,17 @@
+# Copyright 2010 Canonical Ltd.  This software is licensed under the
+# GNU Affero General Public License version 3 (see the file LICENSE).
+
+"""
+Run the doctests and pagetests.
+"""
+
+import os
+
+from lp.services.testing import build_test_suite
+
+
+here = os.path.dirname(os.path.realpath(__file__))
+
+
+def test_suite():
+    return build_test_suite(here)

=== added directory 'lib/lp/services/tests/testfiles'
=== added file 'lib/lp/services/tests/testfiles/template.css'
--- lib/lp/services/tests/testfiles/template.css	1970-01-01 00:00:00 +0000
+++ lib/lp/services/tests/testfiles/template.css	2010-02-11 05:00:37 +0000
@@ -0,0 +1,20 @@
+.add { background-image: url(/@@/add.png); /* sprite-ref: group1 */ }
+.foo { background-image: url(/@@/add.png); /* sprite-ref: group1 */ }
+.bar { background-image: url(/@@/add.png); /* sprite-ref: group2 */ }
+.edit {
+    background-image: url(/@@/edit.png);
+    /* sprite-ref: group1 */
+    background-repeat: no-repeat;
+}
+.info {
+    background-image: url(/@@/info.png); /* sprite-ref: group2 */
+    background-repeat: no-repeat;
+}
+.bluebar {
+    background-image: url(/@@/blue-bar.png); /* sprite-ref: group1 */
+    background-repeat: repeat-x;
+}
+.large-flame {
+    background-image: url(/@@/flame-large.png); /* sprite-ref: group1 */
+    background-repeat: no-repeat;
+}