Hide code by default (except when new shader) (#69)

* Hide code by default.

* Clean up

* Removed css transition prefixes.

* Improved buttons styling

Author: mrdoob

static/css/codemirror.css

@@ -11,13 +11,9 @@
   font-size: 14px;
   font-weight: bold;
   visibility: visible;
-  
+
   /* transition between transparent and semi-transparent black on hover */
   transition: background-color 500ms;
-  -webkit-transition: background-color 500ms;
-  -o-transition: background-color 500ms;
-  -moz-transition: background-color 500ms;
-  -ms-transition: background-color 500ms;
 }
 
 .CodeMirror:hover {
@@ -118,4 +114,4 @@ span.CodeMirror-selected {
 	background-image: url('resizer.png');
 	background-repeat: no-repeat;
 	cursor: se-resize;
-}
+}

static/index.html

@@ -19,27 +19,28 @@
 
 				padding: 8px 12px 8px 12px;
 
-				border: none;
+				border: solid 1px #222;
 				border-radius: 5px;
 				margin-right: 5px;
 
 				color: #ffffff;
 				background-color: #000000;
 				opacity: 0.5;
 
-				font-family: Monospace;
-				font-size: 12px;
-				font-weight: bold;
+				font-family: monospace;
+				font-size: 11px;
 
 				cursor: pointer;
 				text-decoration: none;
 
+				text-transform: uppercase;
+
 			}
 
 			button:hover, select:hover, a:hover {
 
 				opacity: 1;
-				box-shadow: 0 0 4px #FFF;
+				border: solid 1px #FFF;
 
 			}
 
@@ -137,8 +138,8 @@
 			// Greetings to Iq/RGBA! ;)
 
 			var quality = 2, quality_levels = [ 0.5, 1, 2, 4, 8 ];
-			var toolbar, compileButton, fullscreenButton, compileTimer, errorLines = [];
-			var code, canvas, gl, buffer, currentProgram, vertexPosition, screenVertexPosition, panButton, timeButton,
+			var toolbar, showButton, timeButton, compileButton, panButton, fullscreenButton, compileTimer, errorLines = [];
+			var code, canvas, gl, buffer, currentProgram, vertexPosition, screenVertexPosition,
 			parameters = { startTime: Date.now(), time: 0, mouseX: 0.5, mouseY: 0.5, screenWidth: 0, screenHeight: 0 },
 			surface = { centerX: 0, centerY: 0, width: 1, height: 1, isPanning: false, isZooming: false, lastX: 0, lastY: 0 },
 			frontTarget, backTarget, screenProgram, getWebGL, resizer = {}, compileOnChangeCode = true;
@@ -194,31 +195,14 @@
 				button.href = '/';
 				rightside.appendChild( button );
 
-				var button = document.createElement( 'button' );
-				button.textContent = 'hide code';
-				button.addEventListener( 'click', function ( event ) {
-
-					if ( isCodeVisible() ) {
-
-						button.textContent = 'show code';
-						code.getWrapperElement().style.display = 'none';
-						compileButton.style.visibility = 'hidden';
-						set_save_button('hidden');
-						set_parent_button('hidden');
-						stopHideUI();
-
-					} else {
-
-						button.textContent = 'hide code';
-						code.getWrapperElement().style.display = '';
-						compileButton.style.visibility = 'visible';
-						set_save_button('visible');
-						set_parent_button('visible');
+				showButton = document.createElement( 'button' );
+				showButton.textContent = 'show code';
+				showButton.addEventListener( 'click', function () {
 
-					}
+					isCodeVisible() ? hideCode() : showCode();
 
 				}, false );
-				toolbar.appendChild( button );
+				toolbar.appendChild( showButton );
 
 				timeButton = document.createElement( 'button' );
 				timeButton.textContent = '0:00.00';
@@ -304,7 +288,6 @@
 						}
 					}
 				});
-				code.getWrapperElement().style.display = '';
 
 				resizer.offsetMouseX = 0;
 				resizer.offsetMouseY = 0;
@@ -440,10 +423,37 @@
 
 				compileScreenProgram();
 
+				// show code when is new effect
+
+				location.hash === '' ? showCode() : hideCode();
+
+			}
+
+			function showCode() {
+
+				showButton.textContent = 'hide code';
+				code.getWrapperElement().style.visibility = 'visible';
+				compileButton.style.visibility = 'visible';
+				set_save_button('visible');
+				set_parent_button('visible');
+
+			}
+
+			function hideCode() {
+
+				showButton.textContent = 'show code';
+				code.getWrapperElement().style.visibility = 'hidden';
+				compileButton.style.visibility = 'hidden';
+				set_save_button('hidden');
+				set_parent_button('hidden');
+				stopHideUI();
+
 			}
 
 			function isCodeVisible() {
-				return code && code.getWrapperElement().style.display !== 'none';
+
+				return code && code.getWrapperElement().style.visibility === 'visible';
+
 			}
 
 			var hideUITimer;
@@ -558,6 +568,8 @@
 
 				if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
 
+					showCode();
+
 					var error = gl.getProgramInfoLog( program );
 
 					compileButton.title = error;
@@ -632,6 +644,8 @@
 
 				if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
 
+					showCode();
+
 					console.error( 'VALIDATE_STATUS: ' + gl.getProgramParameter( program, gl.VALIDATE_STATUS ), 'ERROR: ' + gl.getError() );
 
 					return;
@@ -748,6 +762,8 @@
 
 				if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
 
+					showCode();
+
 					var error = gl.getShaderInfoLog( shader );
 
 					// Remove trailing linefeed, for FireFox's benefit.