Adding a close button on tabs

chromesoul.css

@@ -161,9 +161,9 @@ body {
 }
 
 #tab-lst > li {
-    display: inline;
+    display: inline-block;
     margin: 0;
-    padding: 2px 20px 2px 20px;
+    padding: 2px 0px 2px 20px;
     color: #f3f3f3;
     cursor: pointer;
     background-color: #6c9ec0;
@@ -171,6 +171,11 @@ body {
     border-left: 1px solid #347db0;
 }
 
+#tab-lst > li > span {
+    display: inline-block;
+    margin-right: 15px;
+}
+
 #tab-lst > li > span::selection {
     background: transparent;
 }
@@ -184,13 +189,19 @@ body {
     color: #c43434;
 }
 
+.close-tab {
+    float: right;
+    margin: 3px 3px 0 0;
+    cursor: pointer;
+}
+
 
 /*
  * Chat
  */
 
 #tab-body-wrapper {
-    margin: 2px 1px;
+    margin: 0px 1px;
     padding: 0;
     height: calc(100% - 20px);
     height: -webkit-calc(100% - 20px);

lib/tab.nsui.js

@@ -31,15 +31,24 @@ Tab.prototype.filterName = function(name) {
 };
 
 Tab.prototype.initListElement = function() {
-    var inner = document.createElement("span");
+    var inner = document.createElement("span"), close = document.createElement("img");
 
+    close.src = "img/delcontact.png";
+    close.alt = "x";
+    close.title = "Close tab";
+    close.classList.add("close-tab");
     inner.innerHTML = this.name;
     this.el_lst = document.createElement("li");
-    this.el_lst.addEventListener("click", (function(elem) {
+    inner.addEventListener("click", (function(elem) {
         return function() {
             elem.show();
         };
     })(this), false);
+    close.addEventListener("click", (function(elem) {
+        return function() {
+            elem.close();
+        };
+    })(this), false);
     this.el_lst.addEventListener("dblclick", (function(elem) {
         return function() {
             elem.close();
@@ -47,6 +56,7 @@ Tab.prototype.initListElement = function() {
     })(this), false);
 
     this.el_lst.appendChild(inner);
+    this.el_lst.appendChild(close);
     this.wr_lst.appendChild(this.el_lst);
 };