Editor: Support transparent backgrounds on ui elements by removing fixed color assignments

Expand viewport to window size

editor/index.html

@@ -27,7 +27,7 @@
 			
 			#menubar {
 				position: absolute;
-				background-color: #eee;
+				background: url(trans.png);
 				padding: 0px;
 				margin: 0px;
 			}
@@ -38,9 +38,13 @@
 					cursor: pointer;
 				}
 
+				#menubar .Panel {
+					color: #888;
+				}
+
 					#menubar .menu .options {
 						padding: 5px 0px;
-						background-color: #fff;
+						background: url(trans.png);
 						width: 140px;
 					}
 
@@ -64,29 +68,31 @@
 			#sidebar {
 				position: absolute;
 				width: 300px;
-				background-color: #eee;
+				background: url(trans.png);
 				overflow: auto;
 			}
 
 				#sidebar .Panel {
 					margin-bottom: 10px;
+					color: #888;
 				}
 
 				#sidebar #outliner .type {
 					padding: 2px 4px;
 					font-size: 10px;
-					background-color: #eee;
+					background: #eee;
 					color: #aaa;
 				}
 
 			#toolbar {
 				position: absolute;
-				background-color: #999;
+				background: url(trans.png);
 				color: #333;
 			}
 			
 				#toolbar .Panel {
 					padding: 4px;
+					color: #888;
 				}
 
 				#toolbar button {
@@ -167,10 +173,10 @@
 			var editor = new Editor();
 
 			var viewport = new Viewport( editor );
-			viewport.setTop( '32px' );
-			viewport.setLeft( '0px' );
-			viewport.setRight( '300px' );
-			viewport.setBottom( '32px' );
+			viewport.setTop( '0' );
+			viewport.setLeft( '0' );
+			viewport.setRight( '0' );
+			viewport.setBottom( '0' );
 			document.body.appendChild( viewport.dom );
 
 			var toolbar = new Toolbar( editor );

editor/js/Menubar.Add.js

