Redesign GUI of Website Setting Popup Dialog

Implement the new design of SSL certificate dialog. Remove underline in hyperlink textview and add paddings around textviews. Refer to https://drive.google.com/a/google.com/file/d/0B6x6iYCtKinEUElmYWRWVlh5RlE/view for design specification.

BUG=394564

Review URL: https://codereview.chromium.org/409003002

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

chrome/android/java/res/layout/website_settings.xml

 <?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (c) 2013 The Chromium Authors. All rights reserved.
+<!--
+   Copyright (c) 2013 The Chromium Authors. All rights reserved.
 
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file.
 -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              android:orientation="horizontal"
-              android:layout_width="match_parent"
-              android:layout_height="match_parent"
-              android:paddingTop="@dimen/certificate_viewer_padding"
-              android:paddingBottom="@dimen/certificate_viewer_padding">
-  <ImageView android:id="@+id/website_settings_icon"
-             android:layout_width="wrap_content"
-             android:layout_height="wrap_content"
-             android:paddingStart="@dimen/certificate_viewer_padding"/>
-  <LinearLayout android:orientation="vertical"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:paddingStart="@dimen/certificate_viewer_padding"
-                android:paddingEnd="@dimen/certificate_viewer_padding">
-    <TextView android:id="@+id/website_settings_headline"
-              android:layout_width="wrap_content"
-              android:layout_height="wrap_content"
-              android:textStyle="bold"/>
-    <TextView android:id="@+id/website_settings_description"
-              android:layout_width="wrap_content"
-              android:layout_height="wrap_content"/>
-  </LinearLayout>
-</LinearLayout>
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="horizontal" >
+
+    <ImageView
+        android:id="@+id/website_settings_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content" />
+
+    <LinearLayout
+        android:id="@+id/website_settings_text_layout"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:paddingStart="@dimen/certificate_viewer_padding_thin" >
+
+        <TextView
+            android:id="@+id/website_settings_headline"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:paddingBottom="@dimen/certificate_viewer_padding_thin"
+            android:textStyle="bold" />
+
+        <TextView
+            android:id="@+id/website_settings_description"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" />
+    </LinearLayout>
+
+</LinearLayout>
\ No newline at end of file

chrome/android/java/res/values/colors.xml

@@ -28,4 +28,7 @@
     <color name="app_banner_install_button_fg">#ffffff</color>
     <color name="app_banner_open_button_fg">#777777</color>
     <color name="app_banner_card_highlight">#33999999</color>
+
+    <!--  Website Settings Popup colors -->
+    <color name="website_settings_popup_text_link">#5595fe</color>
 </resources>

chrome/android/java/res/values/dimens.xml

@@ -6,7 +6,8 @@
 
 <resources>
     <!-- Certificate Viewer Dimensions -->
-    <dimen name="certificate_viewer_padding">20dp</dimen>
+    <dimen name="certificate_viewer_padding_wide">24dp</dimen>
+    <dimen name="certificate_viewer_padding_thin">16dp</dimen>
 
     <!-- Accessibility tab switcher -->
     <dimen name="accessibility_tab_height">65dp</dimen>

chrome/android/java/src/org/chromium/chrome/browser/CertificateViewer.java

@@ -56,7 +56,7 @@ class CertificateViewer implements OnItemSelectedListener {
         mViews = new ArrayList<LinearLayout>();
         mTitles = new ArrayList<String>();
         mPadding = (int) context.getResources().getDimension(
-                R.dimen.certificate_viewer_padding) / 2;
+                R.dimen.certificate_viewer_padding_wide) / 2;
     }
 
     // Show information about an array of DER-encoded data representing a X509 certificate chain.

chrome/android/java/src/org/chromium/chrome/browser/WebsiteSettingsPopup.java

@@ -10,12 +10,11 @@ import android.content.DialogInterface;
 import android.content.Intent;
 import android.graphics.Color;
 import android.provider.Browser;
-import android.text.Html;
 import android.text.TextUtils;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.View.OnClickListener;
-import android.view.ViewGroup.LayoutParams;
+import android.view.ViewGroup;
 import android.view.Window;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
