logger: "bts" keyword to filter behind-the-scene events

src/css/logger-ui.css

@@ -83,10 +83,10 @@ input:focus {
     width: 2.5em;
     }
 #content table > colgroup > col:nth-of-type(4) {
-    width: 5em;
+    width: 5.5em;
     }
 #content table > colgroup > col:nth-of-type(5) {
-    width: calc(100% - 15.5em);
+    width: calc(100% - 16em);
     }
 #content table tr {
     background-color: #fafafa;
@@ -192,10 +192,8 @@ body.popupOn #popupContainer {
     display: block;
     }
 #popupContainer > div {
-    background: #444;
+    background: #888;
     border: 0;
-    border-bottom: 1px solid white;
-    height: 1.4em;
     }
 #popupContainer > div {
     text-align: right;
@@ -205,7 +203,7 @@ body.popupOn #popupContainer {
     cursor: pointer;
     display: inline-block;
     font: 14px FontAwesome;
-    padding: 1px 3px;
+    padding: 3px;
     }
 #popupContainer > div > span:hover {
     color: white;

src/js/logger-ui.js

@@ -40,6 +40,9 @@ var maxEntries = 0;
 var noTabId = '';
 var allTabIds = {};
 
+var emphasizeTemplate = document.querySelector('#emphasizeTemplate > span');
+var hiddenTemplate = document.querySelector('#hiddenTemplate > span');
+
 var prettyRequestTypes = {
     'main_frame': 'doc',
     'stylesheet': 'css',
@@ -127,8 +130,6 @@ var emphasizeHostname = function(url) {
     return node;
 };
 
-var emphasizeTemplate = document.querySelector('#emphasizeTemplate > span');
-
 /******************************************************************************/
 
 var createCellAt = function(tr, index) {
@@ -190,6 +191,14 @@ var createRow = function(layout) {
 
 /******************************************************************************/
 
+var createHiddenTextNode = function(text) {
+    var node = hiddenTemplate.cloneNode(true);
+    node.textContent = text;
+    return node;
+};
+
+/******************************************************************************/
+
 var createGap = function(tabId, url) {
     var tr = createRow('1');
     tr.classList.add('doc');
@@ -254,6 +263,7 @@ var renderLogEntry = function(entry) {
         tr.classList.add('tab');
         if ( entry.tab === noTabId ) {
             tr.classList.add('tab_bts');
+            tr.cells[1].appendChild(createHiddenTextNode('bts'));
         } else if ( entry.tab !== '' ) {
             tr.classList.add('tab_' + entry.tab);
         }

src/logger-ui.html

@@ -30,6 +30,7 @@
 
 <div style="display: none;">
     <div id="emphasizeTemplate"><span><span></span><b></b><span></span></span></div>
+    <div id="hiddenTemplate"><span style="display:none;"></span></div>
     </div>
 
 <script src="js/vapi-common.js"></script>