Add details tab to WebUI certificate viewer.

The details view of the certificate viewer allows the user to explore all certificate fields in the hierarchy of certificates.

BUG=None
TEST=Tested that the certificate details can be navigated for all certificates in the hierarchy of a few https sites.


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

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

1 files changed, 48 insertions, 1 deletions

diff --git a/chrome/browser/resources/certificate_viewer.css b/chrome/browser/resources/certificate_viewer.css
index 553e8e3..4c61d41 100644
--- a/chrome/browser/resources/certificate_viewer.css
+++ b/chrome/browser/resources/certificate_viewer.css
@@ -1,9 +1,24 @@
+/* Using 100% width within body should exclude margins. */
+body {
+  position: relative;
+}
+
 .title {
   font-weight: bold;
   padding-top: 5px;
 }
 
-#usages {
+#tabbox {
+  -webkit-box-flex: 1;
+  width: 100%;
+}
+
+#tabpanels {
+  overflow: auto;
+}
+
+#usages,
+#certfieldvalue {
   -webkit-padding-start: 15px;
   padding-top: 5px;
   white-space: pre-wrap;
@@ -36,3 +51,35 @@
 .controls {
   text-align: end;
 }
+
+/* Used so that 100% width within tabpanel will correspond to usable space. */
+tabpanel {
+  position: relative;
+}
+
+.vbox {
+  -webkit-box-align: stretch;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: start;
+  display: -webkit-box;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+/* Scrolling should be enabled on all tree views and value field. */
+#hierarchy,
+#certfields,
+#certfieldvalue {
+  overflow: auto;
+}
+
+#hierarchy,
+#certfieldvalue {
+  -webkit-box-flex: 1;
+  min-height: 6em;
+}
+
+#certfields {
+  -webkit-box-flex: 3;
+}