Layout reflow does not work correctly in Firefox

[DmitryF]

Layout reflow does not work correctly in Firefox.
Please look at the pictures.
The “Find” button shows or hides the SearchPanel.
When the SearchPanel is shown, layout does not reflow correctly in Firefox browser (tested in v53 and v65)
Firefox:



It works fine in Chrome



Is there some workaround or fix for this issue?
Smartgwt version v12.0p_2018-12-20/LGPL
theme: Enterprise

package test.formlayout.client.ui;

import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextAreaItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class StrategiesTab extends VLayout {


    public StrategiesTab()  {
        this.setSize("100%", "*");

        HLayout templateLayout = new HLayout();
        templateLayout.setSize("100%", "*");

        final VLayout templateList = new VLayout();
        templateList.setBorder("1px solid gray");
        templateList.setSize("25%", "99%");
        templateList.setShowResizeBar(true);
        templateLayout.addMember(templateList);

        final VLayout templateDetails = new VLayout();
        templateDetails.setBorder("1px solid gray");
        templateDetails.setSize("75%", "99%");
        templateLayout.addMember(templateDetails);        

        HLayout topLayout = new HLayout();
        topLayout.setSize("100%", "120");
        topLayout.setBorder("1px solid gray");
        templateDetails.addMember(topLayout);

        final DynamicForm templatesForm = new DynamicForm();  
        templatesForm.setSize("100%", "*");
        templatesForm.setNumCols(1);
        templateDetails.addMember(templatesForm);

        TextAreaItem textArea = new TextAreaItem("textArea");
        textArea.setWidth("100%");
        textArea.setHeight("*");
        //textArea.setTextBoxStyle("strategyTemplate");
        textArea.setShowTitle(false);


        templatesForm.setItems(textArea);

        HLayout bottomLayout = new HLayout();
        bottomLayout.setSize("100%", "30");
        bottomLayout.setBorder("1px solid gray");

        final IButton findButton = new IButton("Find");
        bottomLayout.addMember(findButton);

        final SearchPanel searchPanel = new SearchPanel();

        findButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                if (searchPanel.toggleSearch())
                    findButton.setTitle("Hide Find");
                else
                    findButton.setTitle("Find");
                reflow();
            }
        });

        final IButton consoleButton = new IButton("Console");
        bottomLayout.addMember(consoleButton);
        consoleButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                SC.showConsole();
            }
        });

        this.addMember(templateLayout);
        this.addMember(searchPanel);
        this.addMember(bottomLayout);
    }
}

package test.formlayout.client.ui;

import com.smartgwt.client.types.TitleOrientation;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.HLayout;

public class SearchPanel extends HLayout {

    private TextItem searchItem;

    public SearchPanel() {
        setSize("100%", "30");
        setBorder("1px solid gray");

        searchItem = new TextItem("find", "Find");
        searchItem.setTitleOrientation(TitleOrientation.LEFT);
        searchItem.setWidth(250);
        searchItem.setBrowserSpellCheck(false);

        DynamicForm searchForm = new DynamicForm();
        searchForm.setNumCols(2);
        searchForm.setFields(searchItem);

        addMember(searchForm);

        HLayout spacer = new HLayout();
        spacer.setWidth("*");
        addMember(spacer);

        hide();
    }

    public boolean toggleSearch() {
        boolean isVisible = false;
        if (!isVisible()) {
            show();
            searchItem.focusInItem();
            isVisible = true;
        } else {
            hide();
        }
        return isVisible;
    }


}

package test.formlayout.client;


import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Side;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

import test.formlayout.client.ui.StrategiesTab;

public class GWTFormLayoutTest implements EntryPoint {