@@ -7,7 +7,7 @@ Menubar.Add = function ( editor ) {
 	container.onClick( function () { options.setDisplay( 'block' ) } );
 
 	var title = new UI.Panel();
-	title.setTextContent( 'Add' ).setColor( '#666' );
+	title.setTextContent( 'Add' );
 	title.setMargin( '0px' );
 	title.setPadding( '8px' );
 	container.add( title );

editor/js/Menubar.Edit.js

@@ -7,7 +7,7 @@ Menubar.Edit = function ( editor ) {
 	container.onClick( function () { options.setDisplay( 'block' ) } );
 
 	var title = new UI.Panel();
-	title.setTextContent( 'Edit' ).setColor( '#666' );
+	title.setTextContent( 'Edit' );
 	title.setMargin( '0px' );
 	title.setPadding( '8px' );
 	container.add( title );

editor/js/Menubar.File.js

@@ -7,7 +7,7 @@ Menubar.File = function ( editor ) {
 	container.onClick( function () { options.setDisplay( 'block' ) } );
 
 	var title = new UI.Panel();
-	title.setTextContent( 'File' ).setColor( '#666' );
+	title.setTextContent( 'File' );
 	title.setMargin( '0px' );
 	title.setPadding( '8px' );
 	container.add( title );

editor/js/Menubar.Help.js

@@ -7,7 +7,7 @@ Menubar.Help = function ( editor ) {
 	container.onClick( function () { options.setDisplay( 'block' ) } );
 
 	var title = new UI.Panel();
-	title.setTextContent( 'Help' ).setColor( '#666' );
+	title.setTextContent( 'Help' );
 	title.setMargin( '0px' );
 	title.setPadding( '8px' );
 	container.add( title );

editor/js/Sidebar.Animation.js

@@ -10,12 +10,12 @@ Sidebar.Animation = function ( editor ) {
 	container.setPadding( '10px' );
 	container.setDisplay( 'none' );
 
-	container.add( new UI.Text( 'Animation' ).setColor( '#666' ) );
+	container.add( new UI.Text( 'Animation' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	var AnimationsRow = new UI.Panel();
 	var Animations = new UI.Select().setOptions( options ).setWidth( '130px' ).setColor( '#444' ).setFontSize( '12px' );
-	AnimationsRow.add( new UI.Text( 'animations' ).setWidth( '90px' ).setColor( '#666' ) );
+	AnimationsRow.add( new UI.Text( 'animations' ).setWidth( '90px' ) );
 	AnimationsRow.add( Animations );
 	container.add( AnimationsRow );
 	container.add( new UI.Break() );

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.CircleGeometry = function ( signals, object ) {
 	var radiusRow = new UI.Panel();
 	var radius = new UI.Number( geometry.radius ).onChange( update );
 
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.CircleGeometry = function ( signals, object ) {
 	var segmentsRow = new UI.Panel();
 	var segments = new UI.Integer( geometry.segments ).onChange( update );
 
-	segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ) );
 	segmentsRow.add( segments );
 
 	container.add( segmentsRow );

editor/js/Sidebar.Geometry.CubeGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var widthRow = new UI.Panel();
 	var width = new UI.Number( geometry.width ).onChange( update );
 
-	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ) );
 	widthRow.add( width );
 
 	container.add( widthRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var heightRow = new UI.Panel();
 	var height = new UI.Number( geometry.height ).onChange( update );
 
-	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
 	heightRow.add( height );
 
 	container.add( heightRow );
@@ -31,7 +31,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var depthRow = new UI.Panel();
 	var depth = new UI.Number( geometry.depth ).onChange( update );
 
-	depthRow.add( new UI.Text( 'Depth' ).setWidth( '90px' ).setColor( '#666' ) );
+	depthRow.add( new UI.Text( 'Depth' ).setWidth( '90px' ) );
 	depthRow.add( depth );
 
 	container.add( depthRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var widthSegmentsRow = new UI.Panel();
 	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ) );
 	widthSegmentsRow.add( widthSegments );
 
 	container.add( widthSegmentsRow );
@@ -51,7 +51,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var heightSegmentsRow = new UI.Panel();
 	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );
@@ -61,7 +61,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var depthSegmentsRow = new UI.Panel();
 	var depthSegments = new UI.Integer( geometry.depthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	depthSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	depthSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
 	depthSegmentsRow.add( depthSegments );
 
 	container.add( depthSegmentsRow );

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 	var radiusTopRow = new UI.Panel();
 	var radiusTop = new UI.Number( geometry.radiusTop ).onChange( update );
 
-	radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ) );
 	radiusTopRow.add( radiusTop );
 
 	container.add( radiusTopRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 	var radiusBottomRow = new UI.Panel();
 	var radiusBottom = new UI.Number( geometry.radiusBottom ).onChange( update );
 
-	radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ) );
 	radiusBottomRow.add( radiusBottom );
 
 	container.add( radiusBottomRow );
@@ -31,7 +31,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 	var heightRow = new UI.Panel();
 	var height = new UI.Number( geometry.height ).onChange( update );
 
-	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
 	heightRow.add( height );
 
 	container.add( heightRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 	var radiusSegmentsRow = new UI.Panel();
 	var radiusSegments = new UI.Integer( geometry.radiusSegments ).setRange( 1, Infinity ).onChange( update );
 
-	radiusSegmentsRow.add( new UI.Text( 'Radius segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusSegmentsRow.add( new UI.Text( 'Radius segments' ).setWidth( '90px' ) );
 	radiusSegmentsRow.add( radiusSegments );
 
 	container.add( radiusSegmentsRow );
@@ -51,7 +51,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 	var heightSegmentsRow = new UI.Panel();
 	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );
@@ -61,7 +61,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 	var openEndedRow = new UI.Panel();
 	var openEnded = new UI.Checkbox( geometry.openEnded ).onChange( update );
 
-	openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ).setColor( '#666' ) );
+	openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ) );
 	openEndedRow.add( openEnded );
 
 	container.add( openEndedRow );

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.IcosahedronGeometry = function ( signals, object ) {
 	var radiusRow = new UI.Panel();
 	var radius = new UI.Number( geometry.radius ).onChange( update );
 
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.IcosahedronGeometry = function ( signals, object ) {
 	var detailRow = new UI.Panel();
 	var detail = new UI.Integer( geometry.detail ).setRange( 0, Infinity ).onChange( update );
 
-	detailRow.add( new UI.Text( 'Detail' ).setWidth( '90px' ).setColor( '#666' ) );
+	detailRow.add( new UI.Text( 'Detail' ).setWidth( '90px' ) );
 	detailRow.add( detail );
 
 	container.add( detailRow );

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 	var widthRow = new UI.Panel();
 	var width = new UI.Number( geometry.width ).onChange( update );
 
-	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ) );
 	widthRow.add( width );
 
 	container.add( widthRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 	var heightRow = new UI.Panel();
 	var height = new UI.Number( geometry.height ).onChange( update );
 
-	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
 	heightRow.add( height );
 
 	container.add( heightRow );
@@ -31,7 +31,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 	var widthSegmentsRow = new UI.Panel();
 	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ) );
 	widthSegmentsRow.add( widthSegments );
 
 	container.add( widthSegmentsRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 	var heightSegmentsRow = new UI.Panel();
 	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var radiusRow = new UI.Panel();
 	var radius = new UI.Number( geometry.radius ).onChange( update );
 
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var widthSegmentsRow = new UI.Panel();
 	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ) );
 	widthSegmentsRow.add( widthSegments );
 
 	container.add( widthSegmentsRow );
