-New ITabsheet implementation using GWT TabBar and own custom DeckPanel (ITabsheetPanel).

-New theme (candidate 0.3) implementation started.
-CSS classname conventions forced on several client side components.

svn changeset:2371/svn branch:trunk

src/com/itmill/toolkit/terminal/gwt/client/Caption.java

@@ -8,6 +8,8 @@ import com.google.gwt.user.client.ui.PopupPanel;
 
 public class Caption extends HTML {
 	
+	public static final String CLASSNAME = "i-caption";
+
 	private Paintable owner;
 
 	private Element errorIndicatorElement;
@@ -24,7 +26,7 @@ public class Caption extends HTML {
 	public Caption(Paintable component)  {
 		super();
 		owner = component;
-		setStyleName("i-caption");
+		setStyleName(CLASSNAME);
 	}
 	
 	public void updateCaption(UIDL uidl) {

src/com/itmill/toolkit/terminal/gwt/client/CaptionWrapper.java

@@ -1,11 +1,11 @@
 package com.itmill.toolkit.terminal.gwt.client;
 
 import com.google.gwt.user.client.ui.FlowPanel;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
 
 public class CaptionWrapper extends FlowPanel {
 
+	public static final String CLASSNAME = "i-captionwrapper";
 	Caption caption;
 	Paintable widget; 
 	
@@ -14,6 +14,7 @@ public class CaptionWrapper extends FlowPanel {
 		add(caption);
 		widget = toBeWrapped;
 		add((Widget) widget);
+		setStyleName(CLASSNAME);
 	}
 	
 	public void updateCaption(UIDL uidl) {

src/com/itmill/toolkit/terminal/gwt/client/ui/HorizontalSplitPanelImages.java

@@ -0,0 +1,15 @@
+package com.itmill.toolkit.terminal.gwt.client.ui;
+
+import com.google.gwt.user.client.ui.AbstractImagePrototype;
+
+public interface HorizontalSplitPanelImages extends
+		com.google.gwt.user.client.ui.HorizontalSplitPanelImages {
+	
+	/**
+	   * An image representing the drag thumb.
+	   * 
+	   * @gwt.resource com/itmill/toolkit/terminal/gwt/public/default/common/img/blank.png
+	   */
+	AbstractImagePrototype horizontalSplitPanelThumb();
+	
+}

src/com/itmill/toolkit/terminal/gwt/client/ui/ICheckBox.java

@@ -8,6 +8,8 @@ import com.itmill.toolkit.terminal.gwt.client.UIDL;
 
 public class ICheckBox extends com.google.gwt.user.client.ui.CheckBox
 		implements Paintable {
+	
+	public static final String CLASSNAME = "i-checkbox";
 
 	String id;
 
@@ -16,6 +18,7 @@ public class ICheckBox extends com.google.gwt.user.client.ui.CheckBox
 	ApplicationConnection client;
 
 	public ICheckBox() {
+		setStyleName(CLASSNAME);
 		addClickListener(new ClickListener() {
 
 			public void onClick(Widget sender) {

src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java

@@ -294,7 +294,8 @@ public class IFilterSelect extends Composite implements Paintable,
 		initWidget(panel);
 		setStyleName(CLASSNAME);
 		tb.addKeyboardListener(this);
-		popupOpener.setStyleName(CLASSNAME + "-popupopener");
+		tb.setStyleName(CLASSNAME + "-input");
+		popupOpener.setStyleName(CLASSNAME + "-button");
 		popupOpener.addClickListener(this);
 	}
 

src/com/itmill/toolkit/terminal/gwt/client/ui/ILabel.java

@@ -11,6 +11,7 @@ public class ILabel extends HTML implements Paintable {
 	
 	public ILabel() {
 		super();
+		setStyleName(CLASSNAME);
 	}
 	
 	public ILabel(String text) {

src/com/itmill/toolkit/terminal/gwt/client/ui/IOptionGroup.java

@@ -37,8 +37,9 @@ public class IOptionGroup extends IOptionGroupBase {
 				op.setText(opUidl.getStringAttribute("caption"));
 			} else {
 				op = new RadioButton(id, opUidl.getStringAttribute("caption"));
+				op.setStyleName("i-radiobutton");
 			}
-			op.setStyleName(CLASSNAME_OPTION);
+			op.addStyleName(CLASSNAME_OPTION);
 			op.setChecked(opUidl.getBooleanAttribute("selected"));
 			op.setEnabled(!opUidl.getBooleanAttribute("disabled") && !readonly && !disabled);
 			op.addClickListener(this);

src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java

@@ -91,8 +91,13 @@ public class IPanel extends FlowPanel implements Paintable {
 			content.setHeight("0");
 			int height = getOffsetHeight();
 			content.setHeight(neededHeight-height + "px");
-		} else
+		} else {
 			content.setHeight("");
+			// We don't need overflow:auto when panel height is not set
+			// (overflow:auto causes rendering errors at least in Firefox when a
+			// a panel is inside a tabsheet with overflow:auto set)
+			DOM.setStyleAttribute(content.getElement(), "overflow", "hidden");
+		}
 		
 	}
 	

src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java

@@ -156,7 +156,7 @@ public class ISlider extends Widget implements Paintable {
 								DOM.setStyleAttribute(getElement(), "width", "auto");
 						}
 					};
-					adjust.schedule(100);
+					adjust.schedule(0); // Defer execution
 				}
 			}
 		}

src/com/itmill/toolkit/terminal/gwt/client/ui/ISplitPanel.java

@@ -1,14 +1,20 @@
 package com.itmill.toolkit.terminal.gwt.client.ui;
 
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Element;
 import com.google.gwt.user.client.ui.HorizontalSplitPanel;
+import com.google.gwt.user.client.ui.HorizontalSplitPanelImages;
 import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.VerticalSplitPanel;
+import com.google.gwt.user.client.ui.VerticalSplitPanelImages;
 import com.google.gwt.user.client.ui.Widget;
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
 import com.itmill.toolkit.terminal.gwt.client.UIDL;
 
 public class ISplitPanel extends SimplePanel implements Paintable {
+	public static final String CLASSNAME = "i-splitpanel";
 	public static final int ORIENTATION_HORIZONTAL = 0;
 	public static final int ORIENTATION_VERTICAL = 1;
 	
@@ -24,20 +30,28 @@ public class ISplitPanel extends SimplePanel implements Paintable {
 	
 	public ISplitPanel(int orientation) {
 		super();
-		setOrientetion(orientation);
+		setOrientation(orientation);
 	}
 	
-	private void setOrientetion(int orientation) {
+	private void setOrientation(int orientation) {
 		this.orientation = orientation;
 		if(orientation == ORIENTATION_HORIZONTAL) {
-			this.sph = new HorizontalSplitPanel();
+			this.sph = new HorizontalSplitPanel((HorizontalSplitPanelImages) GWT.create(com.itmill.toolkit.terminal.gwt.client.ui.HorizontalSplitPanelImages.class));
+			this.sph.setStyleName(CLASSNAME+"-horizontal");
+			// Ugly work-around to allow more advanced styling (GWT's heavy use of TABLE-elements is restricting)
+			Element handle = DOM.getChild(DOM.getChild(this.sph.getElement(), 0), 1);
+			DOM.setElementAttribute(handle, "className", CLASSNAME+"-handle");
 			this.setWidget(sph);
 			if(spv != null) {
 				// TODO cleanup contained widgets
 				this.spv = null;
 			}
 		} else {
-			this.spv = new VerticalSplitPanel();
+			this.spv = new VerticalSplitPanel((VerticalSplitPanelImages) GWT.create(com.itmill.toolkit.terminal.gwt.client.ui.VerticalSplitPanelImages.class));
+			this.spv.setStyleName(CLASSNAME+"-vertical");
+			// Ugly work-around to allow more advanced styling (GWT's heavy use of TABLE-elements is restricting)
+			Element handle = DOM.getChild(DOM.getChild(this.spv.getElement(), 0), 1);
+			DOM.setElementAttribute(handle, "className", CLASSNAME+"-handle");
 			this.setWidget(spv);
 			if(sph != null) {
 				// TODO cleanup contained widgets

src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java

@@ -5,18 +5,16 @@ import java.util.Iterator;
 
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Element;
-import com.google.gwt.user.client.ui.DeckPanel;
-import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.SourcesTabEvents;
 import com.google.gwt.user.client.ui.TabBar;
 import com.google.gwt.user.client.ui.TabListener;
-import com.google.gwt.user.client.ui.TabPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
 import com.itmill.toolkit.terminal.gwt.client.UIDL;
 
-public class ITabsheet extends TabPanel implements Paintable {
+public class ITabsheet extends FlowPanel implements Paintable {
 	
 	public static final String CLASSNAME = "i-tabsheet";
 
@@ -30,16 +28,20 @@ public class ITabsheet extends TabPanel implements Paintable {
 
 	int activeTabIndex = 0;
 	
+	private TabBar tb;
+	private ITabsheetPanel tp;
 	private Element deco;
-
-	TabListener tl = new TabListener() {
+	
+	private TabListener tl = new TabListener() {
 
 		public void onTabSelected(SourcesTabEvents sender, int tabIndex) {
-			ITabsheet.this.client.updateVariable(id, "selected", tabIndex,
-					true);
+			if (client != null && activeTabIndex != tabIndex)
+				ITabsheet.this.client.updateVariable(id, "selected", ""
+						+ tabKeys.get(tabIndex), true);
 		}
 
 		public boolean onBeforeTabSelected(SourcesTabEvents sender, int tabIndex) {
+			// TODO give user indication of progress
 			return true;
 		}
 
@@ -48,49 +50,26 @@ public class ITabsheet extends TabPanel implements Paintable {
 	public ITabsheet() {
 		setStyleName(CLASSNAME);
 		
-		addTabListener(new TabListener() {
-
-			public void onTabSelected(SourcesTabEvents sender, int tabIndex) {
-				if (client != null && activeTabIndex != tabIndex)
-					ITabsheet.this.client.updateVariable(id, "selected", ""
-							+ tabKeys.get(tabIndex), true);
-			}
-
-			public boolean onBeforeTabSelected(SourcesTabEvents sender,
-					int tabIndex) {
-				return true;
-			}
-
-		});
+		tb = new TabBar();
+		tp = new ITabsheetPanel();
+		deco = DOM.createDiv();
 		
+		tp.setStyleName(CLASSNAME+"-content");
+		tb.setStyleName(CLASSNAME+"-tabs");
+		DOM.setElementProperty(deco, "className", CLASSNAME+"-deco");
+		
+		add(tb);
+		add(tp);
+		DOM.appendChild(getElement(), deco);
+		
+		tb.addTabListener(tl);
+		
+		clearTabs();
 	}
 
 	public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
 		this.client = client;
 		id = uidl.getId();
-		
-		DeckPanel dp = getDeckPanel();
-		dp.setStyleName(CLASSNAME+"-content");
-		
-		TabBar tb = getTabBar();
-		tb.setStyleName(CLASSNAME+"-tabs");
-
-		// Add a decoration element for shadow
-		// TODO refactor tabsheet with plain DIV-implementation
-		/*if(!DOM.compare(deco, null)) {
-			DOM.removeChild(DOM.getParent(getElement()), deco);
-			deco = null;
-		}
-		deco = DOM.createDiv();
-		DOM.setElementProperty(deco, "className", CLASSNAME+"-deco");
-		DOM.appendChild(DOM.getParent(getElement()), deco);
-		*/
-		// Adjust width and height
-		String h = uidl.hasAttribute("height")? uidl.getStringAttribute("height") : "";
-		String w = uidl.hasAttribute("width")? uidl.getStringAttribute("width") : "";
-		setWidth(w!=""?w:"auto");
-		//DOM.setStyleAttribute(deco, "width", w!=""?w:"auto");
-		dp.setHeight(h!=""?h:"auto");
 
 		UIDL tabs = uidl.getChildUIDL(0);
 		boolean keepCurrentTabs = tabKeys.size() == tabs.getNumberOfChildren();
@@ -105,42 +84,77 @@ public class ITabsheet extends TabPanel implements Paintable {
 				UIDL tab = (UIDL) it.next();
 				if (tab.getBooleanAttribute("selected")) {
 					activeTabIndex = index;
-					Widget content = client.getWidget(tab
-							.getChildUIDL(0));
-					tb.selectTab(index);
-					remove(index);
-					insert(content, (String) captions.get(index), index);
-					this.selectTab(index);
-					((Paintable)content).updateFromUIDL(tab
-							.getChildUIDL(0), client);
+					Widget content = client.getWidget(tab.getChildUIDL(0));
+					((Paintable)content).updateFromUIDL(tab.getChildUIDL(0), client);
+					tp.remove(index);
+					tp.insert(content, index);
 				}
 				index++;
 			}
 		} else {
 			tabKeys.clear();
 			captions.clear();
-			clear();
+			clearTabs();
+			
 			int index = 0;
 			for (Iterator it = tabs.getChildIterator(); it.hasNext();) {
 				UIDL tab = (UIDL) it.next();
 				String key = tab.getStringAttribute("key");
 				String caption = tab.getStringAttribute("caption");
+				
 				captions.add(caption);
 				tabKeys.add(key);
-				if (tab.getBooleanAttribute("selected")) {
+				
+				tb.addTab(caption);
+				
+				if(tab.getBooleanAttribute("selected")) {
+					Widget content = client.getWidget(tab.getChildUIDL(0));
+					tp.add(content);
 					activeTabIndex = index;
-					Widget content = client.getWidget(tab
-							.getChildUIDL(0));
-					this.add(content, caption);
-					this.selectTab(this.getWidgetIndex(content));
-					((Paintable)content).updateFromUIDL(tab
-							.getChildUIDL(0), client);
-				} else {
-					this.add(new Label(), caption);
-				}
+					((Paintable)content).updateFromUIDL(tab.getChildUIDL(0), client);
+				} else
+					tp.add(new ILabel(""));
+				
 				index++;
 			}
 		}
+		
+		// Open selected tab
+		tb.selectTab(activeTabIndex);
+		tp.showWidget(activeTabIndex);
+		
+		// Adjust width and height
+		String h = uidl.hasAttribute("height")? uidl.getStringAttribute("height") : null;
+		String w = uidl.hasAttribute("width")? uidl.getStringAttribute("width") : null;
+		setWidth(w!=null?w:"auto");
+		
+		// Try to approximate the height as close as possible
+		if(h!=null) {
+			// First, calculate needed pixel height
+			setHeight(h);
+			int neededHeight = getOffsetHeight();
+			setHeight("auto");
+			// Then calculate the size the content area needs to be
+			tp.setHeight("0");
+			int height = getOffsetHeight();
+			tp.setHeight(neededHeight-height + "px");
+		} else {
+			tp.setHeight("auto");
+			// We don't need overflow:auto when tabsheet height is not set
+			DOM.setStyleAttribute(tp.getElement(), "overflow", "hidden");
+		}
 
 	}
+	
+	private void clearTabs() {
+		int i = tb.getTabCount();
+		while(i>0)
+			tb.removeTab(--i);
+		tp.clear();
+		
+		// Get rid of unnecessary 100% cell heights in TabBar (really ugly hack)
+		Element tr = DOM.getChild(DOM.getChild(tb.getElement(), 0), 0);
+		Element rest = DOM.getChild(DOM.getChild(tr, DOM.getChildCount(tr)-1), 0);
+		DOM.removeElementAttribute(rest, "style");
+	}
 }

src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java

@@ -0,0 +1,102 @@
+package com.itmill.toolkit.terminal.gwt.client.ui;
+
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.ui.ComplexPanel;
+import com.google.gwt.user.client.ui.Widget;
+
+/**
+ * A panel that displays all of its child widgets in a 'deck', where only one
+ * can be visible at a time. It is used by
+ * {@link com.itmill.toolkit.terminal.gwt.client.ui.ITabsheetPanel}.
+ * 
+ * This class has the same basic functionality as the GWT DeckPanel
+ * {@link com.google.gwt.user.client.ui.DeckPanel}, with the exception
+ * that it doesn't manipulate the child widgets' width and height attributes.
+ */
+public class ITabsheetPanel extends ComplexPanel {
+
+  private Widget visibleWidget;
+
+  /**
+   * Creates an empty tabsheet panel.
+   */
+  public ITabsheetPanel() {
+    setElement(DOM.createDiv());
+  }
+
+  /**
+   * Adds the specified widget to the deck.
+   * 
+   * @param w the widget to be added
+   */
+  public void add(Widget w) {
+    super.add(w, getElement());
+    initChildWidget(w);
+  }
+
+  /**
+   * Gets the index of the currently-visible widget.
+   * 
+   * @return the visible widget's index
+   */
+  public int getVisibleWidget() {
+    return getWidgetIndex(visibleWidget);
+  }
+
+  /**
+   * Inserts a widget before the specified index.
+   * 
+   * @param w the widget to be inserted
+   * @param beforeIndex the index before which it will be inserted
+   * @throws IndexOutOfBoundsException if <code>beforeIndex</code> is out of
+   *           range
+   */
+  public void insert(Widget w, int beforeIndex) {
+    super.insert(w, getElement(), beforeIndex, true);
+    initChildWidget(w);
+  }
+
+  public boolean remove(Widget w) {
+    boolean removed = super.remove(w);
+    if (removed) {
+      resetChildWidget(w);
+
+      if (visibleWidget == w) {
+        visibleWidget = null;
+      }
+    }
+    return removed;
+  }
+
+  /**
+   * Shows the widget at the specified index. This causes the currently- visible
+   * widget to be hidden.
+   * 
+   * @param index the index of the widget to be shown
+   */
+  public void showWidget(int index) {
+    checkIndexBoundsForAccess(index);
+
+    if (visibleWidget != null) {
+      visibleWidget.setVisible(false);
+    }
+    visibleWidget = getWidget(index);
+    visibleWidget.setVisible(true);
+  }
+
+  /**
+   * Make the widget invisible, and set its width and height to full.
+   */
+  private void initChildWidget(Widget w) {
+    w.setVisible(false);
+  }
+
+  /**
+   * Make the widget visible, and clear the widget's width and height
+   * attributes. This is done so that any changes to the visibility, height, or
+   * width of the widget that were done by the panel are undone.
+   */
+  private void resetChildWidget(Widget w) {
+    w.setVisible(true);
+  }
+}

src/com/itmill/toolkit/terminal/gwt/client/ui/VerticalSplitPanelImages.java

@@ -0,0 +1,15 @@
+package com.itmill.toolkit.terminal.gwt.client.ui;
+
+import com.google.gwt.user.client.ui.AbstractImagePrototype;
+
+public interface VerticalSplitPanelImages extends
+		com.google.gwt.user.client.ui.VerticalSplitPanelImages {
+	
+	/**
+	   * An image representing the drag thumb.
+	   * 
+	   * @gwt.resource com/itmill/toolkit/terminal/gwt/public/default/common/img/blank.png
+	   */
+	AbstractImagePrototype verticalSplitPanelThumb();
+
+}

src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css

@@ -0,0 +1,34 @@
+#itmtk-ajax-window {
+	background: #e9eced;
+	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
+	color: #464f52;
+	font-size: 12px;
+	line-height: 18px;
+}
+
+input, select, textarea, button {
+	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
+	color: #464f52;
+}
+
+select {
+	padding: 0;
+	margin: 0;
+}
+
+.i-disabled {
+	opacity: 0.3;
+	filter: Alpha(opacity=30);
+}
+
+.i-contextmenu {
+	background: #fff;	
+	border: #000;
+}
+
+/* Provide some extra whitespace for wrapped elements
+   (these elements usuallly need the extra space, since 
+   they aren't even handling their own caption) */
+.i-captionwrapper {
+	margin: 0.3em 0 0 0;
+}

src/com/itmill/toolkit/terminal/gwt/public/default/common/css/common.css

@@ -1,33 +0,0 @@
-body {
-	background: #f5f6f7 url(../img/window-bottom-bg.gif) no-repeat right bottom fixed;
-	font-family: helvetica, arial, tahoma, verdana, sans-serif;
-	color: #454a51;
-	font-size: 13px;
-	line-height: 19px;
-	padding: 8px;
-	margin: 0;
-}
-
-#itmtk-ajax-window {
-	
-}
-
-input, select, textarea, button {
-	font-family: helvetica, arial, tahoma, verdana, sans-serif;
-	font-size: 1em;
-}
-
-select {
-	padding: 0;
-	margin: 0;
-}
-
-.i-disabled {
-	opacity: 0.3;
-	filter: Alpha(opacity=30);
-}
-
-.i-contextmenu {
-	background: #fff;	
-	border: #000;
-}

src/com/itmill/toolkit/terminal/gwt/public/default/panel/css/panel.css

@@ -1,306 +0,0 @@
-.i-panel {
-	margin: 8px 0 1px 0;
-}
-
-.i-panel-caption {
-	font-size: 12px;
-	line-height: 12px;
-	font-weight: normal;
-	color: #2c3c49;
-	white-space: nowrap;
-	height: 27px;
-	padding: 0 5px 0 5px;
-	border: 1px solid #c1c6cc;
-	border-bottom: none;
-	background: #fff url(../img/top-bg.png) repeat-x top left;
-}
-
-.i-panel-caption:before {
-	display: block;
-	height: 28px;
-	overflow: hidden;
-	background: transparent url(../img/top-right.png) no-repeat right top;
-	content: url(../img/top-left.png);
-	margin: -1px -6px -20px -6px;
-}
-
-.i-panel-content {
-	border: 1px solid #c1c6cc;
-	border-top: none;
-	background-color: #fff;
-	overflow: auto;
-	padding: 8px;
-}
-
-.i-panel-deco {
-	height: 9px;
-	background: transparent url(../../common/img/shadow.png) repeat-x left bottom;
-	margin-top: -2px;
-	position: relative;
-}
-
-.i-panel-deco:before {
-	display: block;
-	height: 2px;
-	overflow: hidden;
-	background: transparent url(../img/bottom-right.png) no-repeat right top;
-	content: url(../img/bottom-left.png);
-}
-
-.i-panel-nocaption {
-	border-top: 1px solid #c1c6cc;
-	background-color: #fff;
-}
-
-.i-panel-nocaption:before {
-	display: block;
-	height: 2px;
-	overflow: hidden;
-	background: transparent url(../img/top-right-small.png) no-repeat right top;
-	content: url(../img/top-left-small.png);
-	margin-top: -1px;
-}
-
-
-
-/* Strong style */
-
-.i-panel-strong .i-panel-caption {
-	background-image: url(../img/top-bg-strong.png);
-	border-color: #6c9ad8;
-	color: #fff;
-	font-weight: bold;
-}
-
-.i-panel-strong .i-panel-caption:before {
-	background-image: url(../img/top-right-strong.png);
-	content: url(../img/top-left-strong.png);
-}
-
-
-
-/* Light style */
-
-.i-panel-light .i-panel-caption {
-	background: transparent;
-	font-weight: bold;
-	border: none;
-	padding: 3px 0 0 2px;
-	height: 16px;
-	margin-bottom: 1px;
-	border-bottom: 1px solid #e7e7e8;
-}
-
-.i-panel-light .i-panel-caption:before {
-	display: none;
-}
-
-.i-panel-light .i-panel-caption:after {
-	display: block;
-	height: 2px;
-	overflow: hidden;
-	background: transparent url(../img/top-right-light.png) no-repeat top right;
-	content: url(../img/top-left-light.png);
-	margin: 4px 0 0 -2px;
-}
-
-.i-panel-light .i-panel-content {
-	border: 1px solid #e7e7e8;
-	border-top: none;
-	background: #fff url(../img/bg-light.png) repeat-x 0 1px;
-}
-
-.i-panel-light .i-panel-deco {
-	background: transparent;
-	height: 2px;
-}
-
-.i-panel-light .i-panel-deco:before {
-	background: transparent url(../img/bottom-right-light.png) no-repeat top right;
-	content: url(../img/bottom-left-light.png);
-}
-
-/* Light style without caption */
-.i-panel-light .i-panel-nocaption {
-	border-color: #e7e7e8;
-}
-
-.i-panel-light .i-panel-nocaption:before {
-	background-image: url(../img/top-right-light.png);
-	content: url(../img/top-left-light.png);
-}
-
-
-
-/* Highlight style */
-
-.i-panel-highlight .i-panel-caption {
-	background-image: url(../img/top-bg-highlight.png);
-	background-color: #fffdec;
-	border-color: #c0baae;
-	color: #4e4640;
-}
-
-.i-panel-highlight .i-panel-caption:before {
-	background-image: url(../img/top-right-highlight.png);
-	content: url(../img/top-left-highlight.png);
-}
-
-.i-panel-highlight .i-panel-content {
-	background-color: #fffdec;
-	border-color: #c0baae;
-	color: #605b52;
-}
-
-/* Highlight style without caption */
-.i-panel-highlight .i-panel-nocaption {
-	border-color: #c0baae;
-	background-color: #fffdec;
-}
-
-
-
-/* Emphasized style */
-
-.i-panel-emphasize .i-panel-caption {
-	background: #6899d9 url(../img/top-bg-em.gif) repeat-x;
-	border-color: #78a2db;
-	color: #fff;
-	font-weight: bold;
-	height: 22px;
-}
-
-.i-panel-emphasize .i-panel-caption:before {
-	background-image: url(../img/top-right-em.gif);
-	content: url(../img/top-left-em.gif);
-}
-
-.i-panel-emphasize .i-panel-content {
-	background: #3a6bab url(../img/bg-em.gif) repeat-x;
-	color: #dee6f2;
-	border-color: #78a2db;
-}
-
-.i-panel-emphasize .i-panel-deco {
-	margin-top: -4px;
-	height: 11px;
-	background-image: url(../../common/img/shadow-em.png);
-}
-
-.i-panel-emphasize .i-panel-deco:before {
-	background-image: url(../img/bottom-right-em.gif);
-	content: url(../img/bottom-left-em.gif);
-	height: 4px;
-}
-
-/* Emphasized style without caption */
-.i-panel-emphasize .i-panel-nocaption {
-	background: #6899d9 url(../img/top-bg-em.gif) repeat-x;
-	border: 1px solid #78a2db;
-	border-bottom: none;
-	height: 3px;
-}
-
-.i-panel-emphasize .i-panel-nocaption:before {
-	background-image: url(../img/top-right-em.gif);
-	content: url(../img/top-left-em.gif);
-	margin: -1px;
-}
-
-
-
-
-
-
-
-/* IE specific rules (different selectors for IE6 and IE7.
- * These selectors must be separate because IE6 won't 
- * apply them if they are grouped together.
-*/
-* html .i-panel-caption {
-	padding-top: 7px;
-	height: 19px;
-}
-*+html .i-panel-caption {
-	padding-top: 7px;
-	height: 19px;
-}
-
-* html .i-panel-deco {
-	position: static;
-	background: transparent;
-	margin: 0;
-	font-size: 1;
-	height: 7px;
-	overflow: hidden;
-	/* TODO change url when packaging is complete */
-	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow.png", sizingMethod="scale");
-}
-
-/* Without caption */
-* html .i-panel-nocaption {
-	height: 1px;
-	overflow: hidden;
-	background: #c1c6cc;
-	border: none;
-}
-
-
-/* Light style */
-
-* html .i-panel-light .i-panel-caption {
-	background: transparent;
-	font-weight: bold;
-	border: none;
-	padding: 3px 0 0 2px;
-	height: 16px;
-}
-*+html .i-panel-light .i-panel-caption {
-	background: transparent;
-	font-weight: bold;
-	border: none;
-	padding: 3px 0 0 2px;
-	height: 16px;
-}
-
-* html .i-panel-light .i-panel-content {
-	border: 1px solid #e7e7e8;
-	background-position: 0 2px;
-}
-*+html .i-panel-light .i-panel-content {
-	border: 1px solid #e7e7e8;
-	background-position: 0 2px;
-}
-
-* html .i-panel-light .i-panel-deco {
-	display: none;
-}
-
-/* Without caption */
-* html .i-panel-light .i-panel-nocaption {
-	display: none;
-}
-*+html .i-panel-light .i-panel-nocaption {
-	display: none;
-}
-
-
-/* Emphasized style */
-* html .i-panel-emphasize .i-panel-caption {
-	height: 15px;
-}
-*+html .i-panel-emphasize .i-panel-caption {
-	height: 15px;
-}
-
-* html .i-panel-emphasize .i-panel-content {
-	background-attachment: fixed;
-}
-
-* html .i-panel-emphasize .i-panel-deco {
-	height: 7px;
-	margin-top: 0;
-	background: transparent;
-	/* TODO change url when packaging is complete */
-	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow-em.png", sizingMethod="scale");
-}

src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css

@@ -0,0 +1,166 @@
+.i-panel,
+.i-panel-caption,
+.i-panel-content,
+.i-panel-deco {
+	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
+}
+
+.i-panel:before {
+	display: block;
+	content: "";
+	background: transparent url(img/top-right.png) repeat-x right top;
+	height: 9px;
+	margin-left: 9px;
+}
+
+.i-panel-caption {
+	font-size: 18px;
+	line-height: 18px;
+	font-weight: normal;
+	letter-spacing: -0.03em;
+	color: #f14c1a;
+	white-space: nowrap;
+	height: 18px;
+	padding: 6px 18px 14px 18px;
+	border: 1px solid #babfc0;
+	border-top: none;
+	background: #fff;
+}
+
+.i-panel-nocaption {
+	height: 9px;
+}
+
+.i-panel-caption:before,
+.i-panel-nocaption:before {
+	display: block;
+	content: "";
+	position: relative;
+	width: 9px;
+	height: 9px;
+	background: transparent url(img/top-left.png) no-repeat;
+	margin: -15px 0 5px -19px;
+}
+
+.i-panel-nocaption:before {
+	margin: -9px 0 0 0;
+}
+
+.i-panel-content {
+	border: 1px solid #babfc0;
+	border-top: none;
+	border-bottom: none;
+	background-color: #fff;
+	overflow: auto;
+	padding: 15px 18px 6px 18px;
+}
+
+.i-panel-deco {
+	height: 9px;
+	background: transparent url(img/bottom-right.png) repeat-x right top;
+	margin-left: 9px;
+}
+
+.i-panel-deco:before {
+	display: block;
+	content: "";
+	width: 9px;
+	height: 9px;
+	margin-left: -9px;
+	background: transparent url(img/bottom-left.png) no-repeat;
+}
+
+
+
+
+
+
+/* Light panel style */
+
+.i-panel-light:before {
+	display: none;
+}
+
+.i-panel-light .i-panel-caption {
+	border-left: none;
+	border-right: none;
+	background: transparent;
+}
+
+.i-panel-light .i-panel-caption:before,
+.i-panel-light .i-panel-nocaption:before {
+	display: none;
+}
+
+.i-panel-light .i-panel-content {
+	border: none;
+	background: transparent;
+}
+
+.i-panel-light .i-panel-deco {
+	display: none;
+}
+
+.i-panel-light .i-panel-deco:before {
+	display: none;
+}
+
+
+
+
+/* Light panel contained within another panel or a tabsheet */
+/* Use more precise selector to override IE specific rules automatically */
+
+.i-panel .i-panel-light .i-panel-caption,
+.i-tabsheet .i-panel-light .i-panel-caption {
+	border-left: none;
+	border-right: none;
+	margin: -16px -18px 0 -18px;
+	padding-top: 14px;
+	border-top: 1px solid #babfc0;
+}
+.i-panel .i-panel-light .i-panel-content,
+.i-tabsheet .i-panel-light .i-panel-content {
+	margin: 0 -18px 16px -18px;
+}
+
+
+
+
+
+/* IE specific rules (different selectors for IE6 and IE7.
+ * These selectors must be separate because IE6 won't 
+ * apply them if they are grouped together.
+*/
+* html .i-panel-caption {
+	border: 1px solid #babfc0;
+	padding-top: 14px;
+}
+*+html .i-panel-caption {
+	border: 1px solid #babfc0;
+	padding-top: 14px;
+}
+
+* html .i-panel-content {
+	border-bottom: 1px solid #babfc0;
+	padding: 15px 18px;
+}
+*+html .i-panel-content {
+	border-bottom: 1px solid #babfc0;
+	padding: 15px 18px;
+}
+
+* html .i-panel-deco {
+	display: none;
+}
+*+html .i-panel-deco {
+	display: none;
+}
+
+/* Without caption */
+* html .i-panel-nocaption {
+	height: 1px;
+	overflow: hidden;
+	background: #c1c6cc;
+	border: none;
+}

src/com/itmill/toolkit/terminal/gwt/public/default/filterselect/css/filterselect.css → src/com/itmill/toolkit/terminal/gwt/public/default/select/filterselect.css

@@ -16,7 +16,7 @@
 	white-space: nowrap;
 }
 
-.i-filterselect-popupopener {
+.i-filterselect-button {
 	display:inline;
 	background:red;
 }

src/com/itmill/toolkit/terminal/gwt/public/default/splitpanel/css/splitpanel.css

@@ -1,4 +0,0 @@
-.gwt-HorizontalSplitPanel .hsplitter,
-.gwt-VerticalSplitPanel .vsplitter {
-	
-}

src/com/itmill/toolkit/terminal/gwt/public/default/splitpanel/splitpanel.css

@@ -0,0 +1,13 @@
+.i-splitpanel-horizontal .hsplitter {
+	width: 8px;
+	background: #ccd2d0 url(img/bg_hor.png);
+	border: 1px solid #b6bbbc;
+	cursor: e-resize;
+}
+
+.i-splitpanel-vertical .vsplitter {
+	height: 8px;
+	background: #ccd2d0 url(img/bg_ver.png);
+	border: 1px solid #b6bbbc;
+	cursor: n-resize;
+}

src/com/itmill/toolkit/terminal/gwt/public/default/styles.css

@@ -1,15 +1,15 @@
-@import "common/css/common.css";
-@import "button/css/button.css";
-@import "textfield/css/textfield.css";
-@import "select/css/select.css";
-@import "panel/css/panel.css";
-@import "tabsheet/css/tabsheet.css";
-@import "datefield/css/datefield.css";
-@import "table/css/table.css";
-@import "slider/css/slider.css";
-@import "window/css/window.css";
-@import "caption/css/caption.css";
-@import "tree/css/tree.css";
-@import "splitpanel/css/splitpanel.css";
-@import "filterselect/css/filterselect.css";
-
+@import "common/common.css";
+@import "button/button.css";
+@import "textfield/textfield.css";
+@import "select/select.css";
+@import "panel/panel.css";
+@import "tabsheet/tabsheet.css";
+@import "datefield/datefield.css";
+@import "table/table.css";
+@import "slider/slider.css";
+@import "window/window.css";
+@import "caption/caption.css";
+@import "tree/tree.css";
+@import "splitpanel/splitpanel.css";
+@import "select/filterselect.css";
+

src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/css/tabsheet.css

@@ -1,110 +0,0 @@
-.i-tabsheet {
-	
-}
-
-.i-tabsheet-tabs {
-	empty-cells: hide;
-	border-collapse: collapse;
-}
-
-.i-tabsheet-tabs .gwt-TabBarFirst {
-	display: none;
-}
-
-.i-tabsheet-tabs .gwt-TabBarRest {
-	border-bottom: solid 1px #c1c6cc;
-}
-
-.i-tabsheet-tabs .gwt-TabBarItem {
-	border: solid 1px #9cacb9;
-	border-bottom-color: #c1c6cc;
-	height: 18px;
-	padding: 4px 25px;
-	color: #2c3c49;
-	font-size: 12px;
-	background: #ecf0f4 url(../img/tab-bg.png) repeat-x;
-	margin-right: 1px;
-	cursor: pointer;
-}
-
-.i-tabsheet-tabs .gwt-TabBarItem-selected {
-	border-color: #c1c6cc;
-	border-bottom-color: #fff;
-	background: #fff url(../img/tab-selected-bg.png) repeat-x;
-	padding-top: 7px;
-	padding-bottom: 5px;
-	margin-bottom: -1px;
-	cursor: default;
-}
-
-.i-tabsheet-tabs .gwt-TabBarItem:hover {
-	color: #62788a;
-}
-
-.i-tabsheet-tabs .gwt-TabBarItem-selected:hover {
-	color: #2c3c49;
-}
-
-.i-tabsheet-tabs .gwt-TabBarItem:before {
-	display: block;
-	height: 2px;
-	overflow: hidden;
-	background: transparent url(../img/tab-right.png) no-repeat right top;
-	content: url(../img/tab-left.png);
-	margin: -5px -26px 3px -26px;
-}
-
-.i-tabsheet-tabs .gwt-TabBarItem-selected:before {
-	height: 27px;
-	background-image: url(../img/tab-selected-right.png);
-	content: url(../img/tab-selected-left.png);
-	margin: -8px -26px -20px -26px;
-}
-
-.i-tabsheet-content {
-	background-color: #fff;
-	border: solid 1px #c1c6cc;
-	border-top: none;
-	padding: 8px;
-}
-
-.i-tabsheet-deco {
-	height: 9px;
-	background: transparent url(../../common/img/shadow.png) repeat-x left bottom;
-	margin: -2px 0 0 1px;
-	position: relative;
-}
-
-.i-tabsheet-deco:before {
-	display: block;
-	height: 2px;
-	overflow: hidden;
-	background: transparent url(../../panel/img/bottom-right.png) no-repeat right top;
-	content: url(../../panel/img/bottom-left.png);
-}
-
-/* Fix Safari bug (one pixel table offset) */
-.i-tabsheet-content {
-	margin-left: 1px;
-}
-.i-tabsheet-tabs .gwt-TabBarFirst {
-	display: block;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-}
-
-
-
-
-/* IE specific styles */
-* html .i-tabsheet-deco {
-	position: static;
-	background: transparent;
-	margin-top: 0;
-	font-size: 1;
-	height: 7px;
-	overflow: hidden;
-	/* TODO change url when packaging is complete */
-	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow.png", sizingMethod="scale");
-}

src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css

@@ -0,0 +1,157 @@
+.i-tabsheet,
+.i-tabsheet-content,
+.i-tabsheet-deco {
+	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
+}
+
+
+.i-tabsheet-tabs {
+	empty-cells: hide;
+	border-collapse: collapse;
+	height: 48px;
+	background: transparent url(img/tabs-bg.png) repeat-x bottom left;
+}
+
+.i-tabsheet-tabs .gwt-TabBarFirst {
+	display: none;
+}
+
+.i-tabsheet-tabs .gwt-TabBarRest {
+	border: 1px solid #b6bbbc;
+	background: #f8f9f9 url(img/tab-bg.png);
+	height: 37px;
+}
+
+.i-tabsheet-tabs .gwt-TabBarItem {
+	border: 1px solid #b6bbbc;
+	border-right: none;
+	height: 20px;
+	padding: 9px 15px 8px 15px;
+	margin-top: 9px;
+	color: #777f85;
+	font-size: 15px;
+	line-height: 15px;
+	background: #f8f9f9 url(img/tab-bg.png);
+	cursor: pointer;
+}
+
+.i-tabsheet-tabs .gwt-TabBarItem-selected {
+	border: none;
+	background: transparent url(../panel/img/top-left.png) no-repeat;
+	margin-top: -9px;
+	padding-left: 16px;
+	height: 30px;
+	cursor: default;
+	color: #ee5311;
+}
+
+.i-tabsheet-tabs .gwt-TabBarItem:hover {
+	color: #4b5257;
+}
+
+.i-tabsheet-tabs .gwt-TabBarItem-selected:hover {
+	color: #ee5311;
+}
+
+.i-tabsheet-tabs .gwt-TabBarItem-selected:before {
+	display: block;
+	height: 9px;
+	background: transparent url(../panel/img/top-right.png) repeat-x right top;
+	content: "";
+	margin: -9px -16px 9px -6px;
+}
+
+.i-tabsheet-content {
+	border: 1px solid #babfc0;
+	border-top: none;
+	border-bottom: none;
+	background-color: #fff;
+	overflow: auto;
+	padding: 15px 18px 6px 18px;
+}
+
+.i-tabsheet-deco {
+	height: 9px;
+	background: transparent url(../panel/img/bottom-right.png) repeat-x right top;
+	margin-left: 9px;
+}
+
+.i-tabsheet-deco:before {
+	display: block;
+	content: "";
+	width: 9px;
+	height: 9px;
+	margin-left: -9px;
+	background: transparent url(../panel/img/bottom-left.png) no-repeat;
+}
+
+
+
+
+/* Fix Safari bug (one pixel table offset) by 
+   adding one extra pixel in every browser */
+/* Actually, let Safari be a little different, it's a bug */
+/*
+.i-tabsheet-content {
+	margin-left: 1px;
+}
+.i-tabsheet-tabs .gwt-TabBarFirst {
+	display: block;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+.i-tabsheet {
+	margin-left: -1px;
+}
+*/
+
+
+
+
+
+
+
+
+/* IE specific styles */
+* html .i-tabsheet-content {
+	border-bottom: 1px solid #babfc0;
+}
+*+html .i-tabsheet-content {
+	border-bottom: 1px solid #babfc0;
+}
+
+* html .i-tabsheet-tabs {
+	height: 46px;
+}
+*+html .i-tabsheet-tabs {
+	height: 46px;
+}
+
+* html .i-tabsheet-tabs .gwt-TabBarItem-selected {
+	border: 1px solid #babfc0;
+	border-bottom: none;
+	background: #fff;
+	margin-top: 0;
+	height: 23px;
+	padding: 18px 14px 6px 15px;
+	cursor: default;
+	color: #ee5311;
+}
+*+html .i-tabsheet-tabs .gwt-TabBarItem-selected {
+	border: 1px solid #babfc0;
+	border-bottom: none;
+	background: #fff;
+	margin-top: 0;
+	height: 23px;
+	padding: 18px 14px 6px 15px;
+	cursor: default;
+	color: #ee5311;
+}
+
+* html .i-tabsheet-deco {
+	display: none;
+}
+*+html .i-tabsheet-deco {
+	display: none;
+}

src/com/itmill/toolkit/ui/TabSheet.java

@@ -73,11 +73,11 @@ public class TabSheet extends AbstractComponentContainer implements Sizeable {
 	 */
 	private boolean tabsHidden;
 	
-	private int height;
+	private int height = -1;
 
 	private int heightUnit;
 
-	private int width;
+	private int width = -1;
 
 	private int widthUnit;
 
@@ -204,13 +204,11 @@ public class TabSheet extends AbstractComponentContainer implements Sizeable {
 		if (areTabsHidden())
 			target.addAttribute("hidetabs", true);
 		
-		if(width > 0) {
-			target.addAttribute("width", width + UNIT_SYMBOLS[widthUnit]);
-		} else {
-			target.addAttribute("width", "100%");
+		if(width > -1) {
+			target.addAttribute("width", getWidth() + UNIT_SYMBOLS[widthUnit]);
 		}
-		if(height > 0) {
-			target.addAttribute("height", height + UNIT_SYMBOLS[widthUnit]);
+		if(height > -1) {
+			target.addAttribute("height", getHeight() + UNIT_SYMBOLS[heightUnit]);
 		}
 
 		target.startTag("tabs");
@@ -520,17 +518,21 @@ public class TabSheet extends AbstractComponentContainer implements Sizeable {
 
 	public void setHeight(int height) {
 		this.height = height;
+		requestRepaint();
 	}
 
 	public void setHeightUnits(int units) {
 		this.heightUnit = units;
+		requestRepaint();
 	}
 
 	public void setWidth(int width) {
 		this.width = width;
+		requestRepaint();
 	}
 
 	public void setWidthUnits(int units) {
 		this.widthUnit = units;
+		requestRepaint();
 	}
 }