UI polish for certificate viewer.

Identical to this CL http://codereview.chromium.org/8479042/
Fix base URL problem. All comments about the changes are in the above URL.

This CL makes certificate viewer for chromeos looks like the screen shot posted
in issue 102511. It hacks bubble_frame_view.cc to get rid of the body padding
and add a x button in the title area.

It should not affect the appearance of any other html dialogs.

BUG=102511
TEST=Go to https://www.google.com; Click the locker icon on the left side of URL in the omnibox and click "certificate information". For screenshots, see http://code.google.com/p/chromium/issues/detail?id=102511


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

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

chrome/browser/chromeos/frame/bubble_frame_view.cc

@@ -140,7 +140,7 @@ void BubbleFrameView::UpdateWindowIcon() {
 }
 
 gfx::Insets BubbleFrameView::GetInsets() const {
-  return (style_ & STYLE_FLUSH) ?
+  return (style_ & STYLE_FLUSH || style_ & STYLE_FLUSH_CONTENT) ?
          gfx::Insets() :
          gfx::Insets(kTitleTopPadding,
                      kHorizontalPadding,
@@ -168,27 +168,49 @@ void BubbleFrameView::Layout() {
   if (throbber_)
     throbber_size = throbber_->GetPreferredSize();
 
+  // Need to center elements which are shorter.
+  int max_height = std::max(title_size.height(),
+                            std::max(close_button_size.height(),
+                                     throbber_size.height()));
+
+  gfx::Insets title_insets = gfx::Insets();
+  // Need to insert title padding for STYLE_FLUSH_CONTENT.
+  if (style_ & STYLE_FLUSH_CONTENT)
+    title_insets = gfx::Insets(kTitleTopPadding,
+                               kHorizontalPadding,
+                               0,
+                               kHorizontalPadding);
+
   if (title_) {
     title_->SetBounds(
-        insets.left(), insets.top(),
-        std::max(0, width() - insets.width() - close_button_size.width()),
+        insets.left() + title_insets.left(),
+        insets.top() + title_insets.top() +
+            (max_height - title_size.height())/2, // Center.
+        std::max(0, width() - insets.width() - title_insets.width() -
+            close_button_size.width()),
         title_size.height());
   }
 
   if (close_button_) {
     close_button_->SetBounds(
-        width() - insets.right() - close_button_size.width(), insets.top(),
-        close_button_size.width(), close_button_size.height());
+        width() - insets.right() - title_insets.right() -
+            close_button_size.width(),
+        insets.top() + title_insets.top() +
+            (max_height - close_button_size.height())/2,
+        close_button_size.width(),
+        close_button_size.height());
   }
 
   if (throbber_) {
     throbber_->SetBounds(
-        insets.left(), insets.top(),
+        insets.left() + title_insets.left(),
+        insets.top() + title_insets.top() +
+            (max_height - throbber_size.height())/2,
         std::min(throbber_size.width(), width()),
         throbber_size.height());
   }
 
-  int top_height = insets.top();
+  int top_height = insets.top() + title_insets.top();
   if (title_size.height() > 0 ||
       close_button_size.height() > 0 ||
       throbber_size.height() > 0) {

chrome/browser/resources/certificate_viewer.css

@@ -2,6 +2,7 @@
 body {
   bottom: 0;
   left: 0;
+  margin: 8px 0 0 0;
   position: absolute;
   right: 0;
   top: 0;
@@ -54,10 +55,6 @@ body {
   white-space: pre-wrap;
 }
 
-.controls {
-  text-align: end;
-}
-
 /* Used so that 100% width within tabpanel will correspond to usable space. */
 tabpanel {
   position: relative;
@@ -90,7 +87,13 @@ tabpanel {
 
 .section-contents {
   -webkit-box-flex: 1;
-  border: 1px solid black;
+  border: 1px solid #9e9e9e;
   /* Scrolling should be enabled on all tree views and value field. */
   overflow: auto;
 }
+
+#export {
+  -webkit-margin-start: 1px;
+  margin-bottom: 10px;
+  margin-top: 5px;
+}

chrome/browser/resources/certificate_viewer.html

@@ -110,9 +110,6 @@
           </tabpanel>
         </tabpanels>
       </tabbox>
-      <div class="controls">
-        <button id="close" i18n-content="close"></button>
-      </div>
     </div>
   </body>
 </html>

chrome/browser/resources/certificate_viewer.js

@@ -10,9 +10,6 @@ cr.define('cert_viewer', function() {
    * substituting in translated strings and requesting certificate details.
    */
   function initialize() {
-    $('close').onclick = function() {
-      window.close();
-    }
     $('export').onclick = exportCertificate;
     cr.ui.decorate('tabbox', cr.ui.TabBox);
 

chrome/browser/resources/shared/css/tabs.css

@@ -4,6 +4,7 @@ tabbox {
 }
 
 tabs {
+  -webkit-padding-start: 8px;
   display: -webkit-box;
   background: -webkit-linear-gradient(white, rgb(243, 243, 243));
   border-bottom: 1px solid rgb(160, 160, 160);
@@ -25,8 +26,12 @@ tabs > * {
   text-align: center;
 }
 
+tabs > :not([selected]) {
+  background: rgba(238, 238, 238, .3);
+}
+
 tabs > :not([selected]):hover {
-  background: rgba(200, 200, 200, .3);
+  background: rgba(247, 247, 247, .3);
 }
 
 tabs > [selected] {
@@ -51,10 +56,8 @@ tabpanels {
   -webkit-box-flex: 1;
   background: white;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
-  border: 1px solid rgb(160, 160, 160);
-  border-top: 0;
   display: -webkit-box;
-  padding: 5px;
+  padding: 5px 15px 0 15px;
 }
 
 tabpanels > * {

chrome/browser/ui/dialog_style.h

@@ -24,8 +24,11 @@ enum DialogStyle {
   // Deprecated, see BubbleWindow::Create().
   STYLE_THROBBER = 1 << 1,
 
-  // Content flush to edge, no padding.
-  STYLE_FLUSH = 1 << 2
+  // Content and title flush to edge, no padding.
+  STYLE_FLUSH = 1 << 2,
+
+  // Content flush to edge. Padding only on title.
+  STYLE_FLUSH_CONTENT = 1 << 3
 #endif
 
 };

chrome/browser/ui/webui/certificate_viewer_webui.cc

@@ -15,6 +15,7 @@
 #include "chrome/browser/ui/browser_dialogs.h"
 #include "chrome/browser/ui/browser_list.h"
 #include "chrome/browser/ui/certificate_dialogs.h"
+#include "chrome/browser/ui/dialog_style.h"
 #include "chrome/browser/ui/webui/chrome_web_ui.h"
 #include "chrome/common/net/x509_certificate_model.h"
 #include "chrome/common/url_constants.h"
@@ -83,10 +84,15 @@ void CertificateViewerDialog::Show(gfx::NativeWindow parent) {
 #if defined(USE_AURA)
   TabContentsWrapper* current_wrapper =
       browser->GetSelectedTabContentsWrapper();
+  // TODO(bshe): UI tweaks needed for AURA html Dialog, such as add padding on
+  // title for AURA ConstrainedHtmlDialog.
   window_ = ConstrainedHtmlUI::CreateConstrainedHtmlDialog(
       current_wrapper->profile(),
       this,
       current_wrapper)->window()->GetNativeWindow();
+#elif defined(OS_CHROMEOS)
+  window_ = browser->BrowserShowHtmlDialog(this, parent,
+      static_cast<DialogStyle>(STYLE_XBAR | STYLE_FLUSH_CONTENT));
 #else
   window_ = browser->BrowserShowHtmlDialog(this, parent, STYLE_GENERIC);
 #endif