@@ -31,7 +31,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var heightSegmentsRow = new UI.Panel();
 	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var phiStartRow = new UI.Panel();
 	var phiStart = new UI.Number( geometry.phiStart ).onChange( update );
 
-	phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ).setColor( '#666' ) );
+	phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ) );
 	phiStartRow.add( phiStart );
 
 	container.add( phiStartRow );
@@ -51,7 +51,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var phiLengthRow = new UI.Panel();
 	var phiLength = new UI.Number( geometry.phiLength ).onChange( update );
 
-	phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ).setColor( '#666' ) );
+	phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ) );
 	phiLengthRow.add( phiLength );
 
 	container.add( phiLengthRow );
@@ -61,7 +61,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var thetaStartRow = new UI.Panel();
 	var thetaStart = new UI.Number( geometry.thetaStart ).onChange( update );
 
-	thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ).setColor( '#666' ) );
+	thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ) );
 	thetaStartRow.add( thetaStart );
 
 	container.add( thetaStartRow );
@@ -71,7 +71,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 	var thetaLengthRow = new UI.Panel();
 	var thetaLength = new UI.Number( geometry.thetaLength ).onChange( update );
 
-	thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ).setColor( '#666' ) );
+	thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ) );
 	thetaLengthRow.add( thetaLength );
 
 	container.add( thetaLengthRow );

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var radiusRow = new UI.Panel();
 	var radius = new UI.Number( geometry.radius ).onChange( update );
 
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var tubeRow = new UI.Panel();
 	var tube = new UI.Number( geometry.tube ).onChange( update );
 
-	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ) );
 	tubeRow.add( tube );
 
 	container.add( tubeRow );
@@ -31,7 +31,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var radialSegmentsRow = new UI.Panel();
 	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
-	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
 	radialSegmentsRow.add( radialSegments );
 
 	container.add( radialSegmentsRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var tubularSegmentsRow = new UI.Panel();
 	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
-	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ) );
 	tubularSegmentsRow.add( tubularSegments );
 
 	container.add( tubularSegmentsRow );
