Merge lp:~huwshimi/juju-gui/more-load-improvements into lp:juju-gui/experimental

[Huw Wilkins]

More sprite and CSS cleanups

Moved images that are only used via background-image out of the sprites folder.
Changed some images to be used as sprites.
Removed some unused images.
Added a new mixin to handle using sprites for hover.
Removed some CSS that is no longer being used.
Cleaned up a little CSS for the sake of file size.
Removed old slider images from the Makefile as they were no longer being used.
Drive-by fix for bug #1245907 where extra scrollbars where appearing in the ghost inspector.

https://codereview.appspot.com/19700044/

[Huw Wilkins (huwshimi)]

Reviewers: mp+193186_code.launchpad.net,

Message:
Please take a look.

Description:
More sprite and CSS cleanups

Moved images that are only used via background-image out of the sprites
folder.
Changed some images to be used as sprites.
Removed some unused images.
Added a new mixin to handle using sprites for hover.
Removed some CSS that is no longer being used.
Cleaned up a little CSS for the sake of file size.
Removed old slider images from the Makefile as they were no longer being
used.
Drive-by fix for bug #1245907 where extra scrollbars where appearing in
the ghost inspector.

https://code.launchpad.net/~huwshimi/juju-gui/more-load-improvements/+merge/193186

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/19700044/

Affected files (+119, -192 lines):
   M Makefile
   A [revision details]
   D app/assets/images/email-click.png
   D app/assets/images/fullscreen_icon.png
   D app/assets/images/google-click.png
   D app/assets/images/inspector-charm-scale-up.png
   D app/assets/images/landscape_restart.png
   M app/assets/images/non-sprites/field-changed.png
   M app/assets/images/non-sprites/field-conflict-14.png
   M app/assets/images/non-sprites/field-conflict.png
   M app/assets/images/non-sprites/field-resolved.png
   M app/assets/images/non-sprites/field-saved-finished.png
   M app/assets/images/non-sprites/field-saved.png
   M app/assets/images/non-sprites/form-validation-cross.png
   M app/assets/images/non-sprites/form-validation-tick.png
   M app/assets/images/non-sprites/landscape_restart_menu.png
   M app/assets/images/non-sprites/landscape_security_menu.png
   M app/assets/images/non-sprites/paper-bg.jpg
   M app/assets/images/non-sprites/pattern_tile.png
   D app/assets/images/sidebar_icon.png
   D app/assets/images/twitter-click.png
   M app/index.html
   M app/subapps/browser/templates/browser_charm.handlebars
   M app/subapps/browser/templates/minimized.handlebars
   M app/subapps/browser/templates/sidebar.handlebars
   M app/templates/bundle-token.handlebars
   M app/templates/bundle.handlebars
   M app/templates/charm-token.handlebars
   M app/templates/left-breakout-panel.handlebars
   M lib/views/browser/browser-icon.less
   M lib/views/browser/charm-full.less
   M lib/views/browser/token.less
   M lib/views/browser/vars.less
   M lib/views/content-panel.less
   M lib/views/juju-inspector.less
   M lib/views/mixins.less
   M lib/views/stylesheet.less

[Gary Poster (gary)]

LGTM. Doing QA now.

https://codereview.appspot.com/19700044/diff/1/lib/views/mixins.less
File lib/views/mixins.less (right):

https://codereview.appspot.com/19700044/diff/1/lib/views/mixins.less#newcode100
lib/views/mixins.less:100: .sprite.hover {
Cool :-)

https://codereview.appspot.com/19700044/

[Gary Poster (gary)]

On 2013/10/30 12:37:11, gary.poster wrote:
> LGTM. Doing QA now.

> https://codereview.appspot.com/19700044/diff/1/lib/views/mixins.less
> File lib/views/mixins.less (right):

https://codereview.appspot.com/19700044/diff/1/lib/views/mixins.less#newcode100
> lib/views/mixins.less:100: .sprite.hover {
> Cool :-)

QAOK. landing.

https://codereview.appspot.com/19700044/

[Gary Poster (gary)]

