Challenge: Fix the ToolTips

[mritter]

Your mission, if you decide to accept it, is to track down the tooltips flashing issue.

In the Windows theme only the tooltips make the side panel buttons (Begin Install, Options, Config, etc) flash. It is very annoying. And the tooltip position is wrong. It gets moved above the mouse when it should be below it. That happens in all the themes.

I would appreciate some help tracking this issue down. It is probably something simple that I am overlooking, but it is eluding me.

[DJPro]

Your mission, if you decide to accept it, is to track down the tooltips flashing issue.

In the Windows theme only the tooltips make the side panel buttons (Begin Install, Options, Config, etc) flash. It is very annoying. And the tooltip position is wrong. It gets moved above the mouse when it should be below it. That happens in all the themes.

I would appreciate some help tracking this issue down. It is probably something simple that I am overlooking, but it is eluding me.

Hi mritter,

I noticed this too a while ago.

If I move the mouse over the 'exit' button, the side panel buttons flash.

Indeed it was annoying in the beginning because this wasn't the issue in earlier versions.

I 'll search and sea if I find something related to that.

Greetings, DJPro

[mistaecko]

I just toyed around with the code for an hour or more - I'm still pretty lost in the code, and having never worked on a HTA before I had to fall back to most primitive methods for debugging.

First of all, I don't have a solution, not even close

However, I think it is important to track down the exact problem first, then the solution will hopefully be obvious.

IMHO it is important to stress what DJPro has already pointed out: the flickering is NOT really related to the Tooltips. Even with Tooltips disabled the flickering still occurs on at least two different occasions:

1. Hovering over the Exit button.

2. Loading the config, options, themes, etc Windows will cause the menu flicker as well.

ad 1. This might indicate that the problem is related to onMouseXXX events, either defined on the Exit button (or one of its parent containers) or on the menu panel (or one of its parent containers). To me it looks like it might be the onMouseOut event of the menu panel or the main window.

ad 2 Switching a panel inside any of the opened windows will trigger a menu flicker. This might indicate that ANY component on top of the main window that holds the menu will cause the menu to flicker. I guess that also applies to the tooltip windows, and since those are repositioned continuously the problem is just so much more obvious.

I further assume that the flicker is a repaint of the menu panel. The repaint might cause the tooltips to disappear, moving the mouse will adjust the position of the tooltip and trigger a repaint of the tooltip layer.

The behavior is more clear when hovering slowly over the Exit button. The menu repaints and the tooltip appears. My guess is that the menu repaints as a result of a onMouseOut event of the menu panel, and the tooltip appears as a result of the OnMouseOver on the Exit button.

I would also consider a bug in the dhtmlx framework/components, and ask for feedback in the forums there.

I found one problem related to repainting/flickering related to an embedded .NET component. Seems worth pointing out since a HTA is clearly no 'clean' web application, and related to Microsofts ActiveX and component architecture (maybe?).

http://forum.dhtmlx.com/viewtopic.php?f=5&t=12087&p=35328&hilit=flicker&sid=a20820412394c16ee3473de08b00c830#p35328

If I had any more clue about the WPI app and/or debugging HTA applications I would try to pin down the problem even more. I guess somebody who has the layout and component model of the app in mind can pick up from here.

A good option IMHO would be to strip the application bare of component by component as long as the problem exists. Either ending up with a very basic component layout that makes it easier to understand and debug the problem, or maybe even fining the problematic component/structure.

Sorry for the lengthy post, and if I just pointed out what you guys already knew anyway. This is my effort at contributing to this great project and saying thank you!

mistaecko

[DJPro]

Interesting post 'mistaecko'

I was just playing around and noticed that if you put the 'exit' button in the side panel like the other side panel buttons nothing will flash.

To do this I changed the wpi.htm script in \Common\Themes\Windows

(so the exit button is not in the bottom bar anymore)

Picture

Even if the tooltips are enabled nothing flash.

But if 'Use transitions' is enabled and you hover the mouse on some of your programs the side panel will flash.

Maybe interesting to track down this issue.

DJPro

Edited August 30, 2010 by DJPro

[mistaecko]

Found it!!! Now help me understand it

It is related to the layers (DIVs) and how they are cascaded, more exactly how the background image is implemented:

I made the following changes in \Common\Themes\Windows\wpi.htm (thanks DJPro for pointing me there):

1. I basically removed the bgpiclayer DIV. In order to avoid JS errors that try to work on the layer I just added an empty DIV with this ID just before (outside!) the wrapper DIV.