@@ -51,7 +51,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var arcRow = new UI.Panel();
 	var arc = new UI.Number( geometry.arc ).onChange( update );
 
-	arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ).setColor( '#666' ) );
+	arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ) );
 	arcRow.add( arc );
 
 	container.add( arcRow );

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -11,7 +11,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var radiusRow = new UI.Panel();
 	var radius = new UI.Number( geometry.radius ).onChange( update );
 
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
 	radiusRow.add( radius );
 
 	container.add( radiusRow );
@@ -21,7 +21,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var tubeRow = new UI.Panel();
 	var tube = new UI.Number( geometry.tube ).onChange( update );
 
-	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ) );
 	tubeRow.add( tube );
 
 	container.add( tubeRow );
@@ -31,7 +31,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var radialSegmentsRow = new UI.Panel();
 	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
-	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
 	radialSegmentsRow.add( radialSegments );
 
 	container.add( radialSegmentsRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var tubularSegmentsRow = new UI.Panel();
 	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
-	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ) );
 	tubularSegmentsRow.add( tubularSegments );
 
 	container.add( tubularSegmentsRow );
@@ -51,7 +51,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var pRow = new UI.Panel();
 	var p = new UI.Number( geometry.p ).onChange( update );
 
-	pRow.add( new UI.Text( 'P' ).setWidth( '90px' ).setColor( '#666' ) );
+	pRow.add( new UI.Text( 'P' ).setWidth( '90px' ) );
 	pRow.add( p );
 
 	container.add( pRow );
@@ -61,7 +61,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var qRow = new UI.Panel();
 	var q = new UI.Number( geometry.q ).onChange( update );
 
-	pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ).setColor( '#666' ) );
+	pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ) );
 	pRow.add( q );
 
 	container.add( qRow );
@@ -71,7 +71,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 	var heightScaleRow = new UI.Panel();
 	var heightScale = new UI.Number( geometry.heightScale ).onChange( update );
 
-	pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ).setColor( '#666' ) );
+	pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ) );
 	pRow.add( heightScale );
 
 	container.add( heightScaleRow );

editor/js/Sidebar.Geometry.js

@@ -7,7 +7,7 @@ Sidebar.Geometry = function ( editor ) {
 	container.setPadding( '10px' );
 	container.setDisplay( 'none' );
 
-	container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'GEOMETRY' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// uuid
@@ -22,7 +22,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	} );
 
-	geometryUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
 	geometryUUIDRow.add( geometryUUID );
 	geometryUUIDRow.add( geometryUUIDRenew );
 
@@ -37,7 +37,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	} );
 
-	geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
 	geometryNameRow.add( geometryName );
 
 	container.add( geometryNameRow );
@@ -47,7 +47,7 @@ Sidebar.Geometry = function ( editor ) {
 	var geometryTypeRow = new UI.Panel();
 	var geometryType = new UI.Text().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
 
-	geometryTypeRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryTypeRow.add( new UI.Text( 'Class' ).setWidth( '90px' ) );
 	geometryTypeRow.add( geometryType );
 
 	container.add( geometryTypeRow );
@@ -57,7 +57,7 @@ Sidebar.Geometry = function ( editor ) {
 	var geometryVerticesRow = new UI.Panel();
 	var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
 
-	geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
 	geometryVerticesRow.add( geometryVertices );
 
 	container.add( geometryVerticesRow );
@@ -67,7 +67,7 @@ Sidebar.Geometry = function ( editor ) {
 	var geometryFacesRow = new UI.Panel();
 	var geometryFaces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
 
-	geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ) );
 	geometryFacesRow.add( geometryFaces );
 
 	container.add( geometryFacesRow );

editor/js/Sidebar.Material.js

@@ -24,7 +24,7 @@ Sidebar.Material = function ( editor ) {
 	container.setPadding( '10px' );
 	container.setDisplay( 'none' );
 
-	container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'MATERIAL' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// uuid
@@ -38,7 +38,7 @@ Sidebar.Material = function ( editor ) {
 
 	} );
 
-	materialUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
 	materialUUIDRow.add( materialUUID );
 	materialUUIDRow.add( materialUUIDRenew );
 
@@ -53,7 +53,7 @@ Sidebar.Material = function ( editor ) {
 
 	} );
 
