Merge branch 'console' of https://github.com/lmccart/p5.js-web-editor into lmccart-console

client/modules/IDE/components/Console.js

@@ -25,7 +25,7 @@ class Console extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.isPlaying && !this.props.isPlaying) {
       this.children = [];
-    } else if (nextProps.consoleEvent !== this.props.consoleEvent) {
+    } else if (nextProps.isExpanded && nextProps.consoleEvent !== this.props.consoleEvent) {
       const args = nextProps.consoleEvent.arguments;
       const method = nextProps.consoleEvent.method;
       const nextChild = (

client/modules/IDE/components/PreviewFrame.js

@@ -40,8 +40,29 @@ function hijackConsoleLogsScript() {
       'debug', 'clear', 'error', 'info', 'log', 'warn'
     ];
 
+
+    function throttle(fn, threshhold, scope) {
+      var last, deferTimer;
+      return function() {
+        var context = scope || this;
+        var now = +new Date,
+            args = arguments;
+        if (last && now < last + threshhold) {
+          // hold on to it
+          clearTimeout(deferTimer);
+          deferTimer = setTimeout(function() {
+            last = now;
+            fn.apply(context, args);
+          }, threshhold);
+        } else {
+          last = now;
+          fn.apply(context, args);
+        }
+      };
+    }
+
     methods.forEach( function(method) {
-      iframeWindow.console[method] = function() {
+      iframeWindow.console[method] = throttle(function() {
         originalConsole[method].apply(originalConsole, arguments);
 
         var args = Array.from(arguments);
@@ -56,11 +77,12 @@ function hijackConsoleLogsScript() {
           arguments: args,
           source: 'sketch'
         }, '*');
-      };
+      }, 100);
     });
   </script>`;
   return s;
 }
+
 function hijackConsoleErrorsScript(offs) {
   const s = `<script>
     function getScriptOff(line) {

client/styles/abstracts/_variables.scss

@@ -10,7 +10,7 @@ $themes: (
     primary-text-color: #333,
     secondary-text-color: #6b6b6b,
     inactive-text-color: #b5b5b5,
-    background-color: #fdfdfd,
+    background-color: #fbfbfb,
     button-background-color: #f4f4f4,
     button-color: $black,
     button-border-color: #979797,
@@ -20,7 +20,7 @@ $themes: (
     button-background-active-color: #f10046,
     button-hover-color: $white,
     button-active-color: $white,
-    modal-background-color: #f4f4f4,
+    modal-background-color: #fdfdfd,
     modal-button-background-color: #e6e6e6,
     modal-border-color: #B9D0E1,
     icon-color: #8b8b8b,
@@ -30,7 +30,7 @@ $themes: (
     console-header-background-color: #d6d6d6,
     console-header-color: #b1b1b1,
     ide-border-color: #f4f4f4,
-    editor-gutter-color: #f7f7f7,
+    editor-gutter-color: #f4f4f4,
     file-selected-color: #f4f4f4,
     input-text-color: #333,
     input-border-color: #979797,

client/styles/components/_nav.scss

@@ -1,15 +1,16 @@
 .nav {
 	width: 100%;
 	padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
-	padding-left: #{170 / $base-font-size}rem;
+	padding-left: #{33 / $base-font-size}rem;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+	font-size: #{12 / $base-font-size}rem; 
 }
 
 .nav__items-left, .nav__items-right {
 	@include themify() {
-		border-bottom: 2px dashed map-get($theme-map, 'inactive-text-color');
+		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
 	}
 	list-style: none;
 	display: flex;
@@ -20,9 +21,10 @@
 
 .nav__item {
 	& + & {
-		margin-left: #{20 / $base-font-size}rem;
+		margin-left: #{0 / $base-font-size}rem;
 	}
 	position: relative;
+	min-width: #{72 / $base-font-size}rem;
 }
 
 .nav__dropdown {

client/styles/components/_toolbar.scss

@@ -55,7 +55,7 @@
 }
 
 .toolbar {
-	padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
+	padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
 	display: flex;
 	align-items: center;
 }