2. Moved the TipLayer DIV to outside the wrapper DIV but BEFORE the bgpiclayer DIV. Positioned AFTER the bgpiclayer DIV this will NOT fix the problem.

<body class="body"
	onLoad="WPIReady();"
	onClick="stopInterval();"
	onKeyDown="stopInterval(); CheckKey();"
>

<object id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px">
<!-- For list of fonts -->
</object>

<div id="TipLayer" style="visibility:hidden; position:absolute; z-index:1000; top:-100;">
</div>

<div id="bgpiclayer"></div>
<div id="wrapper" style="position:absolute; width:100%; height:100%;">

<div id="div_logo" style="position:absolute;">

Voila! Problem mostly gone! But background as well!

I think the main problem is how the background image is applied. Why not use the CSS background property on the wrapper DIV?

<div id="wrapper" style="background-image:url('../Themes/Gnome/Wallpaper.jpg'); visibility:hidden; position:absolute; z-index:-4321; width:100%; height:100%;">

This worked well for me (in the above code)

The flickering (repaint) still happens when hovering over the Exit button, and when switching tabs in the windows (and on some other occasions).

The hovering code can be improved as well, because now the tooltip flickers when moving from the icon to the text, because there is a gap inbetween and IE will trigger the onMouseOut/Over events in that case. For an explanation and a possible fix, see here: http://dynamic-tools.net/toolbox/isMouseLeaveOrEnter/

I am not a HTML guru (far from that - I'm programmer), but I've worked with some, and to me it seems the HTML code might be able to be improved by following recent 'standards' in web design.

Tables are out nowadays, DIVs are the way to go. Main reason is that tables should be used only to structure data, not as layout tool. And while this is more relevant to websites and not necessarily to a tool like WPI, I guess it is still 'best practice'. I'm not sure but I think there are technical reasons as well. I think that there are issues with nesting DIVs inside a table TD, which I've seen also in the WPI code.

Furthermore if you use a strict DIV layout and format only via CSS, the end result will allow for easy skinning!

So my recommendation (obviously NOT based on expert knowledge ):

• Get rid of background images applied via <IMG>
  
• Get rid of tables
  
• Move CSS style attributes from inline code to CSS files.
  

mistaecko

Edited August 31, 2010 by mistaecko

[mritter]

Cool. I was thinking it was something along those lines. What throws me is that Accordion and Corporate themes don't flicker (or nearly as much). They don't have as many nested divs, but still have the basic ones.

I will do some testing and post results.............

[DJPro]

Maybe interesting to know !

The tooltips don't flash if you run wpi when IE 7 is installed.

I did a test on a Windows Vista with IE 7.

After installing update IE 8 the tooltips were flashing.

Don't know if someone noticed this as well ?

DJPro

[mritter]

I did a bunch of testing last week and could not get a 100% flash free solution. I could make some not flash, but others still would. I think it might be due to mshta not caching the images like a browser would.

The solution that will work is one I am avoiding: same as the buttons (Load, Save, Cancel....). Put all the image states in one images and "shift" them up/down instead of swapping the entire image. But......that would mean going through every theme and change every image......very daunting task. It would also make it harder for people to make their own buttons.

Wait a minute!!!!!.............just had an idea!!!!..............stay tuned...............

[DJPro]

Hi Mritter,

As I posted before when you put the 'exit' button in the side panel like the other buttons nothing flash.

So if the 'exit' button remains in the 'main window' nothing will flash, it's only when it's stated in the bottom bar.

So I thought it had to do with some overlay or how the cells are placed in Internet Explorer.

I changed the script wpi.htm in \Common\Themes\Windows

this line:

        <!-- The main display window -->
        <td class="opTxt" style="width:100%; height:100%; vertical-align:top; padding:0px;">

into this:

        <!-- The main display window -->
        <td rowspan="2" class="opTxt" style="width:100%; height:100%; vertical-align:top; padding:0px;">

So I just added 'rowspan="2"' to have the ability to extend verticle rows.

SOLUTION -> Nothing flashes anymore !!! (even if 'Use transitions' is enabled which was not the case before)

I did a test on different operating systems with the same positive result.

One thing I noticed it didn't work on the 'WindowsFramed' theme. (changing \Common\Themes\WindowsFramed -> wpi.htm)

I would like to know if someone can test and have the same positive results.

Good Luck, DJPro

[mritter]

SWEET! It works for Windows theme! Strange how something so simple/obscure was the culprit.

Now for WindowsFramed...............