ThemeRoller: Clean user data and/or prevent invalid inputs

[welja]

When downloading this custom theme in the latest Firefox (link at bottom of ticket ) a background image gets a name with a percentage sign: ui-bg_highlight-soft_60%_ffa000_1x100.png which doesnot display in the browser.

Manual Fix: Remove % sign in image name and fix the corresponding css link ( line 69 )

​http://jqueryui.com/themeroller/?ffDefault=Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=10px&cornerRadius=2px&bgColorHeader=ffe3b4&bgTextureHeader=11_white_lines.png&bgImgOpacityHeader=35&borderColorHeader=feb12f&fcHeader=ffa000&iconColorHeader=ffa000&bgColorContent=fff7ea&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=feb12f&fcContent=333333&iconColorContent=222222&bgColorDefault=ffa000&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=60%&borderColorDefault=feb12f&fcDefault=ffffff&iconColorDefault=ffffff&bgColorHover=ffa000&bgTextureHover=01_flat.png&bgImgOpacityHover=100&borderColorHover=ffa000&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=fff7ea&bgTextureActive=12_gloss_wave.png&bgImgOpacityActive=60&borderColorActive=feb12f&fcActive=ffa000&iconColorActive=ffffff&bgColorHighlight=ffffff&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=feb12f&fcHighlight=000000&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px

[Scott González]

What are the manual steps for actually getting to that point?

[welja]

I retraced my steps and found out that if you enter a % sign in the themeroller (input name bgImgOpacityHover) it gets passed to the css and is used in the image name.

The steps are:

1. Go to ​http://jqueryui.com/themeroller
2. Put a number and a % sign in the opacity box ( i put it in [Clickable: hover state] )
3. Download the theme using the button underneath Roll Your Own.
4. Unpack the zip and go to the images folder and a png with an % in its name should be there (and in the css)

So some input escaping is due :)

[Scott González]

Not escaping, cleaning. You should never type a % in that field.

[welja]

Cleaning, that's it. And you should never be allowed to type a % in that field. :)

[Scott González]

Moved to new repo: ​https://github.com/jquery/download.jqueryui.com/issues/31