Bug 737922: Invert form validation arrow if it is shown on top. [r=mfinkle] [a=blocking-fennec]

mobile/android/base/FormAssistPopup.java

@@ -54,8 +54,9 @@ import android.view.inputmethod.InputMethodManager;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.ArrayAdapter;
 import android.widget.AdapterView;
-import android.widget.RelativeLayout;
+import android.widget.ImageView;
 import android.widget.ListView;
+import android.widget.RelativeLayout;
 import android.widget.TextView;
 
 import org.json.JSONArray;
@@ -69,10 +70,15 @@ public class FormAssistPopup extends RelativeLayout implements GeckoEventListene
     private ListView mAutoCompleteList;
     private RelativeLayout mValidationMessage;
     private TextView mValidationMessageText;
+    private ImageView mValidationMessageArrow;
+    private ImageView mValidationMessageArrowInverted;
 
     private static int sAutoCompleteMinWidth = 0;
     private static int sAutoCompleteRowHeight = 0;
     private static int sValidationMessageHeight = 0;
+    private static int sValidationTextMarginTop = 0;
+    private static RelativeLayout.LayoutParams sValidationTextLayoutNormal;
+    private static RelativeLayout.LayoutParams sValidationTextLayoutInverted;
 
     // Minimum popup width for autocomplete messages
     private static final int AUTOCOMPLETE_MIN_WIDTH_IN_DPI = 200;
@@ -80,9 +86,11 @@ public class FormAssistPopup extends RelativeLayout implements GeckoEventListene
     // Height of the autocomplete_list_item TextView
     private static final int AUTOCOMPLETE_ROW_HEIGHT_IN_DPI = 32;
 
-    // Height of the validation_message_text TextView, plus the top margin set to
-    // make room for the arrow
-    private static final int VALIDATION_MESSAGE_HEIGHT_IN_DPI = 58;
+    // Height of the validation_message_text TextView
+    private static final int VALIDATION_MESSAGE_HEIGHT_IN_DPI = 50;
+
+    // Top margin for the validation_message_text TextView
+    private static final int VALIDATION_MESSAGE_MARGIN_TOP_IN_DPI = 6;
 
     private static final String LOGTAG = "FormAssistPopup";
 
@@ -177,6 +185,19 @@ public class FormAssistPopup extends RelativeLayout implements GeckoEventListene
 
             addView(mValidationMessage);
             mValidationMessageText = (TextView) mValidationMessage.findViewById(R.id.validation_message_text);
+
+            DisplayMetrics metrics = new DisplayMetrics();
+            GeckoApp.mAppContext.getWindowManager().getDefaultDisplay().getMetrics(metrics);
+            sValidationTextMarginTop = (int) (VALIDATION_MESSAGE_MARGIN_TOP_IN_DPI * metrics.density);
+
+            sValidationTextLayoutNormal = new RelativeLayout.LayoutParams(mValidationMessageText.getLayoutParams());
+            sValidationTextLayoutNormal.setMargins(0, sValidationTextMarginTop, 0, 0);
+
+            sValidationTextLayoutInverted = new RelativeLayout.LayoutParams(sValidationTextLayoutNormal);
+            sValidationTextLayoutInverted.setMargins(0, 0, 0, 0);
+
+            mValidationMessageArrow = (ImageView) mValidationMessage.findViewById(R.id.validation_message_arrow);
+            mValidationMessageArrowInverted = (ImageView) mValidationMessage.findViewById(R.id.validation_message_arrow_inverted);
         }
 
         mValidationMessageText.setText(validationMessage);
@@ -258,6 +279,12 @@ public class FormAssistPopup extends RelativeLayout implements GeckoEventListene
 
         int popupTop = top + height;
 
+        if (!isAutoComplete) {
+            mValidationMessageText.setLayoutParams(sValidationTextLayoutNormal);
+            mValidationMessageArrow.setVisibility(VISIBLE);
+            mValidationMessageArrowInverted.setVisibility(GONE);
+        }
+
         // If the popup doesn't fit below the input box, shrink its height, or
         // see if we can place it above the input instead.
         if ((popupTop + popupHeight) > viewport.height) {
@@ -274,6 +301,12 @@ public class FormAssistPopup extends RelativeLayout implements GeckoEventListene
                     popupTop = 0;
                     popupHeight = top;
                 }
+
+                if (!isAutoComplete) {
+                    mValidationMessageText.setLayoutParams(sValidationTextLayoutInverted);
+                    mValidationMessageArrow.setVisibility(GONE);
+                    mValidationMessageArrowInverted.setVisibility(VISIBLE);
+                }
            }
         }
 

mobile/android/base/Makefile.in

@@ -366,6 +366,7 @@ RES_DRAWABLE_BASE = \
   res/drawable/site_security_verified.png \
   res/drawable/urlbar_stop.png \
   res/drawable/validation_arrow.png \
+  res/drawable/validation_arrow_inverted.png \
   res/drawable/validation_bg.9.png \
   res/drawable/bookmarkdefaults_favicon_support.png \
   res/drawable/bookmarkdefaults_favicon_addons.png \
@@ -421,6 +422,7 @@ RES_DRAWABLE_HDPI = \
   res/drawable-hdpi/site_security_verified.png \
   res/drawable-hdpi/urlbar_stop.png \
   res/drawable-hdpi/validation_arrow.png \
+  res/drawable-hdpi/validation_arrow_inverted.png \
   res/drawable-hdpi/validation_bg.9.png \
   $(addprefix res/drawable-hdpi/,$(notdir $(SYNC_RES_DRAWABLE_HDPI))) \
   $(NULL)
@@ -484,6 +486,7 @@ RES_DRAWABLE_XHDPI_V11 = \
   res/drawable-xhdpi-v11/site_security_verified.png \
   res/drawable-xhdpi-v11/tabs_button_tail.9.png \
   res/drawable-xhdpi-v11/validation_arrow.png \
+  res/drawable-xhdpi-v11/validation_arrow_inverted.png \
   res/drawable-xhdpi-v11/validation_bg.9.png \
   $(NULL)
 

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="wrap_content"
-                android:layout_height="fill_parent">
+                android:layout_height="50dip">
 
     <TextView android:id="@+id/validation_message_text"
               android:layout_width="wrap_content"
@@ -15,14 +15,24 @@
               android:gravity="center"
               android:singleLine="true"
               android:scrollHorizontally="true"
-              android:ellipsize="marquee"
-              android:layout_alignParentTop="true"/>
+              android:ellipsize="marquee"/>
 
-    <ImageView android:layout_width="24dip"
+    <ImageView android:id="@+id/validation_message_arrow"
+               android:layout_width="24dip"
                android:layout_height="10dip"
                android:layout_centerHorizontal="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/validation_arrow"
                android:scaleType="fitXY"/>
 
+    <ImageView android:id="@+id/validation_message_arrow_inverted"
+               android:layout_width="24dip"
+               android:layout_height="10dip"
+               android:layout_centerHorizontal="true"
+               android:layout_marginTop="35dip"
+               android:layout_alignParentTop="true"
+               android:src="@drawable/validation_arrow_inverted"
+               android:scaleType="fitXY"
+               android:visibility="gone"/>
+
 </RelativeLayout>