-	materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
 	materialNameRow.add( materialName );
 
 	container.add( materialNameRow );
@@ -74,7 +74,7 @@ Sidebar.Material = function ( editor ) {
 
 	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	materialClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ) );
 	materialClassRow.add( materialClass );
 
 	container.add( materialClassRow );
@@ -84,7 +84,7 @@ Sidebar.Material = function ( editor ) {
 	var materialColorRow = new UI.Panel();
 	var materialColor = new UI.Color().onChange( update );
 
-	materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
 	materialColorRow.add( materialColor );
 
 	container.add( materialColorRow );
@@ -94,7 +94,7 @@ Sidebar.Material = function ( editor ) {
 	var materialAmbientRow = new UI.Panel();
 	var materialAmbient = new UI.Color().onChange( update );
 
-	materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ) );
 	materialAmbientRow.add( materialAmbient );
 
 	container.add( materialAmbientRow );
@@ -104,7 +104,7 @@ Sidebar.Material = function ( editor ) {
 	var materialEmissiveRow = new UI.Panel();
 	var materialEmissive = new UI.Color().onChange( update );
 
-	materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ) );
 	materialEmissiveRow.add( materialEmissive );
 
 	container.add( materialEmissiveRow );
@@ -114,7 +114,7 @@ Sidebar.Material = function ( editor ) {
 	var materialSpecularRow = new UI.Panel();
 	var materialSpecular = new UI.Color().onChange( update );
 
-	materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ) );
 	materialSpecularRow.add( materialSpecular );
 
 	container.add( materialSpecularRow );
@@ -124,7 +124,7 @@ Sidebar.Material = function ( editor ) {
 	var materialShininessRow = new UI.Panel();
 	var materialShininess = new UI.Number( 30 ).onChange( update );
 
-	materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ) );
 	materialShininessRow.add( materialShininess );
 
 	container.add( materialShininessRow );
@@ -140,7 +140,7 @@ Sidebar.Material = function ( editor ) {
 
 	} ).onChange( update );
 
-	materialVertexColorsRow.add( new UI.Text( 'Vertex Colors' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialVertexColorsRow.add( new UI.Text( 'Vertex Colors' ).setWidth( '90px' ) );
 	materialVertexColorsRow.add( materialVertexColors );
 
 	container.add( materialVertexColorsRow );
@@ -152,7 +152,7 @@ Sidebar.Material = function ( editor ) {
 	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
-	materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ) );
 	materialMapRow.add( materialMapEnabled );
 	materialMapRow.add( materialMap );
 
@@ -165,7 +165,7 @@ Sidebar.Material = function ( editor ) {
 	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialLightMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
-	materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ) );
 	materialLightMapRow.add( materialLightMapEnabled );
 	materialLightMapRow.add( materialLightMap );
 
@@ -179,7 +179,7 @@ Sidebar.Material = function ( editor ) {
 	var materialBumpMap = new UI.Texture().setColor( '#444' ).onChange( update );
 	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
-	materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ) );
 	materialBumpMapRow.add( materialBumpMapEnabled );
 	materialBumpMapRow.add( materialBumpMap );
 	materialBumpMapRow.add( materialBumpScale );
@@ -193,7 +193,7 @@ Sidebar.Material = function ( editor ) {
 	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialNormalMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
-	materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ) );
 	materialNormalMapRow.add( materialNormalMapEnabled );
 	materialNormalMapRow.add( materialNormalMap );
 
