Bug 965548 - Part 3: Add cancel button for phone layout. r=bnicholson

mobile/android/base/moz.build

@@ -439,6 +439,7 @@ gbjar.generated_sources += [
     'org/mozilla/gecko/widget/ThemedRelativeLayout.java',
     'org/mozilla/gecko/widget/ThemedTextSwitcher.java',
     'org/mozilla/gecko/widget/ThemedTextView.java',
+    'org/mozilla/gecko/widget/ThemedView.java',
 ]
 if CONFIG['MOZ_CRASHREPORTER']:
     gbjar.sources += [ 'CrashReporter.java' ]

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

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="rectangle">
+
+    <solid android:color="#222"/>
+    <size android:width="1dp" />
+
+</shape>

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

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!-- Note that android:color="@color/toolbar_separator" (which uses a selector)
+     directly in the <shape> does not appear to work, so instead we select
+     between two shapes with different colors. -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android"
+          xmlns:gecko="http://schemas.android.com/apk/res-auto">
+
+    <item gecko:state_private="true" android:drawable="@drawable/toolbar_separator_pb"/>
+    <item android:drawable="@drawable/toolbar_separator"/>
+
+</selector>

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

@@ -86,8 +86,29 @@
                         android:layout_marginTop="12dip"
                         android:layout_alignRight="@id/tabs"/>
 
+    <!-- Note that the edit components are invisible so that the views
+         depending on their location can properly layout. -->
+    <ImageView android:id="@+id/edit_cancel"
+               style="@style/UrlBar.ImageButton.Icon"
+               android:layout_alignParentRight="true"
+               android:src="@drawable/close_edit_mode"
+               android:contentDescription="@string/edit_mode_cancel"
+               android:visibility="invisible"/>
+
+    <org.mozilla.gecko.widget.ThemedView android:id="@+id/edit_separator"
+                                         android:layout_toLeftOf="@id/edit_cancel"
+                                         android:layout_width="1dip"
+                                         android:layout_height="match_parent"
+                                         android:layout_marginTop="12dp"
+                                         android:layout_marginBottom="12dp"
+                                         android:layout_marginLeft="8dp"
+                                         android:layout_marginRight="2dp"
+                                         android:background="@drawable/toolbar_separator_selector"
+                                         android:visibility="invisible"/>
+
     <org.mozilla.gecko.toolbar.ToolbarEditLayout android:id="@+id/edit_layout"
                   style="@style/UrlBar.Button"
+                  android:layout_toLeftOf="@id/edit_separator"
                   android:layout_marginLeft="4dp"
                   android:layout_marginRight="4dp"
                   android:paddingLeft="8dp"

mobile/android/base/toolbar/BrowserToolbar.java

@@ -20,6 +20,7 @@ import org.mozilla.gecko.R;
 import org.mozilla.gecko.Tab;
 import org.mozilla.gecko.Tabs;
 import org.mozilla.gecko.animation.PropertyAnimator;
+import org.mozilla.gecko.animation.PropertyAnimator.Property;
 import org.mozilla.gecko.animation.PropertyAnimator.PropertyAnimationListener;
 import org.mozilla.gecko.animation.ViewHelper;
 import org.mozilla.gecko.menu.GeckoMenu;
@@ -34,6 +35,7 @@ import org.mozilla.gecko.util.MenuUtils;
 import org.mozilla.gecko.widget.ThemedImageButton;
 import org.mozilla.gecko.widget.ThemedImageView;
 import org.mozilla.gecko.widget.ThemedRelativeLayout;
+import org.mozilla.gecko.widget.ThemedView;
 
 import android.content.Context;
 import android.content.res.Resources;
@@ -132,6 +134,9 @@ public class BrowserToolbar extends ThemedRelativeLayout
     private MenuPopup mMenuPopup;
     private List<View> mFocusOrder;
 
+    private final ThemedView editSeparator;
+    private final View editCancel;
+
     private OnActivateListener mActivateListener;
     private OnCommitListener mCommitListener;
     private OnDismissListener mDismissListener;
@@ -207,6 +212,9 @@ public class BrowserToolbar extends ThemedRelativeLayout
         mActionItemBar = (LinearLayout) findViewById(R.id.menu_items);
         mHasSoftMenuButton = !HardwareUtils.hasMenuButton();
 
+        editSeparator = (ThemedView) findViewById(R.id.edit_separator);
+        editCancel = findViewById(R.id.edit_cancel);
+
         // We use different layouts on phones and tablets, so adjust the focus
         // order appropriately.
         mFocusOrder = new ArrayList<View>();
@@ -353,6 +361,13 @@ public class BrowserToolbar extends ThemedRelativeLayout
             }
         });
 
