Change Certificate Viewer WebUI to match new style.

chrome/browser/resources/certificate_viewer.css

Index: chrome/browser/resources/certificate_viewer.css
diff --git a/chrome/browser/resources/certificate_viewer.css b/chrome/browser/resources/certificate_viewer.css
index ac74efae637f326464cf407bebf2d5f3eae6eca7..d48a11ba4a4277a74af3a634ca511b09f3184f6e 100644
--- a/chrome/browser/resources/certificate_viewer.css
+++ b/chrome/browser/resources/certificate_viewer.css
@@ -12,19 +12,18 @@ body {
 body {
   -webkit-box-sizing: border-box;
   margin: 0;
-  padding-top: 8px;
 }
 
 h3 {
   font-size: 100%;
-  font-weight: bold;
-  margin-top: 20px;
+  margin-bottom: 15px;
+  margin-top: 17px;
 }
 
 #usages-title {
   /* Workaround until webkit bug https://bugs.webkit.org/show_bug.cgi?id=80537
    * is resolved. */
-  padding-top: 20px;
+  padding-top: 17px;
 }
 
 #tabbox {
@@ -42,6 +41,11 @@ h3 {
   white-space: pre-wrap;
 }
 
+#general h3 {
+  margin-bottom: 16px;
+  margin-top: 32px;
+}
+
 .groups {
   display: table;
 }
@@ -50,9 +54,11 @@ h3 {
   display: table-row;
 }
 
+#usages,
 .groups > div > div {
-  -webkit-padding-start: 15px;
-  padding-top: 3px;
+  -webkit-padding-start: 20px;
+  color: #787878;
+  line-height: 18px;
 }
 
 .attribute {
@@ -97,13 +103,26 @@ tabpanel {
 
 .section-contents {
   -webkit-box-flex: 1;
-  border: 1px solid #9e9e9e;
+  background: #fff;
+  border: 1px solid #c8c8c8;
   /* Scrolling should be enabled on all tree views and value field. */
   overflow: auto;
 }
 
+.tree-row[selected] {
+  background-color: #f0f0f0;
+  background-image: none;
+}
+
+.tree-item > .tree-row {
+  border: 0;
+  border-radius: 0;
+  line-height: 29px;
+}
+
 #export {
   -webkit-margin-start: 1px;
-  margin-bottom: 10px;
-  margin-top: 5px;
+  float: right;
+  margin-bottom: 20px;
+  margin-top: 10px;
 }