Aesthetic change to about:net-internals -- make the tables look less ugly by collapsing the border.

TBR=willchan

Review URL: http://codereview.chromium.org/1987010

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@46893 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 21 insertions, 3 deletions

diff --git a/chrome/browser/resources/net_internals/index.html b/chrome/browser/resources/net_internals/index.html
index 0c2a336..2977ba0 100644
--- a/chrome/browser/resources/net_internals/index.html
+++ b/chrome/browser/resources/net_internals/index.html
@@ -50,7 +50,7 @@ found in the LICENSE file.
         Proxies which have failed recently, and are marked as bad
         <input type=button value="Clear bad proxies" id=clearBadProxies />
       </h4>
-      <table border=1>
+      <table class="styledTable">
         <thead>
           <tr>
             <th>Bad proxy server</th>
@@ -74,7 +74,7 @@ found in the LICENSE file.
             <span id=hostResolverCacheTTLFailure></span></li>
       </ul>
 
-      <table border=1>
+      <table class="styledTable">
         <thead>
           <tr>
             <th>Hostname</th>
diff --git a/chrome/browser/resources/net_internals/main.css b/chrome/browser/resources/net_internals/main.css
index a831ca8..74a0c28 100644
--- a/chrome/browser/resources/net_internals/main.css
+++ b/chrome/browser/resources/net_internals/main.css
@@ -201,3 +201,21 @@ body {
 #proxyTabContent th {
   font-size: 12px;
 }
+
+/*
+ * Styles for TABLE that uses a thin collapsed border.
+ */
+table.styledTable {
+  border-collapse:collapse;
+}
+
+table.styledTable,
+.styledTable th,
+.styledTable td {
+  border: 1px solid #777;
+}
+
+.styledTable th {
+  background: rgb(224,236,255);
+}
+
diff --git a/chrome/browser/resources/net_internals/testview.js b/chrome/browser/resources/net_internals/testview.js
index e721606..17be709 100644
--- a/chrome/browser/resources/net_internals/testview.js
+++ b/chrome/browser/resources/net_internals/testview.js
@@ -42,7 +42,7 @@ TestView.prototype.onStartedConnectionTestSuite = function() {
 
   // Add a table that will hold the individual test results.
   var table = addNode(this.summaryDiv_, 'table');
-  table.border = 1;
+  table.className = 'styledTable';
   var thead = addNode(table, 'thead');
   thead.innerHTML = '<tr><th>Result</th><th>Experiment</th>' +
                     '<th>Error</th><th>Time (ms)</th></tr>';