+        editCancel.setOnClickListener(new OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                cancelEdit();
+            }
+        });
+
         if (mHasSoftMenuButton) {
             mMenu.setVisibility(View.VISIBLE);
             mMenuIcon.setVisibility(View.VISIBLE);
@@ -575,7 +590,10 @@ public class BrowserToolbar extends ThemedRelativeLayout
     }
 
     private int getUrlBarEntryTranslation() {
-        return getWidth() - mUrlBarEntry.getRight();
+        // We would ideally use the right-most point of the edit layout instead of the
+        // edit separator and its margin, but it is not inflated when this code initially runs.
+        final LayoutParams lp = (LayoutParams) editSeparator.getLayoutParams();
+        return editSeparator.getLeft() - lp.leftMargin - mUrlBarEntry.getRight();
     }
 
     private int getUrlBarCurveTranslation() {
@@ -820,16 +838,17 @@ public class BrowserToolbar extends ThemedRelativeLayout
     }
 
     private void setUrlEditLayoutVisibility(final boolean showEditLayout, PropertyAnimator animator) {
+        mUrlEditLayout.prepareAnimation(showEditLayout, animator);
+
         final View viewToShow = (showEditLayout ? mUrlEditLayout : mUrlDisplayLayout);
         final View viewToHide = (showEditLayout ? mUrlDisplayLayout : mUrlEditLayout);
 
-        if (showEditLayout) {
-            mUrlEditLayout.prepareShowAnimation(animator);
-        }
-
         if (animator == null) {
             viewToHide.setVisibility(View.GONE);
             viewToShow.setVisibility(View.VISIBLE);
+
+            final int cancelVisibility = (showEditLayout ? View.VISIBLE : View.INVISIBLE);
+            setCancelVisibility(cancelVisibility);
             return;
         }
 
@@ -846,16 +865,27 @@ public class BrowserToolbar extends ThemedRelativeLayout
             @Override
             public void onPropertyAnimationStart() {
                 viewToShow.setVisibility(View.VISIBLE);
+                if (!showEditLayout) {
+                    setCancelVisibility(View.INVISIBLE);
+                }
             }
 
             @Override
             public void onPropertyAnimationEnd() {
                 viewToHide.setVisibility(View.GONE);
                 ViewHelper.setAlpha(viewToHide, 1.0f);
+                if (showEditLayout) {
+                    setCancelVisibility(View.VISIBLE);
+                }
             }
         });
     }
 
+    private void setCancelVisibility(final int visibility) {
+        editSeparator.setVisibility(visibility);
+        editCancel.setVisibility(visibility);
+    }
+
     /**
      * Disables and dims all toolbar elements which are not
      * related to editing mode.
@@ -1270,6 +1300,7 @@ public class BrowserToolbar extends ThemedRelativeLayout
         mMenu.setPrivateMode(isPrivate);
         mMenuIcon.setPrivateMode(isPrivate);
         mUrlEditLayout.setPrivateMode(isPrivate);
+        editSeparator.setPrivateMode(isPrivate);
 
         if (mBack instanceof BackButton) {
             ((BackButton) mBack).setPrivateMode(isPrivate);

mobile/android/base/toolbar/ToolbarEditLayout.java

@@ -125,7 +125,15 @@ public class ToolbarEditLayout extends ThemedLinearLayout {
         imm.showSoftInput(mEditText, InputMethodManager.SHOW_IMPLICIT);
     }
 
-    void prepareShowAnimation(PropertyAnimator animator) {
+    void prepareAnimation(final boolean showing, final PropertyAnimator animator) {
+        if (showing) {
+            prepareShowAnimation(animator);
+        } else {
+            prepareHideAnimation(animator);
+        }
+    }
+
+    private void prepareShowAnimation(final PropertyAnimator animator) {
         if (animator == null) {
             mEditText.requestFocus();
             showSoftInput();
@@ -147,6 +155,25 @@ public class ToolbarEditLayout extends ThemedLinearLayout {
         });
     }
 
+    private void prepareHideAnimation(final PropertyAnimator animator) {
+        if (animator == null) {
+            return;
+        }
+
+        animator.addPropertyAnimationListener(new PropertyAnimationListener() {
+            @Override
+            public void onPropertyAnimationStart() {
+                ViewHelper.setAlpha(mGo, 0.0f);
+            }
+
+            @Override
+            public void onPropertyAnimationEnd() {
+                // The enclosing view is invisible, so unhide the go button.
+                ViewHelper.setAlpha(mGo, 1.0f);
+            }
+        });
+    }
+
     void setOnCommitListener(OnCommitListener listener) {
         mCommitListener = listener;
         mEditText.setOnCommitListener(listener);

mobile/android/base/widget/ThemedView.java.in

@@ -0,0 +1,4 @@
+#filter substitution
+#define VIEW_NAME_SUFFIX View
+#define BASE_TYPE android.view.View
+#include ThemedView.java.frag