@@ -206,7 +206,7 @@ Sidebar.Material = function ( editor ) {
 	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
 	var materialSpecularMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
-	materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ) );
 	materialSpecularMapRow.add( materialSpecularMapEnabled );
 	materialSpecularMapRow.add( materialSpecularMap );
 
@@ -220,7 +220,7 @@ Sidebar.Material = function ( editor ) {
 	var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).onChange( update );
 	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
-	materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ) );
 	materialEnvMapRow.add( materialEnvMapEnabled );
 	materialEnvMapRow.add( materialEnvMap );
 	materialEnvMapRow.add( materialReflectivity );
@@ -242,7 +242,7 @@ Sidebar.Material = function ( editor ) {
 
 	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	materialBlendingRow.add( new UI.Text( 'Blending' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialBlendingRow.add( new UI.Text( 'Blending' ).setWidth( '90px' ) );
 	materialBlendingRow.add( materialBlending );
 
 	container.add( materialBlendingRow );
@@ -259,7 +259,7 @@ Sidebar.Material = function ( editor ) {
 
 	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	materialSideRow.add( new UI.Text( 'Side' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialSideRow.add( new UI.Text( 'Side' ).setWidth( '90px' ) );
 	materialSideRow.add( materialSide );
 
 	container.add( materialSideRow );
@@ -270,7 +270,7 @@ Sidebar.Material = function ( editor ) {
 	var materialOpacityRow = new UI.Panel();
 	var materialOpacity = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
-	materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ) );
 	materialOpacityRow.add( materialOpacity );
 
 	container.add( materialOpacityRow );
@@ -281,7 +281,7 @@ Sidebar.Material = function ( editor ) {
 	var materialTransparentRow = new UI.Panel();
 	var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
 
-	materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ) );
 	materialTransparentRow.add( materialTransparent );
 
 	container.add( materialTransparentRow );
@@ -293,7 +293,7 @@ Sidebar.Material = function ( editor ) {
 	var materialWireframe = new UI.Checkbox( false ).onChange( update );
 	var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
 
-	materialWireframeRow.add( new UI.Text( 'Wireframe' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialWireframeRow.add( new UI.Text( 'Wireframe' ).setWidth( '90px' ) );
 	materialWireframeRow.add( materialWireframe );
 	materialWireframeRow.add( materialWireframeLinewidth );
 

editor/js/Sidebar.Object3D.js

@@ -7,7 +7,7 @@ Sidebar.Object3D = function ( editor ) {
 	container.setPadding( '10px' );
 	container.setDisplay( 'none' );
 
-	var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
+	var objectType = new UI.Text().setTextTransform( 'uppercase' );
 	container.add( objectType );
 	container.add( new UI.Break(), new UI.Break() );
 
@@ -23,7 +23,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	} );
 
-	objectUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
 	objectUUIDRow.add( objectUUID );
 	objectUUIDRow.add( objectUUIDRenew );
 
@@ -38,7 +38,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	} );
 
-	objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
 	objectNameRow.add( objectName );
 
 	container.add( objectNameRow );
@@ -48,7 +48,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectParentRow = new UI.Panel();
 	var objectParent = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	objectParentRow.add( new UI.Text( 'Parent' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectParentRow.add( new UI.Text( 'Parent' ).setWidth( '90px' ) );
 	objectParentRow.add( objectParent );
 
 	container.add( objectParentRow );
@@ -60,7 +60,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectPositionY = new UI.Number().setWidth( '50px' ).onChange( update );
 	var objectPositionZ = new UI.Number().setWidth( '50px' ).onChange( update );
 
-	objectPositionRow.add( new UI.Text( 'Position' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectPositionRow.add( new UI.Text( 'Position' ).setWidth( '90px' ) );
 	objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
 
 	container.add( objectPositionRow );
@@ -72,7 +72,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectRotationY = new UI.Number().setWidth( '50px' ).onChange( update );
 	var objectRotationZ = new UI.Number().setWidth( '50px' ).onChange( update );
 
-	objectRotationRow.add( new UI.Text( 'Rotation' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectRotationRow.add( new UI.Text( 'Rotation' ).setWidth( '90px' ) );
 	objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
 
 	container.add( objectRotationRow );
@@ -85,7 +85,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectScaleY = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleY );
 	var objectScaleZ = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleZ );
 
-	objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ) );
 	objectScaleRow.add( objectScaleLock );
 	objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
 
@@ -96,7 +96,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectFovRow = new UI.Panel();
 	var objectFov = new UI.Number().onChange( update );
 
-	objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ) );
 	objectFovRow.add( objectFov );
 
 	container.add( objectFovRow );
@@ -106,7 +106,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectNearRow = new UI.Panel();
 	var objectNear = new UI.Number().onChange( update );
 
-	objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ) );
 	objectNearRow.add( objectNear );
 
 	container.add( objectNearRow );
@@ -116,7 +116,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectFarRow = new UI.Panel();
 	var objectFar = new UI.Number().onChange( update );
 
-	objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ) );
 	objectFarRow.add( objectFar );
 
 	container.add( objectFarRow );
