Add "read-only" slider and list monitors.

package.json

@@ -95,7 +95,7 @@
     "scratch-render": "0.1.0-prerelease.20180508205430",
     "scratch-storage": "0.4.1",
     "scratch-svg-renderer": "0.1.0-prerelease.20180423193917",
-    "scratch-vm": "0.1.0-prerelease.1525460669",
+    "scratch-vm": "0.1.0-prerelease.1525837283",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.21.0",

src/components/monitor-list/monitor-list.jsx

@@ -12,20 +12,25 @@ const MonitorList = props => (
         // Use static `monitor-overlay` class for bounds of draggables
         className={classNames(styles.monitorList, 'monitor-overlay')}
     >
-        {props.monitors.valueSeq().map(monitorData => (
-            <Monitor
-                id={monitorData.id}
-                key={monitorData.id}
-                mode={monitorData.mode}
-                opcode={monitorData.opcode}
-                params={monitorData.params}
-                spriteName={monitorData.spriteName}
-                value={monitorData.value}
-                x={monitorData.x}
-                y={monitorData.y}
-                onDragEnd={props.onMonitorChange}
-            />
-        ))}
+        {props.monitors.valueSeq().filter(m => m.visible)
+            .map(monitorData => (
+                <Monitor
+                    height={monitorData.height}
+                    id={monitorData.id}
+                    key={monitorData.id}
+                    max={monitorData.sliderMax}
+                    min={monitorData.sliderMin}
+                    mode={monitorData.mode}
+                    opcode={monitorData.opcode}
+                    params={monitorData.params}
+                    spriteName={monitorData.spriteName}
+                    value={monitorData.value}
+                    width={monitorData.width}
+                    x={monitorData.x}
+                    y={monitorData.y}
+                    onDragEnd={props.onMonitorChange}
+                />
+            ))}
     </Box>
 );
 

src/components/monitor/default-monitor.jsx

@@ -4,14 +4,16 @@ import styles from './monitor.css';
 
 const DefaultMonitor = ({categoryColor, label, value}) => (
     <div className={styles.defaultMonitor}>
-        <div className={styles.label}>
-            {label}
-        </div>
-        <div
-            className={styles.value}
-            style={{background: categoryColor}}
-        >
-            {value}
+        <div className={styles.row}>
+            <div className={styles.label}>
+                {label}
+            </div>
+            <div
+                className={styles.value}
+                style={{background: categoryColor}}
+            >
+                {value}
+            </div>
         </div>
     </div>
 );

src/components/monitor/list-monitor.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './monitor.css';
+
+const ListMonitor = ({categoryColor, label, width, height, value}) => (
+    <div
+        className={styles.listMonitor}
+        style={{
+            width: `${width || 80}px`,
+            height: `${height || 200}px`
+        }}
+    >
+        <div className={styles.listHeader}>
+            {label}
+        </div>
+        <div className={styles.listBody}>
+            {!value || value.length === 0 ? (
+                <div className={styles.listEmpty}>
+                    {'(empty)' /* @todo not translating, awaiting design */}
+                </div>
+            ) : value.map((v, i) => (
+                <div
+                    className={styles.listRow}
+                    key={`label-${i}`}
+                >
+                    <div className={styles.listIndex}>{i + 1 /* one indexed */}</div>
+                    <div
+                        className={styles.listValue}
+                        style={{background: categoryColor}}
+                    >
+                        <div className={styles.valueInner}>{v}</div>
+                    </div>
+                </div>
+            ))}
+        </div>
+        <div className={styles.listFooter}>
+            <div className={styles.footerButton}>
+                {/* @todo add button here */}
+            </div>
+            <div className={styles.footerLength}>
+                <span className={styles.lengthNumber}>
+                    {value.length}
+                </span>
+            </div>
+            <div className={styles.resizeHandle}>
+                {/* @todo resize handle */}
+            </div>
+        </div>
+    </div>
+);
+
+ListMonitor.propTypes = {
+    categoryColor: PropTypes.string.isRequired,
+    height: PropTypes.number,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.arrayOf(PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ])),
+    width: PropTypes.number
+};
+
+ListMonitor.defaultProps = {
+    width: 80,
+    height: 200
+};
+
+export default ListMonitor;

src/components/monitor/monitor.css

@@ -25,6 +25,7 @@
 
 .default-monitor {
     display: flex;
+    flex-direction: column;
     padding: 3px;
 }
 
