[Isomorphic]

As mentioned, the code handling "display:none" in SGWT 12.0p/SC 12.0p and newer releases is a bit different than that of SGWT 6.1p/SC 11.1p and earlier. We've added some speculative fixes for this issue to SGWT 12.0p/SC 12.0p and newer releases that may resolve your issue, but due to the differences, porting it back further would require porting back several other Framework changes. So, before we port these speculative fixes back, you'll either need to provide some sample code so we can verify that such a port will solve your issue, or you'll need to test your app in SGWT 12.0p/SC 12.0p or newer and verify it's fixed.

The mentioned changes will be in the nightly builds dated 2018-11-01 and beyond.

[markok]

Here is some (pretty horrific) sample code which can be used to trigger these problems at least for me. using latest Chrome on Mac.

We did not find any simple test case where the problem occurs. Somehow, with complex enough UI's (as is the case with our primary application), the problems occur. We just started adding and adding content and copying some code from our application and are able then to produce the problems. That said, please don't read into the sample code as if we've identified the problem - we haven't: We just tinkered around to find small enough code which can be used to somehow reproduce the problem.

How to use the sample:

1. Run the code
2. Do some clicking in the UI (switch the right hand-side tabs for example)
3. Resize the browser aggressively around
4. Click the "change deck" button at the bottom toolbar
5. Repeat steps 2-4 'enough' to trigger the UI anomalies. For examples, see screenshots below.

Something we observed: The framework now seems to log out a row when the adjustOverflow bails out because of a "display:none" parent present. With the sample code below, when everything seems to be working normally these lines are NOT logged. But when resizing and adjusting the layouts, sometimes, somehow, these lines start to burp out. As if the adjustOverflow should never happen (for hidden decks ?) in normal operation, but when the problem gets triggered these lines start to be logged out (if "overflow" log level is set as DEBUG):

...
VM169201 Log.js:2026 *08:09:09.250:MUP6:DEBUG:overflow:isc_TabSet_4_tabBar_baseLine_isc_OID_4:Skipping overflow since hidden with 'display:none'
VM169201 Log.js:2026 *08:09:09.253:MUP6:DEBUG:overflow:isc_ToolStrip_265:Skipping overflow since hidden with 'display:none'
VM169201 Log.js:2026 *08:09:09.255:MUP6:DEBUG:overflow:isc_Label_208:Skipping overflow since hidden with 'display:none'
VM169201 Log.js:2026 *08:09:09.258:MUP6:DEBUG:overflow:isc_ToolStrip_266:Skipping overflow since hidden with 'display:none'
VM169201 Log.js:2026 *08:09:09.261:MUP6:DEBUG:overflow:isc_Label_209:Skipping overflow since hidden with 'display:none'
VM169201 Log.js:2026 *08:09:09.263:MUP6:DEBUG:overflow:isc_ToolStrip_267:Skipping overflow since hidden with 'display:none'
...

Edit: We missed your latest reply. The code that follows fails in 2018-10-27 6.1p branch - we haven't tested anything in the 12.0p branch.

    public class CardLayoutCanvas extends Deck {
        private HashMap<Object, Canvas> cards = null;

        protected boolean initialized = false;

        private Canvas currentCard = null;
        private Object currentKey = null;

        public CardLayoutCanvas() {
            super();
            cards = new HashMap<Object, Canvas>();
        }

        public void addCard(Object key, Canvas card, boolean shown) {
            cards.put(key, card);
            if(shown)
                currentKey = key;
        }

        public void initializeCards() {
            setPanes(cards.values().toArray(new Canvas[0]));
            if(currentKey != null) {
                showCard(currentKey, false, true);
            }
            initialized = true;
        }

        public Canvas showCard(final Object key, final boolean fireHiddenEvents, final boolean fireShownEvents) {
            Object shownKey = null;
            Canvas shownCard = null;

            final Canvas c = cards.get(key);
            if(c != null) {
                shownCard = c;
                shownKey = key;

                if(currentCard != null) {
                    // hide current card with display:none and move content offscreen
                    currentCard.hide();
                    currentCard.setWidth(currentCard.getWidth());
                    currentCard.setHeight(currentCard.getHeight());
                    currentCard.setTop(-10000);
                }

                c.setWidth100();
                c.setHeight100();
                c.setTop(0);
                c.show();

                setCurrentPane(c);

                currentCard = shownCard;
                currentKey = shownKey;
            }

            return shownCard;
        }

        public Canvas showCard(final Object key) {
            return showCard(key, true, true);
        }

        public Object getCurrentKey() {
            return currentKey;
        }
    }

    public void doOnModuleLoad() {
        viewport = new VLayout();
        viewport.setWidth100();
        viewport.setHeight100();

        viewport.setPadding(8);
        viewport.setPaddingAsLayoutMargin(true);
        viewport.setMembersMargin(4);
        viewport.setOverflow(Overflow.HIDDEN);
        viewport.setMinWidth(800);
        viewport.setMinHeight(600);

        // init layouts

        ToolStrip topStrip = new ToolStrip();
        topStrip.addButton(new ToolStripButton("top strip button"));
        viewport.addMember(topStrip);

        HLayout middleLayout = new HLayout();

        VLayout middleLeftLayout = new VLayout();
        middleLeftLayout.setWidth(200);

        TabSet tabSet = new TabSet();
        tabSet.setHideUsingDisplayNone(true);

        generateTabs(tabSet);
        generateTabs(tabSet);

        middleLeftLayout.addMember(tabSet);

        middleLeftLayout.setShowResizeBar(true);
        middleLayout.addMember(middleLeftLayout);

        final CardLayoutCanvas deck = new CardLayoutCanvas();
        deck.setWidth100();
        deck.setHeight100();
        middleLayout.addMember(deck);

        viewport.addMember(middleLayout);

        ToolStrip bottomStrip = new ToolStrip();
        ToolStripButton b = new ToolStripButton("change deck");
        b.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent clickEvent) {
                Object current = deck.getCurrentKey();
                int next = Integer.parseInt("" + current) + 1;
                if(next > 8)
                    next = 1;
                deck.showCard("" + next);
            }
        });
        bottomStrip.addButton(b);
        viewport.addMember(bottomStrip);

        // /init layouts

        // add some problematic decks

        deck.addCard("1", generateCard(1), true);
        deck.addCard("2", generateCard(2), false);
        deck.addCard("3", generateCard(3), false);
        deck.addCard("4", generateCard(4), false);
        deck.addCard("5", generateCard(5), false);
        deck.addCard("6", generateCard(6), false);
        deck.addCard("7", generateCard(7), false);
        deck.addCard("8", generateCard(8), false);
        deck.initializeCards();

        viewport.draw();
    }

    public Canvas generateCard(int i) {
        VLayout card1 = new VLayout();
        card1.setHideUsingDisplayNone(true);

        SectionStack ss1 = new SectionStack();
        ss1.setHideUsingDisplayNone(true);
        ss1.setBorder("2px solid yellow");
        ss1.setWidth100();
        ss1.setHeight100();
        SectionStackSection sss1 = new SectionStackSection("our stack " + i);
        sss1.setExpanded(true);

        TabSet tabSet = new TabSet();
        tabSet.setAnimateTime(150);

        generateTabs(tabSet);
        generateTabs(tabSet);
        generateTabs(tabSet);
        generateTabs(tabSet);
        generateTabs(tabSet);
        generateTabs(tabSet);
        generateTabs(tabSet);
        generateTabs(tabSet);

        VLayout l1 = new VLayout();
        l1.addMember(tabSet);

        ToolStrip card1Strip = new ToolStrip();
        card1Strip.addMember(new ToolStripButton("card " + i + " button"));
        l1.addMember(card1Strip);

        LayoutSpacer spacer = new LayoutSpacer();
        spacer.setHeight(4);
        sss1.setItems(spacer, l1);
        ss1.setSections(sss1);
        card1.addMember(ss1);

        return card1;
    }

    public void generateTabs(TabSet tabSet) {
        Tab tab1 = new Tab();

        VLayout pane = new VLayout();
        pane.addMember(new ToolStrip());

        for(int i=0;i<8; i++) {
            pane.addMember(generateLabel());
            ToolStrip ts = new ToolStrip();
            ts.addFill();
            ts.addButton(new ToolStripButton("a button here"));
            pane.addMember(ts);
        }

        tab1.setPane(pane);
        tabSet.addTab(tab1);

        Tab tab2 = new Tab();
        VLayout tab2Pane = new VLayout();
        tab2Pane.setBorder("3px solid blue");
        tab2Pane.setWidth100();
        tab2Pane.setHeight100();
        ListGrid g = new ListGrid();
        g.setFixedRecordHeights(false);
        g.setFields(new ListGridField("cell 1"), new ListGridField("cell 2"), new ListGridField("cell 3"), new ListGridField("cell 4"));

        int c = Random.nextInt(50);
        ListGridRecord[] records = new ListGridRecord[c];
        for(int i=0; i<c; i++) {
            ListGridRecord r = new ListGridRecord();
            r.setAttribute("cell 1", rnds());
            r.setAttribute("cell 2", rnds());
            r.setAttribute("cell 3", rnds());
            r.setAttribute("cell 4", rnds());
            records[i] = r;
        }
        g.setData(records);

        tab2Pane.addMember(g);
        tab2Pane.addMember(new ToolStrip());
        tab2.setPane(tab2Pane);

        tabSet.addTab(tab2);
    }

    public Label generateLabel() {
        Label l2 = new Label(rnds());
        l2.setWidth100();
        l2.setHeight100();
        l2.setBorder("5px solid green");
        return l2;
    }

    public String rnds() {
        int len = Random.nextInt(1500);
        StringBuilder sb = new StringBuilder();
        for(int i=0; i<len; i++)
            sb.append("super randomizer code".charAt(Random.nextInt("super randomizer code".length())));
        return sb.toString();
    }