@@ -126,7 +126,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectIntensityRow = new UI.Panel();
 	var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
-	objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ) );
 	objectIntensityRow.add( objectIntensity );
 
 	container.add( objectIntensityRow );
@@ -136,7 +136,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectColorRow = new UI.Panel();
 	var objectColor = new UI.Color().onChange( update );
 
-	objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
 	objectColorRow.add( objectColor );
 
 	container.add( objectColorRow );
@@ -146,7 +146,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectGroundColorRow = new UI.Panel();
 	var objectGroundColor = new UI.Color().onChange( update );
 
-	objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ) );
 	objectGroundColorRow.add( objectGroundColor );
 
 	container.add( objectGroundColorRow );
@@ -156,7 +156,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectDistanceRow = new UI.Panel();
 	var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
-	objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ) );
 	objectDistanceRow.add( objectDistance );
 
 	container.add( objectDistanceRow );
@@ -166,7 +166,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectAngleRow = new UI.Panel();
 	var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
 
-	objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ) );
 	objectAngleRow.add( objectAngle );
 
 	container.add( objectAngleRow );
@@ -176,7 +176,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectExponentRow = new UI.Panel();
 	var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
-	objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ) );
 	objectExponentRow.add( objectExponent );
 
 	container.add( objectExponentRow );
@@ -186,7 +186,7 @@ Sidebar.Object3D = function ( editor ) {
 	var objectVisibleRow = new UI.Panel();
 	var objectVisible = new UI.Checkbox().onChange( update );
 
-	objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ) );
 	objectVisibleRow.add( objectVisible );
 
 	container.add( objectVisibleRow );
@@ -212,7 +212,7 @@ Sidebar.Object3D = function ( editor ) {
 
 	} );
 
-	objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ) );
 	objectUserDataRow.add( objectUserData );
 
 	container.add( objectUserDataRow );

editor/js/Sidebar.Renderer.js

