Bug 351726

Comment 1 Ivan Furnadjiev 2011-07-11 11:33:47 EDT

Hi Nikolai, thanks for the patch. Unfortunately, it's not possible to include these changes in 1.4 maintenance release, as this is a big new feature/enhancement, not a bugfix. To my knowledge, even IE9 (not only IE6-8) lacks of support for text-shadow CSS3 property.

Comment 2 Ivan Furnadjiev 2011-07-14 04:05:52 EDT

I've tested it on Sfari 5 and Opera 11.5 on Windows... works fine. Firefox 3.0 does not support text-shadow property. IE9 and IE10 preview don't support it either. I've managed to enable text-shadow in the text field itself ( including Text single/multi/message, Combo, CCombo, Spinner ). Currently only Opera does not support text-shadow in HTML input/textarea elements.

Comment 3 Nikolai Raitsev 2011-07-14 05:10:11 EDT

Created attachment 199643 [details]
Text-Shadows in IE

Hi Ivan,

it's possible to use MS proprietary filter "dropshadow" [1] to make text-shadows in IE. But... it's makes the entire theme broken and it makes the rap very slow in browser (only IE, tested in IE 8):

######################
Code HtmlUtil.js:
######################

setTextShadow: function( target, shadowObject ) {
    	var property;
    	if( org.eclipse.rwt.Client.isMshtml() ) {
    		property = "filter";
    	}
    	else {
    		property = "textShadow";
    	}
        if( shadowObject ) {
          var string;
          
          if(property === "filter") {
        	  offX = shadowObject[ 1 ];
        	  offY = shadowObject[ 2 ];
        	  color = shadowObject[ 5 ];
        	  string = "dropshadow(color=" + color + ",offX=" + offX + ",offY=" + offY + ");";
          }
          else {
        	  // NOTE: older webkit dont accept spread, therefor only use parameters 1-3  
        	  string = shadowObject.slice( 1, 4 ).join( "px " ) + "px";
        	  var rgba = qx.util.ColorUtil.stringToRgb( shadowObject[ 5 ] );
        	  rgba.push( shadowObject[ 6 ] );
        	  string += " rgba(" + rgba.join() + ")";
          }
          this.setStyleProperty( target, property, string );
        } else {
          this.removeStyleProperty( target, property );
        }
    },

######################
End Code HtmlUtil.js:
######################

[1]: http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx

Comment 4 Ivan Furnadjiev 2011-07-14 05:29:13 EDT

(In reply to comment #3)
Yes... I found this link too and my fear for slow IE in this case is confirmed by you. Here is an example of thin library that utilize the filter property for text-shadows in IE - http://fetchak.com/ie-css3/.

Comment 5 Nikolai Raitsev 2011-07-14 11:34:07 EDT

(In reply to comment #4)

thanks for the link, Ivan!

Comment 6 Ivan Furnadjiev 2011-07-18 05:05:35 EDT

Hi Nikolai, when I run the dark theme I have some CSSException in the console:
 org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-unselected.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-unselected-hover.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-selected.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-selected-hover.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-grayed.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/check-grayed-hover.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/sort-indicator-up.png
org.w3c.css.sac.CSSException: Failed to read property background-image: Failed to read image from /phirea.dark.theme/fancy/icons/sort-indicator-down.png
There is a segment "/fancy/" and maybe some image are missing. Could you fix it please. Thanks.

Comment 7 Nikolai Raitsev 2011-07-18 05:27:26 EDT

Hi Ivan,

sorry, that was my fault (that's slipped through my fingers:):

just remove all this backgrounds and run build_css.xml again in theme-bundle. The backgrounds from RAP-Fancy-Design are not used.

--- less/phirea-theme.less.css	(revision 1333)
+++ less/phirea-theme.less.css	(working copy)
@@ -650,35 +650,6 @@
 
 Table-Checkbox {
   width: 21px;
-  background-image: url( /theme1/fancy/icons/check-unselected.png );
-}
-
-Table-Checkbox:hover {
-  background-image: url( /theme1/fancy/icons/check-unselected-hover.png );
-}
-
-Table-Checkbox:checked {
-  background-image: url( /theme1/fancy/icons/check-selected.png );
-}
-
-Table-Checkbox:checked:hover {
-  background-image: url( /theme1/fancy/icons/check-selected-hover.png );
-}
-
-Table-Checkbox:checked:grayed {
-  background-image: url( /theme1/fancy/icons/check-grayed.png );
-}
-
-Table-Checkbox:checked:grayed:hover {
-  background-image: url( /theme1/fancy/icons/check-grayed-hover.png );
-}
-
-TableColumn-SortIndicator:up {
-  background-image: url( /theme1/fancy/icons/sort-indicator-up.png );
-}
-
-TableColumn-SortIndicator:down {
-  background-image: url( /theme1/fancy/icons/sort-indicator-down.png );
 }

Comment 8 Ivan Furnadjiev 2011-07-18 09:55:19 EDT

CSS3 text-shadow support has been added to all widgets that contain text. Support for Internet Explorer is *not* implemented due to bad performance when using filter property and lack of support for CSS3 text-shadow - see comment #3. Changes are in CVS.