throttling postMessage to 250ms, fixes #80

client/constants.js

@@ -84,6 +84,12 @@ export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
 export const SET_THEME = 'SET_THEME';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
+export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';
+export const START_SKETCH_REFRESH = 'START_SKETCH_REFRESH';
+export const END_SKETCH_REFRESH = 'END_SKETCH_REFRESH';
+
+export const DETECT_INFINITE_LOOPS = 'DETECT_INFINITE_LOOPS';
+export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/ide.js

@@ -1,11 +1,5 @@
 import * as ActionTypes from '../../../constants';
 
-export function toggleSketch() {
-  return {
-    type: ActionTypes.TOGGLE_SKETCH
-  };
-}
-
 export function startSketch() {
   return {
     type: ActionTypes.START_SKETCH
@@ -18,6 +12,25 @@ export function stopSketch() {
   };
 }
 
+export function startRefreshSketch() {
+  return {
+    type: ActionTypes.START_SKETCH_REFRESH
+  };
+}
+
+export function startSketchAndRefresh() {
+  return (dispatch) => {
+    dispatch(startSketch());
+    dispatch(startRefreshSketch());
+  };
+}
+
+export function endSketchRefresh() {
+  return {
+    type: ActionTypes.END_SKETCH_REFRESH
+  };
+}
+
 export function startTextOutput() {
   return {
     type: ActionTypes.START_TEXT_OUTPUT
@@ -170,3 +183,14 @@ export function setUnsavedChanges(value) {
   };
 }
 
+export function detectInfiniteLoops() {
+  return {
+    type: ActionTypes.DETECT_INFINITE_LOOPS
+  };
+}
+
+export function resetInfiniteLoops() {
+  return {
+    type: ActionTypes.RESET_INFINITE_LOOPS
+  };
+}

client/modules/IDE/actions/preferences.js

@@ -138,9 +138,46 @@ export function setTextOutput(value) {
 }
 
 export function setTheme(value) {
-  return {
+  // return {
-    type: ActionTypes.SET_THEME,
+  //   type: ActionTypes.SET_THEME,
-    value
+  //   value
+  // };
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_THEME,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          theme: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
+export function setAutorefresh(value) {
+  // return {
+  //   type: ActionTypes.SET_AUTOREFRESH,
+  //   value
+  // };
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_AUTOREFRESH,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autorefresh: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 

client/modules/IDE/components/About.js

@@ -4,13 +4,17 @@ const exitUrl = require('../../../images/exit.svg');
 import { browserHistory } from 'react-router';
 
 class About extends React.Component {
+  componentDidMount() {
+    this.refs.about.focus();
+  }
+
   closeAboutModal() {
     browserHistory.goBack();
   }
 
   render() {
     return (
-      <div className="about">
+      <section className="about" ref="about" tabIndex="0">
         <header className="about__header">
           <h2>About</h2>
           <button className="about__exit-button" onClick={this.closeAboutModal}>
@@ -33,7 +37,7 @@ class About extends React.Component {
             > report a bug.</a>
           </p>
         </div>
-      </div>
+      </section>
     );
   }
 }

client/modules/IDE/components/Editor.js

@@ -15,6 +15,7 @@ import 'codemirror/addon/lint/html-lint';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/keymap/sublime';
 import 'codemirror/addon/search/jump-to-line';
+
 import { JSHINT } from 'jshint';
 window.JSHINT = JSHINT;
 import { CSSLint } from 'csslint';
@@ -27,15 +28,16 @@ const downArrowUrl = require('../../../images/down-arrow.svg');
 import classNames from 'classnames';
 
 import { debounce } from 'throttle-debounce';
+import loopProtect from 'loop-protect';
 
 class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.tidyCode = this.tidyCode.bind(this);
   }
-
   componentDidMount() {
     this.beep = new Audio(beepUrl);
+    this.widgets = [];
     this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
       theme: `p5-${this.props.theme}`,
       value: this.props.file.content,
@@ -47,23 +49,30 @@ class Editor extends React.Component {
       gutters: ['CodeMirror-lint-markers'],
       keyMap: 'sublime',
       lint: {
-        onUpdateLinting: debounce(2000, (annotations) => {
+        onUpdateLinting: () => {
-          this.props.clearLintMessage();
+          debounce(2000, (annotations) => {
-          annotations.forEach((x) => {
+            this.props.clearLintMessage();
-            if (x.from.line > -1) {
+            annotations.forEach((x) => {
-              this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
+              if (x.from.line > -1) {
+                this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
+              }
+            });
+            if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
+              this.beep.play();
             }
           });
-          if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
+        }
-            this.beep.play();
-          }
-        })
       }
     });
 
-    this._cm.on('change', debounce(200, () => {
+    this._cm.on('change', debounce(1000, () => {
       this.props.setUnsavedChanges(true);
       this.props.updateFileContent(this.props.file.name, this._cm.getValue());
+      this.checkForInfiniteLoop((infiniteLoop, prevs) => {
+        if (!infiniteLoop && prevs && this.props.autorefresh) {
+          this.props.startRefreshSketch();
+        }
+      });
     }));
 
     this._cm.on('keyup', () => {
@@ -132,6 +141,77 @@ class Editor extends React.Component {
     }
   }
 
+  checkForInfiniteLoop(callback) {
+    const prevIsplaying = this.props.isPlaying;
+    let infiniteLoop = false;
+    let prevLine;
+    this.props.resetInfiniteLoops();
+    let iframe;
+
+    for (let i = 0; i < this.widgets.length; ++i) {
+      this._cm.removeLineWidget(this.widgets[i]);
+    }
+    this.widgets.length = 0;
+
+    loopProtect.alias = 'protect';
+
+    let foundInfiniteLoop = false;
+    loopProtect.hit = (line) => {
+      foundInfiniteLoop = true;
+      if (line !== prevLine) {
+        this.props.detectInfiniteLoops();
+        this.props.stopSketch();
+        infiniteLoop = true;
+        callback(infiniteLoop, prevIsplaying);
+        const msg = document.createElement('div');
+        const loopError = `line ${line}: This loop is taking too long to run. This might be an infinite loop.`;
+        msg.appendChild(document.createTextNode(loopError));
+        msg.className = 'lint-error';
+        this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
+        prevLine = line;
+      }
+    };
+
+    const processed = loopProtect(this.props.file.content);
+
+    let iframeForLoop = document.getElementById('iframeForLoop');
+    if (iframeForLoop === null) {
+      iframe = document.createElement('iframe');
+      iframe.id = 'iframeForLoop';
+      iframe.style.display = 'none';
+      document.body.appendChild(iframe);
+      iframeForLoop = iframe;
+    } else {
+      iframeForLoop.srcdoc = '';
+    }
+    const win = iframeForLoop.contentWindow;
+    const doc = win.document;
+    doc.open();
+
+    win.protect = loopProtect;
+
+    doc.write(`<!DOCTYPE html>
+      <html>
+        <head>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
+        </head>
+        <body>
+          <script> 
+            ${processed}
+          </script>
+        </body>
+      </html>`);
+    win.onerror = () => true;
+    doc.close();
+
+    setTimeout(() => {
+      if (!foundInfiniteLoop) {
+        callback(infiniteLoop, prevIsplaying, prevLine);
+      }
+    }, 200);
+  }
+
   _cm: CodeMirror.Editor
 
   render() {
@@ -148,6 +228,7 @@ class Editor extends React.Component {
       >
         <button
           className="editor__options-button"
+          aria-label="editor options"
           tabIndex="0"
           onClick={(e) => {
             e.target.focus();
@@ -157,7 +238,7 @@ class Editor extends React.Component {
         >
           <InlineSVG src={downArrowUrl} />
         </button>
-        <ul className="editor__options">
+        <ul className="editor__options" title="editor options">
           <li>
             <a onClick={this.tidyCode}>Tidy</a>
           </li>
@@ -196,7 +277,14 @@ Editor.propTypes = {
   closeEditorOptions: PropTypes.func.isRequired,
   showKeyboardShortcutModal: PropTypes.func.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
+  infiniteLoop: PropTypes.bool.isRequired,
+  detectInfiniteLoops: PropTypes.func.isRequired,
+  resetInfiniteLoops: PropTypes.func.isRequired,
+  startRefreshSketch: PropTypes.func.isRequired,
+  autorefresh: PropTypes.bool.isRequired,
+  isPlaying: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired,
+  stopSketch: PropTypes.func.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/KeyboardShortcutModal.js

@@ -28,17 +28,34 @@ class KeyboardShortcutModal extends React.Component {
             <span>Save</span>
           </li>
           <li className="keyboard-shortcut-item">
-            <span className="keyboard-shortcut__command">Command + [</span>
+            <span className="keyboard-shortcut__command">
-            <span>Indent Code Right</span>
+              {this.isMac ? 'Command + [' : 'Control + ['}
-          </li>
+            </span>
-          <li className="keyboard-shortcut-item">
-            <span className="keyboard-shortcut__command">Command + ]</span>
             <span>Indent Code Left</span>
           </li>
           <li className="keyboard-shortcut-item">
-            <span className="keyboard-shortcut__command">Command + /</span>
+            <span className="keyboard-shortcut__command">
+              {this.isMac ? 'Command + ]' : 'Control + ]'}
+            </span>
+            <span>Indent Code Right</span>
+          </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">
+              {this.isMac ? 'Command + /' : 'Control + /'}
+            </span>
             <span>Comment Line</span>
           </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">
+              {this.isMac ? 'Command + Enter' : 'Control + Enter'}</span>
+            <span>Start Sketch</span>
+          </li>
+          <li className="keyboard-shortcut-item">
+            <span className="keyboard-shortcut__command">
+              {this.isMac ? 'Command + Shift + Enter' : 'Control + Shift + Enter'}
+            </span>
+            <span>Stop Sketch</span>
+          </li>
         </ul>
       </section>
     );

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'
         }, '*');
-      };
+      }, 250);
     });
   </script>`;
   return s;
 }
+
 function hijackConsoleErrorsScript(offs) {
   const s = `<script>
     function getScriptOff(line) {
@@ -117,18 +139,20 @@ class PreviewFrame extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    // if sketch starts or stops playing, want to rerender
     if (this.props.isPlaying !== prevProps.isPlaying) {
       this.renderSketch();
+      return;
     }
 
-    if (this.props.isPlaying && this.props.content !== prevProps.content) {
+    // if the user explicitly clicks on the play button
+    if (this.props.isPlaying && this.props.previewIsRefreshing) {
       this.renderSketch();
+      return;
     }
 
-    // I apologize for this, it is a hack. A simple way to check if the files have changed.
+    // small bug - if autorefresh is on, and the usr changes files
-    if (this.props.isPlaying && this.props.files[0].id !== prevProps.files[0].id) {
+    // in the sketch, preview will reload
-      this.renderSketch();
-    }
   }
 
   componentWillUnmount() {
@@ -205,8 +229,9 @@ class PreviewFrame extends React.Component {
 
   renderSketch() {
     const doc = ReactDOM.findDOMNode(this);
-    if (this.props.isPlaying) {
+    if (this.props.isPlaying && !this.props.infiniteLoop) {
       srcDoc.set(doc, this.injectLocalFiles());
+      this.props.endSketchRefresh();
     } else {
       doc.srcdoc = '';
       srcDoc.set(doc, '  ');
@@ -250,7 +275,12 @@ PreviewFrame.propTypes = {
   cssFiles: PropTypes.array.isRequired,
   files: PropTypes.array.isRequired,
   dispatchConsoleEvent: PropTypes.func,
-  children: PropTypes.element
+  children: PropTypes.element,
+  infiniteLoop: PropTypes.bool.isRequired,
+  resetInfiniteLoops: PropTypes.func.isRequired,
+  autorefresh: PropTypes.bool.isRequired,
+  endSketchRefresh: PropTypes.func.isRequired,
+  previewIsRefreshing: PropTypes.bool.isRequired,
 };
 
 export default PreviewFrame;

client/modules/IDE/components/ShareModal.js

@@ -2,42 +2,47 @@ import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 const exitUrl = require('../../../images/exit.svg');
 
-function ShareModal(props) {
+class ShareModal extends React.Component {
-  const hostname = window.location.origin;
+  componentDidMount() {
-  return (
+    this.refs.shareModal.focus();
-    <section className="share-modal">
+  }
-      <header className="share-modal__header">
+  render() {
-        <h2>Share Sketch</h2>
+    const hostname = window.location.origin;
-        <button className="about__exit-button" onClick={props.closeShareModal}>
+    return (
-          <InlineSVG src={exitUrl} alt="Close Share Overlay" />
+      <section className="share-modal" ref="shareModal" tabIndex="0">
-        </button>
+        <header className="share-modal__header">
-      </header>
+          <h2>Share Sketch</h2>
-      <div className="share-modal__section">
+          <button className="about__exit-button" onClick={this.props.closeShareModal}>
-        <label className="share-modal__label">Embed</label>
+            <InlineSVG src={exitUrl} alt="Close Share Overlay" />
-        <input
+          </button>
-          type="text"
+        </header>
-          className="share-modal__input"
+        <div className="share-modal__section">
-          value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
+          <label className="share-modal__label">Embed</label>
-        />
+          <input
-      </div>
+            type="text"
-      <div className="share-modal__section">
+            className="share-modal__input"
-        <label className="share-modal__label">Fullscreen</label>
+            value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
-        <input
+          />
-          type="text"
+        </div>
-          className="share-modal__input"
+        <div className="share-modal__section">
-          value={`${hostname}/full/${props.projectId}`}
+          <label className="share-modal__label">Fullscreen</label>
-        />
+          <input
-      </div>
+            type="text"
-      <div className="share-modal__section">
+            className="share-modal__input"
-        <label className="share-modal__label">Edit</label>
+            value={`${hostname}/full/${this.props.projectId}`}
-        <input
+          />
-          type="text"
+        </div>
-          className="share-modal__input"
+        <div className="share-modal__section">
-          value={`${hostname}/projects/${props.projectId}`}
+          <label className="share-modal__label">Edit</label>
-        />
+          <input
-      </div>
+            type="text"
-    </section>
+            className="share-modal__input"
-  );
+            value={`${hostname}/projects/${this.props.projectId}`}
+          />
+        </div>
+      </section>
+    );
+  }
 }
 
 ShareModal.propTypes = {

client/modules/IDE/components/Toolbar.js

@@ -53,12 +53,16 @@ class Toolbar extends React.Component {
         <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
         <button
           className="toolbar__play-sketch-button"
-          onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
+          onClick={() => {
+            this.props.startTextOutput();
+            this.props.startSketchAndRefresh();
+          }}
           aria-label="play sketch"
+          disabled={this.props.infiniteLoop}
         >
           <InlineSVG src={playUrl} alt="Play Sketch" />
         </button>
-        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch">
+        <button className={playButtonClass} onClick={this.props.startSketchAndRefresh} aria-label="play only visual sketch" disabled={this.props.infiniteLoop} >
           <InlineSVG src={playUrl} alt="Play only visual Sketch" />
         </button>
         <button
@@ -68,6 +72,19 @@ class Toolbar extends React.Component {
         >
           <InlineSVG src={stopUrl} alt="Stop Sketch" />
         </button>
+        <div className="toolbar__autorefresh">
+          <input
+            id="autorefresh"
+            type="checkbox"
+            checked={this.props.autorefresh}
+            onChange={(event) => {
+              this.props.setAutorefresh(event.target.checked);
+            }}
+          />
+          <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
+            Auto-refresh
+          </label>
+        </div>
         <div className={nameContainerClass}>
           <a
             className="toolbar__project-name"
@@ -128,7 +145,11 @@ Toolbar.propTypes = {
     isEditingName: PropTypes.bool
   }).isRequired,
   showEditProjectName: PropTypes.func.isRequired,
-  hideEditProjectName: PropTypes.func.isRequired
+  hideEditProjectName: PropTypes.func.isRequired,
+  infiniteLoop: PropTypes.bool.isRequired,
+  autorefresh: PropTypes.bool.isRequired,
+  setAutorefresh: PropTypes.func.isRequired,
+  startSketchAndRefresh: PropTypes.func.isRequired
 };
 
 export default Toolbar;

client/modules/IDE/pages/IDEView.js

@@ -146,7 +146,7 @@ class IDEView extends React.Component {
     } else if (e.key === 'Enter' && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
       e.preventDefault();
       e.stopPropagation();
-      this.props.startSketch();
+      this.props.startSketchAndRefresh();
     }
   }
 
@@ -192,6 +192,10 @@ class IDEView extends React.Component {
           setTextOutput={this.props.setTextOutput}
           owner={this.props.project.owner}
           project={this.props.project}
+          infiniteLoop={this.props.ide.infiniteLoop}
+          autorefresh={this.props.preferences.autorefresh}
+          setAutorefresh={this.props.setAutorefresh}
+          startSketchAndRefresh={this.props.startSketchAndRefresh}
         />
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
@@ -273,7 +277,14 @@ class IDEView extends React.Component {
                   closeEditorOptions={this.props.closeEditorOptions}
                   showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
                   setUnsavedChanges={this.props.setUnsavedChanges}
+                  infiniteLoop={this.props.ide.infiniteLoop}
+                  detectInfiniteLoops={this.props.detectInfiniteLoops}
+                  resetInfiniteLoops={this.props.resetInfiniteLoops}
+                  isPlaying={this.props.ide.isPlaying}
                   theme={this.props.preferences.theme}
+                  startRefreshSketch={this.props.startRefreshSketch}
+                  stopSketch={this.props.stopSketch}
+                  autorefresh={this.props.preferences.autorefresh}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -309,6 +320,11 @@ class IDEView extends React.Component {
                   isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
                   textOutput={this.props.preferences.textOutput}
                   dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+                  infiniteLoop={this.props.ide.infiniteLoop}
+                  resetInfiniteLoops={this.props.resetInfiniteLoops}
+                  autorefresh={this.props.preferences.autorefresh}
+                  previewIsRefreshing={this.props.ide.previewIsRefreshing}
+                  endSketchRefresh={this.props.endSketchRefresh}
                 />
               </div>
             </SplitPane>
@@ -412,12 +428,16 @@ IDEView.propTypes = {
     shareModalVisible: PropTypes.bool.isRequired,
     editorOptionsVisible: PropTypes.bool.isRequired,
     keyboardShortcutVisible: PropTypes.bool.isRequired,
-    unsavedChanges: PropTypes.bool.isRequired
+    unsavedChanges: PropTypes.bool.isRequired,
+    infiniteLoop: PropTypes.bool.isRequired,
+    previewIsRefreshing: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   startTextOutput: PropTypes.func.isRequired,
   stopTextOutput: PropTypes.func.isRequired,
+  detectInfiniteLoops: PropTypes.func.isRequired,
+  resetInfiniteLoops: PropTypes.func.isRequired,
   project: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string.isRequired,
@@ -442,7 +462,8 @@ IDEView.propTypes = {
     autosave: PropTypes.bool.isRequired,
     lintWarning: PropTypes.bool.isRequired,
     textOutput: PropTypes.bool.isRequired,
-    theme: PropTypes.string.isRequired
+    theme: PropTypes.string.isRequired,
+    autorefresh: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
@@ -504,6 +525,10 @@ IDEView.propTypes = {
   route: PropTypes.object.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired,
+  setAutorefresh: PropTypes.func.isRequired,
+  startSketchAndRefresh: PropTypes.func.isRequired,
+  endSketchRefresh: PropTypes.func.isRequired,
+  startRefreshSketch: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -16,13 +16,13 @@ const initialState = {
   shareModalVisible: false,
   editorOptionsVisible: false,
   keyboardShortcutVisible: false,
-  unsavedChanges: false
+  unsavedChanges: false,
+  infiniteLoop: false,
+  previewIsRefreshing: false
 };
 
 const ide = (state = initialState, action) => {
   switch (action.type) {
-    case ActionTypes.TOGGLE_SKETCH:
-      return Object.assign({}, state, { isPlaying: !state.isPlaying });
     case ActionTypes.START_SKETCH:
       return Object.assign({}, state, { isPlaying: true });
     case ActionTypes.STOP_SKETCH:
@@ -73,6 +73,14 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { keyboardShortcutVisible: false });
     case ActionTypes.SET_UNSAVED_CHANGES:
       return Object.assign({}, state, { unsavedChanges: action.value });
+    case ActionTypes.DETECT_INFINITE_LOOPS:
+      return Object.assign({}, state, { infiniteLoop: true });
+    case ActionTypes.RESET_INFINITE_LOOPS:
+      return Object.assign({}, state, { infiniteLoop: false });
+    case ActionTypes.START_SKETCH_REFRESH:
+      return Object.assign({}, state, { previewIsRefreshing: true });
+    case ActionTypes.END_SKETCH_REFRESH:
+      return Object.assign({}, state, { previewIsRefreshing: false });
     default:
       return state;
   }

client/modules/IDE/reducers/preferences.js

@@ -7,7 +7,8 @@ const initialState = {
   autosave: true,
   lintWarning: false,
   textOutput: false,
-  theme: 'light'
+  theme: 'light',
+  autorefresh: true
 };
 
 const preferences = (state = initialState, action) => {
@@ -34,6 +35,8 @@ const preferences = (state = initialState, action) => {
       return action.preferences;
     case ActionTypes.SET_THEME:
       return Object.assign({}, state, { theme: action.value });
+    case ActionTypes.SET_AUTOREFRESH:
+      return Object.assign({}, state, { autorefresh: action.value });
     default:
       return state;
   }

client/modules/User/actions.js

@@ -69,7 +69,7 @@ export function validateAndLoginUser(formProps, dispatch) {
         resolve();
       })
       .catch(response => {
-        reject({ email: response.data.message, _error: 'Login failed!' });
+        reject({ password: response.data.message, _error: 'Login failed!' });
       });
   });
 }

client/modules/User/components/LoginForm.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 
 function LoginForm(props) {
-  const { fields: { email, password }, handleSubmit, submitting, invalid, pristine } = props;
+  const { fields: { email, password }, handleSubmit, submitting, pristine } = props;
   return (
     <form className="login-form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this))}>
       <p className="login-form__field">
@@ -24,7 +24,7 @@ function LoginForm(props) {
         />
         {password.touched && password.error && <span className="form-error">{password.error}</span>}
       </p>
-      <input type="submit" disabled={submitting || invalid || pristine} value="Login" aria-label="login" />
+      <input type="submit" disabled={submitting || pristine} value="Login" aria-label="login" />
     </form>
   );
 }

client/styles/abstracts/_variables.scss

@@ -28,9 +28,12 @@ $themes: (
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: #eee,
     console-header-background-color: #d6d6d6,
+    console-header-color: #b1b1b1,
     ide-border-color: #f4f4f4,
     editor-gutter-color: #f4f4f4,
     file-selected-color: #f4f4f4,
+    input-text-color: #333,
+    input-border-color: #979797,
   ),
   dark: (
     primary-text-color: $white,
@@ -58,78 +61,14 @@ $themes: (
     ide-border-color: #949494,
     editor-gutter-color: #363636,
     file-selected-color: #404040,
+    input-text-color: #333,
+    input-border-color: #979797,
   )
 );
 
-$primary-text-color: #333;
-$secondary-text-color: #6b6b6b;
-$inactive-text-color: #b5b5b5;
-$background-color: #fdfdfd;
-$button-background-color: #f4f4f4;
-$button-color: $black;
-$button-border-color: #979797;
-$toolbar-button-color: $p5js-pink;
-$button-background-hover-color: $p5js-pink;
-$button-background-active-color: #f10046;
-$button-hover-color: $white;
-$button-active-color: $white;
-$modal-background-color: #f4f4f4;
-$modal-button-background-color: #e6e6e6;
-$modal-border-color: #B9D0E1;
-$icon-color: #8b8b8b;
-$icon-hover-color: #333;
-$shadow-color: rgba(0, 0, 0, 0.16);
-$console-background-color: #eee;
-$console-header-background-color: #d6d6d6;
-$ide-border-color: #f4f4f4;
-
-
-// other variables i may or may not need later
-$ide-border-color: #f4f4f4;
-$editor-selected-line-color: #f3f3f3;
-$input-border-color: #979797;
-
-$console-light-background-color: #eee;
-$console-header-background-color: #d6d6d6;
-$console-header-color: #b1b1b1;
 $console-warn-color: #ffbe05;
 $console-error-color: #ff5f52;
 
 $toast-background-color: #979797;
 $toast-text-color: $white;
 
-//light and dark colors
-
-$light-primary-text-color: #333;
-$light-secondary-text-color: #6b6b6b;
-$light-inactive-text-color: #b5b5b5;
-$light-background-color: #fdfdfd;
-
-$light-button-background-color: #f4f4f4;
-$light-button-color: $black;
-$light-button-border-color: #979797;
-$light-toolbar-button-color: $p5js-pink;
-$light-button-background-hover-color: $p5js-pink;
-$light-button-background-active-color: #f10046;
-$light-button-hover-color: $white;
-$light-button-active-color: $white;
-$light-modal-background-color: #f4f4f4;
-$light-modal-button-background-color: #e6e6e6;
-$light-modal-border-color: #B9D0E1;
-$light-icon-color: #8b8b8b;
-$light-icon-hover-color: $light-primary-text-color;
-$light-shadow-color: rgba(0, 0, 0, 0.16);
-
-$dark-primary-text-color: $white;
-$dark-secondary-text-color: #c2c2c2;
-$dark-inactive-color: #7d7d7d;
-$dark-background-color: #333;
-
-$dark-button-background-color: $white;
-$dark-button-color: $black;
-$dark-toolbar-button-color: $p5js-pink;
-$dark-button-background-hover-color: $p5js-pink;
-$dark-button-background-active-color: #f10046;
-$dark-button-hover-color: $white;
-$dark-button-active-color: $white;
-

client/styles/base/_base.scss

@@ -36,11 +36,11 @@ input, button {
 
 input {
 	padding: #{5 / $base-font-size}rem;
-	// border-radius: 2px;
+	border: 1px solid;
-	border: 1px solid $input-border-color;
 	padding: #{10 / $base-font-size}rem;
 	@include themify() {
-		color: $primary-text-color;
+		color: getThemifyVariable('input-text-color');
+		border-color: getThemifyVariable('input-border-color');
 	}
 }
 

client/styles/components/_console.scss

@@ -39,8 +39,8 @@
 .preview-console__header {
 	@include themify() {
 		background-color: getThemifyVariable('console-header-background-color');
+		color: getThemifyVariable('console-header-color');
 	}
-	color: $console-header-color;
 	padding: #{5 / $base-font-size}rem;
 	display: flex;
 	justify-content: space-between;

client/styles/components/_editor.scss

@@ -94,4 +94,12 @@
   .editor--options & {
     display: block;
   }
-}
+}
+
+.lint-error {
+  font-family: Inconsolata, monospace;
+  font-size: 100%;
+  background: rgba($console-error-color, 0.3);
+  color: $console-error-color;
+  padding: 2px 5px 3px;
+}

client/styles/components/_modal.scss

@@ -80,7 +80,7 @@
 .keyboard-shortcuts {
   @extend %modal;
   padding: #{20 / $base-font-size}rem;
-  width: #{400 / $base-font-size}rem;
+  width: #{450 / $base-font-size}rem;
 }
 
 .keyboard-shortcuts__header {
@@ -104,7 +104,7 @@
 }
 
 .keyboard-shortcut__command {
-  width: 40%;
+  width: 50%;
   font-weight: bold;
   text-align: right;
   padding-right: #{10 / $base-font-size}rem;

client/styles/components/_preferences.scss

@@ -51,17 +51,19 @@
 }
 
 .preference__subtitle {
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+	}
 	width: 100%;
 	margin-bottom: #{10 / $base-font-size}rem;
 	margin-top: 0;
-	color: $light-inactive-text-color;
 }
 
 .preference__value {
 	@include themify() {
 		border: 2px solid getThemifyVariable('button-border-color');
 		background-color: getThemifyVariable('button-background-color');
-		color: $light-primary-text-color;
+		color: getThemifyVariable('input-text-color');
 	}
 	text-align: center;
 	border-radius: 0%;
@@ -72,13 +74,15 @@
 }
 
 .preference__label {
+	@include themify() {
+		color: getThemifyColor('inactive-text-color');
+		&:hover {
+			color: getThemifyColor('inactive-text-color');
+		}
+	}
 	margin: 0;
 	line-height: #{20 / $base-font-size}rem;
-	color: $light-inactive-text-color;
 	font-size: #{9 / $base-font-size}rem;
-	&:hover {
-		color: $light-inactive-text-color;
-	}
 }
 
 .preference__vertical-list {

client/styles/components/_sidebar.scss

@@ -29,7 +29,10 @@
 }
 
 .sidebar__file-list {
-  border-top: 1px solid $ide-border-color;
+  @include themify() {
+    border-color: getThemifyVariable('ide-border-color')
+  }
+  border-top: 1px solid;
   .sidebar--contracted & {
     display: none;
   }

client/styles/components/_toolbar.scss

@@ -4,6 +4,18 @@
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
+		&:disabled {
+			cursor: auto;
+			& g {
+				fill: getThemifyVariable('button-border-color');
+			}
+			&:hover {
+				background-color: getThemifyVariable('toolbar-button-background-color');
+				& g {
+					fill: getThemifyVariable('button-border-color');
+				}
+			}
+	    }
 	}
 	margin-right: #{15 / $base-font-size}rem;
 	& span {
@@ -18,6 +30,7 @@
 .toolbar__stop-button {
 	@include themify() {
 		@extend %toolbar-button;
+		margin-right: #{15 / $base-font-size}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
@@ -48,6 +61,10 @@
 }
 
 .toolbar__project-name-container {
+	@include themify() {
+		border-color: getThemifyVariable('inactive-text-color');
+	}
+	border-left: 2px dashed;
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
 	height: 70%;
@@ -56,14 +73,13 @@
 }
 
 .toolbar__project-name {
-	color: $light-inactive-text-color;
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+		&:hover {
+		color: getThemifyVariable('primary-text-color');
+		}
+	}
 	cursor: pointer;
-	&:hover {
-		color: $light-primary-text-color;
-	}
-	&:focus {
-		color: $light-inactive-text-color;
-	}
 
 	.toolbar__project-name-container--editing & {
 		display: none;
@@ -81,3 +97,11 @@
 .toolbar__project-owner {
 	margin-left: #{5 / $base-font-size}rem;
 }
+
+.toolbar__autorefresh-label {
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+	}
+	margin-left: #{5 / $base-font-size}rem;
+	font-size: #{12 / $base-font-size}rem;
+}

package.json

@@ -83,6 +83,7 @@
     "jshint": "^2.9.2",
     "jszip": "^3.0.0",
     "jszip-utils": "0.0.2",
+    "loop-protect": "git+https://git@github.com/sagar-sm/loop-protect.git",
     "moment": "^2.14.1",
     "mongoose": "^4.4.16",
     "node-uuid": "^1.4.7",

server/models/user.js

@@ -16,7 +16,8 @@ const userSchema = new Schema({
     autosave: { type: Boolean, default: true },
     lintWarning: { type: Boolean, default: false },
     textOutput: { type: Boolean, default: false },
-    theme: { type: String, default: 'light' }
+    theme: { type: String, default: 'light' },
+    autorefresh: { type: Boolean, default: true }
   }
 }, { timestamps: true });
 

server/utils/db_reformat.js

@@ -7,6 +7,7 @@ mongoose.connection.on('error', () => {
 });
 
 import Project from '../models/project';
+import User from '../models/user';
 
 // let projectsNotToUpdate;
 // Project.find({'files.name': 'root'})
@@ -83,35 +84,44 @@ import Project from '../models/project';
 //     });
 //   });
 
-Project.find({})
+// Project.find({})
-  .exec((err, projects) => {
+//   .exec((err, projects) => {
-    projects.forEach((project, projectIndex) => {
+//     projects.forEach((project, projectIndex) => {
-      project.files.forEach((file) => {
+//       project.files.forEach((file) => {
-        if (file.isSelected) {
+//         if (file.isSelected) {
-          delete file.isSelected;
+//           delete file.isSelected;
-        }
+//         }
 
-        if (file.name === 'sketch.js') {
+//         if (file.name === 'sketch.js') {
-          file.isSelectedFile = true;
+//           file.isSelectedFile = true;
-          console.log(file.name, 'is now selected');
+//           console.log(file.name, 'is now selected');
-          // file.save((err, savedFile) => {
+//           // file.save((err, savedFile) => {
-          //   console.log('file saved');
+//           //   console.log('file saved');
-          // });
+//           // });
-        } else {
+//         } else {
-          file.isSelectedFile = false;
+//           file.isSelectedFile = false;
-        }
+//         }
-        // console.log('project', projectIndex);
+//         // console.log('project', projectIndex);
-        // if (file.isSelected) {
+//         // if (file.isSelected) {
-        //   console.log('is selected remains');
+//         //   console.log('is selected remains');
-        // }
+//         // }
 
-        // if (file.isSelctedFile) {
+//         // if (file.isSelctedFile) {
-        //   console.log('changed to isSelected file');
+//         //   console.log('changed to isSelected file');
-        // }
+//         // }
-        project.save((err, savedProject) => {
+//         project.save((err, savedProject) => {
-          console.log('project', projectIndex, 'is saved.');
+//           console.log('project', projectIndex, 'is saved.');
-        });
+//         });
 
-      });
+//       });
+//     });
+//   });
+
+User.findOne({email: 'test@test.com'})
+  .exec((err, user) => {
+    console.log(user);
+    user.password = '1234';
+    user.save((err, savedUser) => {
+      console.log('user saved');
     });
   });