@@ -16,7 +16,7 @@ Sidebar.Renderer = function ( editor ) {
 	container.setPadding( '10px' );
 	container.setBorderTop( '1px solid #ccc' );
 
-	container.add( new UI.Text( 'RENDERER' ).setColor( '#666' ) );
+	container.add( new UI.Text( 'RENDERER' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// class
@@ -34,7 +34,7 @@ Sidebar.Renderer = function ( editor ) {
 	var rendererClassRow = new UI.Panel();
 	var rendererClass = new UI.Select().setOptions( options ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateRenderer );
 
-	rendererClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
+	rendererClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ) );
 	rendererClassRow.add( rendererClass );
 
 	container.add( rendererClassRow );
@@ -44,7 +44,7 @@ Sidebar.Renderer = function ( editor ) {
 	var clearColorRow = new UI.Panel();
 	var clearColor = new UI.Color().setValue( '#aaaaaa' ).onChange( updateClearColor );
 
-	clearColorRow.add( new UI.Text( 'Clear color' ).setWidth( '90px' ).setColor( '#666' ) );
+	clearColorRow.add( new UI.Text( 'Clear color' ).setWidth( '90px' ) );
 	clearColorRow.add( clearColor );
 
 	container.add( clearColorRow );

editor/js/Sidebar.Scene.js

@@ -6,7 +6,8 @@ Sidebar.Scene = function ( editor ) {
 	container.setPadding( '10px' );
 	container.setBorderTop( '1px solid #ccc' );
 
-	container.add( new UI.Text( 'SCENE' ).setColor( '#666' ) );
+
+	container.add( new UI.Text( 'SCENE' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	var outliner = new UI.FancySelect().setId( 'outliner' ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' );
@@ -47,7 +48,7 @@ Sidebar.Scene = function ( editor ) {
 
 	} );
 
-	fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ).setColor( '#666' ) );
+	fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ) );
 	fogTypeRow.add( fogType );
 
 	container.add( fogTypeRow );
@@ -64,7 +65,7 @@ Sidebar.Scene = function ( editor ) {
 
 	} );
 
-	fogColorRow.add( new UI.Text( 'Fog color' ).setWidth( '90px' ).setColor( '#666' ) );
+	fogColorRow.add( new UI.Text( 'Fog color' ).setWidth( '90px' ) );
 	fogColorRow.add( fogColor );
 
 	container.add( fogColorRow );
@@ -76,7 +77,7 @@ Sidebar.Scene = function ( editor ) {
 
 	var fogNear = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
 
-	fogNearRow.add( new UI.Text( 'Fog near' ).setWidth( '90px' ).setColor( '#666' ) );
+	fogNearRow.add( new UI.Text( 'Fog near' ).setWidth( '90px' ) );
 	fogNearRow.add( fogNear );
 
 	container.add( fogNearRow );
@@ -88,7 +89,7 @@ Sidebar.Scene = function ( editor ) {
 
 	var fogFar = new UI.Number( 5000 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
 
-	fogFarRow.add( new UI.Text( 'Fog far' ).setWidth( '90px' ).setColor( '#666' ) );
+	fogFarRow.add( new UI.Text( 'Fog far' ).setWidth( '90px' ) );
 	fogFarRow.add( fogFar );
 
 	container.add( fogFarRow );
@@ -100,7 +101,7 @@ Sidebar.Scene = function ( editor ) {
 
 	var fogDensity = new UI.Number( 0.00025 ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange( updateFogParameters );
 
-	fogDensityRow.add( new UI.Text( 'Fog density' ).setWidth( '90px' ).setColor( '#666' ) );
+	fogDensityRow.add( new UI.Text( 'Fog density' ).setWidth( '90px' ) );
 	fogDensityRow.add( fogDensity );
 
 	container.add( fogDensityRow );

editor/js/libs/ui.js

@@ -12,6 +12,36 @@ UI.Element.prototype = {
 
 	},
 
+	trim: function ( value ) {
+
+		if ( value.trim ) 
+			return value.trim();
+		else 
+			return value.replace(/^\s+|\s+$/g,'');  ;
+
+	},
+
+	addClass: function ( value ) {
+
+		debugger;
+
+		var classes = this.dom.className.split(/\S+/g);
+
+		for ( var i = 0; i < classes.length; i++ ) {
+
+			// Exit early and prevent reassignment if already exists
+			if ( classes[i] === value ) return;
+
+		}
+
+		classes.push( value );
+
+		this.dom.className = classes.join(' ');
+
+		return this;
+		
+	},
+
 	setClass: function ( name ) {
 
 		this.dom.className = name;