Display "(empty)" when list is empty

src/scaffolding/monitor.js

@@ -256,7 +256,12 @@ class ListMonitor extends Monitor {
     this.endPoint = document.createElement('div');
     this.endPoint.className = styles.monitorRowsEndpoint;
 
+    this.emptyLabel = document.createElement('div');
+    this.emptyLabel.textContent = '(empty)';
+    this.emptyLabel.className = styles.monitorEmpty;
+
     this.rowsInner.appendChild(this.endPoint);
+    this.rowsInner.appendChild(this.emptyLabel);
     this.rowsOuter.appendChild(this.rowsInner);
     this.root.appendChild(this.label);
     this.root.appendChild(this.rowsOuter);
@@ -375,6 +380,8 @@ class ListMonitor extends Monitor {
     let endIndex = Math.ceil((this.scrollTop + this.height) / ROW_HEIGHT) + 5;
     if (endIndex > value.length - 1) endIndex = value.length - 1;
 
+    this.emptyLabel.style.display = value.length ? 'none' : '';
+
     const rowsNeeded = endIndex - startIndex + 1;
     while (this.rows.length < rowsNeeded) {
       const row = new Row();

src/scaffolding/style.css

@@ -198,6 +198,10 @@
   user-select: text;
   white-space: pre;
 }
+.monitor-empty {
+  text-align: center;
+  padding: 5px;
+}
 
 .controls-bar {
   transform: translateY(-100%);