    public void onModuleLoad() {

        VLayout mainLayout = new VLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        VLayout header = new VLayout();
        header.setWidth100();
        header.setHeight(25);
        header.setBackgroundColor("blue");

        final TabSet mainTabSet = new TabSet();  
        mainTabSet.setTabBarPosition(Side.TOP);  
        mainTabSet.setWidth100();  
        mainTabSet.setHeight("*");

        Tab tab1 = new Tab("Tab1");
        StrategiesTab tabPane = new StrategiesTab();
        tabPane.setWidth("100%");
        tabPane.setHeight("100%");
        tab1.setPane(tabPane);
        mainTabSet.addTab(tab1);        

        HStack footer = new HStack();
        footer.setWidth100();
        footer.setHeight(20);
        footer.setBackgroundColor("blue");

        mainLayout.setMembers(header, mainTabSet, footer);
        mainLayout.draw();
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.1//EN"
  "file:///C:/lib/gwt-2.6.1/gwt-module.dtd">
<module rename-to='gwtformlayouttest'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Other module inherits                                      -->
  <inherits name="com.smartgwt.SmartGwtNoTheme"/>
  <inherits name="com.smartgwt.tools.SmartGwtTools" />
  <inherits name="com.smartclient.theme.enterprise.Enterprise"/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='test.formlayout.client.GWTFormLayoutTest'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

  <!-- allow Super Dev Mode -->
  <!-- <add-linker name="xsiframe"/> -->
</module>

[Isomorphic]

Please let us know if this occurs for you in the latest patched version (always do this before posting if you are behind on patches).

[DmitryF]

The same issue exists in v12.0p_2019-02-16/LGPL

A similar issue can be recreated in a resizable window. TextAreaItem is not resized correctly when the popup window is resized.
See code below.
All these issues happen when TextAreaItem is included into DynamicForm and Enterprise theme is used in Firefox browser. Does SmartGWT do some size calculations differently for Enterprise theme?

package test.formlayout.client.ui;

import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.CloseClickEvent;
import com.smartgwt.client.widgets.events.CloseClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextAreaItem;

public class TestPopup {

    public static void createPopup(){
        final Window winModal = new Window();

        winModal.setWidth(com.google.gwt.user.client.Window.getClientWidth() - 100);
        winModal.setHeight(com.google.gwt.user.client.Window.getClientHeight() - 100);
        winModal.setCanDragResize(true);
        winModal.setShowResizer(true);
        winModal.setShowMaximizeButton(true);
        winModal.setShowMinimizeButton(false);

        winModal.setIsModal(true);
        winModal.setShowModalMask(true);
        winModal.centerInPage();

        winModal.addCloseClickHandler(new CloseClickHandler() {

            @Override
            public void onCloseClick(CloseClickEvent event) {
                winModal.destroy();
            }
        });

        final TextAreaItem textItem = new TextAreaItem();
        textItem.setBrowserSpellCheck(false);
        textItem.setShowTitle(false);
        textItem.setHeight("*");
        textItem.setWidth("*");
        textItem.setCanEdit(false);

        final DynamicForm form = new DynamicForm();
        form.setHeight("100%");
        form.setWidth("100%");
        form.setNumCols(1);

        form.setFields(textItem);

        winModal.addItem(form);

        winModal.show();    
    }


}

[DmitryF]

Hello Isomorfic support,
Do you have any ideas why this does not work correctly in Firefox?
I suspect something is wrong with CSS styles for Enterprise theme. However it is not clear what.

[Isomorphic]

We're not able to reproduce any issue with the TextAreaItem not resizing using your sample code from #3 in Firefox. Can you provide a hypercam-style video capture of your interaction with that sample that illustrates the problem? Also, what OS are you using?

[Isomorphic]

The difficulty in reproducing this is because it appears to be a "Heisenbug" in the Firefox browser itself. We have studied it and the problem results from a table element being assigned unexpected extra height, and was introduced sometime after Firefox 45. We are looking into possible workarounds at the moment.

[DmitryF]

Thank you
I use Firefox 53.0.3 (32-bit) Windows

[Isomorphic]

We've added a workaround for this issue back to SGWT 6.1p/SC 11.1p for Firefox 52+ on Windows, since we didn't observe it elsewhere. It's in today's nightly builds dated 2019-03-29.