New debug console. Add sender_message_id to delivered messages for code simplicity.

static/debug.css

@@ -1,4 +1,8 @@
-@import url(http://fonts.googleapis.com/css?family=Roboto);
+@import url(http://fonts.googleapis.com/css?family=Roboto:300,400|Source+Code+Pro);
+
+body {
+  overflow: hidden;
+}
 
 container {
   position: fixed;
@@ -13,15 +17,15 @@ container {
 }
 
 subjectcontainer {
-  flex-grow: 1;
+  flex-basis: 20%;
 }
 
 messagecontainer {
-  flex-grow: 2;
+  flex-basis: 40%;
 }
 
 pincontainer {
-  flex-grow: 2;
+  flex-basis: 40%;
 }
 
 .verticalcontainer {
@@ -30,6 +34,19 @@ pincontainer {
   align-items: stretch;
 }
 
+.panel {
+  overflow: hidden;
+}
+
+status {
+  border-color: #ebccd1 !important;
+}
+
+status panelheading {
+  background-image: linear-gradient(to bottom, #f2dede 0, #ebcccc 100%) !important;
+  color: #4d1f1e !important;
+}
+
 subjectcontainer .panel {
   border-color: #bce8f1;
 }
@@ -44,7 +61,7 @@ messagecontainer .panel {
 }
 
 messagecontainer panelheading {
-  background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);
+  background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
   color: #274d05;
 }
 
@@ -53,7 +70,7 @@ pincontainer .panel {
 }
 
 pincontainer panelheading {
-  background-image: linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);
+  background-image: linear-gradient(to bottom, #fcf8e3 0, #faf2cc 100%);
   color: #4d3d21;
 }
 
@@ -63,8 +80,10 @@ pincontainer panelheading {
   background-color: #fff;
   border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-  min-height: 60px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
 
 panelheading {
@@ -75,8 +94,192 @@ panelheading {
   border-top-right-radius: 3px;
   font-size: 18px;
   font-variant: small-caps;
+  -webkit-user-select: none;
+  cursor: default;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+panelbody {
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 .fixed {
   flex-grow: 0;
+  flex-shrink: 0;
+}
+
+row {
+  white-space: pre-wrap;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: center;
+}
+
+status row {
+  justify-content: flex-start;
+}
+
+subjectlist row {
+  justify-content: flex-start;
+}
+
+messagelist row {
+  justify-content: flex-start;
+}
+
+pinlist row {
+  justify-content: flex-start;
+}
+
+input[type=text] {
+  font-family: Roboto;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  background: linear-gradient(rgba(0, 0, 0, 0.025), white);
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.05);
+  transition: all 0.1s ease-out;
+  padding: 5px;
+  color: #555;
+  flex-grow: 1;
+}
+ 
+input[type=text]:focus {
+  outline: none;
+  border: 1px solid rgba(0,0,0,0.5);
+}
+
+button {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  color: #fff;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  font-size: 14px;
+  font-variant: small-caps;
+  padding: 4px 4px;
+  outline: none;
+  background-repeat: repeat-x;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+button:hover {
+  background-position: 0 -10px;
+}
+
+button:active {
+  background-image: none;
+}
+
+messagecontainer button {
+  background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%);
+  border-color: #3e8f3e;
+}
+
+messagecontainer button:hover {
+  background-color: #419641;
+}
+
+messagecontainer button:active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+
+pincontainer button {
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  border-color: #e38d13;
+}
+
+pincontainer button:hover {
+  background-color: #eb9316;
+}
+
+pincontainer button:active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+
+subjectcontainer button {
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  border-color: #28a4c9;
+}
+
+subjectcontainer button:hover {
+  background-color: #2aabd2;
+}
+
+subjectcontainer button:active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+
+label {
+  padding: 4px 4px;
+  font-variant: small-caps;
+}
+
+value {
+  padding: 4px 0;
+  font-weight: 300;
+}
+
+select {
+  margin-top: 4px;
+  font-family: Roboto;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  background: linear-gradient(rgba(0, 0, 0, 0.025), white);
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.05);
+  transition: all 0.1s ease-out;
+  padding: 5px;
+  color: #555;
+}
+
+item {
+  font-family: 'Source Code Pro';
+  display: block;
+  width: 100%;
+  padding: 5px;
+  border-bottom: 1px solid;
+  cursor: default;
+}
+
+item.selected {
+  background-color: #eeeeee;
+}
+
+subjectcontainer item {
+  border-color: #bce8f1;
+}
+
+subjectcontainer row {
+  color: #235066;
+}
+
+messagecontainer item {
+  border-color: #d6e9c6;
+}
+
+messagecontainer row {
+  color: #336606;
+}
+
+pincontainer item {
+  border-color: #faebcc;
+}
+
+pincontainer row {
+  color: #66512c;
+}
+
+error item {
+  background-color: #ebccd1;
+}
+
+error item.selected {
+  background-color: #ccb1b6;
 }