Skip to content

Commit

Permalink
[APS] add hover highlight to tab strip new tab button and model selec…
Browse files Browse the repository at this point in the history 
…tor button

 - Apply hover highlight only when user uses mouse to hover on buttons, should not show up on touch.
 - Hover highlight on buttons will be cleared once user clicks or touch other places out of the button's touch target.
 - Highlight color is OnSurface(@8%) when hovered, OnSurface(@12%) when clicked.

demo: https://drive.google.com/file/d/1NVlwYLeAx2981mAaZG4V0uwFR9m2xSpB/view?usp=sharing


Bug: 1485289
Change-Id: I4b354a90b47968aaf94a8a9d245460a4526cf2f4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4885170
Reviewed-by: Theresa Sullivan <twellington@chromium.org>
Commit-Queue: Zhe Li <zheliooo@google.com>
Reviewed-by: Sirisha Kavuluru <skavuluru@google.com>
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/heads/main@{#1213198}
  • Loading branch information
Zhe Li authored and Chromium LUCI CQ committed Oct 22, 2023
1 parent bbff761 commit 8c8e1fe
Show file tree
Hide file tree
Showing 14 changed files with 602 additions and 90 deletions.
3 changes: 3 additions & 0 deletions chrome/android/java/res/values/colors.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ found in the LICENSE file.
<!-- Model selector button background TSR colors -->
<color name="model_selector_button_bg_color">@color/default_icon_color_inverse_dark</color>

<!-- Tab strip button hover background color -->
<color name="tab_strip_button_hover_bg_color">@color/baseline_neutral_90</color>

<!-- Other colors -->
<color name="media_viewer_bg">#000000</color>
<color name="image_viewer_bg">#0E0E0E</color>
Expand Down
2 changes: 1 addition & 1 deletion chrome/android/java/src/org/chromium/chrome/browser/compositor/CompositorViewHolder.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1772,7 +1772,7 @@ public CompositorAccessibilityProvider(View forView) {
protected int getVirtualViewAt(float x, float y) {
if (mVirtualViews == null) return INVALID_ID;
for (int i = 0; i < mVirtualViews.size(); i++) {
if (mVirtualViews.get(i).checkClicked(x / mDpToPx, y / mDpToPx)) {
if (mVirtualViews.get(i).checkClickedOrHovered(x / mDpToPx, y / mDpToPx)) {
return i;
}
}
Expand Down
76 changes: 64 additions & 12 deletions .../java/src/org/chromium/chrome/browser/compositor/layouts/components/CompositorButton.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ public interface CompositorOnClickHandler {
private float mOpacity;
private float mClickSlop;
private boolean mIsPressed;
private boolean mIsPressedFromMouse;
private boolean mIsHovered;
private boolean mIsVisible;
private boolean mIsIncognito;
private boolean mIsEnabled;
Expand Down Expand Up @@ -232,7 +234,16 @@ public void setPressed(boolean state) {
}

/**
* @return The visiblity of the button.
* @param state The pressed state of the button.
* @param fromMouse Whether the event originates from a mouse.
*/
public void setPressed(boolean state, boolean fromMouse) {
mIsPressed = state;
mIsPressedFromMouse = fromMouse;
}

/**
* @return The visibility of the button.
*/
public boolean isVisible() {
return mIsVisible;
Expand Down Expand Up @@ -297,7 +308,7 @@ public int getResourceId() {
* @return Whether or not that click occurred inside of the button + slop area.
*/
@Override
public boolean checkClicked(float x, float y) {
public boolean checkClickedOrHovered(float x, float y) {
if (mOpacity < 1.f || !mIsVisible || !mIsEnabled) return false;

mCacheBounds.set(mBounds);
Expand All @@ -317,7 +328,7 @@ public void handleClick(long time) {
* @return Whether or not the button is selected after the event.
*/
public boolean drag(float x, float y) {
if (!checkClicked(x, y)) {
if (!checkClickedOrHovered(x, y)) {
setPressed(false);
return false;
}
Expand All @@ -326,13 +337,15 @@ public boolean drag(float x, float y) {

/**
* Set state for an onDown event.
* @param x The x offset of the event.
* @param y The y offset of the event.
* @return Whether or not the close button was selected.
*
* @param x The x offset of the event.
* @param y The y offset of the event.
* @param fromMouse Whether the event originates from a mouse.
* @return Whether or not the close button was selected.
*/
public boolean onDown(float x, float y) {
if (checkClicked(x, y)) {
setPressed(true);
public boolean onDown(float x, float y, boolean fromMouse) {
if (checkClickedOrHovered(x, y)) {
setPressed(true, fromMouse);
return true;
}
return false;
Expand All @@ -344,8 +357,8 @@ public boolean onDown(float x, float y) {
* @return If the button was clicked or not.
*/
public boolean click(float x, float y) {
if (checkClicked(x, y)) {
setPressed(false);
if (checkClickedOrHovered(x, y)) {
setPressed(false, false);
return true;
}
return false;
Expand All @@ -357,7 +370,46 @@ public boolean click(float x, float y) {
*/
public boolean onUpOrCancel() {
boolean state = isPressed();
setPressed(false);
setPressed(false, false);
return state;
}

/**
* Set whether button is hovered on.
*
* @param isHovered Whether the button is hovered on.
*/
public void setIsHovered(boolean isHovered) {
mIsHovered = isHovered;
}

/**
* @Return Whether the button is hovered on.
*/
public boolean getIsHovered() {
return mIsHovered;
}

/**
* Set whether the button is pressed from mouse.
*
* @param isPressedFromMouse Whether the button is pressed from mouse.
*/
public void setIsPressedFromMouse(boolean isPressedFromMouse) {
mIsPressedFromMouse = isPressedFromMouse;
}

/**
* @Return Whether the button is pressed from mouse.
*/
public boolean isPressedFromMouse() {
return mIsPressed && mIsPressedFromMouse;
}

/**
* @Return Whether hover background should be applied to the button.
*/
public boolean getShouldApplyHoverBackground() {
return mIsHovered || mIsPressedFromMouse;
}
}
55 changes: 45 additions & 10 deletions ...src/org/chromium/chrome/browser/compositor/layouts/components/TintedCompositorButton.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ public class TintedCompositorButton extends CompositorButton {
private @ColorInt int mIncognitoTint;
private @ColorInt int mIncognitoPressedTint;

// Hover and pressed colors for Advanced peripheral support(APS).
private @ColorInt int mApsHoverBackgroundDefaultTint;
private @ColorInt int mApsBackgroundPressedTint;
private @ColorInt int mApsHoverBackgroundIncognitoTint;
private @ColorInt int mApsBackgroundIncognitoPressedTint;

public TintedCompositorButton(
Context context, float width, float height, CompositorOnClickHandler clickHandler) {
super(context, width, height, clickHandler);
Expand Down Expand Up @@ -112,19 +118,34 @@ public void setTint(@ColorInt int defaultTint, @ColorInt int pressedTint,
}

/**
* A set of Android color to supply to the compositor.
* @param backgroundDefaultTint The default background tint.
* @param backgroundPressedTint The pressed background tint.
* @param backgroundIncognitoTint The incognito background tint.
* @param backgroundIncognitoPressedTint The incognito pressed background tint.
* A set of Android colors to supply to the compositor.
*
* @param backgroundDefaultTint The default background tint.
* @param backgroundPressedTint The pressed background tint.
* @param backgroundIncognitoTint The incognito background tint.
* @param backgroundIncognitoPressedTint The incognito pressed background tint.
* @param apsHoverBackgroundDefaultTint The aps hover background tint.
* @param apsBackgroundPressedTint The aps pressed background tint.
* @param apsHoverBackgroundIncognitoTint The aps incognito hover background tint.
* @param apsBackgroundIncognitoPressedTint The aps pressed incognito background tint.
*/
public void setBackgroundTint(@ColorInt int backgroundDefaultTint,
@ColorInt int backgroundPressedTint, @ColorInt int backgroundIncognitoTint,
@ColorInt int backgroundIncognitoPressedTint) {
public void setBackgroundTint(
@ColorInt int backgroundDefaultTint,
@ColorInt int backgroundPressedTint,
@ColorInt int backgroundIncognitoTint,
@ColorInt int backgroundIncognitoPressedTint,
@ColorInt int apsHoverBackgroundDefaultTint,
@ColorInt int apsBackgroundPressedTint,
@ColorInt int apsHoverBackgroundIncognitoTint,
@ColorInt int apsBackgroundIncognitoPressedTint) {
mBackgroundDefaultTint = backgroundDefaultTint;
mBackgroundPressedTint = backgroundPressedTint;
mBackgroundIncognitoTint = backgroundIncognitoTint;
mBackgroundIncognitoPressedTint = backgroundIncognitoPressedTint;
mApsHoverBackgroundDefaultTint = apsHoverBackgroundDefaultTint;
mApsBackgroundPressedTint = apsBackgroundPressedTint;
mApsHoverBackgroundIncognitoTint = apsHoverBackgroundIncognitoTint;
mApsBackgroundIncognitoPressedTint = apsBackgroundIncognitoPressedTint;
}

/**
Expand All @@ -145,8 +166,22 @@ public void setBackgroundTint(@ColorInt int backgroundDefaultTint,
*/
public @ColorInt int getBackgroundTint() {
int tint = isIncognito() ? mBackgroundIncognitoTint : mBackgroundDefaultTint;
if (isPressed()) {
tint = isIncognito() ? mBackgroundIncognitoPressedTint : mBackgroundPressedTint;
if (getIsHovered()) {
tint =
isIncognito()
? mApsHoverBackgroundIncognitoTint
: mApsHoverBackgroundDefaultTint;
} else {
if (isPressed()) {
if (isPressedFromMouse()) {
tint =
isIncognito()
? mApsBackgroundIncognitoPressedTint
: mApsBackgroundPressedTint;
} else {
tint = isIncognito() ? mBackgroundIncognitoPressedTint : mBackgroundPressedTint;
}
}
}
return tint;
}
Expand Down

0 comments on commit 8c8e1fe

Please sign in to comment.