DevTools / console enhancements (codesandbox#267)

* Renamed cryptic 'massage' to less cryptic 'transform'. :-)

* Console: changed word break, break-word is better.

* Console: also catch console.clear().

* DevTools: remember height.

Author: lbogdan

src/app/components/sandbox/Preview/DevTools/Console/Message.js

@@ -80,7 +80,7 @@ const Container = styled.div`
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   font-size: 13px;
   line-height: 16px;
-  word-break: break-all;
+  word-break: break-word;
   ${props => getTypeStyles(props.logType)};
 `;
 

src/app/components/sandbox/Preview/DevTools/index.js

@@ -7,6 +7,8 @@ import Tooltip from 'app/components/Tooltip';
 
 import MinimizeIcon from 'react-icons/lib/fa/angle-up';
 
+import store from 'store/dist/store.modern';
+
 import Unread from './Unread';
 
 import console from './Console';
@@ -230,7 +232,11 @@ export default class DevTools extends React.PureComponent<Props, State> {
         // happen when pointer events are disabled and in turn disables scroll.
         // It's hacky, but it's to fix a bug in the browser.
         setTimeout(() => {
-          this.setState({ height: this.state.height + 1 });
+          const height = this.state.height + 1;
+          this.setState({ height });
+          if (height > 64) {
+            store.set('devtools.height', height);
+          }
         }, 50);
       }
     }
@@ -272,7 +278,7 @@ export default class DevTools extends React.PureComponent<Props, State> {
     this.setHidden(false);
     const heightObject = { height: this.state.height };
     TweenMax.to(heightObject, 0.3, {
-      height: 300,
+      height: store.get('devtools.height') || 300,
       onUpdate: () => {
         this.setState(heightObject);
       },

src/sandbox/console/index.js

@@ -1,16 +1,18 @@
 import { dispatch } from 'codesandbox-api';
 
-import massageJSON from './massage-json';
+import transformJSON from './transform-json';
 
 function replaceConsoleMethod(method) {
   const oldMethod = console[method];
   console[method] = (...args) => {
     try {
-      if (args.length > 0) {
+      if (method === 'clear') {
+        dispatch({ type: 'clear-console' });
+      } else if (args.length > 0) {
         dispatch({
           type: 'console',
           method,
-          args: massageJSON(args),
+          args: transformJSON(args),
         });
       }
     } catch (e) {

src/sandbox/console/massage-json.js src/sandbox/console/transform-json.jssrc/sandbox/console/massage-json.js renamed to src/sandbox/console/transform-json.js

@@ -10,7 +10,7 @@ import host from './utils/host';
 import setupHistoryListeners from './url-listeners';
 import compile from './compile';
 import setupConsole from './console';
-import massageJSON from './console/massage-json';
+import transformJSON from './console/transform-json';
 
 function getId() {
   if (process.env.LOCAL_SERVER) {
@@ -49,7 +49,7 @@ requirePolyfills().then(() => {
           dispatch({
             type: 'eval-result',
             error,
-            result: massageJSON(result),
+            result: transformJSON(result),
           });
         } catch (e) {
           console.error(e);