Bug 885962 - Polish mixed content blocking UI. r=sriram

mobile/android/base/DoorHanger.java

@@ -12,6 +12,7 @@ import org.json.JSONException;
 import org.json.JSONObject;
 
 import android.content.Context;
+import android.content.res.Resources;
 import android.graphics.Rect;
 import android.os.Build;
 import android.text.SpannableString;
@@ -25,6 +26,7 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.widget.Button;
 import android.widget.CheckBox;
+import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.Spinner;
 import android.widget.SpinnerAdapter;
@@ -33,7 +35,7 @@ import android.widget.TextView;
 import java.util.ArrayList;
 import java.util.List;
 
-public class DoorHanger extends LinearLayout {
+class DoorHanger extends LinearLayout {
     private static final String LOGTAG = "GeckoDoorHanger";
 
     private static int sInputPadding = -1;
@@ -46,6 +48,7 @@ public class DoorHanger extends LinearLayout {
     }
 
     private final TextView mTextView;
+    private final ImageView mIcon;
     private final LinearLayout mChoicesLayout;
 
     // Divider between doorhangers.
@@ -57,6 +60,8 @@ public class DoorHanger extends LinearLayout {
     // Value used to identify the notification.
     private final String mValue;
 
+    private Resources mResources;
+
     private List<PromptInput> mInputs;
     private CheckBox mCheckBox;
 
@@ -64,36 +69,67 @@ public class DoorHanger extends LinearLayout {
     private boolean mPersistWhileVisible = false;
     private long mTimeout = 0;
 
-    public interface OnButtonClickListener {
+    // Color used for dividers above and between buttons.
+    private int mDividerColor;
+
+    static enum Theme {
+        LIGHT,
+        DARK
+    }
+
+    interface OnButtonClickListener {
         public void onButtonClick(DoorHanger dh, String tag);
     }
 
-    DoorHanger(Context context) {
+    DoorHanger(Context context, Theme theme) {
-        this(context, 0, null);
+        this(context, 0, null, theme);
     }
 
     DoorHanger(Context context, int tabId, String value) {
+        this(context, tabId, value, Theme.LIGHT);
+    }
+
+    private DoorHanger(Context context, int tabId, String value, Theme theme) {
         super(context);
 
         mTabId = tabId;
         mValue = value;
+        mResources = getResources();
 
         if (sInputPadding == -1) {
-            sInputPadding = getResources().getDimensionPixelSize(R.dimen.doorhanger_padding);
+            sInputPadding = mResources.getDimensionPixelSize(R.dimen.doorhanger_padding);
         }
         if (sSpinnerTextColor == -1) {
-            sSpinnerTextColor = getResources().getColor(R.color.text_color_primary_disable_only);
+            sSpinnerTextColor = mResources.getColor(R.color.text_color_primary_disable_only);
         }
         if (sSpinnerTextSize == -1) {
-            sSpinnerTextSize = getResources().getDimensionPixelSize(R.dimen.doorhanger_spinner_textsize);
+            sSpinnerTextSize = mResources.getDimensionPixelSize(R.dimen.doorhanger_spinner_textsize);
         }
 
         setOrientation(VERTICAL);
 
         LayoutInflater.from(context).inflate(R.layout.doorhanger, this);
         mTextView = (TextView) findViewById(R.id.doorhanger_title);
+        mIcon = (ImageView) findViewById(R.id.doorhanger_icon);
         mChoicesLayout = (LinearLayout) findViewById(R.id.doorhanger_choices);
         mDivider = findViewById(R.id.divider_doorhanger);
+
+        setTheme(theme);
+    }
+
+    private void setTheme(Theme theme) {
+        if (theme == Theme.LIGHT) {
+            // The default styles declared in doorhanger.xml are light-themed, so we just
+            // need to set the divider color that we'll use in addButton.
+            mDividerColor = mResources.getColor(R.color.doorhanger_divider_light);
+
+        } else if (theme == Theme.DARK) {
+            mDividerColor = mResources.getColor(R.color.doorhanger_divider_dark);
+
+            // Set a dark background, and use a smaller text size for dark-themed DoorHangers.
+            setBackgroundColor(mResources.getColor(R.color.doorhanger_background_dark));
+            mTextView.setTextSize(mResources.getDimension(R.dimen.doorhanger_textsize_small));
+        }
     }
 
     int getTabId() {
@@ -124,6 +160,11 @@ public class DoorHanger extends LinearLayout {
         mTextView.setText(message);
     }
 
+    void setIcon(int resId) {
+        mIcon.setImageResource(resId);
+        mIcon.setVisibility(View.VISIBLE);
+    }
+
     void addLink(String label, String url, String delimiter) {
         String title = mTextView.getText().toString();
         SpannableString titleWithLink = new SpannableString(title + delimiter + label);
@@ -158,12 +199,15 @@ public class DoorHanger extends LinearLayout {
         if (mChoicesLayout.getChildCount() == 0) {
             // If this is the first button we're adding, make the choices layout visible.
             mChoicesLayout.setVisibility(View.VISIBLE);
-            findViewById(R.id.divider_choices).setVisibility(View.VISIBLE);
+            // Make the divider above the buttons visible.
+            View divider = findViewById(R.id.divider_choices);
+            divider.setVisibility(View.VISIBLE);
+            divider.setBackgroundColor(mDividerColor);
         } else {
-            // Add a divider for additional buttons.
+            // Add a vertical divider between additional buttons.
             Divider divider = new Divider(getContext(), null);
             divider.setOrientation(Divider.Orientation.VERTICAL);
-            divider.setBackgroundColor(0xFFD1D5DA);
+            divider.setBackgroundColor(mDividerColor);
             mChoicesLayout.addView(divider);
         }
 

mobile/android/base/Makefile.in

@@ -683,8 +683,9 @@ RES_DRAWABLE_MDPI = \
   res/drawable-mdpi/find_close.png \
   res/drawable-mdpi/find_next.png \
   res/drawable-mdpi/find_prev.png \
-  res/drawable-mdpi/larry_blue.png \
+  res/drawable-mdpi/larry.png \
-  res/drawable-mdpi/larry_green.png \
+  res/drawable-mdpi/lock_identified.png \
+  res/drawable-mdpi/lock_verified.png \
   res/drawable-mdpi/menu.png \
   res/drawable-mdpi/menu_pb.png \
   res/drawable-mdpi/menu_panel_bg.9.png \
@@ -694,10 +695,8 @@ RES_DRAWABLE_MDPI = \
   res/drawable-mdpi/menu_item_check.png \
   res/drawable-mdpi/menu_item_more.png \
   res/drawable-mdpi/menu_item_uncheck.png \
-  res/drawable-mdpi/site_security_blocked_mixed_content.png \
+  res/drawable-mdpi/shield.png \
-  res/drawable-mdpi/site_security_loaded_mixed_content.png \
+  res/drawable-mdpi/shield_doorhanger.png \
-  res/drawable-mdpi/site_security_identified.png \
-  res/drawable-mdpi/site_security_verified.png \
   res/drawable-mdpi/tabs_normal.png \
   res/drawable-mdpi/tabs_private.png \
   res/drawable-mdpi/tabs_synced.png \
@@ -717,6 +716,8 @@ RES_DRAWABLE_MDPI = \
   res/drawable-mdpi/shadow.png \
   res/drawable-mdpi/start.png \
   res/drawable-mdpi/marketplace.png \
+  res/drawable-mdpi/warning.png \
+  res/drawable-mdpi/warning_doorhanger.png \
   $(NULL)
 
 RES_DRAWABLE_LDPI = \
@@ -790,8 +791,9 @@ RES_DRAWABLE_HDPI = \
   res/drawable-hdpi/find_close.png \
   res/drawable-hdpi/find_next.png \
   res/drawable-hdpi/find_prev.png \
-  res/drawable-hdpi/larry_blue.png \
+  res/drawable-hdpi/larry.png \
-  res/drawable-hdpi/larry_green.png \
+  res/drawable-hdpi/lock_identified.png \
+  res/drawable-hdpi/lock_verified.png \
   res/drawable-hdpi/menu.png \
   res/drawable-hdpi/menu_pb.png \
   res/drawable-hdpi/menu_panel_bg.9.png \
@@ -801,10 +803,8 @@ RES_DRAWABLE_HDPI = \
   res/drawable-hdpi/menu_item_check.png \
   res/drawable-hdpi/menu_item_more.png \
   res/drawable-hdpi/menu_item_uncheck.png \
-  res/drawable-hdpi/site_security_blocked_mixed_content.png \
+  res/drawable-hdpi/shield.png \
-  res/drawable-hdpi/site_security_loaded_mixed_content.png \
+  res/drawable-hdpi/shield_doorhanger.png \
-  res/drawable-hdpi/site_security_identified.png \
-  res/drawable-hdpi/site_security_verified.png \
   res/drawable-hdpi/tabs_normal.png \
   res/drawable-hdpi/tabs_private.png \
   res/drawable-hdpi/tabs_synced.png \
@@ -818,6 +818,8 @@ RES_DRAWABLE_HDPI = \
   res/drawable-hdpi/handle_end.png \
   res/drawable-hdpi/handle_middle.png \
   res/drawable-hdpi/handle_start.png \
+  res/drawable-hdpi/warning.png \
+  res/drawable-hdpi/warning_doorhanger.png \
   $(NULL)
 
 RES_DRAWABLE_XHDPI = \
@@ -885,8 +887,9 @@ RES_DRAWABLE_XHDPI = \
   res/drawable-xhdpi/reader.png \
   res/drawable-xhdpi/reader_active.png \
   res/drawable-xhdpi/reading_list.png \
-  res/drawable-xhdpi/larry_blue.png \
+  res/drawable-xhdpi/larry.png \
-  res/drawable-xhdpi/larry_green.png \
+  res/drawable-xhdpi/lock_identified.png \
+  res/drawable-xhdpi/lock_verified.png \
   res/drawable-xhdpi/menu.png \
   res/drawable-xhdpi/menu_pb.png \
   res/drawable-xhdpi/menu_panel_bg.9.png \
@@ -896,13 +899,11 @@ RES_DRAWABLE_XHDPI = \
   res/drawable-xhdpi/menu_item_check.png \
   res/drawable-xhdpi/menu_item_more.png \
   res/drawable-xhdpi/menu_item_uncheck.png \
+  res/drawable-xhdpi/shield.png \
+  res/drawable-xhdpi/shield_doorhanger.png \
   res/drawable-xhdpi/tab_indicator_divider.9.png \
   res/drawable-xhdpi/tab_indicator_selected.9.png \
   res/drawable-xhdpi/tab_indicator_selected_focused.9.png \
-  res/drawable-xhdpi/site_security_blocked_mixed_content.png \
-  res/drawable-xhdpi/site_security_loaded_mixed_content.png \
-  res/drawable-xhdpi/site_security_identified.png \
-  res/drawable-xhdpi/site_security_verified.png \
   res/drawable-xhdpi/tabs_normal.png \
   res/drawable-xhdpi/tabs_private.png \
   res/drawable-xhdpi/tabs_synced.png \
@@ -912,6 +913,8 @@ RES_DRAWABLE_XHDPI = \
   res/drawable-xhdpi/handle_end.png \
   res/drawable-xhdpi/handle_middle.png \
   res/drawable-xhdpi/handle_start.png \
+  res/drawable-xhdpi/warning.png \
+  res/drawable-xhdpi/warning_doorhanger.png \
   $(NULL)
 
 RES_DRAWABLE_MDPI_V11 = \

mobile/android/base/SiteIdentityPopup.java

@@ -46,10 +46,7 @@ public class SiteIdentityPopup extends ArrowPopup
 
     private TextView mHost;
     private TextView mOwner;
-    private TextView mSupplemental;
     private TextView mVerifier;
-    private TextView mEncrypted;
-    private ImageView mLarry;
 
     private DoorHanger mMixedContentNotification;
 
@@ -90,7 +87,6 @@ public class SiteIdentityPopup extends ArrowPopup
         mHost = (TextView) layout.findViewById(R.id.host);
         mOwner = (TextView) layout.findViewById(R.id.owner);
         mVerifier = (TextView) layout.findViewById(R.id.verifier);
-        mLarry = (ImageView) layout.findViewById(R.id.larry);
     }
 
     private void setIdentity(JSONObject identityData) {
@@ -139,7 +135,7 @@ public class SiteIdentityPopup extends ArrowPopup
     private void addMixedContentNotification(boolean blocked) {
         // Remove any exixting mixed content notification.
         removeMixedContentNotification();
-        mMixedContentNotification = new DoorHanger(mActivity);
+        mMixedContentNotification = new DoorHanger(mActivity, DoorHanger.Theme.DARK);
 
         String message;
         if (blocked) {
@@ -152,12 +148,13 @@ public class SiteIdentityPopup extends ArrowPopup
         mMixedContentNotification.addLink(mActivity.getString(R.string.learn_more), MIXED_CONTENT_SUPPORT_URL, "\n\n");
 
         if (blocked) {
+            mMixedContentNotification.setIcon(R.drawable.shield_doorhanger);
             mMixedContentNotification.addButton(mActivity.getString(R.string.disable_protection), "disable", this);
             mMixedContentNotification.addButton(mActivity.getString(R.string.keep_blocking), "keepBlocking", this);
         } else {
+            mMixedContentNotification.setIcon(R.drawable.warning_doorhanger);
             mMixedContentNotification.addButton(mActivity.getString(R.string.enable_protection), "enable", this);
         }
-        mMixedContentNotification.setBackgroundColor(0xFFDDE4EA);
 
         mContent.addView(mMixedContentNotification);
     }
@@ -191,23 +188,7 @@ public class SiteIdentityPopup extends ArrowPopup
 
         setIdentity(identityData);
 
-        if (VERIFIED.equals(mode)) {
+        if (MIXED_CONTENT_BLOCKED.equals(mode) || MIXED_CONTENT_LOADED.equals(mode)) {
-            // Use a blue theme for SSL
-            mLarry.setImageResource(R.drawable.larry_blue);
-            mHost.setTextColor(mResources.getColor(R.color.identity_verified));
-            mOwner.setTextColor(mResources.getColor(R.color.identity_verified));
-        } else if (IDENTIFIED.equals(mode)) {
-            // Use a green theme for EV
-            mLarry.setImageResource(R.drawable.larry_green);
-            mHost.setTextColor(mResources.getColor(R.color.identity_identified));
-            mOwner.setTextColor(mResources.getColor(R.color.identity_identified));
-        } else {
-            // Use a gray theme for sites with mixed content
-            // FIXME: Get a gray larry
-            mLarry.setImageResource(R.drawable.larry_blue);
-            mHost.setTextColor(mResources.getColor(R.color.identity_mixed_content));
-            mOwner.setTextColor(mResources.getColor(R.color.identity_mixed_content));
-
             addMixedContentNotification(MIXED_CONTENT_BLOCKED.equals(mode));
         }
     }

mobile/android/base/resources/drawable/site_security_level.xml

@@ -6,9 +6,9 @@
 <level-list xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item android:maxLevel="0" android:drawable="@android:color/transparent"/>
-    <item android:maxLevel="1" android:drawable="@drawable/site_security_identified"/>
+    <item android:maxLevel="1" android:drawable="@drawable/lock_identified"/>
-    <item android:maxLevel="2" android:drawable="@drawable/site_security_verified"/>
+    <item android:maxLevel="2" android:drawable="@drawable/lock_verified"/>
-    <item android:maxLevel="3" android:drawable="@drawable/site_security_blocked_mixed_content"/>
+    <item android:maxLevel="3" android:drawable="@drawable/shield"/>
-    <item android:maxLevel="4" android:drawable="@drawable/site_security_loaded_mixed_content"/>
+    <item android:maxLevel="4" android:drawable="@drawable/warning"/>
 
 </level-list>

mobile/android/base/resources/layout/doorhanger.xml

@@ -5,14 +5,26 @@
 
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <TextView android:id="@+id/doorhanger_title"
+    <LinearLayout android:layout_width="wrap_content"
-              android:focusable="true"
+                  android:layout_height="wrap_content"
-              android:layout_width="fill_parent"
+                  android:orientation="horizontal"
-              android:layout_height="wrap_content"
+                  android:padding="@dimen/doorhanger_padding">
-              android:textAppearance="?android:attr/textAppearanceMedium"
+
-              android:textColor="@color/doorhanger_text"
+        <ImageView android:id="@+id/doorhanger_icon"
-              android:textColorLink="@color/doorhanger_link"
+                   android:layout_width="wrap_content"
-              android:padding="@dimen/doorhanger_padding"/>
+                   android:layout_height="wrap_content"
+                   android:paddingRight="@dimen/doorhanger_padding"
+                   android:visibility="gone"/>
+
+        <TextView android:id="@+id/doorhanger_title"
+                  android:focusable="true"
+                  android:layout_width="fill_parent"
+                  android:layout_height="wrap_content"
+                  android:textAppearance="?android:attr/textAppearanceMedium"
+                  android:textColor="@color/doorhanger_text"
+                  android:textColorLink="@color/doorhanger_link"/>
+
+    </LinearLayout>
 
     <LinearLayout android:id="@+id/doorhanger_inputs"
               android:layout_width="wrap_content"
@@ -31,7 +43,6 @@
     <View android:id="@+id/divider_choices"
           android:layout_width="fill_parent"
           android:layout_height="1dp"
-          android:background="#FFD1D5DA"
           android:visibility="gone"/>
 
     <LinearLayout android:id="@+id/doorhanger_choices"

mobile/android/base/resources/layout/site_identity.xml

@@ -6,13 +6,19 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
-              android:orientation="horizontal">
+              android:orientation="horizontal"
+              android:padding="@dimen/doorhanger_padding">
+
+    <ImageView android:id="@+id/larry"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:src="@drawable/larry"
+               android:paddingRight="@dimen/doorhanger_padding"/>
 
     <LinearLayout android:layout_width="0dip"
                   android:layout_height="wrap_content"
                   android:layout_weight="1.0"
-                  android:orientation="vertical"
+                  android:orientation="vertical">
-                  android:padding="12dip">
 
         <TextView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
@@ -23,7 +29,9 @@
         <TextView android:id="@+id/host"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
-                  android:textSize="18sp"/>
+                  android:textSize="20sp"
+                  android:textColor="@color/doorhanger_text"
+                  android:textStyle="bold"/>
 
         <TextView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
@@ -35,7 +43,9 @@
         <TextView android:id="@+id/owner"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
-                  android:textSize="18sp"/>
+                  android:textColor="@color/doorhanger_text"
+                  android:textSize="16sp"
+                  android:textStyle="bold"/>
 
         <TextView android:id="@+id/verifier"
                   android:layout_width="wrap_content"
@@ -46,9 +56,4 @@
 
     </LinearLayout>
 
-    <ImageView android:id="@+id/larry"
-               android:layout_width="wrap_content"
-               android:layout_height="wrap_content"
-               android:padding="15dip"/>
-
 </LinearLayout>

mobile/android/base/resources/values/colors.xml

@@ -63,12 +63,14 @@
   <color name="splash_msgfont">#ffffff</color>
   <color name="splash_urlfont">#000000</color>
   <color name="splash_content">#ffffff</color>
+
   <color name="doorhanger_text">#FF222222</color>
-  <color name="doorhanger_link">#ACC4D5</color>
+  <color name="doorhanger_link">#FF2AA1FE</color>
+  <color name="doorhanger_divider_light">#FFD1D5DA</color>
+  <color name="doorhanger_divider_dark">#FFB3C2CE</color>
+  <color name="doorhanger_background_dark">#FFDDE4EA</color>
+
   <color name="validation_message_text">#ffffff</color>
-  <color name="identity_verified">#FF3298FF</color>
-  <color name="identity_identified">#FF89C450</color>
-  <color name="identity_mixed_content">#FF000000</color>
   <color name="url_bar_text_highlight">#FFFF9500</color>
   <color name="url_bar_text_highlight_pb">#FFD06BFF</color>
   <color name="suggestion_primary">#dddddd</color>

mobile/android/base/resources/values/dimens.xml

@@ -40,6 +40,7 @@
     <dimen name="doorhanger_input_width">250dp</dimen>
     <dimen name="doorhanger_spinner_textsize">9sp</dimen>
     <dimen name="doorhanger_padding">15dp</dimen>
+    <dimen name="doorhanger_textsize_small">8sp</dimen>
 
     <dimen name="flow_layout_spacing">6dp</dimen>
     <dimen name="menu_item_action_icon">80dp</dimen>