On 2013/10/30 12:51:26, gary.poster wrote:
> On 2013/10/30 12:37:11, gary.poster wrote:
> > LGTM. Doing QA now.
> >
> > https://codereview.appspot.com/19700044/diff/1/lib/views/mixins.less
> > File lib/views/mixins.less (right):
> >
> >

https://codereview.appspot.com/19700044/diff/1/lib/views/mixins.less#newcode100
> > lib/views/mixins.less:100: .sprite.hover {
> > Cool :-)

> QAOK. landing.

Landed. Thanks!

https://codereview.appspot.com/19700044/

=== modified file 'Makefile'
--- Makefile	2013-10-25 22:06:25 +0000
+++ Makefile	2013-10-30 05:38:22 +0000
@@ -308,18 +308,6 @@
 		app/assets/javascripts/spin.min.js | $(JAVASCRIPT_LIBRARIES)
 	rm -f $(BUILD_FILES)
 	mkdir -p build-shared/juju-ui/assets/combined-css/
-	ln -sf \
-	    "$(PWD)/node_modules/yui/slider-base/assets/skins/sam/rail-x.png" \
-	    build-shared/juju-ui/assets/combined-css/rail-x.png
-	ln -sf \
-	    "$(PWD)/node_modules/yui/slider-base/assets/skins/sam/rail-y.png" \
-	    build-shared/juju-ui/assets/combined-css/rail-y.png
-	ln -sf \
-	    "$(PWD)/node_modules/yui/slider-base/assets/skins/sam/thumb-x.png" \
-	    build-shared/juju-ui/assets/combined-css/thumb-x.png
-	ln -sf \
-	    "$(PWD)/node_modules/yui/slider-base/assets/skins/sam/thumb-y.png" \
-	    build-shared/juju-ui/assets/combined-css/thumb-y.png
 	bin/merge-files
 	mv *.js.map build-shared/juju-ui/assets/
 
@@ -339,10 +327,6 @@
 	build-$(1)/juju-ui/assets/juju-gui.css \
 	build-$(1)/juju-ui/assets/sprites.css \
 	build-$(1)/juju-ui/assets/sprites.png \
-	build-$(1)/juju-ui/assets/combined-css/rail-x.png \
-	build-$(1)/juju-ui/assets/combined-css/rail-y.png \
-	build-$(1)/juju-ui/assets/combined-css/thumb-x.png \
-	build-$(1)/juju-ui/assets/combined-css/thumb-y.png \
 	build-$(1)/juju-ui/assets/all-yui.js
 
 LINK_DEBUG_FILES=$(call shared-link-files-list,debug) \
@@ -371,17 +355,6 @@
 	ln -sf \
 	    "$(PWD)/build-shared/juju-ui/assets/combined-css/all-static.css" \
 	    build-$(1)/juju-ui/assets/combined-css/
-	ln -sf \
-	    "$(PWD)/build-shared/juju-ui/assets/combined-css/rail-x.png" \
-	    build-$(1)/juju-ui/assets/combined-css/
-	ln -sf \
-	    "$(PWD)/build-shared/juju-ui/assets/combined-css/rail-y.png" \
-	    build-$(1)/juju-ui/assets/combined-css/
-	ln -sf \
-	    "$(PWD)/build-shared/juju-ui/assets/combined-css/thumb-x.png" \
-	    build-$(1)/juju-ui/assets/combined-css/
-	ln -sf "$(PWD)/build-shared/juju-ui/assets/combined-css/thumb-y.png" \
-	    build-$(1)/juju-ui/assets/combined-css/
 	ln -sf "$(PWD)/build-shared/juju-ui/assets/juju-gui.css" \
 	    build-$(1)/juju-ui/assets/
 	ln -sf "$(PWD)/build-shared/juju-ui/assets/sprites.css" \

