Commit 18432a5b authored by Ryan Landay's avatar Ryan Landay Committed by Commit Bot

Update tab scale in Android non-overlapping tab switcher

This CL updates the tab sizing in the new Android non-overlapping tab switcher.
We scale the width by 80% when there's one tab open and 60% when there's more
than one open. When there's only one tab open, we crop the bottom to maintain
constant height.

Bug: 828224
Change-Id: I0c8e47bbec01f25a9d54a810b1846f5f7ab0f18b
Reviewed-on: https://chromium-review.googlesource.com/1066993
Commit-Queue: Ryan Landay <rlanday@chromium.org>
Reviewed-by: default avatarMatthew Jones <mdjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#560803}
parent a3d0805f
...@@ -21,7 +21,6 @@ import org.chromium.chrome.browser.compositor.layouts.content.TabContentManager; ...@@ -21,7 +21,6 @@ import org.chromium.chrome.browser.compositor.layouts.content.TabContentManager;
import org.chromium.chrome.browser.compositor.layouts.eventfilter.BlackHoleEventFilter; import org.chromium.chrome.browser.compositor.layouts.eventfilter.BlackHoleEventFilter;
import org.chromium.chrome.browser.compositor.layouts.eventfilter.EventFilter; import org.chromium.chrome.browser.compositor.layouts.eventfilter.EventFilter;
import org.chromium.chrome.browser.compositor.layouts.phone.stack.Stack; import org.chromium.chrome.browser.compositor.layouts.phone.stack.Stack;
import org.chromium.chrome.browser.compositor.layouts.phone.stack.StackAnimation;
import org.chromium.chrome.browser.compositor.scene_layer.SceneLayer; import org.chromium.chrome.browser.compositor.scene_layer.SceneLayer;
import org.chromium.chrome.browser.compositor.scene_layer.TabListSceneLayer; import org.chromium.chrome.browser.compositor.scene_layer.TabListSceneLayer;
import org.chromium.chrome.browser.fullscreen.ChromeFullscreenManager; import org.chromium.chrome.browser.fullscreen.ChromeFullscreenManager;
...@@ -48,6 +47,9 @@ public class SimpleAnimationLayout extends Layout { ...@@ -48,6 +47,9 @@ public class SimpleAnimationLayout extends Layout {
/** The animation for a tab being created in the background. */ /** The animation for a tab being created in the background. */
private AnimatorSet mTabCreatedBackgroundAnimation; private AnimatorSet mTabCreatedBackgroundAnimation;
/** Fraction to scale tabs by during animation. */
public static final float SCALE_FRACTION = 0.90f;
/** Duration of the first step of the background animation: zooming out, rotating in */ /** Duration of the first step of the background animation: zooming out, rotating in */
private static final long BACKGROUND_STEP1_DURATION = 300; private static final long BACKGROUND_STEP1_DURATION = 300;
/** Duration of the second step of the background animation: pause */ /** Duration of the second step of the background animation: pause */
...@@ -231,7 +233,7 @@ public class SimpleAnimationLayout extends Layout { ...@@ -231,7 +233,7 @@ public class SimpleAnimationLayout extends Layout {
forceAnimationToFinish(); forceAnimationToFinish();
newLayoutTab.setBorderAlpha(0.0f); newLayoutTab.setBorderAlpha(0.0f);
final float scale = StackAnimation.SCALE_AMOUNT; final float scale = SCALE_FRACTION;
final float margin = Math.min(getWidth(), getHeight()) * (1.0f - scale) / 2.0f; final float margin = Math.min(getWidth(), getHeight()) * (1.0f - scale) / 2.0f;
CompositorAnimationHandler handler = getAnimationHandler(); CompositorAnimationHandler handler = getAnimationHandler();
......
...@@ -12,6 +12,16 @@ import org.chromium.chrome.browser.compositor.layouts.phone.StackLayoutBase; ...@@ -12,6 +12,16 @@ import org.chromium.chrome.browser.compositor.layouts.phone.StackLayoutBase;
* The non-overlapping tab stack we use when the HorizontalTabSwitcherAndroid flag is enabled. * The non-overlapping tab stack we use when the HorizontalTabSwitcherAndroid flag is enabled.
*/ */
public class NonOverlappingStack extends Stack { public class NonOverlappingStack extends Stack {
/**
* The scale the tabs should be shown at when there's exactly one tab open.
*/
private static final float SCALE_FRACTION_SINGLE_TAB = 0.80f;
/**
* The scale the tabs should be shown at when there are two or more tabs open.
*/
private static final float SCALE_FRACTION_MULTIPLE_TABS = 0.60f;
/** /**
* The percentage of the screen that defines the spacing between tabs by default (no pinch). * The percentage of the screen that defines the spacing between tabs by default (no pinch).
*/ */
...@@ -50,6 +60,20 @@ public class NonOverlappingStack extends Stack { ...@@ -50,6 +60,20 @@ public class NonOverlappingStack extends Stack {
super(context, layout); super(context, layout);
} }
private int getNonDyingTabCount() {
int dyingCount = 0;
for (int i = 0; i < mStackTabs.length; i++) {
if (mStackTabs[i].isDying()) dyingCount++;
}
return mStackTabs.length - dyingCount;
}
@Override
public float getScaleAmount() {
if (getNonDyingTabCount() > 1) return SCALE_FRACTION_MULTIPLE_TABS;
return SCALE_FRACTION_SINGLE_TAB;
}
@Override @Override
protected boolean evenOutTabs(float amount, boolean allowReverseDirection) { protected boolean evenOutTabs(float amount, boolean allowReverseDirection) {
// Nothing to do here; tabs are always a fixed distance apart in NonOverlappingStack (except // Nothing to do here; tabs are always a fixed distance apart in NonOverlappingStack (except
...@@ -99,8 +123,8 @@ public class NonOverlappingStack extends Stack { ...@@ -99,8 +123,8 @@ public class NonOverlappingStack extends Stack {
@Override @Override
protected int computeSpacing(int layoutTabCount) { protected int computeSpacing(int layoutTabCount) {
return (int) Math.round(getScrollDimensionSize() * StackAnimation.SCALE_AMOUNT return (int) Math.round(
+ EXTRA_SPACE_BETWEEN_TABS_DP); getScrollDimensionSize() * getScaleAmount() + EXTRA_SPACE_BETWEEN_TABS_DP);
} }
@Override @Override
...@@ -135,4 +159,12 @@ public class NonOverlappingStack extends Stack { ...@@ -135,4 +159,12 @@ public class NonOverlappingStack extends Stack {
public float scrollToScreen(float scrollSpace) { public float scrollToScreen(float scrollSpace) {
return scrollSpace; return scrollSpace;
} }
@Override
public float getMaxTabHeight() {
// We want to maintain a constant tab height (via cropping) even as the width is changed as
// a result of changing the scale.
if (getNonDyingTabCount() > 1) return super.getMaxTabHeight();
return (SCALE_FRACTION_MULTIPLE_TABS / SCALE_FRACTION_SINGLE_TAB) * super.getMaxTabHeight();
}
} }
...@@ -19,6 +19,8 @@ import org.chromium.ui.base.LocalizationUtils; ...@@ -19,6 +19,8 @@ import org.chromium.ui.base.LocalizationUtils;
* The overlapping tab stack we use when the HorizontalTabSwitcherAndroid flag is not enabled. * The overlapping tab stack we use when the HorizontalTabSwitcherAndroid flag is not enabled.
*/ */
public class OverlappingStack extends Stack { public class OverlappingStack extends Stack {
private static final float SCALE_AMOUNT = 0.90f;
/** /**
* The percentage of the screen that defines the spacing between tabs by default (no pinch). * The percentage of the screen that defines the spacing between tabs by default (no pinch).
*/ */
...@@ -71,6 +73,11 @@ public class OverlappingStack extends Stack { ...@@ -71,6 +73,11 @@ public class OverlappingStack extends Stack {
super(context, layout); super(context, layout);
} }
@Override
public float getScaleAmount() {
return SCALE_AMOUNT;
}
@Override @Override
protected boolean evenOutTabs(float amount, boolean allowReverseDirection) { protected boolean evenOutTabs(float amount, boolean allowReverseDirection) {
if (mStackTabs == null || mOverviewAnimationType != OverviewAnimationType.NONE if (mStackTabs == null || mOverviewAnimationType != OverviewAnimationType.NONE
......
...@@ -285,6 +285,11 @@ public abstract class Stack { ...@@ -285,6 +285,11 @@ public abstract class Stack {
return visibleCount; return visibleCount;
} }
/**
* The scale the tabs should be currently shown at (may change based on how many are open).
*/
public abstract float getScaleAmount();
/* /*
* Main Interaction Methods for the rest of the application * Main Interaction Methods for the rest of the application
* *
...@@ -1356,13 +1361,11 @@ public abstract class Stack { ...@@ -1356,13 +1361,11 @@ public abstract class Stack {
// there will be more space on the bottom than top. // there will be more space on the bottom than top.
final float horizontalPadding = final float horizontalPadding =
(parentWidth (parentWidth
- layoutTab.getOriginalContentWidth() * StackAnimation.SCALE_AMOUNT - layoutTab.getOriginalContentWidth() * getScaleAmount() * stackScale)
* stackScale)
/ 2.0f; / 2.0f;
final float verticalPadding = final float verticalPadding =
(parentHeight (parentHeight
- layoutTab.getOriginalContentHeight() * StackAnimation.SCALE_AMOUNT - layoutTab.getOriginalContentHeight() * getScaleAmount() * stackScale)
* stackScale)
/ 2.0f; / 2.0f;
if (portrait) { if (portrait) {
...@@ -1401,8 +1404,7 @@ public abstract class Stack { ...@@ -1401,8 +1404,7 @@ public abstract class Stack {
} else if (LocalizationUtils.isLayoutRtl()) { } else if (LocalizationUtils.isLayoutRtl()) {
// On RTL landscape, pos is a distance between tab's right and mLayout's right. // On RTL landscape, pos is a distance between tab's right and mLayout's right.
float posOffset = mLayout.getWidth() float posOffset = mLayout.getWidth()
- layoutTab.getOriginalContentWidth() * StackAnimation.SCALE_AMOUNT - layoutTab.getOriginalContentWidth() * getScaleAmount() * stackScale;
* stackScale;
pos = -layoutTab.getX() + posOffset; pos = -layoutTab.getX() + posOffset;
layoutTab.setX(-Math.min(pos, maxStackedPosition) + posOffset); layoutTab.setX(-Math.min(pos, maxStackedPosition) + posOffset);
} else { } else {
......
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
package org.chromium.chrome.browser.compositor.layouts.phone.stack; package org.chromium.chrome.browser.compositor.layouts.phone.stack;
import static org.chromium.chrome.browser.compositor.layouts.ChromeAnimation.AnimatableAnimation.addAnimation; import static org.chromium.chrome.browser.compositor.layouts.ChromeAnimation.AnimatableAnimation.addAnimation;
import static org.chromium.chrome.browser.compositor.layouts.components.LayoutTab.Property.MAX_CONTENT_HEIGHT;
import static org.chromium.chrome.browser.compositor.layouts.phone.stack.StackTab.Property.DISCARD_AMOUNT; import static org.chromium.chrome.browser.compositor.layouts.phone.stack.StackTab.Property.DISCARD_AMOUNT;
import static org.chromium.chrome.browser.compositor.layouts.phone.stack.StackTab.Property.SCALE;
import static org.chromium.chrome.browser.compositor.layouts.phone.stack.StackTab.Property.SCROLL_OFFSET; import static org.chromium.chrome.browser.compositor.layouts.phone.stack.StackTab.Property.SCROLL_OFFSET;
import android.view.animation.Interpolator; import android.view.animation.Interpolator;
...@@ -38,8 +40,6 @@ public abstract class StackAnimation { ...@@ -38,8 +40,6 @@ public abstract class StackAnimation {
NONE, NONE,
} }
public static final float SCALE_AMOUNT = 0.90f;
protected static final int ENTER_STACK_TOOLBAR_ALPHA_DURATION = 100; protected static final int ENTER_STACK_TOOLBAR_ALPHA_DURATION = 100;
protected static final int ENTER_STACK_TOOLBAR_ALPHA_DELAY = 100; protected static final int ENTER_STACK_TOOLBAR_ALPHA_DELAY = 100;
protected static final int ENTER_STACK_ANIMATION_DURATION = 300; protected static final int ENTER_STACK_ANIMATION_DURATION = 300;
...@@ -308,6 +308,12 @@ public abstract class StackAnimation { ...@@ -308,6 +308,12 @@ public abstract class StackAnimation {
addAnimation(set, tab, DISCARD_AMOUNT, tab.getDiscardAmount(), 0.0f, addAnimation(set, tab, DISCARD_AMOUNT, tab.getDiscardAmount(), 0.0f,
UNDISCARD_ANIMATION_DURATION, 0); UNDISCARD_ANIMATION_DURATION, 0);
} }
addAnimation(set, tab, SCALE, tab.getScale(), mStack.getScaleAmount(),
DISCARD_ANIMATION_DURATION, 0);
addAnimation(set, tab.getLayoutTab(), MAX_CONTENT_HEIGHT,
tab.getLayoutTab().getMaxContentHeight(), mStack.getMaxTabHeight(),
DISCARD_ANIMATION_DURATION, 0);
float newScrollOffset = mStack.screenToScroll(spacing * newIndex); float newScrollOffset = mStack.screenToScroll(spacing * newIndex);
...@@ -316,7 +322,7 @@ public abstract class StackAnimation { ...@@ -316,7 +322,7 @@ public abstract class StackAnimation {
// put it in the right place. // put it in the right place.
if (tab.getDiscardAmount() >= discardRange) { if (tab.getDiscardAmount() >= discardRange) {
tab.setScrollOffset(newScrollOffset); tab.setScrollOffset(newScrollOffset);
tab.setScale(SCALE_AMOUNT); tab.setScale(mStack.getScaleAmount());
} else { } else {
float start = tab.getScrollOffset(); float start = tab.getScrollOffset();
if (start != newScrollOffset) { if (start != newScrollOffset) {
......
...@@ -45,7 +45,7 @@ class StackAnimationLandscape extends StackAnimation { ...@@ -45,7 +45,7 @@ class StackAnimationLandscape extends StackAnimation {
StackTab tab = tabs[i]; StackTab tab = tabs[i];
tab.resetOffset(); tab.resetOffset();
tab.setScale(SCALE_AMOUNT); tab.setScale(mStack.getScaleAmount());
tab.setAlpha(1.f); tab.setAlpha(1.f);
tab.getLayoutTab().setToolbarAlpha(0.f); tab.getLayoutTab().setToolbarAlpha(0.f);
tab.getLayoutTab().setBorderScale(1.f); tab.getLayoutTab().setBorderScale(1.f);
...@@ -67,8 +67,8 @@ class StackAnimationLandscape extends StackAnimation { ...@@ -67,8 +67,8 @@ class StackAnimationLandscape extends StackAnimation {
tab.setScrollOffset(scrollOffset); tab.setScrollOffset(scrollOffset);
addAnimation(set, tab, X_IN_STACK_INFLUENCE, 0.0f, 1.0f, addAnimation(set, tab, X_IN_STACK_INFLUENCE, 0.0f, 1.0f,
ENTER_STACK_BORDER_ALPHA_DURATION, 0); ENTER_STACK_BORDER_ALPHA_DURATION, 0);
addAnimation( addAnimation(set, tab, SCALE, 1.0f, mStack.getScaleAmount(),
set, tab, SCALE, 1.0f, SCALE_AMOUNT, ENTER_STACK_BORDER_ALPHA_DURATION, 0); ENTER_STACK_BORDER_ALPHA_DURATION, 0);
addAnimation(set, tab.getLayoutTab(), TOOLBAR_ALPHA, 1.f, 0.f, addAnimation(set, tab.getLayoutTab(), TOOLBAR_ALPHA, 1.f, 0.f,
ENTER_STACK_TOOLBAR_ALPHA_DURATION, ENTER_STACK_TOOLBAR_ALPHA_DELAY); ENTER_STACK_TOOLBAR_ALPHA_DURATION, ENTER_STACK_TOOLBAR_ALPHA_DELAY);
addAnimation(set, tab.getLayoutTab(), TOOLBAR_Y_OFFSET, 0.f, addAnimation(set, tab.getLayoutTab(), TOOLBAR_Y_OFFSET, 0.f,
......
...@@ -54,7 +54,7 @@ class StackAnimationPortrait extends StackAnimation { ...@@ -54,7 +54,7 @@ class StackAnimationPortrait extends StackAnimation {
StackTab tab = tabs[i]; StackTab tab = tabs[i];
tab.resetOffset(); tab.resetOffset();
tab.setScale(SCALE_AMOUNT); tab.setScale(mStack.getScaleAmount());
tab.setAlpha(1.f); tab.setAlpha(1.f);
tab.getLayoutTab().setToolbarAlpha(0.f); tab.getLayoutTab().setToolbarAlpha(0.f);
tab.getLayoutTab().setBorderScale(1.f); tab.getLayoutTab().setBorderScale(1.f);
...@@ -79,8 +79,8 @@ class StackAnimationPortrait extends StackAnimation { ...@@ -79,8 +79,8 @@ class StackAnimationPortrait extends StackAnimation {
ENTER_STACK_RESIZE_DELAY); ENTER_STACK_RESIZE_DELAY);
addAnimation(set, tab, Y_IN_STACK_INFLUENCE, 0.0f, 1.0f, addAnimation(set, tab, Y_IN_STACK_INFLUENCE, 0.0f, 1.0f,
ENTER_STACK_BORDER_ALPHA_DURATION, 0); ENTER_STACK_BORDER_ALPHA_DURATION, 0);
addAnimation( addAnimation(set, tab, SCALE, 1.0f, mStack.getScaleAmount(),
set, tab, SCALE, 1.0f, SCALE_AMOUNT, ENTER_STACK_BORDER_ALPHA_DURATION, 0); ENTER_STACK_BORDER_ALPHA_DURATION, 0);
addAnimation(set, tab.getLayoutTab(), TOOLBAR_ALPHA, 1.f, 0.f, addAnimation(set, tab.getLayoutTab(), TOOLBAR_ALPHA, 1.f, 0.f,
ENTER_STACK_BORDER_ALPHA_DURATION, ENTER_STACK_TOOLBAR_ALPHA_DELAY); ENTER_STACK_BORDER_ALPHA_DURATION, ENTER_STACK_TOOLBAR_ALPHA_DELAY);
addAnimation(set, tab.getLayoutTab(), TOOLBAR_Y_OFFSET, 0.f, addAnimation(set, tab.getLayoutTab(), TOOLBAR_Y_OFFSET, 0.f,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment