Editor: Reverted to previous code style for Menubar.

editor/css/dark.css

@@ -132,9 +132,11 @@ input.Number {
 		cursor: pointer;
 	}
 
-	#menubar .Panel {
-		color: #888;
-	}
+		#menubar .menu .title {
+			color: #888;
+			margin: 0px;
+			padding: 8px;
+		}
 
 		#menubar .menu .options {
 			display: none;

editor/css/light.css

@@ -106,9 +106,11 @@ input.Number {
 		cursor: pointer;
 	}
 
-	#menubar .Panel {
-		color: #888;
-	}
+		#menubar .menu .title {
+			color: #888;
+			margin: 0px;
+			padding: 8px;
+		}
 
 		#menubar .menu .options {
 			display: none;

editor/index.html

@@ -44,7 +44,6 @@
 
 		<script src="js/libs/signals.min.js"></script>
 		<script src="js/libs/ui.js"></script>
-		<script src="js/libs/ui.editor.js"></script>
 		<script src="js/libs/ui.three.js"></script>
 
 		<script src="js/Storage.js"></script>

editor/js/Menubar.Add.js

@@ -1,11 +1,28 @@
 Menubar.Add = function ( editor ) {
 
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
+
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'Add' );
+	container.add( title );
+
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
+
+	//
+
 	var meshCount = 0;
 	var lightCount = 0;
 
-	// event handlers
+	// Group
 
-	function onGroupOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Group' );
+	option.onClick( function () {
 
 		var mesh = new THREE.Group();
 		mesh.name = 'Group ' + ( ++ meshCount );
@@ -13,9 +30,19 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
 
-	function onPlaneOptionClick () {
+	//
+
+	options.add( new UI.HorizontalRule() );
+
+	// Plane
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Plane' );
+	option.onClick( function () {
 
 		var width = 200;
 		var height = 200;
@@ -31,9 +58,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	};
+	} );
+	options.add( option );
+
+	// Box
 
-	function onBoxOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Box' );
+	option.onClick( function () {
 
 		var width = 100;
 		var height = 100;
@@ -50,9 +83,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
-	
-	function onCircleOptionClick () {
+	} );
+	options.add( option );
+
+	// Circle
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Circle' );
+	option.onClick( function () {
 
 		var radius = 20;
 		var segments = 8;
@@ -64,9 +103,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
 
-	function onCylinderOptionClick () {
+	// Cylinder
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Cylinder' );
+	option.onClick( function () {
 
 		var radiusTop = 20;
 		var radiusBottom = 20;
@@ -82,9 +127,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
+
+	// Sphere
 
-	function onSphereOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Sphere' );
+	option.onClick( function () {
 
 		var radius = 75;
 		var widthSegments = 32;
@@ -97,23 +148,35 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
 
-	function onIcosahedronOptionClick () {
+	// Icosahedron
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Icosahedron' );
+	option.onClick( function () {
 
 		var radius = 75;
 		var detail = 2;
 
-		var geometry = new THREE.IcosahedronGeometry ( radius, detail );
+		var geometry = new THREE.IcosahedronGeometry( radius, detail );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'Icosahedron ' + ( ++ meshCount );
 
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
+
+	// Torus
 
-	function onTorusOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Torus' );
+	option.onClick( function () {
 
 		var radius = 100;
 		var tube = 40;
@@ -128,9 +191,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
 
- 	function onTorusKnotOptionClick () {
+	// TorusKnot
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'TorusKnot' );
+	option.onClick( function () {
 
 		var radius = 100;
 		var tube = 40;
@@ -147,9 +216,19 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( mesh );
 		editor.select( mesh );
 
-	}
+	} );
+	options.add( option );
+
+	//
 
-	function onSpriteOptionClick () {
+	options.add( new UI.HorizontalRule() );
+
+	// Sprite
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Sprite' );
+	option.onClick( function () {
 
 		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
 		sprite.name = 'Sprite ' + ( ++ meshCount );
@@ -157,9 +236,19 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( sprite );
 		editor.select( sprite );
 
-	}
+	} );
+	options.add( option );
+
+	//
+
+	options.add( new UI.HorizontalRule() );
 
-	function onPointLightOptionClick () {
+	// PointLight
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'PointLight' );
+	option.onClick( function () {
 
 		var color = 0xffffff;
 		var intensity = 1;
@@ -171,9 +260,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( light );
 		editor.select( light );
 
-	}
+	} );
+	options.add( option );
+
+	// SpotLight
 
-	function onSpotLightOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'SpotLight' );
+	option.onClick( function () {
 
 		var color = 0xffffff;
 		var intensity = 1;
@@ -190,9 +285,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( light );
 		editor.select( light );
 
-	}
+	} );
+	options.add( option );
 
-	function onDirectionalLightOptionClick () {
+	// DirectionalLight
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'DirectionalLight' );
+	option.onClick( function () {
 
 		var color = 0xffffff;
 		var intensity = 1;
@@ -206,9 +307,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( light );
 		editor.select( light );
 
-	}
+	} );
+	options.add( option );
+
+	// HemisphereLight
 
-	function onHemisphereLightOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'HemisphereLight' );
+	option.onClick( function () {
 
 		var skyColor = 0x00aaff;
 		var groundColor = 0xffaa00;
@@ -222,9 +329,15 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( light );
 		editor.select( light );
 
-	}
+	} );
+	options.add( option );
 
-	function onAmbientLightOptionClick() {
+	// AmbientLight
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'AmbientLight' );
+	option.onClick( function() {
 
 		var color = 0x222222;
 
@@ -234,39 +347,9 @@ Menubar.Add = function ( editor ) {
 		editor.addObject( light );
 		editor.select( light );
 
-	}
-
-	// configure menu contents
-
-	var createOption = UI.MenubarHelper.createOption;
-	var createDivider = UI.MenubarHelper.createDivider;
-
-	var menuConfig = [
-		createOption( 'Group', onGroupOptionClick ),
-		createDivider(),
-
-		createOption( 'Plane', onPlaneOptionClick ),
-		createOption( 'Box', onBoxOptionClick ),
-		createOption( 'Circle', onCircleOptionClick ),
-		createOption( 'Cylinder', onCylinderOptionClick ),
-		createOption( 'Sphere', onSphereOptionClick  ),
-		createOption( 'Icosahedron', onIcosahedronOptionClick ),
-		createOption( 'Torus', onTorusOptionClick ),
-		createOption( 'Torus Knot', onTorusKnotOptionClick ),
-		createDivider(),
-
-		createOption( 'Sprite', onSpriteOptionClick  ),
-		createDivider(),
-
-		createOption( 'Point light', onPointLightOptionClick ),
-		createOption( 'Spot light', onSpotLightOptionClick ),
-		createOption( 'Directional light', onDirectionalLightOptionClick ),
-		createOption( 'Hemisphere light', onHemisphereLightOptionClick ),
-		createOption( 'Ambient light', onAmbientLightOptionClick )
-	];
-
-	var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+	} );
+	options.add( option );
 
-	return UI.MenubarHelper.createMenuContainer( 'Add', optionsPanel );
+	return container;
 
 }

editor/js/Menubar.Edit.js

@@ -1,20 +1,23 @@
 Menubar.Edit = function ( editor ) {
 
-	// event handlers
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
 
-	// function onUndoOptionClick () {
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'Edit' );
+	container.add( title );
 
-	// 	console.log( 'UNDO not implemented yet' );
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
 
-	// }
+	// Clone
 
-	// function onRedoOptionClick () {
-
-	// 	console.log( 'REDO not implemented yet' );
-
-	// }
-
-	function onCloneOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Clone' );
+	option.onClick( function () {
 
 		var object = editor.selected;
 
@@ -25,17 +28,33 @@ Menubar.Edit = function ( editor ) {
 		editor.addObject( object );
 		editor.select( object );
 
-	}
+	} );
+	options.add( option );
+
+	// Delete
 
-	function onDeleteOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Delete' );
+	option.onClick( function () {
 
 		var parent = editor.selected.parent;
 		editor.removeObject( editor.selected );
 		editor.select( parent );
 
-	}
+	} );
+	options.add( option );
+
+	//
+
+	options.add( new UI.HorizontalRule() );
+
+	// Convert
 
-	function onConvertOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Convert' );
+	option.onClick( function () {
 
 		// convert to BufferGeometry
 		
@@ -53,9 +72,15 @@ Menubar.Edit = function ( editor ) {
 
 		}
 
-	}
+	} );
+	options.add( option );
 
-	function onFlattenOptionClick () {
+	// Flatten
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Flatten' );
+	option.onClick( function () {
 
 		var object = editor.selected;
 
@@ -66,7 +91,6 @@ Menubar.Edit = function ( editor ) {
 		var geometry = object.geometry.clone();
 		geometry.applyMatrix( object.matrix );
 
-
 		object.geometry = geometry;
 
 		object.position.set( 0, 0, 0 );
@@ -76,27 +100,9 @@ Menubar.Edit = function ( editor ) {
 		object.geometry.buffersNeedUpdate = true;
 		editor.signals.objectChanged.dispatch( object );
 
-	}
-
-	// configure menu contents
-
-	var createOption = UI.MenubarHelper.createOption;
-	var createDivider = UI.MenubarHelper.createDivider;
-
-	var menuConfig = [
-		// createOption( 'Undo', onUndoOptionClick ),
-		// createOption( 'Redo', onRedoOptionClick ),
-		// createDivider(),
-
-		createOption( 'Clone', onCloneOptionClick ),
-		createOption( 'Delete', onDeleteOptionClick ),
-		createDivider(),
-
-		createOption( 'Convert', onConvertOptionClick ),
-		createOption( 'Flatten', onFlattenOptionClick )
-	];
+	} );
+	options.add( option );
 
-	var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+	return container;
 
-	return UI.MenubarHelper.createMenuContainer( 'Edit', optionsPanel );
-}
+};

editor/js/Menubar.File.js

@@ -1,97 +1,72 @@
 Menubar.File = function ( editor ) {
 
-	// helpers
-	
-	function exportGeometry ( exporterClass ) {
-
-		var object = editor.selected;
-		var exporter = new exporterClass();
-
-		var output = exporter.parse( object.geometry );
-
-		if ( exporter instanceof THREE.BufferGeometryExporter ||
-		     exporter instanceof THREE.GeometryExporter ) {
-
-			output = JSON.stringify( output, null, '\t' );
-			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
-
-		}
-
-		var blob = new Blob( [ output ], { type: 'text/plain' } );
-		var objectURL = URL.createObjectURL( blob );
-
-		window.open( objectURL, '_blank' );
-		window.focus();
-
-	};
-
-	function exportObject ( exporterClass ) {
-
-		var object = editor.selected;
-		var exporter = new exporterClass();
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
 
-		var output = JSON.stringify( exporter.parse( object ), null, '\t' );
-		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'File' );
+	container.add( title );
 
-		var blob = new Blob( [ output ], { type: 'text/plain' } );
-		var objectURL = URL.createObjectURL( blob );
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
 
-		window.open( objectURL, '_blank' );
-		window.focus();
+	// New
 
-	}
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'New' );
+	option.onClick( function () {
 
-	function exportScene ( exporterClass ) {
-
-		var exporter = new exporterClass();
+		if ( confirm( 'Are you sure?' ) ) {
 
-		var output = exporter.parse( editor.scene );
+			editor.config.clear();
+			editor.storage.clear( function () {
 
-		if ( exporter instanceof THREE.ObjectExporter ) {
+				location.href = location.pathname;
 
-			output = JSON.stringify( output, null, '\t' );
-			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+			} );
 
 		}
 
-		var blob = new Blob( [ output ], { type: 'text/plain' } );
-		var objectURL = URL.createObjectURL( blob );
-
-		window.open( objectURL, '_blank' );
-		window.focus();
+	} );
+	options.add( option );
 
-	}
+	//
 
-	// event handlers
+	options.add( new UI.HorizontalRule() );
 
-	function onNewOptionClick () {
+	// Import
 
-		if ( confirm( 'Are you sure?' ) ) {
-
-			editor.config.clear();
-			editor.storage.clear( function () {
-
-				location.href = location.pathname;
-
-			} );
+	var fileInput = document.createElement( 'input' );
+	fileInput.type = 'file';
+	fileInput.addEventListener( 'change', function ( event ) {
 
-		}
+		editor.loader.loadFile( fileInput.files[ 0 ] );
 
-	}
+	} );
 
-	function onImportOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Import' );
+	option.onClick( function () {
 
 		fileInput.click();
 
-	}
+	} );
+	options.add( option );
 
-	function onFileInputChange ( event ) {
+	//
 
-		editor.loader.loadFile( fileInput.files[ 0 ] );
+	options.add( new UI.HorizontalRule() );
 
-	}
+	// Export Geometry
 
-	function onExportGeometryOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Export Geometry' );
+	option.onClick( function () {
 		
 		var object = editor.selected;
 
@@ -121,9 +96,15 @@ Menubar.File = function ( editor ) {
 
 		}
 
-	}
+	} );
+	options.add( option );
+
+	// Export Object
 
-	function onExportObjectOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Export Object' );
+	option.onClick( function () {
 
 		if ( editor.selected === null ) {
 
@@ -134,63 +115,125 @@ Menubar.File = function ( editor ) {
 
 		exportObject( THREE.ObjectExporter );
 
-	}
+	} );
+	options.add( option );
+
+	// Export Scene
 
-	function onExportSceneOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Export Scene' );
+	option.onClick( function () {
 
 		exportScene( THREE.ObjectExporter );
 
-	}
+	} );
+	options.add( option );
 
-	function onExportOBJOptionClick () {
+	// Export OBJ
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Export OBJ' );
+	option.onClick( function () {
 
 		exportGeometry( THREE.OBJExporter );
 
-	}
+	} );
+	options.add( option );
+
+	// Export STL
 
-	function onExportSTLOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Export STL' );
+	option.onClick( function () {
 
 		exportScene( THREE.STLExporter );
 
-	}
+	} );
+	options.add( option );
+
+	//
+
+	options.add( new UI.HorizontalRule() );
 
-	function onExportTestOptionClick() {
+	// Test
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Test' );
+	option.onClick( function () {
 
 		var text = new UI.Text( 'blah' );
 		editor.showDialog( text );
 
-	}
+	} );
+	options.add( option );
 
-	// create file input element for scene import
 
-	var fileInput = document.createElement( 'input' );
-	fileInput.type = 'file';
-	fileInput.addEventListener( 'change', onFileInputChange);
+	//
+	
+	var exportGeometry = function ( exporterClass ) {
 
-	// configure menu contents
+		var object = editor.selected;
+		var exporter = new exporterClass();
 
-	var createOption = UI.MenubarHelper.createOption;
-	var createDivider = UI.MenubarHelper.createDivider;
-	
-	var menuConfig = [
-		createOption( 'New', onNewOptionClick ),
-		createDivider(),
-
-		createOption( 'Import', onImportOptionClick ),
-		createDivider(),
-
-		createOption( 'Export Geometry', onExportGeometryOptionClick ),
-		createOption( 'Export Object', onExportObjectOptionClick ),
-		createOption( 'Export Scene', onExportSceneOptionClick ),
-		createOption( 'Export OBJ', onExportOBJOptionClick ),
-		createOption( 'Export STL', onExportSTLOptionClick ),
-		createDivider(),
-		
-		createOption( 'Export Test', onExportTestOptionClick )
-	];
+		var output = exporter.parse( object.geometry );
+
+		if ( exporter instanceof THREE.BufferGeometryExporter ||
+		     exporter instanceof THREE.GeometryExporter ) {
 
-	var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+			output = JSON.stringify( output, null, '\t' );
+			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		}
+
+		var blob = new Blob( [ output ], { type: 'text/plain' } );
+		var objectURL = URL.createObjectURL( blob );
+
+		window.open( objectURL, '_blank' );
+		window.focus();
+
+	};
+
+	var exportObject = function ( exporterClass ) {
+
+		var object = editor.selected;
+		var exporter = new exporterClass();
+
+		var output = JSON.stringify( exporter.parse( object ), null, '\t' );
+		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		var blob = new Blob( [ output ], { type: 'text/plain' } );
+		var objectURL = URL.createObjectURL( blob );
+
+		window.open( objectURL, '_blank' );
+		window.focus();
+
+	};
+
+	var exportScene = function ( exporterClass ) {
+
+		var exporter = new exporterClass();
+
+		var output = exporter.parse( editor.scene );
+
+		if ( exporter instanceof THREE.ObjectExporter ) {
+
+			output = JSON.stringify( output, null, '\t' );
+			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		}
+
+		var blob = new Blob( [ output ], { type: 'text/plain' } );
+		var objectURL = URL.createObjectURL( blob );
+
+		window.open( objectURL, '_blank' );
+		window.focus();
+
+	};
 
-	return UI.MenubarHelper.createMenuContainer( 'File', optionsPanel );
+	return container;
 
-}
+};