@@ -35,12 +34,14 @@ import java.net.URISyntaxException;
 public class WebsiteSettingsPopup implements OnClickListener {
     private static final String HELP_URL =
             "http://www.google.com/support/chrome/bin/answer.py?answer=95617";
+    private static final int DESCRIPTION_TEXT_SIZE_SP = 12;
     private final Context mContext;
     private final Dialog mDialog;
     private final LinearLayout mContainer;
     private final WebContents mWebContents;
-    private final int mPadding;
+    private final int mPaddingWide, mPaddingThin;
     private TextView mCertificateViewer, mMoreInfoLink;
+    private ViewGroup mCertificateLayout, mDescriptionLayout;
     private String mLinkUrl;
 
     private WebsiteSettingsPopup(Context context, WebContents webContents) {
@@ -49,8 +50,13 @@ public class WebsiteSettingsPopup implements OnClickListener {
 
         mContainer = new LinearLayout(mContext);
         mContainer.setOrientation(LinearLayout.VERTICAL);
-        mPadding = (int) context.getResources().getDimension(R.dimen.certificate_viewer_padding);
-        mContainer.setPadding(mPadding, 0, mPadding, 0);
+        mContainer.setBackgroundColor(Color.WHITE);
+        mPaddingWide = (int) context.getResources().getDimension(
+                R.dimen.certificate_viewer_padding_wide);
+        mPaddingThin = (int) context.getResources().getDimension(
+                R.dimen.certificate_viewer_padding_thin);
+        mContainer.setPadding(mPaddingWide, mPaddingWide + mPaddingThin, mPaddingWide,
+                mPaddingWide);
 
         mDialog = new Dialog(mContext);
         mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
@@ -76,9 +82,33 @@ public class WebsiteSettingsPopup implements OnClickListener {
         });
     }
 
-    /** Adds a section, which contains an icon, a headline, and a description. */
+    /**
+     * Adds certificate section, which contains an icon, a headline, a
+     * description and a label for certificate info link.
+     */
+    @CalledByNative
+    private void addCertificateSection(int enumeratedIconId, String headline, String description,
+            String label) {
+        View section = addSection(enumeratedIconId, headline, description);
+        assert mCertificateLayout == null;
+        mCertificateLayout = (ViewGroup) section.findViewById(R.id.website_settings_text_layout);
+        if (label != null && !label.isEmpty()) {
+            setCertificateViewer(label);
+        }
+    }
+
+    /**
+     * Adds Description section, which contains an icon, a headline, and a
+     * description. Most likely headline for description is empty
+     */
     @CalledByNative
-    private void addSection(int enumeratedIconId, String headline, String description) {
+    private void addDescriptionSection(int enumeratedIconId, String headline, String description) {
+        View section = addSection(enumeratedIconId, headline, description);
+        assert mDescriptionLayout == null;
+        mDescriptionLayout = (ViewGroup) section.findViewById(R.id.website_settings_text_layout);
+    }
+
+    private View addSection(int enumeratedIconId, String headline, String description) {
         View section = LayoutInflater.from(mContext).inflate(R.layout.website_settings, null);
         ImageView i = (ImageView) section.findViewById(R.id.website_settings_icon);
         int drawableId = ResourceId.mapToDrawableId(enumeratedIconId);
@@ -90,29 +120,23 @@ public class WebsiteSettingsPopup implements OnClickListener {
 
         TextView d = (TextView) section.findViewById(R.id.website_settings_description);
         d.setText(description);
+        d.setTextSize(DESCRIPTION_TEXT_SIZE_SP);
         if (TextUtils.isEmpty(description)) d.setVisibility(View.GONE);
 
         mContainer.addView(section);
+        return section;
     }
 
-    /** Adds a horizontal dividing line to separate sections. */
-    @CalledByNative
-    private void addDivider() {
-        View divider = new View(mContext);
-        final int dividerHeight = (int) (2 * mContext.getResources().getDisplayMetrics().density);
-        divider.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, dividerHeight));
-        divider.setBackgroundColor(Color.GRAY);
-        mContainer.addView(divider);
-    }
-
-    @CalledByNative
     private void setCertificateViewer(String label) {
         assert mCertificateViewer == null;
-        mCertificateViewer =  new TextView(mContext);
-        mCertificateViewer.setText(Html.fromHtml("<a href='#'>" + label + "</a>"));
+        mCertificateViewer = new TextView(mContext);
+        mCertificateViewer.setText(label);
+        mCertificateViewer.setTextColor(
+                mContext.getResources().getColor(R.color.website_settings_popup_text_link));
+        mCertificateViewer.setTextSize(DESCRIPTION_TEXT_SIZE_SP);
         mCertificateViewer.setOnClickListener(this);
-        mCertificateViewer.setPadding(0, 0, 0, mPadding);
-        mContainer.addView(mCertificateViewer);
+        mCertificateViewer.setPadding(0, mPaddingWide, 0, mPaddingWide);
+        mCertificateLayout.addView(mCertificateViewer);
     }
 
     @CalledByNative
@@ -124,10 +148,13 @@ public class WebsiteSettingsPopup implements OnClickListener {
     private void addUrl(String label, String url) {
         mMoreInfoLink = new TextView(mContext);
         mLinkUrl = url;
-        mMoreInfoLink.setText(Html.fromHtml("<a href='#'>" + label + "</a>"));
-        mMoreInfoLink.setPadding(0, mPadding, 0, mPadding);
+        mMoreInfoLink.setText(label);
+        mMoreInfoLink.setTextColor(
+                mContext.getResources().getColor(R.color.website_settings_popup_text_link));
+        mMoreInfoLink.setTextSize(DESCRIPTION_TEXT_SIZE_SP);
+        mMoreInfoLink.setPadding(0, mPaddingWide + mPaddingThin, 0, mPaddingWide);
         mMoreInfoLink.setOnClickListener(this);
-        mContainer.addView(mMoreInfoLink);
+        mDescriptionLayout.addView(mMoreInfoLink);
     }
 
     /** Displays the WebsiteSettingsPopup. */

chrome/browser/ui/android/website_settings_popup_android.cc

@@ -125,17 +125,15 @@ void WebsiteSettingsPopupAndroid::SetIdentityInfo(
 
     ScopedJavaLocalRef<jstring> description = ConvertUTF8ToJavaString(
         env, identity_info.identity_status_description);
-    Java_WebsiteSettingsPopup_addSection(env, popup_jobject_.obj(), icon_id,
-        ConvertUTF8ToJavaString(env, headline).obj(), description.obj());
-
     base::string16 certificate_label =
-        l10n_util::GetStringUTF16(IDS_PAGEINFO_CERT_INFO_BUTTON);
-    if (!certificate_label.empty()) {
-      Java_WebsiteSettingsPopup_setCertificateViewer(env, popup_jobject_.obj(),
-          ConvertUTF16ToJavaString(env, certificate_label).obj());
-    }
-
-    Java_WebsiteSettingsPopup_addDivider(env, popup_jobject_.obj());
+            l10n_util::GetStringUTF16(IDS_PAGEINFO_CERT_INFO_BUTTON);
+    Java_WebsiteSettingsPopup_addCertificateSection(
+        env,
+        popup_jobject_.obj(),
+        icon_id,
+        ConvertUTF8ToJavaString(env, headline).obj(),
+        description.obj(),
+        ConvertUTF16ToJavaString(env, certificate_label).obj());
   }
 
   {
@@ -145,10 +143,8 @@ void WebsiteSettingsPopupAndroid::SetIdentityInfo(
 
     ScopedJavaLocalRef<jstring> description = ConvertUTF8ToJavaString(
         env, identity_info.connection_status_description);
-    Java_WebsiteSettingsPopup_addSection(env, popup_jobject_.obj(), icon_id,
-        NULL, description.obj());
-
-    Java_WebsiteSettingsPopup_addDivider(env, popup_jobject_.obj());
+    Java_WebsiteSettingsPopup_addDescriptionSection(
+        env, popup_jobject_.obj(), icon_id, NULL, description.obj());
   }
 
   Java_WebsiteSettingsPopup_addMoreInfoLink(env, popup_jobject_.obj(),