@@ -53,3 +54,86 @@
     font-size: 1rem;
     transform: translateZ(0); /* Fixes flickering in Safari */
 }
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
+
+.list-monitor {
+    min-width: 80px;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-header {
+    background: $ui-white;
+    border-bottom: 1px solid $ui-black-transparent;
+    text-align: center;
+    padding: 3px;
+    font-size: 0.75rem;
+    font-weight: bold;
+    color: $text-primary;
+    width: 100%;
+}
+
+.list-body {
+    background: $ui-primary;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    height: calc(100% - 44px);
+}
+
+.list-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 2px;
+    flex-shrink: 0;
+}
+
+.list-index {
+    font-weight: bold;
+    color: $text-primary;
+    margin: 0 3px;
+}
+
+.list-value {
+    min-width: 40px;
+    text-align: left;
+    color: white;
+    margin: 0 3px;
+    border-radius: calc($space / 2);
+    border: 1px solid $ui-black-transparent;
+    flex-grow: 1;
+}
+
+.list-footer {
+    background: $ui-white;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 3px;
+    font-size: 0.75rem;
+    font-weight: bold;
+    color: $text-primary;
+}
+
+.list-empty {
+    text-align: center;
+    width: 100%;
+    padding: 5px;
+}
+
+.input-wrapper {
+    position: relative;
+    overflow: hidden;
+}
+
+.value-inner {
+    padding: 3px 5px;
+    min-height: 22px;
+}

src/components/monitor/monitor.jsx

@@ -7,6 +7,8 @@ import {ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
 import Box from '../box/box.jsx';
 import DefaultMonitor from './default-monitor.jsx';
 import LargeMonitor from './large-monitor.jsx';
+import SliderMonitor from './slider-monitor.jsx';
+import ListMonitor from './list-monitor.jsx';
 
 import styles from './monitor.css';
 
@@ -21,44 +23,62 @@ const categories = {
 
 const modes = {
     default: DefaultMonitor,
-    large: LargeMonitor
+    large: LargeMonitor,
+    slider: SliderMonitor,
+    list: ListMonitor
 };
 
 const MonitorComponent = props => (
     <ContextMenuTrigger id={`monitor-${props.label}`}>
         <Draggable
             bounds=".monitor-overlay" // Class for monitor container
+            cancel=".no-drag" // Class used for slider input to prevent drag
             defaultClassNameDragging={styles.dragging}
             onStop={props.onDragEnd}
         >
             <Box
                 className={styles.monitorContainer}
                 componentRef={props.componentRef}
-                onDoubleClick={props.onNextMode}
+                onDoubleClick={props.mode === 'list' ? null : props.onNextMode}
             >
                 {(modes[props.mode] || modes.default)({ // Use default until other modes arrive
                     categoryColor: categories[props.category],
                     label: props.label,
-                    value: props.value
+                    value: props.value,
+                    width: props.width,
+                    height: props.height,
+                    min: props.min,
+                    max: props.max
                 })}
             </Box>
         </Draggable>
-        <ContextMenu id={`monitor-${props.label}`}>
-            <MenuItem onClick={props.onSetModeToDefault}>
-                <FormattedMessage
-                    defaultMessage="normal readout"
-                    description="Menu item to switch to the default monitor"
-                    id="gui.monitor.contextMenu.default"
-                />
-            </MenuItem>
-            <MenuItem onClick={props.onSetModeToLarge}>
-                <FormattedMessage
-                    defaultMessage="large readout"
-                    description="Menu item to switch to the large monitor"
-                    id="gui.monitor.contextMenu.large"
-                />
-            </MenuItem>
-        </ContextMenu>
+        {props.mode === 'list' ? null : (
+            <ContextMenu id={`monitor-${props.label}`}>
+                <MenuItem onClick={props.onSetModeToDefault}>
+                    <FormattedMessage
+                        defaultMessage="normal readout"
+                        description="Menu item to switch to the default monitor"
+                        id="gui.monitor.contextMenu.default"
+                    />
+                </MenuItem>
+                <MenuItem onClick={props.onSetModeToLarge}>
+                    <FormattedMessage
+                        defaultMessage="large readout"
+                        description="Menu item to switch to the large monitor"
+                        id="gui.monitor.contextMenu.large"
+                    />
+                </MenuItem>
+                {props.onSetModeToSlider ? (
+                    <MenuItem onClick={props.onSetModeToSlider}>
+                        <FormattedMessage
+                            defaultMessage="slider"
+                            description="Menu item to switch to the slider monitor"
+                            id="gui.monitor.contextMenu.slider"
+                        />
+                    </MenuItem>
+                ) : null}
+            </ContextMenu>
+        )}
     </ContextMenuTrigger>
 
 );
@@ -70,15 +90,25 @@ const monitorModes = Object.keys(modes);
 MonitorComponent.propTypes = {
     category: PropTypes.oneOf(Object.keys(categories)),
     componentRef: PropTypes.func.isRequired,
+    height: PropTypes.number,
     label: PropTypes.string.isRequired,
+    max: PropTypes.number,
+    min: PropTypes.number,
     mode: PropTypes.oneOf(monitorModes),
     onDragEnd: PropTypes.func.isRequired,
     onNextMode: PropTypes.func.isRequired,
     onSetModeToDefault: PropTypes.func.isRequired,
     onSetModeToLarge: PropTypes.func.isRequired,
+    onSetModeToSlider: PropTypes.func,
     value: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.number])
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ]))
+    ]),
+    width: PropTypes.number
 };
 
 MonitorComponent.defaultProps = {