Bug 771380 - Use animation to show/hide lock icon in toolbar (r=sriram)
authorLucas Rocha <lucasr@mozilla.com>
Thu, 23 Aug 2012 19:27:11 +0100
changeset 105459 7e5db456160a178717f044d5fba40862c7402141
parent 105458 fde4b39fa70805ed32e7f6989146f7079c4a1f22
child 105460 8182bfe539f8e94c93e9048db41309903bbcbb15
push id55
push usershu@rfrn.org
push dateThu, 30 Aug 2012 01:33:09 +0000
reviewerssriram
bugs771380
milestone17.0a1
Bug 771380 - Use animation to show/hide lock icon in toolbar (r=sriram)
mobile/android/base/BrowserToolbar.java
mobile/android/base/resources/layout-land-v14/browser_toolbar.xml
mobile/android/base/resources/layout-land-v14/browser_toolbar_menu.xml
mobile/android/base/resources/layout-large-v11/browser_toolbar_menu.xml
mobile/android/base/resources/layout-xlarge-v11/browser_toolbar_menu.xml
mobile/android/base/resources/layout/browser_toolbar.xml
mobile/android/base/resources/layout/browser_toolbar_menu.xml
mobile/android/base/resources/values/dimens.xml
--- a/mobile/android/base/BrowserToolbar.java
+++ b/mobile/android/base/BrowserToolbar.java
@@ -20,16 +20,19 @@ import android.view.ContextMenu;
 import android.view.LayoutInflater;
 import android.view.MenuInflater;
 import android.view.MotionEvent;
 import android.view.TouchDelegate;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.Window;
 import android.view.accessibility.AccessibilityNodeInfo;
+import android.view.animation.AlphaAnimation;
+import android.view.animation.Animation;
+import android.view.animation.DecelerateInterpolator;
 import android.view.animation.TranslateAnimation;
 import android.view.inputmethod.InputMethodManager;
 import android.widget.Button;
 import android.widget.ImageButton;
 import android.widget.ImageView;
 import android.widget.FrameLayout;
 import android.widget.LinearLayout;
 import android.widget.PopupWindow;
@@ -39,22 +42,24 @@ import android.widget.TextView;
 import android.widget.ViewSwitcher;
 
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
 
 public class BrowserToolbar implements ViewSwitcher.ViewFactory,
                                        Tabs.OnTabsChangedListener,
