FWD » Core Development » User Interface

Most of the time, the status area draws without the inset effect in the text portion. When the tinyInput() modal window is open, the main window's status area actually does render properly. But as soon as it is dismissed, the status area "goes flat" again. This can be recreated using ask-gui.p.

This is definitely a bug in the web client. It is not clear if it is a regression due to recent web client changes in 2677a or if it was a latent web client problem that was exposed by some of the Java-side common code changes (e.g. for 3D support).

Two interesting findings:

1. If you watch carefully, you can see that when the window is first displayed, the status area briefly draws a properly inset version but then it will redraw as flat. This correct version is like a quick "flash" before being overdrawn.

2. If you resize the window (using the mouse to drag the lower right corner), the status area will draw properly inset. This will continue to draw properly until some kind of reset occurs. In ask-gui.p, it is only after the message update returns that the status area will "go flat" again.

The hello.p JS client drawing logs proves that this bug is due to an incorrect last clipping region that is used for the status bar drawing. I have compared logs for two cases 3-D effect is on and off correspondingly.
3-D is on - correct drawing

PaintPrimitives.TRANSLATE_PUSH  1; x = 4; y = 515   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541} !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
PaintPrimitives.FILL_RECT  x = 0; y = 0; width = 400; height = 22
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
PaintPrimitives.DRAW_LINE  x1 = 0; y1 = 0; x2 = 399; y2 = 0
PaintPrimitives.SET_COLOR  r = 128; g = 128; b = 128
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
PaintPrimitives.DRAW_LINE  x1 = 7; y1 = 3; x2 = 7; y2 = 18
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
PaintPrimitives.DRAW_LINE  x1 = 8; y1 = 3; x2 = 392; y2 = 3
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
PaintPrimitives.DRAW_LINE  x1 = 393; y1 = 3; x2 = 393; y2 = 3
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}
PaintPrimitives.DRAW_LINE  x1 = 8; y1 = 18; x2 = 392; y2 = 18
PaintPrimitives.SET_COLOR  r = 0; g = 0; b = 0
PaintPrimitives.SET_FONT 
PaintPrimitives.SET_FONT_STYLE 
PaintPrimitives.TRANSLATE_PUSH  2; x = 9; y = 3
lastClippedRegion(false) = {"x":-13,"y":-518,"width":408,"height":541}
PaintPrimitives.CLIP  3; x = 0; y = 0; width = 384; height = 17
PaintPrimitives.DRAW_STRING  text = Procedure complete. Press space bar to continue.; x = 0; y = 16; centered = true
PaintPrimitives.NO_CLIP  2
PaintPrimitives.TRANSLATE_POP  1; x = -9; y = -3
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":408,"height":541}

START DRAWING CYCLE FOR WINDOW 1
lastClippedRegion(false) = undefined
PaintPrimitives.CLIP  1; x = 0; y = 0; width = 409; height = 542
lastClippedRegion(false) = {"x":0,"y":0,"width":409,"height":542}
PaintPrimitives.CLIP  2; x = 4; y = 515; width = 400; height = 22
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":4.5,"y":515.5,"width":400,"height":22}
PaintPrimitives.FILL_RECT  x = 4; y = 515; width = 400; height = 22
PaintPrimitives.TRANSLATE_PUSH  1; x = 4; y = 515      ??????????????????????????????????
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22} ????????????????????????????????
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_RECT  x = 0; y = 0; width = 400; height = 22
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.DRAW_LINE  x1 = 0; y1 = 0; x2 = 399; y2 = 0
PaintPrimitives.SET_COLOR  r = 128; g = 128; b = 128
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.DRAW_LINE  x1 = 7; y1 = 3; x2 = 7; y2 = 18
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.DRAW_LINE  x1 = 8; y1 = 3; x2 = 392; y2 = 3
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.DRAW_LINE  x1 = 393; y1 = 3; x2 = 393; y2 = 3
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.DRAW_LINE  x1 = 8; y1 = 18; x2 = 392; y2 = 18
PaintPrimitives.SET_COLOR  r = 0; g = 0; b = 0
PaintPrimitives.SET_FONT 
PaintPrimitives.SET_FONT_STYLE 
PaintPrimitives.TRANSLATE_PUSH  2; x = 9; y = 3
lastClippedRegion(false) = {"x":-9,"y":-3,"width":400,"height":22}
PaintPrimitives.CLIP  3; x = 0; y = 0; width = 384; height = 17
PaintPrimitives.DRAW_STRING  text = Procedure complete. Press space bar to continue.; x = 0; y = 16; centered = true
PaintPrimitives.NO_CLIP  2
PaintPrimitives.TRANSLATE_POP  1; x = -9; y = -3
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [379,394,394] yPoints: [19,19,4]
PaintPrimitives.SET_COLOR  r = 128; g = 128; b = 128
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [380,394,394] yPoints: [19,19,5]
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [382,394,394] yPoints: [19,19,7]
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [383,394,394] yPoints: [19,19,8]
PaintPrimitives.SET_COLOR  r = 128; g = 128; b = 128
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [384,394,394] yPoints: [19,19,9]
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [386,394,394] yPoints: [19,19,11]
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [387,394,394] yPoints: [19,19,12]
PaintPrimitives.SET_COLOR  r = 128; g = 128; b = 128
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [388,394,394] yPoints: [19,19,13]
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [390,394,394] yPoints: [19,19,15]
PaintPrimitives.SET_COLOR  r = 255; g = 255; b = 255
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [391,394,394] yPoints: [19,19,16]
PaintPrimitives.SET_COLOR  r = 212; g = 208; b = 200
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
lastClippedRegion(true) = {"x":8.5,"y":1030.5,"width":400,"height":22}
PaintPrimitives.FILL_POLYGON  xPoints: [392,394,394] yPoints: [19,19,17]
END DRAWING CYCLE FOR WINDOW 1