=== removed file 'app/assets/images/email-click.png'
Binary files app/assets/images/email-click.png	2013-07-11 20:23:47 +0000 and app/assets/images/email-click.png	1970-01-01 00:00:00 +0000 differ
=== removed file 'app/assets/images/fullscreen_icon.png'
Binary files app/assets/images/fullscreen_icon.png	2013-07-11 09:47:02 +0000 and app/assets/images/fullscreen_icon.png	1970-01-01 00:00:00 +0000 differ
=== removed file 'app/assets/images/google-click.png'
Binary files app/assets/images/google-click.png	2013-07-11 20:23:47 +0000 and app/assets/images/google-click.png	1970-01-01 00:00:00 +0000 differ
=== removed file 'app/assets/images/inspector-charm-scale-up.png'
Binary files app/assets/images/inspector-charm-scale-up.png	2013-07-18 15:37:42 +0000 and app/assets/images/inspector-charm-scale-up.png	1970-01-01 00:00:00 +0000 differ
=== removed file 'app/assets/images/landscape_restart.png'
Binary files app/assets/images/landscape_restart.png	2013-02-14 00:32:35 +0000 and app/assets/images/landscape_restart.png	1970-01-01 00:00:00 +0000 differ
=== renamed file 'app/assets/images/field-changed.png' => 'app/assets/images/non-sprites/field-changed.png'
=== renamed file 'app/assets/images/field-conflict-14.png' => 'app/assets/images/non-sprites/field-conflict-14.png'
=== renamed file 'app/assets/images/field-conflict.png' => 'app/assets/images/non-sprites/field-conflict.png'
=== renamed file 'app/assets/images/field-resolved.png' => 'app/assets/images/non-sprites/field-resolved.png'
=== renamed file 'app/assets/images/field-saved-finished.png' => 'app/assets/images/non-sprites/field-saved-finished.png'
=== renamed file 'app/assets/images/field-saved.png' => 'app/assets/images/non-sprites/field-saved.png'
=== renamed file 'app/assets/images/form-validation-cross.png' => 'app/assets/images/non-sprites/form-validation-cross.png'
=== renamed file 'app/assets/images/form-validation-tick.png' => 'app/assets/images/non-sprites/form-validation-tick.png'
=== renamed file 'app/assets/images/landscape_restart_menu.png' => 'app/assets/images/non-sprites/landscape_restart_menu.png'
=== renamed file 'app/assets/images/landscape_security_menu.png' => 'app/assets/images/non-sprites/landscape_security_menu.png'
=== renamed file 'app/assets/images/paper-bg.jpg' => 'app/assets/images/non-sprites/paper-bg.jpg'
=== renamed file 'app/assets/images/pattern_tile.png' => 'app/assets/images/non-sprites/pattern_tile.png'
=== removed file 'app/assets/images/sidebar_icon.png'
Binary files app/assets/images/sidebar_icon.png	2013-07-11 09:47:02 +0000 and app/assets/images/sidebar_icon.png	1970-01-01 00:00:00 +0000 differ
=== removed file 'app/assets/images/twitter-click.png'
Binary files app/assets/images/twitter-click.png	2013-07-11 20:23:47 +0000 and app/assets/images/twitter-click.png	1970-01-01 00:00:00 +0000 differ
=== modified file 'app/index.html'
--- app/index.html	2013-10-29 22:30:57 +0000
+++ app/index.html	2013-10-30 05:38:22 +0000
@@ -64,7 +64,7 @@
       <!-- This <img> tag is here just to force early loading of the background
         image so it displays more quickly.  This makes a large improvement to
         the way the app looks while loading on a slow connection. -->
-      <img src="/juju-ui/assets/images/pattern_tile.png" style="display: none;">
+      <img src="/juju-ui/assets/images/non-sprites/pattern_tile.png" style="display: none;">
 
       <div id="full-screen-mask" class="crosshatch-background">
         <div id="browser-warning" class="centered-column"
@@ -125,13 +125,13 @@
             </li>
             <li class="tab">
               <a class="fullscreen" href="">
-                <i class="sprite fullscreen_icon"></i>
+                <i class="sprite inspector_status_selected"></i>
                 Browse
               </a>
             </li>
             <li class="tab">
               <a class="sidebar" href="">
-                <i class="sprite sidebar_icon"></i>
+                <i class="sprite inspector_configuration_selected"></i>
                 Build
               </a>
             </li>

