Fixes #2061 for Tabsheets - Changing tab should no longer flicker in FF

svn changeset:5801/svn branch:trunk

4 files changed, 374 insertions, 19 deletions

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
index 6c5343cdd0..7dcc659ec6 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
@@ -19,6 +19,7 @@ import com.google.gwt.user.client.ui.ComplexPanel;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
+import com.itmill.toolkit.terminal.gwt.client.BrowserInfo;
 import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener;
 import com.itmill.toolkit.terminal.gwt.client.ICaption;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
@@ -154,8 +155,8 @@ public class ITabsheet extends ITabsheetBase implements
             DeferredCommand.addCommand(new Command() {
                 public void execute() {
                     previousVisibleWidget = tp.getWidget(tp.getVisibleWidget());
-                    DOM.setStyleAttribute(previousVisibleWidget.getElement(),
-                            "visibility", "hidden");
+                    DOM.setStyleAttribute(DOM.getParent(previousVisibleWidget
+                            .getElement()), "visibility", "hidden");
                     client.updateVariable(id, "selected", tabKeys.get(tabIndex)
                             .toString(), true);
                 }
@@ -168,6 +169,10 @@ public class ITabsheet extends ITabsheetBase implements
         return width == null || width.equals("");
     }
 
+    private boolean isDynamicHeight() {
+        return height == null || height.equals("");
+    }
+
     public ITabsheet() {
         super(CLASSNAME);
 
@@ -277,6 +282,8 @@ public class ITabsheet extends ITabsheetBase implements
 
         // tabs; push or not
         if (!isDynamicWidth()) {
+            // FIXME: This makes tab sheet tabs go to 1px width on every update
+            // and then back to original width
             // update width later, in updateTabScroller();
             DOM.setStyleAttribute(tabs, "width", "1px");
             DOM.setStyleAttribute(tabs, "overflow", "hidden");
@@ -412,11 +419,9 @@ public class ITabsheet extends ITabsheetBase implements
             // Set proper values for content element
             DOM.setStyleAttribute(contentNode, "height", contentHeight + "px");
             renderSpace.setHeight(contentHeight);
-            DOM.setStyleAttribute(contentNode, "overflow", "auto");
             contentNode.getStyle().setProperty("position", "relative");
         } else {
             DOM.setStyleAttribute(contentNode, "height", "");
-            DOM.setStyleAttribute(contentNode, "overflow", "");
             renderSpace.setHeight(0);
         }
         iLayout();
@@ -443,6 +448,21 @@ public class ITabsheet extends ITabsheetBase implements
     }
 
     public void iLayout() {
+        if (isDynamicHeight()) {
+            if (tp.getVisibleWidget() >= 0) {
+                Widget widget = tp.getWidget(tp.getVisibleWidget());
+                int widgetHeight = widget.getOffsetHeight();
+                DOM.setStyleAttribute(tp.getElement(), "height", widgetHeight
+                        + "px");
+                if (BrowserInfo.get().isIE6()) {
+                    // 100% height is not good enough for IE6...
+                    tp.setVisibleWidgetHeight(widgetHeight);
+                }
+            }
+        } else {
+            DOM.setStyleAttribute(tp.getElement(), "height", "");
+        }
+
         renderInformation.updateSize(getElement());
 
         if (client != null) {
@@ -451,8 +471,10 @@ public class ITabsheet extends ITabsheetBase implements
 
         updateTabScroller();
 
-        Util.runWebkitOverflowAutoFix(contentNode);
-
+        if (tp.getVisibleWidget() >= 0) {
+            Util.runWebkitOverflowAutoFix(DOM.getParent(tp.getWidget(
+                    tp.getVisibleWidget()).getElement()));
+        }
     }
 
     /**
diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java
index a88f2eeb8d..6f0955b370 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java
@@ -45,6 +45,10 @@ public class ITabsheetPanel extends ComplexPanel {
 

     private Element createContainerElement() {

         Element el = DOM.createDiv();

+        DOM.setStyleAttribute(el, "position", "absolute");

+        DOM.setStyleAttribute(el, "overflow", "auto");

+        DOM.setStyleAttribute(el, "width", "100%");

+        DOM.setStyleAttribute(el, "height", "100%");

         hide(el);

         return el;

     }

@@ -84,7 +88,6 @@ public class ITabsheetPanel extends ComplexPanel {
             }

             Element child = DOM.getChild(getElement(), index);

             DOM.removeChild(getElement(), child);

-            unHide(child);

         }

         return removed;

     }

@@ -109,25 +112,21 @@ public class ITabsheetPanel extends ComplexPanel {
     }

 

     private void hide(Element e) {

-        DOM.setStyleAttribute(e, "width", "0px");

-        DOM.setStyleAttribute(e, "height", "0px");

-        DOM.setStyleAttribute(e, "overflow", "hidden");

         DOM.setStyleAttribute(e, "visibility", "hidden");

-        DOM.setStyleAttribute(e, "position", "absolute");

-        DOM.setStyleAttribute(e, "top", "-100000px"); // Fixes FF2 caret bug

-        DOM.setStyleAttribute(e, "left", "0px");

+        DOM.setStyleAttribute(e, "top", "-100000px");

+        DOM.setStyleAttribute(e, "left", "-100000px");

     }

 

     private void unHide(Element e) {

-        DOM.setStyleAttribute(e, "marginLeft", "0px");

-        DOM.setStyleAttribute(e, "marginTop", "0px");

-        DOM.setStyleAttribute(e, "position", "");

         DOM.setStyleAttribute(e, "top", "");

         DOM.setStyleAttribute(e, "left", "");

         DOM.setStyleAttribute(e, "visibility", "");

-        DOM.setStyleAttribute(e, "width", "");

-        DOM.setStyleAttribute(e, "height", "");

-        DOM.setStyleAttribute(e, "overflow", "");

+

+    }

+

+    public void setVisibleWidgetHeight(int widgetHeight) {

+        DOM.setStyleAttribute(DOM.getParent(visibleWidget.getElement()),

+                "height", widgetHeight + "px");

 

     }

 

diff --git a/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java b/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java
new file mode 100644
index 0000000000..09d8b6ab51
--- /dev/null
+++ b/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java
@@ -0,0 +1,185 @@
+package com.itmill.toolkit.tests.tickets;
+
+import com.itmill.toolkit.Application;
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property.ValueChangeEvent;
+import com.itmill.toolkit.data.Property.ValueChangeListener;
+import com.itmill.toolkit.data.util.HierarchicalContainer;
+import com.itmill.toolkit.ui.Accordion;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.ExpandLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.Panel;
+import com.itmill.toolkit.ui.SplitPanel;
+import com.itmill.toolkit.ui.TabSheet;
+import com.itmill.toolkit.ui.Table;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeEvent;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeListener;
+
+public class Ticket2061b extends Application implements
+        SelectedTabChangeListener {
+
+    private Window mainWindow;
+    private Panel p;
+
+    @Override
+    public void init() {
+        mainWindow = new Window("Ticket 2061b");
+        mainWindow.setSizeFull();
+        OrderedLayout mainLayout = (OrderedLayout) mainWindow.getLayout();
+        mainLayout.setSizeFull();
+        mainLayout.setMargin(false);
+        setMainWindow(mainWindow);
+
+        SplitPanel sp = new SplitPanel();
+        sp.setSizeFull();
+        sp.setSplitPosition(20, SplitPanel.UNITS_PIXELS);
+
+        p = new Panel("This is a panel");
+        p.setSizeFull();
+        Label label1 = new Label("This is a table!");
+        label1.setHeight("1500px");
+        label1.setWidth("1500px");
+        p.addComponent(label1);
+        p.setScrollTop(50);
+        // MyTable table1 = new MyTable(24, "table1");
+        // table1.loadTable(1000);
+
+        // MyTable table2 = new MyTable(24, "table2");
+        // table2.loadTable(1000);
+
+        // MyTable table3 = new MyTable(24, "table3");
+        // table3.loadTable(1000);
+
+        // MyAccordion accordion = new MyAccordion(new Component[] { table1,
+        // table2 }, "Test");
+
+        Label a = new Label("abc123");
+        TextField tf = new TextField("A large textfield");
+        tf.setHeight("2500px");
+        tf.setWidth("2500px");
+
+        Tabs tab = new Tabs(new Component[] { p, a, tf });
+        tab.addListener(this);
+
+        mainLayout.addComponent(sp);
+        sp.addComponent(new Label("C 1"));
+        // sp.addComponent(new Label("C 2"));
+        // sp.setHeight("100px");
+
+        sp.addComponent(tab);
+        // mainLayout.addComponent(new Label("Filler"));
+        // mainLayout.addComponent(tab);
+        // mainLayout.setExpandRatio(tab, 1.0f);
+        // sp.addComponent(new Label("Filler"));
+        // sp.addComponent(tab);
+
+        p = new Panel("This is a panel");
+        p.setWidth("2000px");
+        p.setHeight("2000px");
+        Panel p2 = new Panel("This is another panel");
+        p2.setWidth("2500px");
+        p2.setHeight("2500px");
+        label1 = new Label("This is a table!");
+        label1.setHeight("1500px");
+        label1.setWidth("1500px");
+        p2.addComponent(label1);
+        p.addComponent(p2);
+
+        tab.addTab(p, "Panel with panel", null);
+    }
+
+    public class MyTable extends CustomComponent implements ValueChangeListener {
+
+        private Table table = new Table();
+        private String[] columns;
+        private ExpandLayout layout = new ExpandLayout();
+
+        public MyTable(int columnNumber, String id) {
+            setDebugId(id);
+            setCompositionRoot(layout);
+            setSizeFull();
+            columns = initializeColumns(columnNumber);
+            table.setWidth("100%");
+            table.setHeight("100%");
+            table.setColumnReorderingAllowed(true);
+            table.setColumnCollapsingAllowed(true);
+            table.setSelectable(true);
+            table.setMultiSelect(false);
+            table.setNullSelectionAllowed(false);
+            // table.setRowHeaderMode(Table.ROW_HEADER_MODE_ID);
+            table.addListener(this);
+            table.setContainerDataSource(createContainer());
+            layout.addComponent(table);
+        }
+
+        public void loadTable(int itemNumber) {
+            table.removeAllItems();
+            for (int j = 0; j < itemNumber; j++) {
+                Item rowItem = table.addItem(j);
+                if (rowItem != null) {
+                    for (int i = 0; i < columns.length; i++) {
+                        rowItem.getItemProperty(columns[i]).setValue(
+                                "Value" + j);
+                    }
+                }
+            }
+        }
+
+        private HierarchicalContainer createContainer() {
+            final HierarchicalContainer c = new HierarchicalContainer();
+            for (int i = 0; i < columns.length; i++) {
+                c.addContainerProperty(columns[i], String.class, null);
+            }
+            return c;
+        }
+
+        private String[] initializeColumns(int number) {
+            String[] columns = new String[number];
+            for (int i = 0; i < number; i++) {
+                columns[i] = "Column" + i;
+            }
+            return columns;
+        }
+
+        public void valueChange(ValueChangeEvent event) {
+
+        }
+
+    }
+
+    public class Tabs extends TabSheet {
+
+        public Tabs(Component[] components) {
+            this.setWidth("100%");
+            this.setHeight("100%");
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+
+        }
+
+    }
+
+    public class MyAccordion extends Accordion {
+
+        public MyAccordion(Component[] components, String id) {
+            this.setWidth("100%");
+            this.setHeight("100%");
+            setDebugId(id);
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+        }
+    }
+
+    public void selectedTabChange(SelectedTabChangeEvent event) {
+        p.setScrollTop(10);
+
+    }
+
+}
diff --git a/src/com/itmill/toolkit/tests/tickets/Ticket2061c.java b/src/com/itmill/toolkit/tests/tickets/Ticket2061c.java
new file mode 100644
index 0000000000..421d434c54
--- /dev/null
+++ b/src/com/itmill/toolkit/tests/tickets/Ticket2061c.java
@@ -0,0 +1,149 @@
+package com.itmill.toolkit.tests.tickets;
+
+import com.itmill.toolkit.Application;
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property.ValueChangeEvent;
+import com.itmill.toolkit.data.Property.ValueChangeListener;
+import com.itmill.toolkit.data.util.HierarchicalContainer;
+import com.itmill.toolkit.ui.Accordion;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.ExpandLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.Panel;
+import com.itmill.toolkit.ui.TabSheet;
+import com.itmill.toolkit.ui.Table;
+import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeEvent;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeListener;
+
+public class Ticket2061c extends Application implements
+        SelectedTabChangeListener {
+
+    private Window mainWindow;
+    private Panel p;
+
+    @Override
+    public void init() {
+        mainWindow = new Window("It Mill");
+        mainWindow.setSizeFull();
+        mainWindow.getLayout().setSizeFull();
+        setMainWindow(mainWindow);
+
+        OrderedLayout ol = new OrderedLayout();
+        ol.setWidth("200px");
+        ol.setHeight("200px");
+
+        OrderedLayout ol2 = new OrderedLayout();
+        ol2.setSizeFull();
+
+        p = new Panel("This is a panel");
+        p.setSizeFull();
+
+        Label label1 = new Label("This is a table!");
+        label1.setHeight("1500px");
+        label1.setWidth("1500px");
+        p.setScrollTop(50);
+
+        p.addComponent(label1);
+        ol2.addComponent(p);
+        ol.addComponent(ol2);
+
+        Label a = new Label("abc123");
+        a.setCaption("Label a");
+        ol.setCaption("OL");
+        Tabs tab = new Tabs(new Component[] { a, ol });
+        tab.addListener(this);
+        mainWindow.addComponent(tab);
+
+    }
+
+    public class MyTable extends CustomComponent implements ValueChangeListener {
+
+        private Table table = new Table();
+        private String[] columns;
+        private ExpandLayout layout = new ExpandLayout();
+
+        public MyTable(int columnNumber, String id) {
+            setDebugId(id);
+            setCompositionRoot(layout);
+            setSizeFull();
+            columns = initializeColumns(columnNumber);
+            table.setWidth("100%");
+            table.setHeight("100%");
+            table.setColumnReorderingAllowed(true);
+            table.setColumnCollapsingAllowed(true);
+            table.setSelectable(true);
+            table.setMultiSelect(false);
+            table.setNullSelectionAllowed(false);
+            // table.setRowHeaderMode(Table.ROW_HEADER_MODE_ID);
+            table.addListener(this);
+            table.setContainerDataSource(createContainer());
+            layout.addComponent(table);
+        }
+
+        public void loadTable(int itemNumber) {
+            table.removeAllItems();
+            for (int j = 0; j < itemNumber; j++) {
+                Item rowItem = table.addItem(j);
+                if (rowItem != null) {
+                    for (int i = 0; i < columns.length; i++) {
+                        rowItem.getItemProperty(columns[i]).setValue(
+                                "Value" + j);
+                    }
+                }
+            }
+        }
+
+        private HierarchicalContainer createContainer() {
+            final HierarchicalContainer c = new HierarchicalContainer();
+            for (int i = 0; i < columns.length; i++) {
+                c.addContainerProperty(columns[i], String.class, null);
+            }
+            return c;
+        }
+
+        private String[] initializeColumns(int number) {
+            String[] columns = new String[number];
+            for (int i = 0; i < number; i++) {
+                columns[i] = "Column" + i;
+            }
+            return columns;
+        }
+
+        public void valueChange(ValueChangeEvent event) {
+
+        }
+
+    }
+
+    public class Tabs extends TabSheet {
+
+        public Tabs(Component[] components) {
+            this.setWidth("100%");
+            // this.setHeight("100%");
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+        }
+    }
+
+    public class MyAccordion extends Accordion {
+
+        public MyAccordion(Component[] components, String id) {
+            this.setWidth("100%");
+            this.setHeight("100%");
+            setDebugId(id);
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+        }
+    }
+
+    public void selectedTabChange(SelectedTabChangeEvent event) {
+        p.setScrollTop(10);
+
+    }
+
+}