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..fd86c472a76efb3f6fec5e4102ad7287740f5479 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 {
@@ -32,8 +31,42 @@ h3 {
   width: 100%;
 }
 
+#tabs {

[Evan Stade, 2013/06/04 17:56:28]

this doesn't seem right. You should do all this in tabs.css. If you don't want
to change all existing uses of tabs, you can do something like

tabs.new-style-tabs {
  ...
}

but I'd still put that in tabs.css.

[Rune Fevang, 2013/06/04 22:43:00]

Good idea! I didn't change tabs.css because I didn't want change the non-bubble
tab styles. I considered creating a new file and linking to that instead of
tabs.css, but didn't since this is the only place that I knew of that would use
it. I like your idea better though, done :)

+  -webkit-padding-start: 9px;
+  background: #fbfbfb;
+  border-bottom: 1px solid #c8c8c8;
+  padding-top: 14px;
+}
+
+#tabs > * {
+  -webkit-margin-start: 0;
+  -webkit-transition: none;
+  background: #fbfbfb;
+  border: 1px solid #fbfbfb;
+  border-bottom: 0;
+  border-radius: 0;
+  min-width: 0;
+  padding: 4px 9px 4px 10px;
+}
+
+#tabs > [selected] {
+  border-color: #c8c8c8;
+  font-weight: bold;
+}
+
+#tabs > :not([selected]) {
+  color: #646464;
+}
+
+#tabs > :not([selected]):hover {
+  color: black;
+}
+
 #tabpanels {
+  background: #fbfbfb;
+  box-shadow: none;
   overflow: auto;
+  padding: 0 20px;
 }
 
 #usages,
@@ -42,6 +75,11 @@ h3 {
   white-space: pre-wrap;
 }
 
+#general h3 {
+  margin-bottom: 16px;
+  margin-top: 32px;
+}
+
 .groups {
   display: table;
 }
@@ -50,9 +88,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 +137,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;
 }