Editor: Clean up.

editor/css/main.css

@@ -33,7 +33,6 @@ textarea {
 	tab-size: 4;
 	white-space: pre;
 	word-wrap: normal;
-	vertical-align: middle;
 }
 
 	textarea.success {
@@ -252,6 +251,7 @@ button {
 	border: 0px;
 	margin: 0px; /* GNOME Web */
 	padding: 5px 8px;
+	font-size: 12px;
 	text-transform: uppercase;
 	cursor: pointer;
 	outline: none;
@@ -427,14 +427,12 @@ select {
 	}
 
 	#sidebar .Row {
-		min-height: 20px;
+		display: flex;
+		align-items: center;
+		min-height: 24px;
 		margin-bottom: 10px;
 	}
 
-	#sidebar canvas {
-		vertical-align: middle;
-	}
-
 #tabs {
 	background-color: #ddd;
 	border-top: 1px solid #ccc;

editor/js/Sidebar.Geometry.BoxGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UINumber, UIInteger } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UINumber, UIInteger } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.DodecahedronGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UICheckbox, UIButton, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UICheckbox, UIButton, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -10,7 +10,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const signals = editor.signals;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 import { UIPoints2 } from './libs/ui.three.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
@@ -9,7 +9,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.Modifiers.js

@@ -4,7 +4,7 @@ function SidebarGeometryModifiers( editor, object ) {
 
 	const signals = editor.signals;
 
-	const container = new UIRow().setPaddingLeft( '90px' );
+	const container = new UIDiv().setPaddingLeft( '90px' );
 
 	const geometry = object.geometry;
 

editor/js/Sidebar.Geometry.OctahedronGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -10,7 +10,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const signals = editor.signals;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.RingGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.ShapeGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UIButton } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UIButton } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.TeapotGeometry.js

@@ -1,10 +1,10 @@
-import { UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
 
 import { TeapotGeometry } from '../../examples/jsm/geometries/TeapotGeometry.js';
 
 function GeometryParametersPanel( signals, object ) {
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const parameters = object.geometry.parameters;
 

editor/js/Sidebar.Geometry.TetrahedronGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -10,7 +10,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const signals = editor.signals;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
@@ -8,7 +8,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.TubeGeometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 
-import { UIRow, UIText, UIInteger, UISelect, UICheckbox, UINumber } from './libs/ui.js';
+import { UIDiv, UIRow, UIText, UIInteger, UISelect, UICheckbox, UINumber } from './libs/ui.js';
 import { UIPoints3 } from './libs/ui.three.js';
 
 import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
@@ -9,7 +9,7 @@ function GeometryParametersPanel( editor, object ) {
 
 	const strings = editor.strings;
 
-	const container = new UIRow();
+	const container = new UIDiv();
 
 	const geometry = object.geometry;
 	const parameters = geometry.parameters;

editor/js/Sidebar.Geometry.js

@@ -138,14 +138,16 @@ function SidebarGeometry( editor ) {
 
 	// Size
 
-	const geometryBoundingBox = new UIText().setFontSize( '12px' ).setVerticalAlign( 'middle' );
+	const geometryBoundingBox = new UIText().setFontSize( '12px' );
 
-	container.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
-	container.add( geometryBoundingBox );
+	const geometryBoundingBoxRow = new UIRow();
+	geometryBoundingBoxRow.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
+	geometryBoundingBoxRow.add( geometryBoundingBox );
+	container.add( geometryBoundingBoxRow );
 
 	// Helpers
 
-	const helpersRow = new UIRow().setMarginTop( '16px' ).setPaddingLeft( '90px' );
+	const helpersRow = new UIRow().setPaddingLeft( '90px' );
 	container.add( helpersRow );
 
 	const vertexNormalsButton = new UIButton( strings.getKey( 'sidebar/geometry/show_vertex_normals' ) );
@@ -155,8 +157,7 @@ function SidebarGeometry( editor ) {
 
 		if ( editor.helpers[ object.id ] === undefined ) {
 
-			const helper = new VertexNormalsHelper( object );
-			editor.addHelper( object, helper );
+			editor.addHelper( object, new VertexNormalsHelper( object ) );
 
 		} else {
 
@@ -215,6 +216,8 @@ function SidebarGeometry( editor ) {
 
 			geometryBoundingBox.setInnerHTML( `${x}<br/>${y}<br/>${z}` );
 
+			helpersRow.setDisplay( geometry.hasAttribute( 'normal' ) ? '' : 'none' );
+
 		} else {
 
 			container.setDisplay( 'none' );

editor/js/libs/ui.js

@@ -142,9 +142,12 @@ class UIElement {
 
 // properties
 
-const properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
-	'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'verticalAlign', 'color',
-	'background', 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
+const properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height',
+	'display', 'verticalAlign', 'overflow', 'color', 'background', 'backgroundColor', 'opacity',
+	'border', 'borderLeft', 'borderTop', 'borderRight', 'borderBottom', 'borderColor',
+	'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom',
+	'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
+	'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
 
 properties.forEach( function ( property ) {