List monitor styles

src/monitor.js

@@ -71,7 +71,7 @@ class VariableMonitor extends Monitor {
   }
 }
 
-const ROW_HEIGHT = 20;
+const ROW_HEIGHT = 24;
 
 class Row {
   constructor () {
@@ -83,10 +83,13 @@ class Row {
     this.root.className = styles.monitorRowRoot;
     this.indexEl = document.createElement('div');
     this.indexEl.className = styles.monitorRowIndex;
-    this.valueEl = document.createElement('div');
-    this.valueEl.className = styles.monitorRowValue;
+    this.valueOuter = document.createElement('div');
+    this.valueOuter.className = styles.monitorRowValueOuter;
+    this.valueInner = document.createElement('div');
+    this.valueInner.className = styles.monitorRowValueInner;
+    this.valueOuter.appendChild(this.valueInner);
     this.root.appendChild(this.indexEl);
-    this.root.appendChild(this.valueEl);
+    this.root.appendChild(this.valueOuter);
   }
 
   setIndex (index) {
@@ -100,7 +103,7 @@ class Row {
   setValue (value) {
     if (this._value !== value) {
       this._value = value;
-      this.valueEl.textContent = value;
+      this.valueInner.textContent = value;
     }
   }
 
@@ -119,6 +122,13 @@ class ListMonitor extends Monitor {
     this.rows = [];
     this.scrollTop = 0;
 
+    this.label = document.createElement('div');
+    this.label.className = styles.monitorListLabel;
+    this.label.textContent = this.getLabel();
+
+    this.footer = document.createElement('div');
+    this.footer.className = styles.monitorListFooter;
+
     this.rowsOuter = document.createElement('div');
     this.rowsOuter.className = styles.monitorRowsOuter;
 
@@ -131,7 +141,9 @@ class ListMonitor extends Monitor {
 
     this.rowsInner.appendChild(this.endPoint);
     this.rowsOuter.appendChild(this.rowsInner);
+    this.root.appendChild(this.label);
     this.root.appendChild(this.rowsOuter);
+    this.root.appendChild(this.footer);
   }
 
   _onscroll (e) {
@@ -149,12 +161,13 @@ class ListMonitor extends Monitor {
   update (monitor) {
     super.update(monitor);
 
-    this.width = monitor.get('width') || 200;
+    this.width = monitor.get('width') || 100;
     this.height = monitor.get('height') || 200;
     this.root.style.width = `${this.width}px`;
     this.root.style.height = `${this.height}px`;
 
     this.value = monitor.get('value');
+    this.footer.textContent = `length ${this.value.length}`;
     this.updateValue(this.value);
   }
 

src/style.css

@@ -68,6 +68,8 @@
   font-size: 12px;
   overflow: hidden;
   user-select: none;
+  display: flex;
+  flex-direction: column;
 }
 .monitor-inner {
   display: flex;
@@ -99,12 +101,26 @@
   background-color: rgb(255, 140, 26);
 }
 
+.monitor-list-label {
+  background-color: white;
+  text-align: center;
+  font-weight: bold;
+  border-bottom: 1px solid hsla(0, 0%, 0%, 0.15);
+  padding: 3px;
+}
+.monitor-list-footer {
+  background-color: white;
+  text-align: center;
+  font-weight: bold;
+  padding: 3px;
+}
 .monitor-rows-outer {
-  height: 200px;
+  flex-grow: 1;
 }
 .monitor-rows-inner {
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
   position: relative;
 }
 .monitor-rows-endpoint {
@@ -121,10 +137,31 @@
   top: 0;
   left: 0;
   display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 2px;
+  width: 100%;
 }
 .monitor-row-index {
-
+  font-weight: bold;
+  color: hsla(225, 15%, 40%, 1);
+  margin: 0 3px;
 }
-.monitor-row-value {
+.monitor-row-value-outer {
+  box-sizing: border-box;
+  min-width: 40px;
+  height: 22px;
+  border: 1px solid hsla(0, 0%, 0%, 0.15);
+  background-color: rgb(252, 102, 44);
+  color: white;
+  margin: 0 3px;
+  border-radius: calc(0.5rem / 2);
+  flex-grow: 1;
+}
+.monitor-row-value-inner {
+  padding: 3px 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   user-select: text;
+  white-space: pre;
 }