Editor: Added UI.Row.

editor/css/dark.css

@@ -159,7 +159,9 @@ input.Number {
 	}
 
 	#sidebar .Panel {
-		margin-bottom: 10px;
+		color: #888;
+		padding: 10px;
+		border-top: 1px solid #222;
 	}
 
 	#sidebar .Panel.collapsed {
@@ -170,10 +172,8 @@ input.Number {
 		border: solid 1px #5A5A5A;
 	}
 
-	#sidebar > .Panel, #sidebar > span > .Panel {
-		color: #888;
-		padding: 10px;
-		border-top: 1px solid #222;
+	#sidebar .Row {
+		margin-bottom: 10px;
 	}
 
 #tabs {

editor/css/light.css

@@ -152,17 +152,17 @@ input.Number {
 	}
 
 	#sidebar .Panel {
-		margin-bottom: 10px;
+		color: #888;
+		padding: 10px;
+		border-top: 1px solid #ccc;
 	}
 
 	#sidebar .Panel.collapsed {
 		margin-bottom: 0;
 	}
 
-	#sidebar > .Panel, #sidebar > span > .Panel {
-		color: #888;
-		padding: 10px;
-		border-top: 1px solid #ccc;
+	#sidebar .Row {
+		margin-bottom: 10px;
 	}
 
 #tabs {

editor/js/Menubar.Add.js