editor/js/Menubar.Help.js

@@ -1,30 +1,41 @@
 Menubar.Help = function ( editor ) {
 
-	// event handlers
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
 
-	function onSourcecodeOptionClick () {
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'Help' );
+	container.add( title );
 
-		window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
 
-	}
+	// Source code
 
-	function onAboutOptionClick () {
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Source code' );
+	option.onClick( function () {
 
-		window.open( 'http://threejs.org', '_blank' );
+		window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
 
-	}
+	} );
+	options.add( option );
 
-	// configure menu contents
+	// About
 
-	var createOption = UI.MenubarHelper.createOption;
-	var createDivider = UI.MenubarHelper.createDivider;
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'About' );
+	option.onClick( function () {
+
+		window.open( 'http://threejs.org', '_blank' );
 
-	var menuConfig = [
-		createOption( 'Source code', onSourcecodeOptionClick ),
-		createOption( 'About', onAboutOptionClick )
-	];
+	} );
+	options.add( option );
 
-	var optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+	return container;
 
-	return UI.MenubarHelper.createMenuContainer( 'Help', optionsPanel );
-}
+};

editor/js/Menubar.View.js

@@ -1,37 +1,43 @@
 Menubar.View = function ( editor ) {
-	
-	var menuConfig,
-		optionsPanel,
-		createOption,
-		createDivider;
 
-	function onLightThemeOptionClick () {
+	var container = new UI.Panel();
+	container.setClass( 'menu' );
 
-		editor.setTheme( 'css/light.css' );
-		editor.config.setKey( 'theme', 'css/light.css' );
+	var title = new UI.Panel();
+	title.setClass( 'title' );
+	title.setTextContent( 'View' );
+	container.add( title );
 
-	}
+	var options = new UI.Panel();
+	options.setClass( 'options' );
+	container.add( options );
 
-	function onDarkThemeOptionClick () {
+	// Light theme
 
-		editor.setTheme( 'css/dark.css' );
-		editor.config.setKey( 'theme', 'css/dark.css' );
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Light theme' );
+	option.onClick( function () {
 
-	}
-	
+		editor.setTheme( 'css/light.css' );
+		editor.config.setKey( 'theme', 'css/light.css' );
+
+	} );
+	options.add( option );
 
-	// configure menu contents
+	// Dark theme
 
-	createOption  = UI.MenubarHelper.createOption;
-	createDivider = UI.MenubarHelper.createDivider;
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Dark theme' );
+	option.onClick( function () {
 
-	menuConfig    = [
-		createOption( 'Light theme', onLightThemeOptionClick ),
-		createOption( 'Dark theme', onDarkThemeOptionClick )
-	];
+		editor.setTheme( 'css/dark.css' );
+		editor.config.setKey( 'theme', 'css/dark.css' );
 
-	optionsPanel = UI.MenubarHelper.createOptionsPanel( menuConfig );
+	} );
+	options.add( option );
 
-	return UI.MenubarHelper.createMenuContainer( 'View', optionsPanel );
+	return container;
 
-}
+};

editor/js/libs/ui.editor.js

@@ -1,50 +0,0 @@
-UI.MenubarHelper = {
-
-	createMenuContainer: function ( name, optionsPanel ) {
-
-		var container = new UI.Panel();
-		var title = new UI.Panel();
-
-		title.setTextContent( name );
-		title.setMargin( '0px' );
-		title.setPadding( '8px' );
-
-		container.setClass( 'menu' );
-		container.add( title );
-		container.add( optionsPanel );
-
-		return container;
-
-	},
-	
-	createOption: function ( name, callbackHandler ) {
-
-		var option = new UI.Panel();
-		option.setClass( 'option' );
-		option.setTextContent( name );
-		option.onClick( callbackHandler );
-
-		return option;
-
-	},
-
-	createOptionsPanel: function ( menuConfig ) {
-
-		var options = new UI.Panel();
-		options.setClass( 'options' );
-
-		menuConfig.forEach(function(option) {
-			options.add(option);
-		});
-
-		return options;
-
-	},
-
-	createDivider: function () {
-
-		return new UI.HorizontalRule();
-
-	}
-
-};