-                                       GeckoMenu.ActionItemBarPresenter {
+                                       GeckoMenu.ActionItemBarPresenter,
+                                       Animation.AnimationListener {
     private static final String LOGTAG = "GeckoToolbar";
     private LinearLayout mLayout;
     private Button mAwesomeBar;
     private TextView mTitle;
     private int mTitlePadding;
+    private boolean mSiteSecurityVisible;
     private ImageButton mTabs;
     private ImageView mBack;
     private ImageView mForward;
     public ImageButton mFavicon;
     public ImageButton mStop;
     public ImageButton mSiteSecurity;
     public ImageButton mReader;
     private AnimationDrawable mProgressSpinner;
@@ -76,16 +81,20 @@ public class BrowserToolbar implements V
     private static List<View> sActionItems;
 
     private int mDuration;
     private TranslateAnimation mSlideUpIn;
     private TranslateAnimation mSlideUpOut;
     private TranslateAnimation mSlideDownIn;
     private TranslateAnimation mSlideDownOut;
 
+    private AlphaAnimation mLockFadeIn;
+    private TranslateAnimation mTitleSlideLeft;
+    private TranslateAnimation mTitleSlideRight;
+
     private int mCount;
 
     private static final int TABS_CONTRACTED = 1;
     private static final int TABS_EXPANDED = 2;
 
     public BrowserToolbar(BrowserApp activity) {
         // BrowserToolbar is attached to BrowserApp only.
         mActivity = activity;
@@ -191,16 +200,17 @@ public class BrowserToolbar implements V
 
         mFavicon = (ImageButton) mLayout.findViewById(R.id.favicon);
         mFavicon.setOnClickListener(faviconListener);
         if (Build.VERSION.SDK_INT >= 16)
             mFavicon.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO);
 
         mSiteSecurity = (ImageButton) mLayout.findViewById(R.id.site_security);
         mSiteSecurity.setOnClickListener(faviconListener);
+        mSiteSecurityVisible = (mSiteSecurity.getVisibility() == View.VISIBLE);
 
         mProgressSpinner = (AnimationDrawable) mActivity.getResources().getDrawable(R.drawable.progress_spinner);
         
         mStop = (ImageButton) mLayout.findViewById(R.id.stop);
         mStop.setOnClickListener(new Button.OnClickListener() {
             public void onClick(View v) {
                 Tab tab = Tabs.getInstance().getSelectedTab();
                 if (tab != null)
@@ -226,16 +236,36 @@ public class BrowserToolbar implements V
         mSlideDownOut = new TranslateAnimation(0, 0, 0, 40);
 
         mDuration = 750;
         mSlideUpIn.setDuration(mDuration);
         mSlideUpOut.setDuration(mDuration);
         mSlideDownIn.setDuration(mDuration);
         mSlideDownOut.setDuration(mDuration);
 
+        float slideWidth = mActivity.getResources().getDimension(R.dimen.browser_toolbar_lock_width);
+
+        LinearLayout.LayoutParams siteSecParams = (LinearLayout.LayoutParams) mSiteSecurity.getLayoutParams();
+        final float scale = mActivity.getResources().getDisplayMetrics().density;
+        slideWidth += (siteSecParams.leftMargin + siteSecParams.rightMargin) * scale + 0.5f;
+
+        mLockFadeIn = new AlphaAnimation(0.0f, 1.0f);
+        mLockFadeIn.setAnimationListener(this);
+
+        mTitleSlideLeft = new TranslateAnimation(slideWidth, 0, 0, 0);
+        mTitleSlideLeft.setAnimationListener(this);
+
+        mTitleSlideRight = new TranslateAnimation(-slideWidth, 0, 0, 0);
+        mTitleSlideRight.setAnimationListener(this);
+
+        final int lockAnimDuration = 300;
+        mLockFadeIn.setDuration(lockAnimDuration);
+        mTitleSlideLeft.setDuration(lockAnimDuration);
+        mTitleSlideRight.setDuration(lockAnimDuration);
+
         mMenu = (ImageButton) mLayout.findViewById(R.id.menu);
         mActionItemBar = (LinearLayout) mLayout.findViewById(R.id.menu_items);
         mHasSoftMenuButton = !mActivity.hasPermanentMenuKey();
 
         if (mHasSoftMenuButton) {
             mMenu.setVisibility(View.VISIBLE);
             mMenu.setOnClickListener(new Button.OnClickListener() {
                 public void onClick(View view) {
@@ -325,16 +355,37 @@ public class BrowserToolbar implements V
                 updateTabCountAndAnimate(Tabs.getInstance().getCount());
                 updateBackButton(false);
                 updateForwardButton(false);
                 break;
         }
     }
 
     @Override
+    public void onAnimationStart(Animation animation) {
+        if (animation.equals(mLockFadeIn)) {
+            if (mSiteSecurityVisible)
+                mSiteSecurity.setVisibility(View.VISIBLE);
+        }
+    }
+
+    @Override
+    public void onAnimationRepeat(Animation animation) {
+    }
+
+    @Override
+    public void onAnimationEnd(Animation animation) {
+        if (animation.equals(mTitleSlideLeft)) {
+            mSiteSecurity.setVisibility(View.GONE);
+        } else if (animation.equals(mTitleSlideRight)) {
+            mSiteSecurity.startAnimation(mLockFadeIn);
+        }
+    }
+
+    @Override
     public View makeView() {
         // This returns a TextView for the TextSwitcher.
         return mInflater.inflate(R.layout.tabs_counter, null);
     }
 
     private void onAwesomeBarSearch() {
         mActivity.onSearchRequested();
     }
@@ -434,27 +485,50 @@ public class BrowserToolbar implements V
         }
     }
 
     public void setPageActionVisibility(boolean isLoading) {
         // Handle the loading mode page actions
         mStop.setVisibility(isLoading ? View.VISIBLE : View.GONE);
 
         // Handle the viewing mode page actions
-        mSiteSecurity.setVisibility(mShowSiteSecurity && !isLoading ? View.VISIBLE : View.GONE);
+        setSiteSecurityVisibility(mShowSiteSecurity && !isLoading);
         mReader.setVisibility(mShowReader && !isLoading ? View.VISIBLE : View.GONE);
 
         // We want title to fill the whole space available for it when there are icons
         // being shown on the right side of the toolbar as the icons already have some
         // padding in them. This is just to avoid wasting space when icons are shown.
         mTitle.setPadding(0, 0, (!mShowReader && !isLoading ? mTitlePadding : 0), 0);
 
         updateFocusOrder();
     }
 
+    private void setSiteSecurityVisibility(final boolean visible) {
+        if (visible == mSiteSecurityVisible)
+            return;
+
+        mSiteSecurityVisible = visible;
+
+        mTitle.clearAnimation();
+        mSiteSecurity.clearAnimation();
+
+        // If any of these animations were cancelled as a result of the
+        // clearAnimation() calls above, we need to reset them.
+        mLockFadeIn.reset();
+        mTitleSlideLeft.reset();
+        mTitleSlideRight.reset();
+
+        if (visible)
+            mSiteSecurity.setVisibility(View.INVISIBLE);
+        else
+            mSiteSecurity.setVisibility(View.GONE);
+
+        mTitle.startAnimation(visible ? mTitleSlideRight : mTitleSlideLeft);
+    }
+
     private void updateFocusOrder() {
         View prevView = null;
 
         for (View view : mFocusOrder) {
             if (view.getVisibility() != View.VISIBLE)
                 continue;
 
             if (prevView != null) {
--- a/mobile/android/base/resources/layout-land-v14/browser_toolbar.xml
+++ b/mobile/android/base/resources/layout-land-v14/browser_toolbar.xml
@@ -80,17 +80,17 @@
                              android:scaleType="fitCenter"
                              android:paddingLeft="8dip"
                              android:layout_marginRight="4dip"
                              android:layout_gravity="center_vertical"
                              android:src="@drawable/favicon"/>
 
                 <ImageButton android:id="@+id/site_security"
                              style="@style/AddressBar.ImageButton"
-                             android:layout_width="21.33dip"
+                             android:layout_width="@dimen/browser_toolbar_lock_width"
                              android:scaleType="fitCenter"
                              android:layout_marginLeft="-4dip"
                              android:paddingLeft="1dp"
                              android:paddingRight="1dp"
                              android:src="@drawable/site_security_level"
                              android:contentDescription="@string/site_security"
                              android:visibility="gone"/>
 
--- a/mobile/android/base/resources/layout-land-v14/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout-land-v14/browser_toolbar_menu.xml
@@ -90,17 +90,17 @@
                              android:scaleType="fitCenter"
                              android:paddingLeft="8dip"
                              android:layout_marginRight="4dip"
                              android:layout_gravity="center_vertical"
                              android:src="@drawable/favicon"/>
 
                 <ImageButton android:id="@+id/site_security"
                              style="@style/AddressBar.ImageButton"
-                             android:layout_width="21.33dip"
+                             android:layout_width="@dimen/browser_toolbar_lock_width"
                              android:scaleType="fitCenter"
                              android:layout_marginLeft="-4dip"
                              android:paddingLeft="1dp"
                              android:paddingRight="1dp"
                              android:src="@drawable/site_security_level"
                              android:contentDescription="@string/site_security"
                              android:visibility="gone"/>
 
--- a/mobile/android/base/resources/layout-large-v11/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout-large-v11/browser_toolbar_menu.xml
@@ -111,17 +111,17 @@
                              android:scaleType="fitCenter"
                              android:paddingLeft="8dip"
                              android:layout_marginRight="4dip"
                              android:layout_gravity="center_vertical"
                              android:src="@drawable/favicon"/>
 
                 <ImageButton android:id="@+id/site_security"
                              style="@style/AddressBar.ImageButton"
-                             android:layout_width="21.33dip"
+                             android:layout_width="@dimen/browser_toolbar_lock_width"
                              android:scaleType="fitCenter"
                              android:layout_marginLeft="-4dip"
                              android:src="@drawable/site_security_level"
                              android:contentDescription="@string/site_security"
                              android:visibility="gone"/>
 
                 <TextView android:id="@+id/awesome_bar_title"
                           style="@style/AddressBar.Button"
--- a/mobile/android/base/resources/layout-xlarge-v11/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout-xlarge-v11/browser_toolbar_menu.xml
@@ -96,17 +96,17 @@
                              android:scaleType="fitCenter"
                              android:paddingLeft="8dip"
                              android:layout_marginRight="4dip"
                              android:layout_gravity="center_vertical"
                              android:src="@drawable/favicon"/>
 
                 <ImageButton android:id="@+id/site_security"
                              style="@style/AddressBar.ImageButton"
-                             android:layout_width="21.33dip"
+                             android:layout_width="@dimen/browser_toolbar_lock_width"
                              android:scaleType="fitCenter"
                              android:layout_marginLeft="-4dip"
                              android:src="@drawable/site_security_level"
                              android:contentDescription="@string/site_security"
                              android:visibility="gone"/>
 
                 <TextView android:id="@+id/awesome_bar_title"
                           style="@style/AddressBar.Button"
--- a/mobile/android/base/resources/layout/browser_toolbar.xml
+++ b/mobile/android/base/resources/layout/browser_toolbar.xml
@@ -80,17 +80,17 @@
                              android:scaleType="fitCenter"
                              android:paddingLeft="8dip"
                              android:layout_marginRight="4dip"
                              android:layout_gravity="center_vertical"
                              android:src="@drawable/favicon"/>
 
                 <ImageButton android:id="@+id/site_security"
                              style="@style/AddressBar.ImageButton"
-                             android:layout_width="21.33dip"
+                             android:layout_width="@dimen/browser_toolbar_lock_width"
                              android:scaleType="fitCenter"
                              android:layout_marginLeft="-4dip"
                              android:src="@drawable/site_security_level"
                              android:contentDescription="@string/site_security"
                              android:visibility="gone"/>
 
                 <TextView android:id="@+id/awesome_bar_title"
                           style="@style/AddressBar.Button"
--- a/mobile/android/base/resources/layout/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout/browser_toolbar_menu.xml
@@ -91,17 +91,17 @@
                              android:scaleType="fitCenter"
                              android:paddingLeft="8dip"
                              android:layout_marginRight="4dip"
                              android:layout_gravity="center_vertical"
                              android:src="@drawable/favicon"/>
 
                 <ImageButton android:id="@+id/site_security"
                              style="@style/AddressBar.ImageButton"
-                             android:layout_width="21.33dip"
+                             android:layout_width="@dimen/browser_toolbar_lock_width"
                              android:scaleType="fitCenter"
                              android:layout_marginLeft="-4dip"
                              android:src="@drawable/site_security_level"
                              android:contentDescription="@string/site_security"
                              android:visibility="gone"/>
 
                 <TextView android:id="@+id/awesome_bar_title"
                           style="@style/AddressBar.Button"
--- a/mobile/android/base/resources/values/dimens.xml
+++ b/mobile/android/base/resources/values/dimens.xml
@@ -11,16 +11,17 @@
     <dimen name="abouthome_icon_crop">-14dp</dimen>
     <dimen name="autocomplete_min_width">200dp</dimen>
     <dimen name="autocomplete_row_height">32dp</dimen>
     <dimen name="awesomebar_header_row_height">20dp</dimen>
     <dimen name="awesomebar_row_height">48dp</dimen>
     <dimen name="awesomebar_tab_transparency_height">38dp</dimen>
     <dimen name="browser_toolbar_height">48dp</dimen>
     <dimen name="browser_toolbar_icon_width">36dp</dimen>
+    <dimen name="browser_toolbar_lock_width">21.33dp</dimen>
     <dimen name="doorhanger_arrow_width">44dp</dimen>
     <dimen name="flow_layout_spacing">6dp</dimen>
     <dimen name="local_tab_row_height">108dp</dimen>
     <dimen name="menu_item_row_height">44dp</dimen>
     <dimen name="menu_item_row_width">240dp</dimen>
     <dimen name="prompt_service_group_padding_size">32dp</dimen>
     <dimen name="prompt_service_icon_size">72dp</dimen>
     <dimen name="prompt_service_icon_text_padding">10dp</dimen>