@@ -32,7 +32,7 @@ Menubar.Add = function ( editor ) {
 
 	// Group
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Group' );
 	option.onClick( function () {
@@ -51,7 +51,7 @@ Menubar.Add = function ( editor ) {
 
 	// Plane
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Plane' );
 	option.onClick( function () {
@@ -68,7 +68,7 @@ Menubar.Add = function ( editor ) {
 
 	// Box
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Box' );
 	option.onClick( function () {
@@ -84,7 +84,7 @@ Menubar.Add = function ( editor ) {
 
 	// Circle
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Circle' );
 	option.onClick( function () {
@@ -103,7 +103,7 @@ Menubar.Add = function ( editor ) {
 
 	// Cylinder
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Cylinder' );
 	option.onClick( function () {
@@ -126,7 +126,7 @@ Menubar.Add = function ( editor ) {
 
 	// Sphere
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Sphere' );
 	option.onClick( function () {
@@ -150,7 +150,7 @@ Menubar.Add = function ( editor ) {
 
 	// Icosahedron
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Icosahedron' );
 	option.onClick( function () {
@@ -169,7 +169,7 @@ Menubar.Add = function ( editor ) {
 
 	// Torus
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Torus' );
 	option.onClick( function () {
@@ -191,7 +191,7 @@ Menubar.Add = function ( editor ) {
 
 	// TorusKnot
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'TorusKnot' );
 	option.onClick( function () {
@@ -216,7 +216,7 @@ Menubar.Add = function ( editor ) {
 	/*
 	// Teapot
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Teapot' );
 	option.onClick( function () {
@@ -244,7 +244,7 @@ Menubar.Add = function ( editor ) {
 
 	// Sprite
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Sprite' );
 	option.onClick( function () {
@@ -263,7 +263,7 @@ Menubar.Add = function ( editor ) {
 
 	// PointLight
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'PointLight' );
 	option.onClick( function () {
@@ -282,7 +282,7 @@ Menubar.Add = function ( editor ) {
 
 	// SpotLight
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'SpotLight' );
 	option.onClick( function () {
@@ -306,7 +306,7 @@ Menubar.Add = function ( editor ) {
 
 	// DirectionalLight
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'DirectionalLight' );
 	option.onClick( function () {
@@ -327,7 +327,7 @@ Menubar.Add = function ( editor ) {
 
 	// HemisphereLight
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'HemisphereLight' );
 	option.onClick( function () {
@@ -348,7 +348,7 @@ Menubar.Add = function ( editor ) {
 
 	// AmbientLight
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'AmbientLight' );
 	option.onClick( function() {
@@ -369,7 +369,7 @@ Menubar.Add = function ( editor ) {
 
 	// PerspectiveCamera
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'PerspectiveCamera' );
 	option.onClick( function() {

editor/js/Menubar.Edit.js

@@ -18,7 +18,7 @@ Menubar.Edit = function ( editor ) {
 
 	// Undo
 
-	var undo = new UI.Panel();
+	var undo = new UI.Row();
 	undo.setClass( 'option' );
 	undo.setTextContent( 'Undo (Ctrl+Z)' );
 	undo.onClick( function () {
@@ -30,7 +30,7 @@ Menubar.Edit = function ( editor ) {
 
 	// Redo
 
-	var redo = new UI.Panel();
+	var redo = new UI.Row();
 	redo.setClass( 'option' );
 	redo.setTextContent( 'Redo (Ctrl+Shift+Z)' );
 	redo.onClick( function () {
@@ -42,7 +42,7 @@ Menubar.Edit = function ( editor ) {
 
 	// Clear History
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Clear History' );
 	option.onClick( function () {
@@ -84,7 +84,7 @@ Menubar.Edit = function ( editor ) {
 
 	// Clone
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Clone' );
 	option.onClick( function () {
@@ -102,7 +102,7 @@ Menubar.Edit = function ( editor ) {
 
 	// Delete
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Delete' );
 	option.onClick( function () {
@@ -121,7 +121,7 @@ Menubar.Edit = function ( editor ) {
 
 	// Minify shaders
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Minify Shaders' );
 	option.onClick( function() {

editor/js/Menubar.Examples.js

@@ -33,7 +33,7 @@ Menubar.Examples = function ( editor ) {
 
 			var item = items[ i ];
 
-			var option = new UI.Panel();
+			var option = new UI.Row();
 			option.setClass( 'option' );
 			option.setTextContent( item.title );
 			option.onClick( function () {

editor/js/Menubar.File.js

@@ -18,7 +18,7 @@ Menubar.File = function ( editor ) {
 
 	// New
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'New' );
 	option.onClick( function () {
@@ -46,7 +46,7 @@ Menubar.File = function ( editor ) {
 
 	} );
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Import' );
 	option.onClick( function () {
@@ -62,7 +62,7 @@ Menubar.File = function ( editor ) {
 
 	// Export Geometry
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Export Geometry' );
 	option.onClick( function () {
@@ -105,7 +105,7 @@ Menubar.File = function ( editor ) {
 
 	// Export Object
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Export Object' );
 	option.onClick( function () {
@@ -139,7 +139,7 @@ Menubar.File = function ( editor ) {
 
 	// Export Scene
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Export Scene' );
 	option.onClick( function () {
@@ -164,7 +164,7 @@ Menubar.File = function ( editor ) {
 
 	// Export OBJ
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Export OBJ' );
 	option.onClick( function () {
@@ -187,7 +187,7 @@ Menubar.File = function ( editor ) {
 
 	// Export STL
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Export STL' );
 	option.onClick( function () {
@@ -205,7 +205,7 @@ Menubar.File = function ( editor ) {
 
 	// Publish
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Publish' );
 	option.onClick( function () {

editor/js/Menubar.Help.js

@@ -18,7 +18,7 @@ Menubar.Help = function ( editor ) {
 
 	// Source code
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Source code' );
 	option.onClick( function () {
@@ -30,7 +30,7 @@ Menubar.Help = function ( editor ) {
 
 	// About
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'About' );
 	option.onClick( function () {

editor/js/Menubar.View.js

@@ -18,7 +18,7 @@ Menubar.View = function ( editor ) {
 
 	// Light theme
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Light theme' );
 	option.onClick( function () {
@@ -31,7 +31,7 @@ Menubar.View = function ( editor ) {
 
 	// Dark theme
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Dark theme' );
 	option.onClick( function () {
@@ -48,7 +48,7 @@ Menubar.View = function ( editor ) {
 
 	// fullscreen
 
-	var option = new UI.Panel();
+	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setTextContent( 'Fullscreen' );
 	option.onClick( function () {

editor/js/Sidebar.Animation.js

@@ -21,7 +21,7 @@ Sidebar.Animation = function ( editor ) {
 	container.addStatic( new UI.Text( 'Animation' ).setTextTransform( 'uppercase' ) );
 	container.add( new UI.Break() );
 
-	var animationsRow = new UI.Panel();
+	var animationsRow = new UI.Row();
 	container.add( animationsRow );
 
 	/*

editor/js/Sidebar.Geometry.BoxGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// width
 
-	var widthRow = new UI.Panel();
+	var widthRow = new UI.Row();
 	var width = new UI.Number( parameters.width ).onChange( update );
 
 	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	// height
 
-	var heightRow = new UI.Panel();
+	var heightRow = new UI.Row();
 	var height = new UI.Number( parameters.height ).onChange( update );
 
 	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	// depth
 
-	var depthRow = new UI.Panel();
+	var depthRow = new UI.Row();
 	var depth = new UI.Number( parameters.depth ).onChange( update );
 
 	depthRow.add( new UI.Text( 'Depth' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	// widthSegments
 
-	var widthSegmentsRow = new UI.Panel();
+	var widthSegmentsRow = new UI.Row();
 	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
 	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ) );
@@ -52,7 +52,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	// heightSegments
 
-	var heightSegmentsRow = new UI.Panel();
+	var heightSegmentsRow = new UI.Row();
 	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
@@ -62,7 +62,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	// depthSegments
 
-	var depthSegmentsRow = new UI.Panel();
+	var depthSegmentsRow = new UI.Row();
 	var depthSegments = new UI.Integer( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
 
 	depthSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -6,7 +6,7 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	function update( object ) {
 
@@ -23,7 +23,7 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
 			if ( index !== null ) {
 
-				var panel = new UI.Panel();
+				var panel = new UI.Row();
 				panel.add( new UI.Text( 'index' ).setWidth( '90px' ) );
 				panel.add( new UI.Text( ( index.count ).format() ).setFontSize( '12px' ) );
 				container.add( panel );
@@ -34,7 +34,7 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
 			for ( var name in attributes ) {
 
-				var panel = new UI.Panel();
+				var panel = new UI.Row();
 				panel.add( new UI.Text( name ).setWidth( '90px' ) );
 				panel.add( new UI.Text( ( attributes[ name ].count ).format() ).setFontSize( '12px' ) );
 				container.add( panel );

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// radius
 
-	var radiusRow = new UI.Panel();
+	var radiusRow = new UI.Row();
 	var radius = new UI.Number( parameters.radius ).onChange( update );
 
 	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 	// segments
 
-	var segmentsRow = new UI.Panel();
+	var segmentsRow = new UI.Row();
 	var segments = new UI.Integer( parameters.segments ).setRange( 3, Infinity ).onChange( update );
 
 	segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 	// thetaStart
 
-	var thetaStartRow = new UI.Panel();
+	var thetaStartRow = new UI.Row();
 	var thetaStart = new UI.Number( parameters.thetaStart ).onChange( update );
 
 	thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 	// thetaLength
 
-	var thetaLengthRow = new UI.Panel();
+	var thetaLengthRow = new UI.Row();
 	var thetaLength = new UI.Number( parameters.thetaLength ).onChange( update );
 
 	thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// radiusTop
 
-	var radiusTopRow = new UI.Panel();
+	var radiusTopRow = new UI.Row();
 	var radiusTop = new UI.Number( parameters.radiusTop ).onChange( update );
 
 	radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	// radiusBottom
 
-	var radiusBottomRow = new UI.Panel();
+	var radiusBottomRow = new UI.Row();
 	var radiusBottom = new UI.Number( parameters.radiusBottom ).onChange( update );
 
 	radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	// height
 
-	var heightRow = new UI.Panel();
+	var heightRow = new UI.Row();
 	var height = new UI.Number( parameters.height ).onChange( update );
 
 	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	// radialSegments
 
-	var radialSegmentsRow = new UI.Panel();
+	var radialSegmentsRow = new UI.Row();
 	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
 	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
@@ -52,7 +52,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	// heightSegments
 
-	var heightSegmentsRow = new UI.Panel();
+	var heightSegmentsRow = new UI.Row();
 	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
@@ -62,7 +62,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	// openEnded
 
-	var openEndedRow = new UI.Panel();
+	var openEndedRow = new UI.Row();
 	var openEnded = new UI.Checkbox( parameters.openEnded ).onChange( update );
 
 	openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.Geometry.js

@@ -6,11 +6,11 @@ Sidebar.Geometry.Geometry = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	// vertices
 
-	var verticesRow = new UI.Panel();
+	var verticesRow = new UI.Row();
 	var vertices = new UI.Text().setFontSize( '12px' );
 
 	verticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
@@ -20,7 +20,7 @@ Sidebar.Geometry.Geometry = function ( editor ) {
 
 	// faces
 
-	var facesRow = new UI.Panel();
+	var facesRow = new UI.Row();
 	var faces = new UI.Text().setFontSize( '12px' );
 
 	facesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// radius
 
-	var radiusRow = new UI.Panel();
+	var radiusRow = new UI.Row();
 	var radius = new UI.Number( parameters.radius ).onChange( update );
 
 	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
 
 	// detail
 
-	var detailRow = new UI.Panel();
+	var detailRow = new UI.Row();
 	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
 	detailRow.add( new UI.Text( 'Detail' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.Modifiers.js

@@ -6,7 +6,7 @@ Sidebar.Geometry.Modifiers = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel().setPaddingLeft( '90px' );
+	var container = new UI.Row().setPaddingLeft( '90px' );
 
 	var geometry = object.geometry;
 
@@ -37,4 +37,4 @@ Sidebar.Geometry.Modifiers = function ( editor, object ) {
 
 	return container;
 
-}
+};

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// width
 
-	var widthRow = new UI.Panel();
+	var widthRow = new UI.Row();
 	var width = new UI.Number( parameters.width ).onChange( update );
 
 	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 	// height
 
-	var heightRow = new UI.Panel();
+	var heightRow = new UI.Row();
 	var height = new UI.Number( parameters.height ).onChange( update );
 
 	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 	// widthSegments
 
-	var widthSegmentsRow = new UI.Panel();
+	var widthSegmentsRow = new UI.Row();
 	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
 	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 	// heightSegments
 
-	var heightSegmentsRow = new UI.Panel();
+	var heightSegmentsRow = new UI.Row();
 	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// radius
 
-	var radiusRow = new UI.Panel();
+	var radiusRow = new UI.Row();
 	var radius = new UI.Number( parameters.radius ).onChange( update );
 
 	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	// widthSegments
 
-	var widthSegmentsRow = new UI.Panel();
+	var widthSegmentsRow = new UI.Row();
 	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
 	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	// heightSegments
 
-	var heightSegmentsRow = new UI.Panel();
+	var heightSegmentsRow = new UI.Row();
 	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	// phiStart
 
-	var phiStartRow = new UI.Panel();
+	var phiStartRow = new UI.Row();
 	var phiStart = new UI.Number( parameters.phiStart ).onChange( update );
 
 	phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ) );
@@ -52,7 +52,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	// phiLength
 
-	var phiLengthRow = new UI.Panel();
+	var phiLengthRow = new UI.Row();
 	var phiLength = new UI.Number( parameters.phiLength ).onChange( update );
 
 	phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ) );
@@ -62,7 +62,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	// thetaStart
 
-	var thetaStartRow = new UI.Panel();
+	var thetaStartRow = new UI.Row();
 	var thetaStart = new UI.Number( parameters.thetaStart ).onChange( update );
 
 	thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ) );
@@ -72,7 +72,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	// thetaLength
 
-	var thetaLengthRow = new UI.Panel();
+	var thetaLengthRow = new UI.Row();
 	var thetaLength = new UI.Number( parameters.thetaLength ).onChange( update );
 
 	thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.TeapotBufferGeometry.js

@@ -4,13 +4,13 @@
 
 Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// size
 
-	var sizeRow = new UI.Panel();
+	var sizeRow = new UI.Row();
 	var size = new UI.Number( parameters.size ).onChange( update );
 
 	sizeRow.add( new UI.Text( 'Size' ).setWidth( '90px' ) );
@@ -20,7 +20,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
 	// segments
 
-	var segmentsRow = new UI.Panel();
+	var segmentsRow = new UI.Row();
 	var segments = new UI.Integer( parameters.segments ).setRange( 1, Infinity ).onChange( update );
 
 	segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ) );
@@ -30,7 +30,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
 	// bottom
 
-	var bottomRow = new UI.Panel();
+	var bottomRow = new UI.Row();
 	var bottom = new UI.Checkbox( parameters.bottom ).onChange( update );
 
 	bottomRow.add( new UI.Text( 'Bottom' ).setWidth( '90px' ) );
@@ -40,7 +40,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
 	// lid
 
-	var lidRow = new UI.Panel();
+	var lidRow = new UI.Row();
 	var lid = new UI.Checkbox( parameters.lid ).onChange( update );
 
 	lidRow.add( new UI.Text( 'Lid' ).setWidth( '90px' ) );
@@ -50,7 +50,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
 	// body
 
-	var bodyRow = new UI.Panel();
+	var bodyRow = new UI.Row();
 	var body = new UI.Checkbox( parameters.body ).onChange( update );
 
 	bodyRow.add( new UI.Text( 'Body' ).setWidth( '90px' ) );
@@ -60,7 +60,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
 	// fitted lid
 
-	var fitLidRow = new UI.Panel();
+	var fitLidRow = new UI.Row();
 	var fitLid = new UI.Checkbox( parameters.fitLid ).onChange( update );
 
 	fitLidRow.add( new UI.Text( 'Fitted Lid' ).setWidth( '90px' ) );
@@ -70,7 +70,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
 	// blinn-sized
 
-	var blinnRow = new UI.Panel();
+	var blinnRow = new UI.Row();
 	var blinn = new UI.Checkbox( parameters.blinn ).onChange( update );
 
 	blinnRow.add( new UI.Text( 'Blinn-scaled' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// radius
 
-	var radiusRow = new UI.Panel();
+	var radiusRow = new UI.Row();
 	var radius = new UI.Number( parameters.radius ).onChange( update );
 
 	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 	// tube
 
-	var tubeRow = new UI.Panel();
+	var tubeRow = new UI.Row();
 	var tube = new UI.Number( parameters.tube ).onChange( update );
 
 	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 	// radialSegments
 
-	var radialSegmentsRow = new UI.Panel();
+	var radialSegmentsRow = new UI.Row();
 	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
 	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 	// tubularSegments
 
-	var tubularSegmentsRow = new UI.Panel();
+	var tubularSegmentsRow = new UI.Row();
 	var tubularSegments = new UI.Integer( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
 	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ) );
@@ -52,7 +52,7 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 	// arc
 
-	var arcRow = new UI.Panel();
+	var arcRow = new UI.Row();
 	var arc = new UI.Number( parameters.arc ).onChange( update );
 
 	arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -6,13 +6,13 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	var signals = editor.signals;
 
-	var container = new UI.Panel();
+	var container = new UI.Row();
 
 	var parameters = object.geometry.parameters;
 
 	// radius
 
-	var radiusRow = new UI.Panel();
+	var radiusRow = new UI.Row();
 	var radius = new UI.Number( parameters.radius ).onChange( update );
 
 	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
@@ -22,7 +22,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	// tube
 
-	var tubeRow = new UI.Panel();
+	var tubeRow = new UI.Row();
 	var tube = new UI.Number( parameters.tube ).onChange( update );
 
 	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ) );
@@ -32,7 +32,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	// radialSegments
 
-	var radialSegmentsRow = new UI.Panel();
+	var radialSegmentsRow = new UI.Row();
 	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
 	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
@@ -42,7 +42,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	// tubularSegments
 
-	var tubularSegmentsRow = new UI.Panel();
+	var tubularSegmentsRow = new UI.Row();
 	var tubularSegments = new UI.Integer( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
 	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ) );
@@ -52,7 +52,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	// p
 
-	var pRow = new UI.Panel();
+	var pRow = new UI.Row();
 	var p = new UI.Number( parameters.p ).onChange( update );
 
 	pRow.add( new UI.Text( 'P' ).setWidth( '90px' ) );
@@ -62,7 +62,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	// q
 
-	var qRow = new UI.Panel();
+	var qRow = new UI.Row();
 	var q = new UI.Number( parameters.q ).onChange( update );
 
 	pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ) );
@@ -72,7 +72,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	// heightScale
 
-	var heightScaleRow = new UI.Panel();
+	var heightScaleRow = new UI.Row();
 	var heightScale = new UI.Number( parameters.heightScale ).onChange( update );
 
 	pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ) );

editor/js/Sidebar.Geometry.js

@@ -93,7 +93,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	// uuid
 
-	var geometryUUIDRow = new UI.Panel();
+	var geometryUUIDRow = new UI.Row();
 	var geometryUUID = new UI.Input().setWidth( '115px' ).setFontSize( '12px' ).setDisabled( true );
 	var geometryUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
 
@@ -111,7 +111,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	// name
 
-	var geometryNameRow = new UI.Panel();
+	var geometryNameRow = new UI.Row();
 	var geometryName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 		editor.execute( new SetGeometryValueCommand( editor.selected, 'name', geometryName.getValue() ) );
@@ -133,7 +133,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	// parameters
 
-	var parameters = new UI.Panel();
+	var parameters = new UI.Span();
 	container.add( parameters );
 
 

editor/js/Sidebar.Material.js

@@ -22,7 +22,7 @@ Sidebar.Material = function ( editor ) {
 
 	// uuid
 
-	var materialUUIDRow = new UI.Panel();
+	var materialUUIDRow = new UI.Row();
 	var materialUUID = new UI.Input().setWidth( '115px' ).setFontSize( '12px' ).setDisabled( true );
 	var materialUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
 
@@ -39,7 +39,7 @@ Sidebar.Material = function ( editor ) {
 
 	// name
 
-	var materialNameRow = new UI.Panel();
+	var materialNameRow = new UI.Row();
 	var materialName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 		editor.execute( new SetMaterialValueCommand( editor.selected, 'name', materialName.getValue() ) );
@@ -53,7 +53,7 @@ Sidebar.Material = function ( editor ) {
 
 	// class
 
-	var materialClassRow = new UI.Panel();
+	var materialClassRow = new UI.Row();
 	var materialClass = new UI.Select().setOptions( {
 
 		'LineBasicMaterial': 'LineBasicMaterial',
@@ -76,7 +76,7 @@ Sidebar.Material = function ( editor ) {
 
 	// program
 
-	var materialProgramRow = new UI.Panel();
+	var materialProgramRow = new UI.Row();
 	materialProgramRow.add( new UI.Text( 'Program' ).setWidth( '90px' ) );
 
 	var materialProgramInfo = new UI.Button( 'Info' );
@@ -110,7 +110,7 @@ Sidebar.Material = function ( editor ) {
 
 	// color
 
-	var materialColorRow = new UI.Panel();
+	var materialColorRow = new UI.Row();
 	var materialColor = new UI.Color().onChange( update );
 
 	materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
@@ -120,7 +120,7 @@ Sidebar.Material = function ( editor ) {
 
 	// roughness
 
-	var materialRoughnessRow = new UI.Panel();
+	var materialRoughnessRow = new UI.Row();
 	var materialRoughness = new UI.Number( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 	materialRoughnessRow.add( new UI.Text( 'Roughness' ).setWidth( '90px' ) );
@@ -130,7 +130,7 @@ Sidebar.Material = function ( editor ) {
 
 	// metalness
 
-	var materialMetalnessRow = new UI.Panel();
+	var materialMetalnessRow = new UI.Row();
 	var materialMetalness = new UI.Number( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 	materialMetalnessRow.add( new UI.Text( 'Metalness' ).setWidth( '90px' ) );
@@ -140,7 +140,7 @@ Sidebar.Material = function ( editor ) {
 
 	// emissive
 
-	var materialEmissiveRow = new UI.Panel();
+	var materialEmissiveRow = new UI.Row();
 	var materialEmissive = new UI.Color().setHexValue( 0x000000 ).onChange( update );
 
 	materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ) );
@@ -150,7 +150,7 @@ Sidebar.Material = function ( editor ) {
 
 	// specular
 
-	var materialSpecularRow = new UI.Panel();
+	var materialSpecularRow = new UI.Row();
 	var materialSpecular = new UI.Color().setHexValue( 0x111111 ).onChange( update );
 
 	materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ) );
@@ -160,7 +160,7 @@ Sidebar.Material = function ( editor ) {
 
 	// shininess
 
-	var materialShininessRow = new UI.Panel();
+	var materialShininessRow = new UI.Row();
 	var materialShininess = new UI.Number( 30 ).onChange( update );
 
 	materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ) );
@@ -170,7 +170,7 @@ Sidebar.Material = function ( editor ) {
 
 	// vertex colors
 
-	var materialVertexColorsRow = new UI.Panel();
+	var materialVertexColorsRow = new UI.Row();
 	var materialVertexColors = new UI.Select().setOptions( {
 
 		0: 'No',
@@ -186,7 +186,7 @@ Sidebar.Material = function ( editor ) {
 
 	// skinning
 
-	var materialSkinningRow = new UI.Panel();
+	var materialSkinningRow = new UI.Row();
 	var materialSkinning = new UI.Checkbox( false ).onChange( update );
 
 	materialSkinningRow.add( new UI.Text( 'Skinning' ).setWidth( '90px' ) );
@@ -196,7 +196,7 @@ Sidebar.Material = function ( editor ) {
 
 	// map
 
-	var materialMapRow = new UI.Panel();
+	var materialMapRow = new UI.Row();
 	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialMap = new UI.Texture().onChange( update );
 
@@ -208,7 +208,7 @@ Sidebar.Material = function ( editor ) {
 
 	// alpha map
 
-	var materialAlphaMapRow = new UI.Panel();
+	var materialAlphaMapRow = new UI.Row();
 	var materialAlphaMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialAlphaMap = new UI.Texture().onChange( update );
 
@@ -220,7 +220,7 @@ Sidebar.Material = function ( editor ) {
 
 	// bump map
 
-	var materialBumpMapRow = new UI.Panel();
+	var materialBumpMapRow = new UI.Row();
 	var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialBumpMap = new UI.Texture().onChange( update );
 	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
@@ -234,7 +234,7 @@ Sidebar.Material = function ( editor ) {
 
 	// normal map
 
-	var materialNormalMapRow = new UI.Panel();
+	var materialNormalMapRow = new UI.Row();
 	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialNormalMap = new UI.Texture().onChange( update );
 
@@ -246,7 +246,7 @@ Sidebar.Material = function ( editor ) {
 
 	// displacement map
 
-	var materialDisplacementMapRow = new UI.Panel();
+	var materialDisplacementMapRow = new UI.Row();
 	var materialDisplacementMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialDisplacementMap = new UI.Texture().onChange( update );
 	var materialDisplacementScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
@@ -260,7 +260,7 @@ Sidebar.Material = function ( editor ) {
 
 	// roughness map
 
-	var materialRoughnessMapRow = new UI.Panel();
+	var materialRoughnessMapRow = new UI.Row();
 	var materialRoughnessMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialRoughnessMap = new UI.Texture().onChange( update );
 
@@ -272,7 +272,7 @@ Sidebar.Material = function ( editor ) {
 
 	// metalness map
 
-	var materialMetalnessMapRow = new UI.Panel();
+	var materialMetalnessMapRow = new UI.Row();
 	var materialMetalnessMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialMetalnessMap = new UI.Texture().onChange( update );
 
@@ -284,7 +284,7 @@ Sidebar.Material = function ( editor ) {
 
 	// specular map
 
-	var materialSpecularMapRow = new UI.Panel();
+	var materialSpecularMapRow = new UI.Row();
 	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialSpecularMap = new UI.Texture().onChange( update );
 
@@ -296,7 +296,7 @@ Sidebar.Material = function ( editor ) {
 
 	// env map
 
-	var materialEnvMapRow = new UI.Panel();
+	var materialEnvMapRow = new UI.Row();
 	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( update );
 	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
@@ -310,7 +310,7 @@ Sidebar.Material = function ( editor ) {
 
 	// light map
 
-	var materialLightMapRow = new UI.Panel();
+	var materialLightMapRow = new UI.Row();
 	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialLightMap = new UI.Texture().onChange( update );
 
@@ -322,7 +322,7 @@ Sidebar.Material = function ( editor ) {
 
 	// ambient occlusion map
 
-	var materialAOMapRow = new UI.Panel();
+	var materialAOMapRow = new UI.Row();
 	var materialAOMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialAOMap = new UI.Texture().onChange( update );
 	var materialAOScale = new UI.Number( 1 ).setRange( 0, 1 ).setWidth( '30px' ).onChange( update );
@@ -336,7 +336,7 @@ Sidebar.Material = function ( editor ) {
 
 	// emissive map
 
-	var materialEmissiveMapRow = new UI.Panel();
+	var materialEmissiveMapRow = new UI.Row();
 	var materialEmissiveMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialEmissiveMap = new UI.Texture().onChange( update );
 
@@ -348,7 +348,7 @@ Sidebar.Material = function ( editor ) {
 
 	// side
 
-	var materialSideRow = new UI.Panel();
+	var materialSideRow = new UI.Row();
 	var materialSide = new UI.Select().setOptions( {
 
 		0: 'Front',
@@ -364,7 +364,7 @@ Sidebar.Material = function ( editor ) {
 
 	// shading
 
-	var materialShadingRow = new UI.Panel();
+	var materialShadingRow = new UI.Row();
 	var materialShading = new UI.Select().setOptions( {
 
 		0: 'No',
@@ -380,7 +380,7 @@ Sidebar.Material = function ( editor ) {
 
 	// blending
 
-	var materialBlendingRow = new UI.Panel();
+	var materialBlendingRow = new UI.Row();
 	var materialBlending = new UI.Select().setOptions( {
 
 		0: 'No',
@@ -399,7 +399,7 @@ Sidebar.Material = function ( editor ) {
 
 	// opacity
 
-	var materialOpacityRow = new UI.Panel();
+	var materialOpacityRow = new UI.Row();
 	var materialOpacity = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 	materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ) );
@@ -409,7 +409,7 @@ Sidebar.Material = function ( editor ) {
 
 	// transparent
 
-	var materialTransparentRow = new UI.Panel();
+	var materialTransparentRow = new UI.Row();
 	var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
 
 	materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ) );
@@ -419,7 +419,7 @@ Sidebar.Material = function ( editor ) {
 
 	// alpha test
 
-	var materialAlphaTestRow = new UI.Panel();
+	var materialAlphaTestRow = new UI.Row();
 	var materialAlphaTest = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 	materialAlphaTestRow.add( new UI.Text( 'Alpha Test' ).setWidth( '90px' ) );
@@ -429,7 +429,7 @@ Sidebar.Material = function ( editor ) {
 
 	// wireframe
 
-	var materialWireframeRow = new UI.Panel();
+	var materialWireframeRow = new UI.Row();
 	var materialWireframe = new UI.Checkbox( false ).onChange( update );
 	var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
 

editor/js/Sidebar.Object3D.js

@@ -63,7 +63,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// uuid
 
-	var objectUUIDRow = new UI.Panel();
+	var objectUUIDRow = new UI.Row();
 	var objectUUID = new UI.Input().setWidth( '115px' ).setFontSize( '12px' ).setDisabled( true );
 	var objectUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
 
@@ -81,7 +81,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// name
 
-	var objectNameRow = new UI.Panel();
+	var objectNameRow = new UI.Row();
 	var objectName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 		editor.execute( new SetValueCommand( editor.selected, 'name', objectName.getValue() ) );
@@ -96,7 +96,7 @@ Sidebar.Object3D = function ( editor ) {
 	/*
 	// parent
 
-	var objectParentRow = new UI.Panel();
+	var objectParentRow = new UI.Row();
 	var objectParent = new UI.Select().setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
 
 	objectParentRow.add( new UI.Text( 'Parent' ).setWidth( '90px' ) );
@@ -107,7 +107,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// position
 
-	var objectPositionRow = new UI.Panel();
+	var objectPositionRow = new UI.Row();
 	var objectPositionX = new UI.Number().setWidth( '50px' ).onChange( update );
 	var objectPositionY = new UI.Number().setWidth( '50px' ).onChange( update );
 	var objectPositionZ = new UI.Number().setWidth( '50px' ).onChange( update );
@@ -119,7 +119,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// rotation
 
-	var objectRotationRow = new UI.Panel();
+	var objectRotationRow = new UI.Row();
 	var objectRotationX = new UI.Number().setWidth( '50px' ).onChange( update );
 	var objectRotationY = new UI.Number().setWidth( '50px' ).onChange( update );
 	var objectRotationZ = new UI.Number().setWidth( '50px' ).onChange( update );
@@ -131,7 +131,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// scale
 
-	var objectScaleRow = new UI.Panel();
+	var objectScaleRow = new UI.Row();
 	var objectScaleLock = new UI.Checkbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
 	var objectScaleX = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
 	var objectScaleY = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
@@ -145,7 +145,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// fov
 
-	var objectFovRow = new UI.Panel();
+	var objectFovRow = new UI.Row();
 	var objectFov = new UI.Number().onChange( update );
 
 	objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ) );
@@ -155,7 +155,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// near
 
-	var objectNearRow = new UI.Panel();
+	var objectNearRow = new UI.Row();
 	var objectNear = new UI.Number().onChange( update );
 
 	objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ) );
@@ -165,7 +165,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// far
 
-	var objectFarRow = new UI.Panel();
+	var objectFarRow = new UI.Row();
 	var objectFar = new UI.Number().onChange( update );
 
 	objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ) );
@@ -175,7 +175,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// intensity
 
-	var objectIntensityRow = new UI.Panel();
+	var objectIntensityRow = new UI.Row();
 	var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
 	objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ) );
@@ -185,7 +185,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// color
 
-	var objectColorRow = new UI.Panel();
+	var objectColorRow = new UI.Row();
 	var objectColor = new UI.Color().onChange( update );
 
 	objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
@@ -195,7 +195,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// ground color
 
-	var objectGroundColorRow = new UI.Panel();
+	var objectGroundColorRow = new UI.Row();
 	var objectGroundColor = new UI.Color().onChange( update );
 
 	objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ) );
@@ -205,7 +205,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// distance
 
-	var objectDistanceRow = new UI.Panel();
+	var objectDistanceRow = new UI.Row();
 	var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
 	objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ) );
@@ -215,7 +215,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// angle
 
-	var objectAngleRow = new UI.Panel();
+	var objectAngleRow = new UI.Row();
 	var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
 
 	objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ) );
@@ -225,7 +225,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// exponent
 
-	var objectExponentRow = new UI.Panel();
+	var objectExponentRow = new UI.Row();
 	var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
 	objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ) );
@@ -235,7 +235,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// decay
 
-	var objectDecayRow = new UI.Panel();
+	var objectDecayRow = new UI.Row();
 	var objectDecay = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
 	objectDecayRow.add( new UI.Text( 'Decay' ).setWidth( '90px' ) );
@@ -245,7 +245,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// shadow
 
-	var objectShadowRow = new UI.Panel();
+	var objectShadowRow = new UI.Row();
 
 	objectShadowRow.add( new UI.Text( 'Shadow' ).setWidth( '90px' ) );
 
@@ -259,7 +259,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	// visible
 
-	var objectVisibleRow = new UI.Panel();
+	var objectVisibleRow = new UI.Row();
 	var objectVisible = new UI.Checkbox().onChange( update );
 
 	objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ) );
@@ -271,7 +271,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	var timeout;
 
-	var objectUserDataRow = new UI.Panel();
+	var objectUserDataRow = new UI.Row();
 	var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
 	objectUserData.onKeyUp( function () {
 

editor/js/Sidebar.Project.js

@@ -32,7 +32,7 @@ Sidebar.Project = function ( editor ) {
 
 	}
 
-	var rendererTypeRow = new UI.Panel();
+	var rendererTypeRow = new UI.Row();
 	var rendererType = new UI.Select().setOptions( options ).setWidth( '150px' ).onChange( function () {
 
 		var value = this.getValue();
@@ -56,7 +56,7 @@ Sidebar.Project = function ( editor ) {
 
 	// antialiasing
 
-	var rendererPropertiesRow = new UI.Panel();
+	var rendererPropertiesRow = new UI.Row();
 	rendererPropertiesRow.add( new UI.Text( '' ).setWidth( '90px' ) );
 
 	var rendererAntialias = new UI.THREE.Boolean( config.getKey( 'project/renderer/antialias' ), 'antialias' ).onChange( function () {
@@ -81,7 +81,7 @@ Sidebar.Project = function ( editor ) {
 
 	// VR
 
-	var vrRow = new UI.Panel();
+	var vrRow = new UI.Row();
 	var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
 
 		config.setKey( 'project/vr', this.getValue() );

editor/js/Sidebar.Scene.js

@@ -41,7 +41,7 @@ Sidebar.Scene = function ( editor ) {
 
 	};
 
-	var fogTypeRow = new UI.Panel();
+	var fogTypeRow = new UI.Row();
 	var fogType = new UI.Select().setOptions( {
 
 		'None': 'None',
@@ -65,7 +65,7 @@ Sidebar.Scene = function ( editor ) {
 
 	// fog color
 
-	var fogColorRow = new UI.Panel();
+	var fogColorRow = new UI.Row();
 	fogColorRow.setDisplay( 'none' );
 
 	var fogColor = new UI.Color().setValue( '#aaaaaa' )
@@ -82,7 +82,7 @@ Sidebar.Scene = function ( editor ) {
 
 	// fog near
 
-	var fogNearRow = new UI.Panel();
+	var fogNearRow = new UI.Row();
 	fogNearRow.setDisplay( 'none' );
 
 	var fogNear = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
@@ -92,7 +92,7 @@ Sidebar.Scene = function ( editor ) {
 
 	container.add( fogNearRow );
 
-	var fogFarRow = new UI.Panel();
+	var fogFarRow = new UI.Row();
 	fogFarRow.setDisplay( 'none' );
 
 	// fog far
@@ -106,7 +106,7 @@ Sidebar.Scene = function ( editor ) {
 
 	// fog density
 
-	var fogDensityRow = new UI.Panel();
+	var fogDensityRow = new UI.Row();
 	fogDensityRow.setDisplay( 'none' );
 
 	var fogDensity = new UI.Number( 0.00025 ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange( updateFogParameters );

editor/js/Sidebar.Script.js

@@ -20,7 +20,7 @@ Sidebar.Script = function ( editor ) {
 
 	//
 
-	var scriptsContainer = new UI.Panel();
+	var scriptsContainer = new UI.Row();
 	container.add( scriptsContainer );
 
 	var newScript = new UI.Button( 'New' );

editor/js/libs/ui.js

@@ -180,6 +180,24 @@ UI.Div = function () {
 UI.Div.prototype = Object.create( UI.Element.prototype );
 UI.Div.prototype.constructor = UI.Div;
 
+// Row
+
+UI.Row = function () {
+
+	UI.Element.call( this );
+
+	var dom = document.createElement( 'div' );
+	dom.className = 'Row';
+
+	this.dom = dom;
+
+	return this;
+
+};
+
+UI.Row.prototype = Object.create( UI.Element.prototype );
+UI.Row.prototype.constructor = UI.Row;
+
 // Panel
 
 UI.Panel = function () {