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

lib/models.py

@@ -359,6 +359,7 @@ class Message(db.Model):
       'sender':            str(Message.sender.get_value_for_datastore(self)),
       'subject':           self.parent().ToDict(),
       'created':           self.created,
+      'sender_message_id': self.sender_message_id,
       'message':           self.message,
     }
 
@@ -379,6 +380,7 @@ class Pin(db.Model):
       'sender':            str(Pin.sender.get_value_for_datastore(self)),
       'subject':           self.parent().ToDict(),
       'created':           self.created,
+      'sender_message_id': self.sender_message_id,
       'message':           self.message,
     }
 

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;
 }
@@ -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);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  min-height: 60px;
+  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;
 }

static/debug.html

@@ -1,32 +1,88 @@
 <html>
   <head>
-    <script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
     <link rel="stylesheet" type="text/css" href="debug.css">
+    <script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
+    <script src="debug.js" charset="UTF-8"></script>
   </head>
   <body>
     <container>
       <subjectcontainer class="verticalcontainer">
+        <status class="panel fixed">
+          <panelheading>Status</panelheading>
+          <row>
+            <label>Connection status:</label>
+            <value id="connectionStatus"></value>
+          </row>
+          <row>
+            <label>Login status:</label>
+            <value id="loginStatus"></value>
+          </row>
+          <row>
+            <label>Username:</label>
+            <value id="username"></value>
+          </row>
+          <row>
+            <label>Login action:</label>
+            <value id="loginAction"></value>
+          </row>
+        </status>
         <subjectlist class="panel">
           <panelheading>Subjects</panelheading>
+	        <panelbody id="subjectList"></panelbody>
         </subjectlist>
         <subscribe class="panel fixed">
           <panelheading>Subscribe</panelheading>
+          <panelbody>
+            <row>
+              <label>Name:</label>
+              <input type="text" id="subjectName">
+            </row>
+            <row>
+              <label>Read:</label>
+              <select id="readID">
+                <option>(all)</option>
+                <option>me</option>
+              </select>
+              <label>Write:</label>
+              <select id="writeID">
+                <option>(all)</option>
+                <option>me</option>
+              </select>
+            </row>
+            <row>
+              <button id="subscribe">Subscribe</button>
+            </row>
+          </panelbody>
         </subscribe">
       </subjectcontainer>
       <messagecontainer class="verticalcontainer">
         <messagelist class="panel">
           <panelheading>Messages</panelheading>
+	        <panelbody id="messageList"></panelbody>
         </messagelist>
         <sendmessage class="panel fixed">
           <panelheading>Send Message</panelheading>
+	        <panelbody>
+            <row>
+              <input type="text" id="messageText">
+              <button id="sendMessage">Send</button>
+            </row>
+	        </panelbody>
         </sendmessage>
       </messagecontainer>
       <pincontainer class="verticalcontainer">
         <pinlist class="panel">
           <panelheading>Pins</panelheading>
+	        <panelbody id="pinList"></panelbody>
         </pinlist>
         <pin class="panel fixed">
           <panelheading>Pin</panelheading>
+          <panelbody>
+            <row>
+              <input type="text" id="pinText">
+              <button id="pin">Pin</button>
+            </row>
+          </panelbody>
         </pin>
       </pincontainer>
     </container>

static/debug.js

