Fix chrome fix + add CDB columns actions + thead fixed

bin/cdb.css

@@ -1,5 +1,6 @@
 .cdb {
   background-color: black;
+  margin-bottom: 350px;
 }
 .cdb:focus {
   outline: none;
@@ -28,7 +29,7 @@
   border-spacing: 0;
   background-color: #222;
 }
-.cdb .cdb-sheet th.start {
+.cdb .cdb-sheet .start {
   width: 30px;
   border-left-color: #333;
 }
@@ -122,15 +123,15 @@
   padding-bottom: 5px;
   border: none;
 }
-.cdb .cdb-sheet th.t_tilepos {
+.cdb .cdb-sheet .t_tilepos {
   width: 64px;
 }
 .cdb .cdb-sheet td.t_tilepos {
   text-align: center;
 }
-.cdb .cdb-sheet th.t_bool,
-.cdb .cdb-sheet th.t_int,
-.cdb .cdb-sheet th.t_float {
+.cdb .cdb-sheet .t_bool,
+.cdb .cdb-sheet .t_int,
+.cdb .cdb-sheet .t_float {
   width: 6%;
 }
 .cdb .cdb-sheet td.t_bool {
@@ -280,6 +281,20 @@
   min-width: 500px;
   min-height: 200px;
 }
+.floating-thead {
+  position: fixed;
+  background-color: #222;
+}
+.floating-thead th:first-child {
+  border-left: 1px solid #222;
+}
+.floating-thead th {
+  overflow: hidden;
+  color: #ddd;
+  padding: 1px 10px;
+  border-left: 1px solid #555;
+  border-bottom: 2px solid #666;
+}
 body.fullScreenMode .lm_content,
 body.fullScreenMode .lm_header,
 body.fullScreenMode .lm_splitter {
@@ -293,3 +308,57 @@ body.fullScreenMode .lm_content.fullScreen {
   width: 100% !important;
   height: 100% !important;
 }
+.content-modal {
+  width: 350px;
+  min-height: 300px;
+  margin: auto;
+  padding: 15px;
+  background: #292929;
+  border: 2px solid #555;
+  color: #dadada;
+}
+.content-modal form {
+  font-size: 14px;
+}
+.content-modal form input[type=text],
+.content-modal form input[type=submit],
+.content-modal form select {
+  height: 28px;
+}
+.content-modal form .t_int .disp,
+.content-modal form .t_float .disp {
+  display: block;
+}
+.content-modal form .t_string .localizable {
+  display: block;
+}
+.content-modal form .t_enum .values,
+.content-modal form .t_flags .values {
+  display: block;
+}
+.content-modal form .t_ref .sheet {
+  display: block;
+}
+.content-modal form .t_layer .sheet {
+  display: block;
+}
+.content-modal form .t_custom .custom {
+  display: block;
+}
+.content-modal form .values,
+.content-modal form .sheet,
+.content-modal form .custom,
+.content-modal form .disp,
+.content-modal form .localizable {
+  display: none;
+}
+.content-modal form.edit input.create {
+  display: none;
+}
+.content-modal form.create input.edit {
+  display: none;
+}
+.content-modal #errorModal {
+  color: red;
+  text-align: center;
+}

bin/cdb.less

@@ -2,6 +2,7 @@
 .cdb {
 
 	background-color : black;
+	margin-bottom: 350px;
 
 	&:focus {
 		outline: none;
@@ -36,7 +37,7 @@
 		border-spacing : 0;
 		background-color: #222;
 
-		th.start {
+		.start {
 			width : 30px;
 			border-left-color : #333;
 		}
@@ -143,16 +144,16 @@
 		}
 
 
-		th.t_tilepos {
+		.t_tilepos {
 			width: 64px;
 		}
 		td.t_tilepos {
 			text-align : center;
 		}
 
-		th.t_bool,
-		th.t_int,
-		th.t_float {
+		.t_bool,
+		.t_int,
+		.t_float {
 			width: 6%;
 		}
 
@@ -321,6 +322,23 @@
 	}
 }
 
+.floating-thead {
+	position: fixed;
+	background-color : #222;
+
+	th:first-child {
+		border-left: 1px solid #222;
+	}
+
+	th {
+		overflow: hidden;
+		color : #ddd;
+		padding: 1px 10px;
+		border-left: 1px solid #555;
+		border-bottom: 2px solid #666;
+	}
+}
+
 
 body.fullScreenMode {
 	.lm_content, .lm_header, .lm_splitter {
@@ -334,4 +352,49 @@ body.fullScreenMode {
 		width : 100% !important;
 		height: 100% !important;
 	}
+}
+
+.content-modal {
+	width: 350px;
+	min-height: 300px;
+	margin: auto;
+	padding: 15px;
+	background: #292929;
+	border: 2px solid #555;
+	color: #dadada;
+
+	form {
+		font-size: 14px;
+		input[type=text], input[type=submit], select {
+			height: 28px;
+		}
+		.t_int, .t_float {
+			.disp { display : block; }
+		}
+		.t_string {
+			.localizable { display : block; }
+		}
+		.t_enum .values, .t_flags .values { display : block; }
+		.t_ref .sheet { display : block; }
+		.t_layer .sheet { display : block; }
+		.t_custom .custom { display : block; }
+		.values, .sheet, .custom, .disp, .localizable  { display : none; }
+	
+	}
+
+	form.edit {
+		input.create {
+			display: none;
+		}
+	}
+	form.create {
+		input.edit {
+			display: none;
+		}
+	}
+	
+	#errorModal {
+		color: red;
+		text-align: center;
+	}
 }

bin/style.css

@@ -275,13 +275,17 @@ input[type=checkbox]:checked:after {
 .hide-range input[type=text]:active {
   border-color: #444;
 }
+.scene {
+  flex: 1;
+}
 .flex {
   width: 100%;
   height: 100%;
   display: flex;
 }
-.flex > * {
-  flex-grow: 100;
+.flex-elt {
+  flex: 1;
+  display: flex;
 }
 .flex.vertical {
   flex-direction: column;
@@ -383,12 +387,12 @@ input[type=checkbox]:checked:after {
   position: relative;
   height: 100%;
 }
-.hide-tabs > .tabs-header {
+.tabs-header {
   background-color: #111;
   padding: 2px;
   padding-bottom: 0px;
 }
-.hide-tabs > .tabs-header > div {
+.tabs-header > div {
   cursor: pointer;
   display: inline-block;
   color: #888;
@@ -399,22 +403,22 @@ input[type=checkbox]:checked:after {
   border-top-right-radius: 5px;
   user-select: none;
 }
-.hide-tabs > .tabs-header > div.active {
+.tabs-header > div.active {
   background-color: #222;
   color: #ccc;
   border-bottom-color: #222;
   border-top-right-radius: 0px;
 }
-.hide-tabs > .tabs-header > div:hover {
+.tabs-header > div:hover {
   background-color: #282828;
 }
-.hide-tabs .tab {
+.tab {
   max-height: 100%;
   display: flex;
   flex-direction: column;
   position: absolute;
 }
-.hide-tabs .expand {
+.expand {
   width: 100%;
   height: 100%;
 }
@@ -692,7 +696,6 @@ input[type=checkbox]:checked:after {
 .fx-animpanel .top-bar {
   margin-left: 120px;
   position: relative;
-  height: 100%;
 }
 .fx-animpanel .timeline {
   background: #141414;

bin/style.less

@@ -295,15 +295,24 @@ input[type=checkbox] {
 	}
 }
 
+.scene {
+	flex: 1;
+}
+
 .flex {
 	width:100%;
 	height:100%;
 	display:flex;
 	>* {
-		flex-grow : 100;
+		//flex-grow : 100;
 	}
 }
 
+.flex-elt {
+	flex: 1;
+	display: flex;
+}
+
 .flex.vertical {
 	flex-direction: column;
 }
@@ -407,44 +416,45 @@ input[type=checkbox] {
 	flex : 0 0 320px;
 	position: relative;
 	height: 100%;
-	&>.tabs-header {
-		background-color : #111;
-		padding : 2px;
-		padding-bottom : 0px;
-		&>div {
-			cursor : pointer;
-			display : inline-block;
-			color: #888;
-			background-color : #151515;
-			padding : 3px 8px;
-			border : 1px solid #444;
-			margin-left : -1px;
-			border-top-right-radius: 5px;
-			user-select: none;
-			&.active {
-				background-color : #222;
-				color : #ccc;
-				border-bottom-color : #222;
-				border-top-right-radius: 0px;
-			}
-			&:hover {
-				background-color : #282828;
-			}
-		}
+}
 
+.tabs-header {
+	background-color : #111;
+	padding : 2px;
+	padding-bottom : 0px;
+	&>div {
+		cursor : pointer;
+		display : inline-block;
+		color: #888;
+		background-color : #151515;
+		padding : 3px 8px;
+		border : 1px solid #444;
+		margin-left : -1px;
+		border-top-right-radius: 5px;
+		user-select: none;
+		&.active {
+			background-color : #222;
+			color : #ccc;
+			border-bottom-color : #222;
+			border-top-right-radius: 0px;
+		}
+		&:hover {
+			background-color : #282828;
+		}
 	}
 
-	.tab {
-		max-height: 100%;
-		display: flex;
-		flex-direction: column;
-		position: absolute;
-	}
+}
 
-	.expand {
-		width: 100%;
-		height: 100%;
-	}
+.tab {
+	max-height: 100%;
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+}
+
+.expand {
+	width: 100%;
+	height: 100%;
 }
 
 .searchBox {
@@ -761,7 +771,7 @@ input[type=checkbox] {
 	.top-bar {
 		margin-left: @leftPanelWidth;
 		position: relative;
-		height: 100%;
+		//height: 100%;
 	}
 
 	.timeline {

hide/comp/Modal.hx

@@ -11,4 +11,8 @@ class Modal extends Component {
         content = new Element("<div class='content'></div>").appendTo(element);
     }
 
+    public function close() {
+        element.remove();
+    }
+
 }

hide/comp/Tabs.hx

@@ -27,10 +27,10 @@ class Tabs extends Component {
 	function set_currentTab( e : Element ) {
 		var index = Std.parseInt(e.attr("index"));
 		getTabs().hide();
-		e.show();
 		header.children().removeClass("active").filter("[index=" + index + "]").addClass("active");
 		currentTab = e;
 		onTabChange(index);
+		e.show();
 		return e;
 	}
 

hide/comp/cdb/Editor.hx

@@ -62,6 +62,9 @@ class Editor extends Component {
 			if( cell != null && cell.isTextInput() && !e.ctrlKey )
 				cell.edit();
 		});
+		element.on("resize", function(e) {
+			refresh();
+		});
 		keys = new hide.ui.Keys(element);
 		keys.addListener(onKey);
 		keys.register("search", function() {
@@ -450,7 +453,88 @@ class Editor extends Component {
 		return null;
 	}
 
-	public function newColumn( sheet : cdb.Sheet, ?after ) {
+	public function newColumn( sheet : cdb.Sheet, ?index : Int ) {
+		var modal = new hide.comp.cdb.ModalColumnForm(base, null, element);
+		modal.setCallback(function() {
+			var c = modal.getColumn(base, sheet, null);
+			if (c == null) {
+				return;
+			}
+			var err = newColumn_save(sheet, c, index + 1);
+			if (err != null) {
+				modal.error(err);
+			} else {
+				modal.closeModal();
+			}
+		});
+	}
+
+	function newColumn_save( sheet : cdb.Sheet, c : cdb.Data.Column, ?index : Int ) {
+		beginChanges();
+		var err = sheet.addColumn(c, index);
+		endChanges();
+		if (err != null) {
+			return err;
+		}
+		for( t in tables )
+			if( t.sheet == sheet )
+				t.refresh();
+		return null;
+	}
+
+	public function editColumn( sheet : cdb.Sheet, col : cdb.Data.Column ) {
+		var modal = new hide.comp.cdb.ModalColumnForm(base, col, element);
+		modal.setCallback(function() {
+			var c = modal.getColumn(base, sheet, col);
+			if (c == null) {
+				return;
+			}
+			var err = editColumn_save(base, sheet, col, c);
+			if (err != null) {
+				modal.error(err);
+			} else {
+				modal.closeModal();
+			}
+		});
+	}
+
+	function editColumn_save( base : cdb.Database, sheet : cdb.Sheet, colOld : cdb.Data.Column, colNew : cdb.Data.Column ) {
+		beginChanges();
+		var err = base.updateColumn(sheet, colOld, colNew);
+		endChanges();
+		for( t in tables )
+			if( t.sheet == sheet )
+				t.refresh();
+		if (err != null) {
+			return err;
+		}
+		return null;
+	}
+
+	public function deleteColumn( sheet : cdb.Sheet, cname : String ) {
+		beginChanges();
+		sheet.deleteColumn(cname);
+		endChanges();
+	}
+
+	public function moveColumnLeft( sheet : cdb.Sheet, index : Int ) {
+		beginChanges();
+		var c = sheet.columns[index];
+		if( index > 0 ) {
+			sheet.columns.remove(c);
+			sheet.columns.insert(index - 1, c);
+		}
+		endChanges();
+	}
+
+	public function moveColumnRight( sheet : cdb.Sheet, index : Int ) {
+		beginChanges();
+		var c = sheet.columns[index];
+		if( index > 0 ) {
+			sheet.columns.remove(c);
+			sheet.columns.insert(index + 1, c);
+		}
+		endChanges();
 	}
 
 	public function insertLine( table : Table, index = 0 ) {
@@ -488,9 +572,45 @@ class Editor extends Component {
 	}
 
 	public function popupColumn( table : Table, col : cdb.Data.Column ) {
+		var indexColumn = 0;
+		for (c in table.sheet.columns) {
+			if (c == col) {
+				break;
+			}
+			indexColumn++;
+		}
 		var menu : Array<hide.comp.ContextMenu.ContextMenuItem> = [];
 		if( col.type == TString && col.kind == Script )
 			menu.push({ label : "Edit all", click : function() editScripts(table,col) });
+
+		menu.push({ label : "Edit", click : function () {
+				editColumn(table.sheet, col);
+			}
+		});
+		
+		menu.push({ label : "Add Column", click : function () {
+				newColumn(table.sheet, indexColumn);
+			}
+		});
+			
+		menu.push({ label: "sep", isSeparator: true });
+		menu.push({ label : "Move Left", enabled:  (indexColumn > 0), click : function () {
+				moveColumnLeft(table.sheet, indexColumn);
+				table.refresh();
+			}
+		});
+		menu.push({ label : "Move Right", enabled: (indexColumn < table.sheet.columns.length - 1), click : function () {
+				moveColumnRight(table.sheet, indexColumn);
+				table.refresh();
+			}
+		});
+		menu.push({ label: "sep", isSeparator: true });
+
+		menu.push({ label : "Delete", click : function () {
+				deleteColumn(table.sheet, col.name);
+				table.refresh();
+			}
+		});
 		new hide.comp.ContextMenu(menu);
 	}
 

hide/comp/cdb/ModalColumnForm.hx

@@ -0,0 +1,239 @@
+package hide.comp.cdb;
+
+import cdb.Data;
+
+class ModalColumnForm extends Modal {
+
+    var contentModal : Element;
+    var form : Element;
+    var lastError : String;
+
+    public function new(base : cdb.Database, column : cdb.Data.Column, ?parent,?el) {
+        super(parent,el);
+
+        var editForm = (column != null);
+
+        contentModal = new Element("<div>").addClass("content-modal").appendTo(content);
+
+        if (editForm)
+		    new Element("<h2> Edit column </h2>").appendTo(contentModal);
+        else
+		    new Element("<h2> Create column </h2>").appendTo(contentModal);
+        new Element("<p id='errorModal'></p>").appendTo(contentModal);
+
+        form = new Element('<form id="col_form" onsubmit="return false">
+
+            <div>Column name</div> <input type="text" name="name"/>
+			<br /><br />
+
+            <div>Column type</div>
+            <select name="type" onchange="$(\'#col_options\').attr(\'class\',\'t_\'+this.value)">
+                <option value="">---- Choose -----</option>
+                <option value="id">Unique Identifier</option>
+                <option value="string">Text</option>
+                <option value="bool">Boolean</option>
+                <option value="int">Integer</option>
+                <option value="float">Float</option>
+                <option value="enum">Enumeration</option>
+                <option value="flags">Flags</option>
+                <option value="ref">Reference</option>
+                <option value="list">List</option>
+                <option value="properties">Properties</option>
+                <option value="color">Color</option>
+                <option value="file">File</option>
+                <option value="image">Image</option>
+                <option value="tilepos">Tile</option>
+                <option value="dynamic">Dynamic</option>
+                <option value="layer">Data Layer</option>
+                <option value="tilelayer">Tile Layer</option>
+                <option value="custom">Custom Type</option>
+            </select>
+            <br /><br />
+            
+			<div id="col_options">
+				<div class="values">
+                    Possible Values
+                    <br />
+                    <input type="text" name="values" name="vals"/>
+                    <br /><br />
+                </div> 
+
+				<div class="sheet">
+                    Sheet
+                    <br />
+                    <select name="sheet"></select>
+                    <br /><br />
+                </div>
+
+				<div class="disp">
+                    Display 
+                    <br />
+                    <select name="display">
+                    <option value="0">Default</option>
+                    <option value="1">Percentage</option>
+                    </select>
+                    <br /><br />
+                </div>
+
+				<div class="localizable"><input type="checkbox" name="localizable"/> Localizable<br /><br /></div>
+
+				<div class="custom">
+                    Type
+                    <select name="ctype"></select>
+                    <br /><br />
+                </div>
+				<div class="opt"><input type="checkbox" name="req"/> Required</div>
+			</div>
+            <br /><br />
+			<p class="buttons">
+				<input class="edit" type="submit" value="Modify" id="editBtn" />
+				<input class="create" type="submit" value="Create" id="createBtn" />
+				<input type="submit" value="Cancel" id="cancelBtn" />
+			</p>
+
+			</form>').appendTo(contentModal);
+
+        var sheets = form.find("[name=sheet]");
+		sheets.empty();
+		for( i in 0...base.sheets.length ) {
+			var s = base.sheets[i];
+			if( s.props.hide ) continue;
+			new Element("<option>").attr("value", "" + i).text(s.name).appendTo(sheets);
+		}
+
+        var types = form.find("[name=ctype]");
+		types.empty();
+		types.off("change");
+		types.change(function(_) {
+			new Element("#col_options").toggleClass("t_edit",types.val() != "");
+		});
+		new Element("<option>").attr("value", "").text("--- Select ---").appendTo(types);
+		for( t in base.getCustomTypes() )
+			new Element("<option>").attr("value", "" + t.name).text(t.name).appendTo(types);
+
+        if (editForm) {
+			form.addClass("edit");
+            form.find("[name=name]").val(column.name);
+			form.find("[name=type]").val(column.type.getName().substr(1).toLowerCase()).change();
+			form.find("[name=req]").prop("checked", !column.opt);
+			form.find("[name=display]").val(column.display == null ? "0" : Std.string(column.display));
+			form.find("[name=localizable]").prop("checked", column.kind==Localizable);
+			switch( column.type ) {
+			case TEnum(values), TFlags(values):
+				form.find("[name=values]").val(values.join(","));
+			case TRef(sname), TLayer(sname):
+				form.find("[name=sheet]").val( "" + base.sheets.indexOf(base.getSheet(sname)));
+			case TCustom(name):
+				form.find("[name=ctype]").val(name);
+			default:
+			}
+        } else {
+			form.addClass("create");
+			form.find("input").not("[type=submit]").val("");
+			form.find("[name=req]").prop("checked", true);
+			form.find("[name=localizable]").prop("checked", false);
+        }
+
+        contentModal.click( function(e) e.stopPropagation());
+
+		element.click(function(e) {
+            closeModal();
+		});
+
+        form.find("#cancelBtn").click(function(e) closeModal());
+    }
+
+    public function setCallback(callback : (Void -> Void)) {
+        form.find("#createBtn").click(function(e) callback());
+        form.find("#editBtn").click(function(e) callback());
+    }
+
+    public function closeModal() {
+        content.empty();
+        close();
+    }
+
+    public function getColumn(base : cdb.Database, sheet : cdb.Sheet, refColumn : cdb.Data.Column) : Column{
+
+		var v : Dynamic<String> = { };
+		var cols = form.find("input, select").not("[type=submit]");
+		for( i in cols.elements() )
+			Reflect.setField(v, i.attr("name"), i.attr("type") == "checkbox" ? (i.is(":checked")?"on":null) : i.val());
+
+		var t : ColumnType = switch( v.type ) {
+		case "id": TId;
+		case "int": TInt;
+		case "float": TFloat;
+		case "string": TString;
+		case "bool": TBool;
+		case "enum":
+			var vals = StringTools.trim(v.values).split(",");
+			if( vals.length == 0 ) {
+				error("Missing value list");
+				return null;
+			}
+			TEnum([for( f in vals ) StringTools.trim(f)]);
+		case "flags":
+			var vals = StringTools.trim(v.values).split(",");
+			if( vals.length == 0 ) {
+				error("Missing value list");
+				return null;
+			}
+			TFlags([for( f in vals ) StringTools.trim(f)]);
+		case "ref":
+			var s = base.sheets[Std.parseInt(v.sheet)];
+			if( s == null ) {
+				error("Sheet not found");
+				return null;
+			}
+			TRef(s.name);
+		case "image":
+			TImage;
+		case "list":
+			TList;
+		case "custom":
+			var t = base.getCustomType(v.ctype);
+			if( t == null ) {
+				error("Type not found");
+				return null;
+			}
+			TCustom(t.name);
+		case "color":
+			TColor;
+		case "layer":
+			var s = base.sheets[Std.parseInt(v.sheet)];
+			if( s == null ) {
+				error("Sheet not found");
+				return null;
+			}
+			TLayer(s.name);
+		case "file":
+			TFile;
+		case "tilepos":
+			TTilePos;
+		case "tilelayer":
+			TTileLayer;
+		case "dynamic":
+			TDynamic;
+		case "properties":
+			TProperties;
+		default:
+			return null;
+		}
+		var c : Column = {
+			type : t,
+			typeStr : null,
+			name : v.name,
+		};
+		if( v.req != "on" ) c.opt = true;
+		if( v.display != "0" ) c.display = cast Std.parseInt(v.display);
+		if( v.localizable == "on" ) c.kind = Localizable;
+
+        return c;
+	}
+
+    public function error(str : String) {
+        contentModal.find("#errorModal").html(str);
+    }
+
+}

hide/comp/cdb/Table.hx

@@ -44,8 +44,36 @@ class Table extends Component {
 		}
 	}
 
+	function cloneTableHead() {
+		var target = J('.head');
+		if (target.length == 0) {
+			trace("Fail clone table head");
+			return;
+		}
+		var target_children = target.children();
+
+		J(".floating-thead").remove();
+
+		var clone = J("<div>").addClass("floating-thead");
+
+		for (i in 0...target_children.length) {
+			var targetElt = target_children.eq(i);
+			var elt = targetElt.clone(true); // clone with events
+			elt.width(targetElt.width());
+			elt.css("max-width", targetElt.width());
+
+			var txt = elt[0].innerHTML;
+			elt.empty();
+			J("<span>" + txt + "</span>").appendTo(elt);
+
+			clone.append(elt);
+		}
+
+		J('.cdb').prepend(clone);
+	}
+
 	function refreshTable() {
-		var cols = J("<tr>").addClass("head");
+		var cols = J("<thead>").addClass("head");
 		J("<th>").addClass("start").appendTo(cols);
 		lines = [for( index in 0...sheet.lines.length ) {
 			var l = J("<tr>");
@@ -65,7 +93,6 @@ class Table extends Component {
 			line;
 		}];
 
-
 		var colCount = sheet.columns.length;
 		for( cindex in 0...sheet.columns.length ) {
 			var c = sheet.columns[cindex];
@@ -82,7 +109,7 @@ class Table extends Component {
 				}
 			});
 			col.dblclick(function(_) {
-				editor.newColumn(sheet, c);
+				editor.editColumn(sheet, c);
 			});
 			cols.append(col);
 
@@ -112,15 +139,18 @@ class Table extends Component {
 
 		element.append(cols);
 
+		var tbody = J("<tbody>");
+
 		var snext = 0;
 		for( i in 0...lines.length+1 ) {
 			while( sheet.separators[snext] == i ) {
-				makeSeparator(snext, colCount).appendTo(element);
+				makeSeparator(snext, colCount).appendTo(tbody);
 				snext++;
 			}
 			if( i == lines.length ) break;
-			element.append(lines[i].element);
+			tbody.append(lines[i].element);
 		}
+		element.append(tbody);
 
 		if( sheet.lines.length == 0 ) {
 			var l = J('<tr><td colspan="${sheet.columns.length + 1}"><a>Insert Line</a></td></tr>');
@@ -130,6 +160,8 @@ class Table extends Component {
 			});
 			element.append(l);
 		}
+
+		cols.ready(cloneTableHead);
 	}
 
 	function makeSeparator( sindex : Int, colCount : Int ) {

hide/view/CdbTable.hx

@@ -25,7 +25,6 @@ class CdbTable extends hide.ui.View<{ path : String }> {
 
 	override function onActivate() {
 		if( editor != null ) editor.focus();
-		chromeFix();
 	}
 
 	function setEditor(index:Int) {
@@ -35,17 +34,6 @@ class CdbTable extends hide.ui.View<{ path : String }> {
 		editor.focus();
 		editor.onFocus = activate;
 		undo = ide.databaseApi.undo;
-		chromeFix();
-	}
-
-	function chromeFix() {
-		// bugfix chrome : for some reason, the tabs does not appear
-		// doing this will turn them back...
-		if( sheets != null && sheets.length > 1 ) {
-			var tabs = element.find(".hide-tabs");
-			tabs.css({ height : "100px" });
-			haxe.Timer.delay(function() tabs.css({ height : "" }), 1);
-		}
 	}
 
 	override function onDisplay() {

hide/view/FXEditor.hx

@@ -192,7 +192,7 @@ class FXEditor extends FileView {
 		element.html('
 			<div class="flex vertical">
 				<div class="toolbar"></div>
-				<div class="flex">
+				<div class="flex-elt">
 					<div class="flex vertical">
 						<div class="flex scene"></div>
 						<div class="fx-animpanel">

hide/view/Model.hx

@@ -62,7 +62,7 @@ class Model extends FileView {
 		element.html('
 			<div class="flex vertical">
 				<div class="toolbar"></div>
-				<div class="flex">
+				<div class="flex-elt">
 					<div class="scene">
 						<div class="hide-scroll hide-scene-layer">
 							<div class="tree"></div>

hide/view/Particles2D.hx

@@ -21,7 +21,7 @@ class Particles2D extends FileView {
 
 	override function onDisplay() {
 		element.html('
-			<div class="flex">
+			<div class="flex-elt">
 				<div class="scene"></div>
 				<div class="props"></div>
 			</div>

hide/view/Particles3D.hx

@@ -17,7 +17,7 @@ class Particles3D extends FileView {
 
 	override function onDisplay() {
 		element.html('
-			<div class="flex">
+			<div class="flex-elt">
 				<div class="scene"></div>
 				<div class="props"></div>
 			</div>

hide/view/Prefab.hx

@@ -77,7 +77,7 @@ class Prefab extends FileView {
 		element.html('
 			<div class="flex vertical">
 				<div class="toolbar"></div>
-				<div class="flex">
+				<div class="flex-elt">
 					<div class="scene">
 					</div>
 					<div class="tabs">

hide/view/l3d/Level3D.hx

@@ -316,7 +316,7 @@ class Level3D extends FileView {
 					<span class="tools-buttons"></span>
 					<span class="layer-buttons"></span>
 				</div>
-				<div class="flex">
+				<div class="flex-elt">
 					<div class="scene">
 					</div>
 					<div class="tabs">