better table layout, emphasizing domains

js/stats.js

@@ -148,11 +148,19 @@ var renderPageDetails = function(tabId) {
                 chrome.i18n.getMessage(className + (requests.length ? 'RequestsHeader' : 'RequestsEmpty')),
                 '</h3>'
             );
+            var currentDomain = '';
             for ( var i = 0; i < requests.length; i++ ) {
                 request = requests[i];
+                if ( request.domain !== currentDomain ) {
+                    currentDomain = request.domain;
+                    html.push(
+                        '<tr class="', className, ' domainHeader">',
+                        '<td colspan="4">', currentDomain
+                    );
+                }
                 html.push(
-                    '<tr class="', className, '">',
-                    '<td>', request.domain,
+                    '<tr class="', className, ' requestEntry">',
+                    '<td>',
                     '<td>', toPrettyTypeNames[request.type] || request.type,
                     '<td>', renderURL(request.url, request.reason),
                     '<td>', request.reason || ''
@@ -198,6 +206,7 @@ var renderPageSelector = function(targetTabId) {
         }
     };
     var onDataReceived = function(pageSelectors) {
+        uDom('#requests').toggleClass('empty', pageSelectors.length === 0);
         uDom('#pageSelector option').remove();
         cachedPageSelectors = {};
         pageSelectors.sort().map(function(tabId) {
@@ -209,7 +218,6 @@ var renderPageSelector = function(targetTabId) {
         for ( var i = 0; i < pageSelectors.length; i++ ) {
             chrome.tabs.get(parseInt(pageSelectors[i], 10), onTabReceived);
         }
-        uDom('#requests').toggleClass('empty', pageSelectors.length === 0);
         if ( pageSelectors.length > 0 ) {
             renderPageDetails(selectedTabId);
         }

js/udom.js

@@ -388,20 +388,13 @@ DOMList.prototype.hasClassName = function(className) {
 };
 
 DOMList.prototype.addClass = function(className) {
-    var re = new RegExp('(^| )' + className + '( |$)');
-    var i = this.nodes.length;
-    var before, after;
-    while ( i-- ) {
-        before = this.nodes[i].className;
-        if ( !re.test(before) ) {
-            after = before + ' ' + className;
-            this.nodes[i].className = after.trim();
-        }
-    }
-    return this;
+    return this.toggleClass(className, true);
 };
 
-DOMList.prototype.removeClass = function() {
+DOMList.prototype.removeClass = function(className) {
+    if ( className !== undefined ) {
+        return this.toggleClass(className, false);
+    }
     var i = this.nodes.length;
     while ( i-- ) {
         this.nodes[i].className = '';

stats.html

@@ -34,7 +34,7 @@ select {
     }
 #requests table {
     margin: 1em 0;
-    border: 1px solid gray;
+    border: 0;
     font: 12px mono;
     border-collapse: collapse;
     min-width: 600px;
@@ -42,20 +42,28 @@ select {
 #requests.empty table {
     display: none;
     }
-td, th {
+tr td, tr th {
     border: 1px solid #aaa;
-    padding: 6px 6px;
+    padding: 4px 6px;
     white-space: pre;
     }
-td:nth-of-type(1), td:nth-of-type(2) {
+tr.domainHeader td {
+    font: 16px sans-serif;
+    }
+tr.domainHeader td span {
+    margin-right: 0.5em;
+    font-size: 14px;
+    color: #aaa;
+    cursor: pointer;
+    }
+tr.requestEntry td:nth-of-type(1) {
+    border: 0;
+    background-color: white;
+    width: 3em;
+    }
+tr.requestEntry td:nth-of-type(2) {
     text-align: right;
     }
-tr.header td:nth-of-type(1) {
-    text-align: left;
-    }
-td:nth-of-type(3) {
-    color: #444;
-    }
 table.hideBlocked tr.logBlocked {
     display: none;
     }
@@ -97,7 +105,7 @@ tr.logAllowed ~ tr td:nth-of-type(3) b {
 
 <table>
 <tr class="tableHeader">
-<th data-i18n="logRequestsHeaderDomain">
+<th>
 <th data-i18n="logRequestsHeaderType">
 <th data-i18n="logRequestsHeaderURL">
 <th data-i18n="logRequestsHeaderFilter">