@@ -0,0 +1,273 @@
+var cosmo;
+var elements = {};
+var selectedSubject = null;
+var pins = {};
+var senders = {};
+
+var onReady = function() {
+  var elementIDs = [
+    'connectionStatus',
+    'loginAction',
+    'loginStatus',
+    'messageList',
+    'messageText',
+    'pinList',
+    'pinText',
+    'readID',
+    'subjectList',
+    'subjectName',
+    'username',
+    'writeID'
+  ];
+  for (var i = 0; i < elementIDs.length; i++) {
+    elements[elementIDs[i]] = document.getElementById(elementIDs[i]);
+  }
+
+  var callbacks = {
+    'onConnect': onConnect,
+    'onDisconnect': onDisconnect,
+    'onLogin': onLogin,
+    'onLogout': onLogout,
+    'onMessage': onMessage,
+    'onPin': onPin,
+    'onUnpin': onUnpin,
+  }
+  cosmo = new Cosmopolite(callbacks);
+
+  document.getElementById('pin').addEventListener('click', pin);
+  document.getElementById('sendMessage').addEventListener('click', sendMessage);
+  document.getElementById('subscribe').addEventListener('click', subscribe);
+};
+
+document.addEventListener('DOMContentLoaded', onReady);
+
+var onConnect = function() {
+  elements['connectionStatus'].innerHTML = '';
+  elements['connectionStatus'].appendChild(
+      document.createTextNode('Connected'));
+};
+
+var onDisconnect = function() {
+  elements['connectionStatus'].innerHTML = '';
+  elements['connectionStatus'].appendChild(
+      document.createTextNode('Disconnected'));
+};
+
+var onLogin = function(username, logout_url) {
+  elements['loginStatus'].innerHTML = '';
+  elements['loginStatus'].appendChild(document.createTextNode('Logged in'));
+
+  elements['username'].innerHTML = '';
+  elements['username'].appendChild(document.createTextNode(username));
+
+  elements['loginAction'].innerHTML = '';
+  var link = document.createElement('a');
+  link.href = logout_url;
+  link.target = '_blank';
+  link.appendChild(document.createTextNode('Log out'));
+  elements['loginAction'].appendChild(link);
+};
+
+var onLogout = function(login_url) {
+  elements['loginStatus'].innerHTML = '';
+  elements['loginStatus'].appendChild(
+      document.createTextNode('Not logged in'));
+
+  elements['username'].innerHTML = '';
+
+  elements['loginAction'].innerHTML = '';
+  var link = document.createElement('a');
+  link.href = login_url;
+  link.target = '_blank';
+  link.appendChild(document.createTextNode('Log in'));
+  elements['loginAction'].appendChild(link);
+};
+
+var onMessage = function(msg) {
+  addToList(msg, elements['messageList']);
+};
+
+var onPin = function(msg) {
+  var item = addToList(msg, elements['pinList'], pins);
+  if (msg['sender'] == cosmo.currentProfile()) {
+    item.addEventListener('contextmenu', deletePin);
+  }
+};
+
+var onUnpin = function(msg) {
+  var item = pins[msg['id']];
+  item.parentNode.removeChild(item);
+};
+
+var selectSubject = function() {
+  if (selectedSubject == this) {
+    return;
+  }
+  if (selectedSubject) {
+    selectedSubject.className = '';
+  }
+  this.className = 'selected';
+  selectedSubject = this;
+
+  elements['messageList'].innerHTML = '';
+  cosmo.getMessages(this.subject).forEach(onMessage);
+
+  elements['pinList'].innerHTML = '';
+  cosmo.getPins(this.subject).forEach(onPin);
+};
+
+var addToList = function(msg, list, trackobj) {
+  if (selectedSubject && (
+        msg['subject']['name'] != selectedSubject.subject['name'] ||
+        msg['subject']['readable_only_by'] !=
+          selectedSubject.subject['readable_only_by'] ||
+        msg['subject']['writable_only_by'] !=
+          selectedSubject.subject['writable_only_by'])) {
+    return;
+  }
+
+  var item = document.createElement('item');
+  item.message = msg;
+
+  {
+    var row = document.createElement('row');
+    row.appendChild(document.createTextNode('Sender: '));
+    row.appendChild(document.createTextNode(senderID(msg)));
+    item.appendChild(row);
+  }
+  {
+    var row = document.createElement('row');
+    row.appendChild(document.createTextNode('Created: '));
+    row.appendChild(document.createTextNode(
+          (new Date(msg['created'] * 1000)).toString()));
+    item.appendChild(row);
+  }
+  item.appendChild(document.createTextNode(msg['message']));
+
+  list.insertBefore(item, list.firstChild);
+
+  if (trackobj) {
+    trackobj[msg['id']] = item;
+  }
+
+  return item;
+};
+
+var deletePin = function(e) {
+  cosmo.unpin(this.message['sender_message_id']);
+  e.preventDefault();
+};
+
+var deleteSubject = function(e) {
+  cosmo.unsubscribe(this.subject);
+  if (selectedSubject == this) {
+    selectedSubject = null;
+    elements['messageList'].innerHTML = '';
+    elements['pinList'].innerHTML = '';
+  }
+  this.parentNode.removeChild(this);
+  e.preventDefault();
+};
+
+var addSubject = function(subject, error) {
+  var item = document.createElement('item');
+  item.subject = subject;
+
+  item.appendChild(document.createTextNode(subject['name']));
+
+  {
+    var row = document.createElement('row');
+    row.appendChild(document.createTextNode('Read: '));
+    row.appendChild(
+        document.createTextNode(elements['readID'].selectedOptions[0].text));
+    item.appendChild(row);
+  }
+
+  {
+    var row = document.createElement('row');
+    row.appendChild(document.createTextNode('Write: '));
+    row.appendChild(
+      document.createTextNode(elements['writeID'].selectedOptions[0].text));
+    item.appendChild(row);
+  }
+
+  item.addEventListener('click', selectSubject);
+  item.addEventListener('contextmenu', deleteSubject);
+  if (error) {
+    var error = document.createElement('error');
+    error.appendChild(item);
+    elements['subjectList'].appendChild(error);
+  } else {
+    elements['subjectList'].appendChild(item);
+  }
+
+  if (!selectedSubject) {
+    selectSubject.bind(item)();
+  }
+};
+
+var subscribe = function() {
+  var subject = {
+    'name': elements['subjectName'].value
+  };
+  if (elements['readID'].value != '(all)') {
+    var value = elements['readID'].value;
+    if (value == 'me') {
+      value = cosmo.currentProfile();
+    }
+    subject['readable_only_by'] = value;
+  }
+  if (elements['writeID'].value != '(all)') {
+    var value = elements['writeID'].value;
+    if (value == 'me') {
+      value = cosmo.currentProfile();
+    }
+    subject['writable_only_by'] = value;
+  }
+  cosmo.subscribe(subject, -1).then(function() {
+    addSubject(subject);
+  }, function() {
+    addSubject(subject, true);
+  });
+};
+
+var sendMessage = function() {
+  if (!selectedSubject) {
+    alert('Please select a subject.');
+    return;
+  }
+  cosmo.sendMessage(selectedSubject.subject, elements['messageText'].value);
+  elements['messageText'].value = '';
+};
+
+var pin = function() {
+  if (!selectedSubject) {
+    alert('Please select a subject.');
+    return;
+  }
+  cosmo.pin(selectedSubject.subject, elements['pinText'].value);
+  elements['pinText'].value = '';
+};
+
+var senderID = function(msg) {
+  var id = Math.abs(msg['sender'].hashCode() % 1000000);
+  if (msg['sender'] == cosmo.currentProfile()) {
+    return 'me';
+  }
+  if (!senders[id]) {
+    senders[id] = msg['sender'];
+    {
+      var option = document.createElement('option');
+      option.value = msg['sender'];
+      option.appendChild(document.createTextNode(id));
+      elements['readID'].appendChild(option);
+    }
+    {
+      var option = document.createElement('option');
+      option.value = msg['sender'];
+      option.appendChild(document.createTextNode(id));
+      elements['writeID'].appendChild(option);
+    }
+  }
+  return id;
+};