Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 349237

Summary: Use CSS Sprites for icon images
Product: [ECD] Orion Reporter: Simon Kaegi <simon_kaegi>
Component: ClientAssignee: Susan McCourt <susan>
Status: RESOLVED FIXED QA Contact:
Severity: normal    
Priority: P3 CC: malgorzata.tomczyk, Silenio_Quarti, Szymon.Brandys
Version: 0.2   
Target Milestone: 0.3 RC1   
Hardware: PC   
OS: Windows 7   
Whiteboard:

Description Simon Kaegi CLA 2011-06-13 16:46:53 EDT
Many of our images are small icon files. We could avoid a ton of image downloads if these were packaged into a single file and referenced as CSS background images.
Comment 1 Susan McCourt CLA 2011-09-26 11:59:11 EDT
will investigate for 0.3.
Comment 2 Susan McCourt CLA 2011-10-04 17:28:05 EDT
Just released a proof of concept for this.
7eb134c5b2ea8b8fe52172b176c72d96938c9f7e


The command framework has been updated to accept an "imageClass" rather than "image".  In this case, it will apply the proper rules for a css sprite background, and the client supplies the class that points to the correct part of the sprite.

Switching over the navigator and favorite commands took us from 33 image gets on the navigator page to 10 image gets.

Still to do:
- navigator icons such as file, folder, twisties, etc. need to be sprites
- banner elements could be sprites
- non-core commands (such as git) should be sprites
- haven't looked at the editor icons (such as annotations)...

I have some thinking to do about git commands.  If we generate separate sprites for git commands, then we need to figure out how to tell the command framework which sprite to use.  Separating the commands out by plug-in may not make sense, depending on whether the commands are contributed into other pages (such as the navigator).  For example, we wouldn't want to pull in a separate git sprite if it turns out we contribute git icons to the navigator anyway.

Note that we need to leave plug-in image contributions as they are because the images come from elsewhere, so the command framework probably has to keep the old code which traffics in images around anyway...
Comment 3 Susan McCourt CLA 2011-10-05 16:29:47 EDT
(In reply to comment #2)

> Still to do:
> - navigator icons such as file, folder, twisties, etc. need to be sprites
done
> - banner elements could be sprites
done
> - non-core commands (such as git) should be sprites
done

> I have some thinking to do about git commands.  
> If we generate separate sprites
> for git commands, then we need to figure out how to tell the 
> command framework which sprite to use.  
> Separating the commands out by plug-in may not make
> sense, depending on whether the commands are contributed into other 
> pages (such as the navigator). 

I generated a separate sprite.  The command framework will accept a "spriteClass" definition for the command, and if none is supplied, it will default to the core sprites.

At this point the navigator is down from 33 image gets to 5.  3 of those gets are for dojo sprites and an empty image.  2 of those gets are for our core sprite and our empty image (none.png).

Opened bugs for remaining to-do's
Bug 360031 - editor icons, annotations
Bug 360033 - none.png usage
Bug 360036 - command choice callbacks and images
Bug 360038 - git status table had some funny uses of images
Bug 360041 - if we are staying with sprites we need to automate the process and even better, provide Orion tools to make it easier for others to do so
Comment 4 Susan McCourt CLA 2011-10-05 16:30:14 EDT
fixed