Window.setModalMaskStyle() broken in 2.4 for IE

[tomhj]

I'm using GWT 2.2 and SmartGWT version 2.4. FF 3.6, FF 4.0.1 and IE 8.0.6001.18702.

My app is trying to use Window.setModalMaskStyle() to set custom CSS for the modal mask for a modal window to alter the modal mask to not be so dark.

This works fine in FF and Chrome but not IE. It doesn't seem that I am able to alter the modal mask at all in IE. This worked fine in IE with SmartGWT version 2.3. It is also broken for SmartGWT 2.5.

I've duplicated the problem in a very simple sample program. Here is my custom CSS:

.myModalMask {
	background-color: #FFF;
	opacity: 0.5;
}

And here is my simple onModuleEntry code:

        Window modalWindow = new Window();
        modalWindow.setIsModal(true);
        modalWindow.setShowModalMask(true);
        modalWindow.setModalMaskStyle("myModalMask");
        
        modalWindow.setHeight(150);
        modalWindow.setWidth(300);
        modalWindow.centerInPage();
        modalWindow.setTitle("Modal Mask Test");
        
        modalWindow.addItem(new Label("Some content here"));
        
        modalWindow.show();

Using Firebug in FF, I can see myModalMask style being applied to an outer-most DIV, followed by an inner DIV which contains a <img> with height/width of 1200/1600 and blank.gif image.

But IE's developer tool, shows a different DOM implementation: a single outer DIV with my CSS class name containing a <img> with height/width 1200/1600 and opacity.png.

So it appears SmartGWT/SmartClient changed in 2.4 to use opacity.png for IE instead of blank.gif - but in doing so, broke support for setModalMaskStyle().

Any suggestions or workarounds?

[Isomorphic]

CSS opacity doesn't work in IE8 and previous. See load_skin.js for the details of how this is working around with a semi-transparent gif.

[tomhj]

But it worked in SmartGWT 2.3 with the same IE8 browser. I see that SmartGWT2.3 used a filter to apply opacity:

<div class="modalMask" id="isc_1" style="z-index: 800050; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); WIDTH: 1071px; height: 623px; overflow: hidden; top: 0px; cursor: default; left: 0px;" onscroll="return isc_ModalWindow_0_modalMask.$lh()" eventProxy="isc_ModalWindow_0_modalMask">
<img width="1600" height="1200" align="textTop" src="https://qa240/RgGwt/sc/skins/Enterprise/images/blank.gif" border="0" complete="complete" suppress="TRUE"/>
</div>

So apparently there was a problem with doing that in SmartGWT 2.4 and above?

As far as a workaround in load_skin.js, I see code turning off of the filter usage and setting opacity.png for IE8+:

    if(isc.Browser.isIE && isc.Browser.version >= 7) {
        isc.Canvas.setAllowExternalFilters(false);
        isc.Canvas.setNeverUseFilters(true);
        if(isc.Window) {
          isc.Window.addProperties({
                modalMaskOpacity:null,
                modalMaskStyle:"normal"
            });
            isc.Window.changeDefaults("modalMaskDefaults", { src : "[SKIN]opacity.png" });
        }
    }

I can call setAllowExternalFilters(true), setNeverUseFilters(false) as well as setModalMaskStyle() and setModalMaskOpacity(). But I don't see how I can change the defaults so blank.gif is used instead of opacity.png.

If there was a way for me to use a different semi-transparent opacity.png file, that might do the trick.

[Isomorphic]

In 2.4 we switched to minimizing the use of filters in IE due to bugs and performance problems with filters in IE. The IEFilters doc (linked from all the APIs you mention) covers this in detail.

To change the opacity level in IE without re-introducing filters pervasively, change the level of opacity in opacity.png.

[tomhj]

Thanks for that good info.

Perhaps I'm blind, but I can't find the IEFilters doc you referenced in either the javadoc for those apis or in the load_skin.js file.

Is there a way to programmatically set the opacity.png file to use? Patching the smartgwt.jar file is unappealing. Plus my web app is used in two different ways on the same server: a) as a full blown webapp in which case the default opacity.png is fine and b) as a piece plugged into an embedded iframe - this is the case where we need to change the modal mask background to not be so dark so it looks better within the larger frameset layout. So I really need to be able to change the modal background on the fly.

[tomhj]

I can just change the src to a customOpacity.png with some JSNI.

Thanks