Support watching lists in debugger

apps/src/templates/watchers/Watchers.jsx

@@ -58,14 +58,21 @@ const styles = {
     margin: 0,
     padding: 0
   },
-  watchValue: {
+  watchItemDescription: {
     whiteSpace: 'nowrap',
-    height: buttonSize,
-    lineHeight: buttonSize,
+    minHeight: buttonSize,
     marginLeft: 3,
     overflow: 'hidden',
     width: valueAndInputWidth
   },
+  watchValueArray: {
+    whiteSpace: 'normal'
+  },
+  watchValue: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    minHeight: '34px'
+  },
   watchInputSection: {
     clear: 'both'
   },
@@ -114,15 +121,15 @@ class Watchers extends React.Component {
    */
   renderValue(obj) {
     if (!this.props.isRunning) {
-      return <span className="watch-value">{WATCH_VALUE_NOT_RUNNING}</span>;
+      return <span style={styles.watchValue}>{WATCH_VALUE_NOT_RUNNING}</span>;
     }
 
     const descriptor = nonValueDescriptor(obj);
     const isError = obj instanceof Error;
 
     if (isError) {
       return (
-        <span className="watch-value watch-unavailable">
+        <span style={styles.watchValue} className="watch-unavailable">
           {i18n.debugWatchNotAvailable()}
         </span>
       );
@@ -131,20 +138,26 @@ class Watchers extends React.Component {
     switch (descriptor) {
       case 'null':
       case 'undefined':
-        return <span className="watch-value">{descriptor}</span>;
+        return <span style={styles.watchValue}>{descriptor}</span>;
       case 'regexp':
-        return <span className="watch-value">[regexp]</span>;
+        return <span style={styles.watchValue}>[regexp]</span>;
       case 'array':
-        return <span className="watch-value">[array]</span>;
+        return (
+          <span style={styles.watchValueArray}>
+            {`[list (${obj.length})]`}
+            <br />
+            {`[${parseArray(obj)}]`}
+          </span>
+        );
       case 'function':
         // [function MyFunctionName]
         return (
-          <span className="watch-value">
+          <span style={styles.watchValue}>
             {`[${obj.toString().match(/(.*)\(/)[1]}]`}
           </span>
         );
       default:
-        return <span className="watch-value">{obj.toString()}</span>;
+        return <span style={styles.watchValue}>{obj.toString()}</span>;
     }
   }
 
@@ -377,7 +390,7 @@ class Watchers extends React.Component {
                 >
                   ×
                 </div>
-                <div style={styles.watchValue}>
+                <div style={styles.watchItemDescription}>
                   <span className="watch-variable">{varName}</span>
                   <span className="watch-separator">: </span>
                   {this.renderValue(varValue)}
@@ -462,3 +475,26 @@ function nonValueDescriptor(obj) {
 function wrapValue(index, length) {
   return (index + length) % length;
 }
+
+function parseArray(array) {
+  let parsedArray = '';
+  array.forEach((element, index, array) => {
+    if (element === null) {
+      parsedArray += 'null';
+    } else if (Array.isArray(element)) {
+      parsedArray += 'list (' + element.length + ')';
+    } else if (typeof element === 'string') {
+      parsedArray += '"' + element + '"';
+    } else if (typeof element === 'object') {
+      parsedArray += 'object {}';
+    } else {
+      parsedArray += element;
+    }
+
+    if (index !== array.length - 1) {
+      parsedArray += ', ';
+    }
+  });
+
+  return parsedArray;
+}