Found the root cause, each of the stacked clipping regions should be updated on translate/untranslate in order to save the coordinates consistency.

Good. Post a diff when you have a fix available.

Code Review clipping_regions_1.txt

My primary concern with this change is that the each use of adjustOrigin() (which occurs during each translate() and untranslate()) will cause any intervening replay() (which occurs during resize()) to apply different values than were originally applied to the window.

In other words, is there ever a situation where in between a matched pair of translate() and untranslate() calls, there can be a call to resize()?

Code Review clipping_regions_1.txt

My primary concern with this change is that the each use of adjustOrigin() (which occurs during each translate() and untranslate()) will cause any intervening replay() (which occurs during resize()) to apply different values than were originally applied to the window.

In other words, is there ever a situation where in between a matched pair of translate() and untranslate() calls, there can be a call to resize()?

I think that the resize operation is performed only in the separate drawing circle because of WindowGuiImpl.resizeTo(NativePoint origin, NativeDimension size, boolean raise) implementation. If the target window is changed by the JS client, it can happen only after the drawing circle has been finished.

Please clean up the changes (e.g. please remove all the commented logging), add your history entry(s) and check it into task branch 1811t.

Done. Committed revision 10957.

Code Review Task Branch 1811t Revision 10957

The change looks good. What web GUI testcases have you checked with this?

I tested this fix with ./demo/demo_widgets.p, ./ask-gui.p, ./hello.p.

Please also test the following:

./toggle_box/gui/tbx_present.p
./combo_box/combo_box9_1.p
./rectangle/rect_test2.p
./image/image10_1.p
./button/gui_btn_test5.p
./demo/movie-ratings-dynamic.p
./window_parenting/waitfor_2wnd.p
./frame-z-order/zw1.p

And also test the customer's 454 testcase.

If all of these are no worse than in the trunk (and have the flat status fixed), then we will close this task.

I have started to check com.goldencode.testcases.toggle_box.gui.TbxPresent.execute with the current trunc version and found a new bug that can be reproduced by following these steps:
1) Resize the window to a smaller size until the scrollbars appear without thumbs and the window size is small enough to show only a one check box.
2) Click on any one of the displayed scrollbars buttons, then the window content disappears and there is some background browser processing that prevents any users action except close the web page!

Please also test the following:

./toggle_box/gui/tbx_present.p
./combo_box/combo_box9_1.p
./rectangle/rect_test2.p
./image/image10_1.p
./button/gui_btn_test5.p
./demo/movie-ratings-dynamic.p
./window_parenting/waitfor_2wnd.p
./frame-z-order/zw1.p

And also test the customer's 454 testcase.

If all of these are no worse than in the trunk (and have the flat status fixed), then we will close this task.

It seems that this fix don't add new bugs. The customer app is tested with OpenJDK8.