Some samples of anomalies below:

[markok]

To report back, we had a quick test of the above code with SmartClient Version: v12.0p_2018-11-01/LGPL Development Only (built 2018-11-01).

The first impression is that it is working better, but we still managed to get at least one anomaly to pop up. We attached a screenshot of this. There might, of course, be others, but this is something we got out quite easily.

[Isomorphic]

Are you doing something special to create that gap? Just loading the sample code you provided doesn't reproduce it for us, nor does resizing the browser. Note that we've assumed that your "Random" object is an instance of the Java Random class, created with the no-argument constructor.

[markok]

It's com.google.gwt.user.client.Random.

Yes, It is a bit hard to trigger: Just loading the sample does not trigger it and neither does a simple resize. It might take some clicking and resizing but we are able to reproduce it just about every time with some effort. As instructed above, we load the sample, change the deck (and the tab in the deck) few times, aggressively resize the browser and repeat the previous until the anomalies get triggered. It is not something that we need to do for 5 minutes, we get them most likely in 15-30 seconds of use.

It is important to understand that the problem seems to be related to the decks that are hidden. The anomalies (the gap for example) present themselves by clicking the "change deck" button as if, the once hidden deck was drawn (or redrawn) incorrectly in the background. With this sample, the anomalies never present themselves on the deck currently on top.

[Isomorphic]

We're not having any luck reproducing this so far in SGWT 12.0p. Can you confirm the browser, OS, and skin you're using where it's easiest to see? What also might help would be a "hypercam" type capture of you interacting with the page to reproduce the problem - perhaps you're doing something we're not doing.

[markok]

A screen capture with some captions can be seen at

OS: Mac OSX 10.13.6
Browser: Chrome - Version 70.0.3538.77 (Official Build) (64-bit)
SmartClient Version: v12.0p_2018-11-01/LGPL Development Only (built 2018-11-01)
Skin: Graphite Skin

[Isomorphic]

We've committed some improvements to SGWT 12.0p/SC 12.0p and newer branches which should be in the nightly builds dated 2018-11-07 and beyond.

Let us know if the issues are resolved and then we can consider porting all needed changes back to SGWT 6.1p/SC 11.p.

[markok]

To report back, we had a quick testing session with IE11, Chrome, and Firefox by compiling our app against the 2018-11-07 12.0p nightly and the UI issues seem to be fixed now. Excellent, thanks! Also, we are not seeing any CPU usage issues anymore.

We continue testing and report back if we encounter any issues we think might be related to this overflow problem.

[Isomorphic]

We've ported the fixes from SGWT 12.0p to SGWT 6.1p as of today's nightly builds dated 2018-11-09. This should resolve your issue. Due to the many changes required, we won't be porting it back to older branches, and have restored the original code there, so that you'll get correct rendering (so no regressions), but perhaps with the reported repeated calls to adjustOverflow().