[Phpmyadmin-devel] PMA Icon Spritify

Tyron Madlener tyronx at gmail.com
Fri Jul 15 09:41:32 CEST 2011

Hi, I've got a huge patch ready. In my branch 'sprites' I have
replaced the majority of all pma icons with sprites. This gives us the
following advantages

- In a few tests I saw that the overall amount of GET requests now has
been reduced by 20-33% depending on the loaded page
- In the process I removed all width/height attributes, and instead
moving this style related property into the stylesheet file. This will
also allow for much greater flexibility for theme makers.
- The code altogether is easier to read. No more theme path required
anymore. Example:
  -   . ($cfg['MainPageIconic'] ? '<img class="icon" src="' .
$pmaThemeImage . 's_vars.png" width="16" height="16" alt="" />' : '')
  +   . ($cfg['MainPageIconic'] ? '<img class="icon ic_s_vars"
src="themes/dot.gif" alt="" />' : '')

Notes about the change:
- The stylesheets now contain for each icon "name.png" a class
"ic_name" that needs to be applied.

- Sprites and CSS were automatically generated using
http://spritegen.website-performance.org/ - this can be used to update
the sprite data at a later point

- I have not replaced the following icons for now:
  - Icons bigger than 16x16
  - Icons being used with PMA_buttonOrImage() or PMA_linkOrButton()
  - CSS: Icons used as list-style-image or background-image

- PMA_getIcon() now translates 'sdf.png' into a 'ic_sdf' class

- Many help icons were sized 11x11 although the icon itself is 16x16.
I changed this to 16x16, but using an extra class 'ic_b_help_s', so
they can be still sized 11x11, if necessary.

- I tested all pma pages I could reach with my local configuration,
but there might be still some typos around.

- I have merged my tree with the master branch yesterday (though a bit
too late), so if we merge my code to master soon it should result in
little merge conflicts.

More information about the Developers mailing list