=== modified file 'app/subapps/browser/templates/browser_charm.handlebars'
--- app/subapps/browser/templates/browser_charm.handlebars	2013-10-23 21:10:55 +0000
+++ app/subapps/browser/templates/browser_charm.handlebars	2013-10-30 05:38:22 +0000
@@ -1,8 +1,17 @@
-<div class="charm {{#if is_approved}}recommended{{/if}}">
+<div class="charm">
     <div class="content">
         {{#unless forInspector}}
             <div class="header">
-                    {{#unless isFullscreen}}<a href="" class="back icon"></a>{{/unless}}
+                {{#if is_approved}}
+                    <div class="recommended">
+                        <i class="sprite recommended-triangle-large"></i>
+                    </div>
+                {{/if}}
+                {{#unless isFullscreen}}
+                  <a href="" class="back icon">
+                      <i class="sprite panel_close"></i>
+                  </a>
+                {{/unless}}
                 <div class="block-icon">
                     <img src="{{charmIconPath storeId}}" alt="{{ name }} icon" class="icon">
                 </div>
@@ -67,13 +76,16 @@
             {{#unless forInspector}}
                 <span id="sharing">
                   <a href="http://twitter.com/home?status={{ twitterText }}" title="Share on twitter">
-                    <i class="sprite twitter-normal"></i>
+                    <i class="sprite twitter-normal normal"></i>
+                    <i class="sprite twitter-hover hover"></i>
                   </a>
                   <a href="https://plus.google.com/share?url={{ link }}" title="Share on G+">
-                    <i class="sprite google-normal"></i>
+                    <i class="sprite google-normal normal"></i>
+                    <i class="sprite google-hover hover"></i>
                   </a>
                   <a href="mailto:?subject={{ emailSubject }}&body={{ emailText }}" title="Share with email">
-                    <i class="sprite email-normal"></i>
+                    <i class="sprite email-normal normal"></i>
+                    <i class="sprite email-hover hover"></i>
                   </a>
                 </span>
             {{/unless}}

=== modified file 'app/subapps/browser/templates/minimized.handlebars'
--- app/subapps/browser/templates/minimized.handlebars	2013-07-03 22:55:30 +0000
+++ app/subapps/browser/templates/minimized.handlebars	2013-10-30 05:38:22 +0000
@@ -1,1 +1,3 @@
-<a href="" class="bws-icon"></a>
+<a href="" class="bws-icon">
+    <i class="sprite browser_icon"></i>
+</a>

=== modified file 'app/subapps/browser/templates/sidebar.handlebars'
--- app/subapps/browser/templates/sidebar.handlebars	2013-09-23 00:44:11 +0000
+++ app/subapps/browser/templates/sidebar.handlebars	2013-10-30 05:38:22 +0000
@@ -1,5 +1,7 @@
 <div class="charmbrowser">
-    <a href="" class="bws-icon"></a>
+    <a href="" class="bws-icon">
+        <i class="sprite browser_icon"></i>
+    </a>
     <div id="bws-sidebar">
         <div class="bws-header">
         </div>

=== modified file 'app/templates/bundle-token.handlebars'
--- app/templates/bundle-token.handlebars	2013-10-09 22:20:53 +0000
+++ app/templates/bundle-token.handlebars	2013-10-30 05:38:22 +0000
@@ -2,8 +2,13 @@
     test/test_charm_running.py.  If you change this name, change the other
     one too! }}
 <a href="/bundle/{{id}}"
-   class="token {{size}} {{#if is_approved}}recommended{{/if}}"
+   class="token {{size}}"
    data-charmid="/bundle/{{id}}">
+    {{#if is_approved}}
+        <span class="recommended">
+            <i class="sprite recommended-triangle"></i>
+        </span>
+    {{/if}}
     <span class="block-icon">
         <div class="icon">
             <img src="{{charmIconPath id true}}" alt="{{ name }} icon">

=== modified file 'app/templates/bundle.handlebars'
--- app/templates/bundle.handlebars	2013-10-29 22:30:57 +0000
+++ app/templates/bundle.handlebars	2013-10-30 05:38:22 +0000
@@ -2,7 +2,16 @@
     <div class="content">
         {{#unless forInspector}}
             <div class="header">
-                <a href="" class="back icon"></a>
+                {{#if is_approved}}
+                    <div class="recommended">
+                        <i class="sprite recommended-triangle-large"></i>
+                    </div>
+                {{/if}}
+                {{#unless isFullscreen}}
+                    <a href="" class="back icon">
+                        <i class="sprite panel_close"></i>
+                    </a>
+                {{/unless}}
                 <div class="block-icon">
                     <img src="{{charmIconPath id true}}" alt="{{ name }} icon" class="icon">
                 </div>

=== modified file 'app/templates/charm-token.handlebars'
--- app/templates/charm-token.handlebars	2013-10-09 13:06:00 +0000
+++ app/templates/charm-token.handlebars	2013-10-30 05:38:22 +0000
@@ -2,8 +2,13 @@
     test/test_charm_running.py.  If you change this name, change the other
     one too! }}
 <a href="/{{storeId}}"
-   class="token {{size}} {{#if is_approved}}recommended{{/if}}"
-   data-charmid="{{storeId}}">
+   class="token {{size}}"
+     data-charmid="{{storeId}}">
+    {{#if is_approved}}
+        <span class="recommended">
+            <i class="sprite recommended-triangle"></i>
+        </span>
+    {{/if}}
     <span class="block-icon">
         <div class="icon">
             {{#unless iconUrl}}

=== modified file 'app/templates/left-breakout-panel.handlebars'
--- app/templates/left-breakout-panel.handlebars	2013-07-26 06:43:11 +0000
+++ app/templates/left-breakout-panel.handlebars	2013-10-30 05:38:22 +0000
@@ -1,4 +1,6 @@
 <div>
-	<a href="" class="close-slot" data-slot="left-hand-panel"></a>
+	<a href="" class="close-slot" data-slot="left-hand-panel">
+      <i class="sprite panel_close"></i>
+  </a>
     <div class="content">{{initial}}</div>
 </div>

=== modified file 'lib/views/browser/browser-icon.less'
--- lib/views/browser/browser-icon.less	2013-10-10 14:12:48 +0000
+++ lib/views/browser/browser-icon.less	2013-10-30 05:38:22 +0000
@@ -3,14 +3,16 @@
     display: block;
     left: @bws-sidebar-width;
     top: 114px;
-    width: 40px;
-    height: 40px;
-    background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
-        no-repeat center center;
+    padding: 7px;
+    background-color: #bbb;
     box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
     z-index: 610;
+
+    i.sprite {
+        display: block;
+    }
 }
 .content-visible .bws-icon {
     left: @bws-sidebar-width + @bws-panel-width;

=== modified file 'lib/views/browser/charm-full.less'
--- lib/views/browser/charm-full.less	2013-10-29 22:30:57 +0000
+++ lib/views/browser/charm-full.less	2013-10-30 05:38:22 +0000
@@ -1,12 +1,5 @@
 .bundle,
 .charm {
-    &.recommended {
-        .header {
-            background:
-                url(/juju-ui/assets/images/recommended-triangle-large.png)
-                no-repeat right top, url(/juju-ui/assets/images/paper-bg.jpg) repeat 0 0;
-        }
-    }
     .changelog li,
     .changelog p,
     .details {
@@ -32,6 +25,17 @@
         }
     }
     .header {
+        position: relative;
+
+        .recommended {
+            position: absolute;
+            top: 0;
+            right: 0;
+
+            i.sprite {
+                display: block;
+            }
+        }
         .block-icon {
             display: inline-block;
             float: left;
@@ -254,6 +258,7 @@
         padding: 17px 70px 16px 16px;
 
         a {
+            .sprite-hover;
             padding-right: 5px;
         }
     }
@@ -264,13 +269,6 @@
     background-color: #fff;
     background-image: none;
 
-    &.recommended {
-        .header {
-            background:
-                url(/juju-ui/assets/images/recommended-triangle-large.png)
-                no-repeat right top;
-        }
-    }
     .header {
         .type13;
         position: relative;
@@ -298,7 +296,9 @@
                 }
             }
         }
-
+        .back.icon {
+            display: none;
+        }
         .block-icon,
         .details {
             display: block;

=== modified file 'lib/views/browser/token.less'
--- lib/views/browser/token.less	2013-10-29 02:29:58 +0000
+++ lib/views/browser/token.less	2013-10-30 05:38:22 +0000
@@ -9,12 +9,6 @@
         padding: 20px;
         color: @text-colour;
 
-        &.recommended {
-            margin-top: -1px;
-            background: transparent
-                url(/juju-ui/assets/images/recommended-triangle.png)
-                no-repeat right top;
-        }
         &.tiny {
             min-width: 200px;
 
@@ -60,6 +54,15 @@
                 height: 96px;
             }
         }
+        .recommended {
+            position: absolute;
+            top: -1px;
+            right: 0;
+
+            i.sprite {
+                display: block;
+            }
+        }
         .block-icon,
         .title,
         .metadata,

=== modified file 'lib/views/browser/vars.less'
--- lib/views/browser/vars.less	2013-10-29 02:29:58 +0000
+++ lib/views/browser/vars.less	2013-10-30 05:38:22 +0000
@@ -4,7 +4,7 @@
 @bws-border: #d9d9d9;
 @bws-panel-width: 750px;
 @bws-sidebar-width: 290px;
-@bws-background: #ebecee url(/juju-ui/assets/images/paper-bg.jpg) repeat 0 0;
+@bws-background: #ebecee url(/juju-ui/assets/images/non-sprites/paper-bg.jpg) repeat 0 0;
 @bws-groove-dark: #c9cbc8;
 @bws-groove-light: #f4f2f3;
 @tabview-left-padding: 80px;

=== modified file 'lib/views/content-panel.less'
--- lib/views/content-panel.less	2013-10-29 02:29:58 +0000
+++ lib/views/content-panel.less	2013-10-30 05:38:22 +0000
@@ -56,8 +56,9 @@
         right: 30px;
         width: 20px;
         height: 20px;
-        background: transparent
-            url(/juju-ui/assets/images/panel_close.png)
-            left top no-repeat;
+
+        i.sprite {
+            display: block;
+        }
     }
 }

=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less	2013-10-29 15:20:45 +0000
+++ lib/views/juju-inspector.less	2013-10-30 05:38:22 +0000
@@ -21,10 +21,10 @@
 */
 .pulse-green-frames-mixin () {
     0% {
-        background-image: url(/juju-ui/assets/images/field-saved.png);
+        background-image: url(/juju-ui/assets/images/non-sprites/field-saved.png);
     }
     100% {
-        background-image: url(/juju-ui/assets/images/field-saved-finished.png);
+        background-image: url(/juju-ui/assets/images/non-sprites/field-saved-finished.png);
     }
 }
 
@@ -129,11 +129,11 @@
             background-repeat: no-repeat;
 
             &.valid {
-                background-image: url(/juju-ui/assets/images/form-validation-tick.png);
+                background-image: url(/juju-ui/assets/images/non-sprites/form-validation-tick.png);
             }
 
             &.invalid {
-                background-image: url(/juju-ui/assets/images/form-validation-cross.png);
+                background-image: url(/juju-ui/assets/images/non-sprites/form-validation-cross.png);
             }
         }
         input[type=text] {
@@ -662,6 +662,7 @@
             margin-bottom: @inspector-controls-height;
         }
         .view-container {
+            overflow-x: hidden;
             overflow-y: auto;
             margin-top: -1px;
 
@@ -710,7 +711,7 @@
                 }
                 .modified {
                   background-color: @inspector-changed-field;
-                  background-image: url(/juju-ui/assets/images/field-changed.png);
+                  background-image: url(/juju-ui/assets/images/non-sprites/field-changed.png);
                   background-repeat: no-repeat;
 
                   &.boolean {
@@ -723,11 +724,11 @@
                 }
                 .conflict-pending {
                   background-color: @inspector-changed-field;
-                  background-image: url(/juju-ui/assets/images/field-conflict.png);
+                  background-image: url(/juju-ui/assets/images/non-sprites/field-conflict.png);
 
                   &.boolean {
                     background-color: inherit;
-                    background-image: url(/juju-ui/assets/images/field-conflict-14.png);
+                    background-image: url(/juju-ui/assets/images/non-sprites/field-conflict-14.png);
                     display: inline-block;
                     width: 14px;
                     height: 14px;
@@ -738,7 +739,7 @@
 
                 .conflict {
                   background-color: @inspector-changed-field;
-                  background-image: url(/juju-ui/assets/images/field-resolved.png);
+                  background-image: url(/juju-ui/assets/images/non-sprites/field-resolved.png);
                 }
 
                 /* Inputs does not need to have the background-image */
@@ -759,7 +760,7 @@
                 }
 
                 .change-saved {
-                    background-image: url(/juju-ui/assets/images/field-saved.png);
+                    background-image: url(/juju-ui/assets/images/non-sprites/field-saved.png);
                     background-position: center right;
                     background-repeat: no-repeat;
                     .animation(pulse-green 1s);

=== modified file 'lib/views/mixins.less'
--- lib/views/mixins.less	2013-10-29 04:47:09 +0000
+++ lib/views/mixins.less	2013-10-30 05:38:22 +0000
@@ -59,16 +59,12 @@
     .create-border-radius(@border-radius);
     .create-linear-gradient(@charm-panel-orange, #c03f11);
     color: #fff;
-    text-decoration:none;
+    text-decoration: none;
     display: inline-block;
     margin: 0;
     padding: 8px 14px;
     border: none;
     font-size: 14px;
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-font-smoothing: subpixel-antialiased;
-    -o-font-smoothing: subpixel-antialiased;
-    font-smoothing: subpixel-antialiased;
 
     &:hover {
         background: @charm-panel-orange;
@@ -77,12 +73,12 @@
         // Using a variable here because LESS strips commas in mixin args.
         @box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
         .create-box-shadow(@box-shadow);
-        background:  #eeeeee;
+        background:  #eee;
         border: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
         &:hover {
-            background: #eeeeee;
+            background: #eee;
         }
     }
 }
@@ -98,3 +94,17 @@
         border: 1px solid #a8a8a8;
     }
 }
+.sprite-hover {
+    &:focus,
+    &:hover {
+        .sprite.hover {
+            display: inline-block;
+        }
+        .sprite.normal {
+            display: none;
+        }
+    }
+    .sprite.hover {
+        display: none;
+    }
+}

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-10-29 22:30:57 +0000
+++ lib/views/stylesheet.less	2013-10-30 05:38:22 +0000
@@ -58,13 +58,19 @@
 @import "mixins.less";
 
 /* Common classes and setup */
+body,
+input,
+button,
+select,
+textarea {
+    font-family: @font-family;
+    font-weight: 300;
+}
 body {
     overflow: hidden;
     height: 100%;
     margin-top: @navbar-height;
     background-color: #302b28;
-    font-family: @font-family;
-    font-weight: 300;
     font-size: 14px;
     line-height: 18px;
     -webkit-font-smoothing: antialiased;
@@ -77,10 +83,6 @@
     color: @charm-panel-orange;
     text-decoration: none;
 }
-input, button, select, textarea {
-    font-family: @font-family;
-    font-weight: 300;
-}
 button {
     cursor: pointer;
     -webkit-appearance: button;
@@ -245,6 +247,7 @@
                 padding: 24px 0 0 0;
 
                 a {
+                    .sprite-hover;
                     display: block;
                     float: left;
                     height: 15px;
@@ -257,24 +260,15 @@
                     &:last-child {
                         border-right: 1px solid @navbar-border-light;
                     }
-                    // Ugly classes to display the correct sprite for the
-                    // state. We might be able to turn this into a mixin
-                    // if we need to redo the same thing often.
+                    .sprite {
+                        display: block;
+                        margin: 1px 0 0 0;
+                    }
                     &:focus,
                     &:hover {
                         .sprite.hover {
                             display: block;
                         }
-                        .sprite.normal {
-                            display: none;
-                        }
-                    }
-                    .sprite.hover {
-                        display: none;
-                    }
-                    .sprite {
-                        display: block;
-                        margin: 1px 0 0 0;
                     }
                 }
                 #import-trigger {
@@ -348,7 +342,7 @@
     overflow: hidden;
 }
 .crosshatch-background {
-    background: url(/juju-ui/assets/images/pattern_tile.png) repeat;
+    background: url(/juju-ui/assets/images/non-sprites/pattern_tile.png) repeat;
 }
 #canvas {
     position: relative;
@@ -446,19 +440,19 @@
     .triangle {
         position: absolute;
         top: 22px;
-        width: 0px;
-        height: 0px;
+        width: 0;
+        height: 0;
         border-style: solid;
     }
     &.right .triangle {
         left: -16px;
         border-width: 10px 17.3px 10px 0;
-        border-color: transparent #ffffff transparent transparent;
+        border-color: transparent #fff transparent transparent;
     }
     &.left .triangle {
         right: -16px;
         border-width: 10px 0 10px 17.3px;
-        border-color: transparent transparent transparent #ffffff;
+        border-color: transparent transparent transparent #fff;
 
     }
     .menu-title {
@@ -492,10 +486,10 @@
                 }
             }
             &.landscape-reboot {
-                background-image: url(/juju-ui/assets/images/landscape_restart_menu.png);
+                background-image: url(/juju-ui/assets/images/non-sprites/landscape_restart_menu.png);
             }
             &.landscape-security {
-                background-image: url(/juju-ui/assets/images/landscape_security_menu.png);
+                background-image: url(/juju-ui/assets/images/non-sprites/landscape_security_menu.png);
             }
             &:last-child {
                 border-bottom: none;
@@ -518,9 +512,6 @@
     }
 
 }
-charms.thumbnails.li {
-    height:4em;
-}
 .subordinate-rel-group {
     display: none;
 
@@ -560,84 +551,6 @@
         dominant-baseline: middle;
     }
 }
-.state-error {
-    stroke: #FF0000;
-}
-.state-started {
-    stroke: #000000;
-}
-.state-pending {
-    stroke: #6597E8;
-}
-div.state-error {
-    @error-color: #c01c20;
-    background-color: @error-color;
-    color: #FFFFFF;
-
-    &:hover {
-        background-color: lighten(@error-color, 10%);
-    }
-}
-div.state-started {
-    @started-color: #d8d8d8;
-    background-color: @started-color;
-
-    &:hover {
-        background-color: lighten(@started-color, 10%);
-    }
-}
-div.state-pending {
-    @pending-color: #fcd305;
-    background-color: @pending-color;
-
-    &:hover {
-        background-color: lighten(@pending-color, 20%);
-    }
-}
-
-.unit(@min_height: 20px, @border_radius:3px) {
-    .create-border-radius(@border_radius);
-    padding: 5px;
-    margin-bottom: 0px;
-    min-height: @min_height;
-    cursor: pointer;
-
-    .agent-state {
-        display: none;
-    }
-}
-ul#unit-large div.unit {
-    .unit(40px);
-}
-ul#unit-medium div.unit {
-    .unit;
-}
-ul#unit-small {
-    margin-left: 0px;
-
-    > li {
-        margin-bottom: 5px;
-        margin-left: 5px;
-
-        > div.unit {
-            .unit;
-            width: 1.7em;
-            text-align: center;
-        }
-    }
-}
-ul#unit-tiny {
-    margin-left: 0px;
-
-    > li {
-        margin-bottom: 3px;
-        margin-left: 3px;
-
-        > div.unit {
-            .unit(0px, 1px);
-        }
-    }
-}
 circle.mouse-down-indicator {
     stroke: #040404;
     stroke-width: 2px;
@@ -714,16 +627,6 @@
     path {
         stroke-width: 0;
         fill: #fff;
-
-        &.status-pending {
-            fill: #fcd305;
-        }
-        &.status-running {
-            fill: rgb(57, 180, 74);
-        }
-        &.status-error {
-            fill: #c01c20;
-        }
     }
 }
 g.unit {
@@ -732,7 +635,7 @@
     fill: #1626cf;
 
     .address {
-        fill: #ffffff; font-size: 14px;
+        fill: #fff; font-size: 14px;
     }
     .unit-border {
         stroke-width: 2px; fill: #a0a0a0;
@@ -831,7 +734,7 @@
     z-index: 10;
 
     a {
-        color: white;
+        color: #fff;
         background-color: @charm-panel-orange;
         display: block;
         line-height: 30px;
@@ -942,11 +845,6 @@
 .unit-button-palette {
     float: right;
 }
-#service-relations {
-    .btn {
-        float: right;
-    }
-}
 #destroy-service {
     margin-top: 10px;
     margin-left: 10px;