Skip to content

Commit

Permalink
(Android) Redesign private tab UI (#25850)
Browse files Browse the repository at this point in the history
🎨 Redesign private tab UI following Figma design.

Private tab redesign includes three new sections "Leave no trace", "Browsing visibility" and "Brave VPN".
Brave VPN section will show a call to action text view that will redirect to the subscription page. If the user is already a paying customer, or the VPN is not supported the CTA view will be hidden.

The design is responsive and adjust to large device screens and tablets, following the logic provided by Figma design.
The entire layout is centered in the visible part of the page.
  • Loading branch information
simoarpe authored Oct 15, 2024
1 parent 62dc319 commit 7a362dd
Show file tree
Hide file tree
Showing 23 changed files with 391 additions and 155 deletions.
13 changes: 8 additions & 5 deletions android/brave_java_resources.gni
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ brave_java_resources = [
"java/res/drawable-hdpi/ic_onboarding_top_leaf.png",
"java/res/drawable-hdpi/icon_validated_notification.png",
"java/res/drawable-hdpi/incognito_simple.png",
"java/res/drawable-hdpi/incognito_splash.png",
"java/res/drawable-hdpi/location_bar_incognito_badge.png",
"java/res/drawable-hdpi/modern_location_bar.9.png",
"java/res/drawable-hdpi/naver.png",
Expand Down Expand Up @@ -113,7 +112,6 @@ brave_java_resources = [
"java/res/drawable-mdpi/ic_onboarding_top_leaf.png",
"java/res/drawable-mdpi/icon_validated_notification.png",
"java/res/drawable-mdpi/incognito_simple.png",
"java/res/drawable-mdpi/incognito_splash.png",
"java/res/drawable-mdpi/location_bar_incognito_badge.png",
"java/res/drawable-mdpi/modern_location_bar.9.png",
"java/res/drawable-mdpi/naver.png",
Expand Down Expand Up @@ -192,7 +190,6 @@ brave_java_resources = [
"java/res/drawable-xhdpi/ic_onboarding_top_leaf.png",
"java/res/drawable-xhdpi/icon_validated_notification.png",
"java/res/drawable-xhdpi/incognito_simple.png",
"java/res/drawable-xhdpi/incognito_splash.png",
"java/res/drawable-xhdpi/location_bar_incognito_badge.png",
"java/res/drawable-xhdpi/modern_location_bar.9.png",
"java/res/drawable-xhdpi/naver.png",
Expand Down Expand Up @@ -249,7 +246,6 @@ brave_java_resources = [
"java/res/drawable-xxhdpi/ic_onboarding_top_leaf.png",
"java/res/drawable-xxhdpi/icon_validated_notification.png",
"java/res/drawable-xxhdpi/incognito_simple.png",
"java/res/drawable-xxhdpi/incognito_splash.png",
"java/res/drawable-xxhdpi/location_bar_incognito_badge.png",
"java/res/drawable-xxhdpi/modern_location_bar.9.png",
"java/res/drawable-xxhdpi/naver.png",
Expand Down Expand Up @@ -305,7 +301,6 @@ brave_java_resources = [
"java/res/drawable-xxxhdpi/ic_onboarding_top_leaf.png",
"java/res/drawable-xxxhdpi/icon_validated_notification.png",
"java/res/drawable-xxxhdpi/incognito_simple.png",
"java/res/drawable-xxxhdpi/incognito_splash.png",
"java/res/drawable-xxxhdpi/location_bar_incognito_badge.png",
"java/res/drawable-xxxhdpi/naver.png",
"java/res/drawable-xxxhdpi/omnibox_https_valid.png",
Expand All @@ -328,6 +323,7 @@ brave_java_resources = [
"java/res/drawable/always_on_tab_selected_dot.xml",
"java/res/drawable/always_on_tab_selector.xml",
"java/res/drawable/always_on_tutorial_action_bg.xml",
"java/res/drawable/antenna_layer_list.xml",
"java/res/drawable/bat_ads_logo_button.xml",
"java/res/drawable/blue_48_rounded_bg.xml",
"java/res/drawable/blue_rounded_notification_bg.xml",
Expand Down Expand Up @@ -402,6 +398,7 @@ brave_java_resources = [
"java/res/drawable/ic_add.xml",
"java/res/drawable/ic_addresses.xml",
"java/res/drawable/ic_always_on_info.xml",
"java/res/drawable/ic_antenna.xml",
"java/res/drawable/ic_appearance.xml",
"java/res/drawable/ic_arb_color.xml",
"java/res/drawable/ic_arrow_circle_right.xml",
Expand Down Expand Up @@ -533,6 +530,7 @@ brave_java_resources = [
"java/res/drawable/ic_menu_close.xml",
"java/res/drawable/ic_message_bubble_comments.xml",
"java/res/drawable/ic_metamask.xml",
"java/res/drawable/ic_midnight_purple_circle.xml",
"java/res/drawable/ic_neon_color.xml",
"java/res/drawable/ic_new_tab_page.xml",
"java/res/drawable/ic_news.xml",
Expand Down Expand Up @@ -567,6 +565,8 @@ brave_java_resources = [
"java/res/drawable/ic_popular_sources.xml",
"java/res/drawable/ic_privacy_reports.xml",
"java/res/drawable/ic_product_brave_leo.xml",
"java/res/drawable/ic_product_private_window.xml",
"java/res/drawable/ic_product_vpn.xml",
"java/res/drawable/ic_promoted.xml",
"java/res/drawable/ic_qr_code.xml",
"java/res/drawable/ic_qr_code_18.xml",
Expand Down Expand Up @@ -641,6 +641,9 @@ brave_java_resources = [
"java/res/drawable/orange_rounded_button.xml",
"java/res/drawable/p2p_rewards_inside_background.xml",
"java/res/drawable/password_match.xml",
"java/res/drawable/private_tab_gradient_background.xml",
"java/res/drawable/product_private_layer_list.xml",
"java/res/drawable/product_vpn_layer_list.xml",
"java/res/drawable/progress_bar_medium.xml",
"java/res/drawable/progress_bar_strong.xml",
"java/res/drawable/progress_bar_weak.xml",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,24 @@

package org.chromium.chrome.browser.ntp;

import static org.chromium.ui.base.ViewUtils.dpToPx;

import android.content.Context;
import android.content.res.Configuration;
import android.graphics.Canvas;
import android.text.SpannableString;
import android.util.AttributeSet;
import android.view.View;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ScrollView;
import android.widget.TextView;

import org.chromium.chrome.R;
import org.chromium.chrome.browser.InternetConnection;
import org.chromium.chrome.browser.vpn.BraveVpnNativeWorker;
import org.chromium.chrome.browser.vpn.utils.BraveVpnUtils;
import org.chromium.components.content_settings.CookieControlsEnforcement;
import org.chromium.ui.base.ViewUtils;
import org.chromium.ui.text.NoUnderlineClickableSpan;
import org.chromium.ui.widget.Toast;

/**
* The New Tab Page for use in the incognito profile.
*/
/** The New Tab Page to use in the incognito profile. */
public class IncognitoNewTabPageView extends FrameLayout {
private IncognitoNewTabPageManager mManager;
private boolean mFirstShow = true;
Expand All @@ -34,15 +31,9 @@ public class IncognitoNewTabPageView extends FrameLayout {
private int mSnapshotWidth;
private int mSnapshotHeight;
private int mSnapshotScrollY;
private TextView mVpnCta;

private int mWidthDp;
private int mHeightDp;

private static final int WIDE_LAYOUT_THRESHOLD_DP = 720;

/**
* Manages the view interaction with the rest of the system.
*/
/** Manages the view interaction with the rest of the system. */
interface IncognitoNewTabPageManager {
/** Loads a page explaining details about incognito mode in the current tab. */
void loadIncognitoLearnMore();
Expand All @@ -68,40 +59,52 @@ interface IncognitoNewTabPageManager {
void onLoadingComplete();
}

/** Default constructor needed to inflate via XML. */
/**
* Default constructor needed to inflate via XML.
*
* @noinspection ConstantValue
*/
public IncognitoNewTabPageView(Context context, AttributeSet attrs) {
super(context, attrs);

// These checks are just making sure that these values are still used in Chromium to avoid
// lint issues.
assert R.string.accessibility_new_incognito_tab_page > 0
: "Something has changed in the upstream!";

assert R.drawable.incognito_splash > 0 : "Something has changed in the upstream!";
}

@Override
protected void onFinishInflate() {
super.onFinishInflate();

mScrollView = (NewTabPageScrollView) findViewById(R.id.ntp_scrollview);
mScrollView.setBackgroundColor(getContext().getColor(R.color.ntp_bg_incognito));
setContentDescription(
getResources().getText(R.string.accessibility_new_incognito_tab_page));

// FOCUS_BEFORE_DESCENDANTS is needed to support keyboard shortcuts. Otherwise, pressing
// any shortcut causes the UrlBar to be focused. See ViewRootImpl.leaveTouchMode().
mScrollView.setDescendantFocusability(FOCUS_BEFORE_DESCENDANTS);

View learnMore = findViewById(R.id.learn_more);
learnMore.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mManager.loadIncognitoLearnMore();
}
});

mWidthDp = getContext().getResources().getConfiguration().screenWidthDp;
mHeightDp = getContext().getResources().getConfiguration().screenHeightDp;

adjustView();
mVpnCta = findViewById(R.id.tv_try_vpn);
if (BraveVpnUtils.isVpnFeatureSupported(getContext())
&& !BraveVpnNativeWorker.getInstance().isPurchasedUser()) {
mVpnCta.setOnClickListener(
v -> {
if (!InternetConnection.isNetworkAvailable(getContext())) {
Toast.makeText(getContext(), R.string.no_internet, Toast.LENGTH_SHORT)
.show();
} else {
BraveVpnUtils.openBraveVpnPlansActivity(getContext());
}
});
} else {
mVpnCta.setVisibility(View.GONE);
}
}

/**
* Initialize the incognito New Tab Page.
*
* @param manager The manager that handles external dependencies of the view.
*/
void initialize(IncognitoNewTabPageManager manager) {
Expand Down Expand Up @@ -184,63 +187,4 @@ public void onAttachedToWindow() {
mFirstShow = false;
}
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// View#onConfigurationChanged() doesn't get called when resizing this view in
// multi-window mode, so #onMeasure() is used instead.
Configuration config = getContext().getResources().getConfiguration();
if (mWidthDp != config.screenWidthDp || mHeightDp != config.screenHeightDp) {
mWidthDp = config.screenWidthDp;
mHeightDp = config.screenHeightDp;
adjustView();
}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

private void adjustView() {
adjustIcon();
adjustLearnMore();
}

/** Adjust the Incognito icon. */
private void adjustIcon() {
// The icon resource is 120dp x 120dp (i.e. 120px x 120px at MDPI). This method always
// resizes the icon view to 120dp x 120dp or smaller, therefore image quality is not lost.

int sizeDp;
if (mWidthDp <= WIDE_LAYOUT_THRESHOLD_DP) {
sizeDp = (mWidthDp <= 240 || mHeightDp <= 480) ? 48 : 72;
} else {
sizeDp = mHeightDp <= 480 ? 72 : 120;
}

ImageView icon = (ImageView) findViewById(R.id.new_tab_incognito_icon);
icon.getLayoutParams().width = dpToPx(getContext(), sizeDp);
icon.getLayoutParams().height = dpToPx(getContext(), sizeDp);
}

/** Adjust the "Learn More" link. */
private void adjustLearnMore() {
final String subtitleText = getContext().getResources().getString(
R.string.new_tab_otr_subtitle_with_reading_list);
boolean learnMoreInSubtitle = mWidthDp > WIDE_LAYOUT_THRESHOLD_DP;

if (!learnMoreInSubtitle) {
return;
}

// Concatenate the original text with a clickable "Learn more" link.
StringBuilder concatenatedText = new StringBuilder();
concatenatedText.append(subtitleText);
concatenatedText.append(" ");
concatenatedText.append(getContext().getResources().getString(R.string.learn_more));
SpannableString textWithLearnMoreLink = new SpannableString(concatenatedText.toString());

NoUnderlineClickableSpan span = new NoUnderlineClickableSpan(getContext(),
R.color.modern_blue_300, (view) -> getManager().loadIncognitoLearnMore());
textWithLearnMoreLink.setSpan(
span, subtitleText.length() + 1, textWithLearnMoreLink.length(), 0 /* flags */);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import android.content.Intent;
import android.util.Pair;

import androidx.annotation.Nullable;
import androidx.fragment.app.FragmentActivity;

import com.wireguard.config.Config;
Expand Down Expand Up @@ -62,14 +63,14 @@ public class BraveVpnUtils {
public static String IS_KILL_SWITCH = "is_kill_switch";
public static String REGION = "region";

public static void openBraveVpnPlansActivity(Activity activity) {
if (activity == null) {
public static void openBraveVpnPlansActivity(@Nullable Context context) {
if (context == null) {
return;
}
Intent braveVpnPlanIntent = new Intent(activity, VpnPaywallActivity.class);
Intent braveVpnPlanIntent = new Intent(context, VpnPaywallActivity.class);
braveVpnPlanIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
braveVpnPlanIntent.setAction(Intent.ACTION_VIEW);
activity.startActivity(braveVpnPlanIntent);
context.startActivity(braveVpnPlanIntent);
}

public static void openBraveVpnProfileActivity(Activity activity) {
Expand Down
Binary file removed android/java/res/drawable-hdpi/incognito_splash.png
Binary file not shown.
Binary file removed android/java/res/drawable-mdpi/incognito_splash.png
Binary file not shown.
Binary file removed android/java/res/drawable-xhdpi/incognito_splash.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
13 changes: 13 additions & 0 deletions android/java/res/drawable/antenna_layer_list.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!--* Copyright (c) 2024 The Brave Authors. All rights reserved.
* 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 https://mozilla.org/MPL/2.0/. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/ic_midnight_purple_circle"
android:gravity="center"/>
<item
android:drawable="@drawable/ic_antenna"
android:gravity="center"/>
</layer-list>
14 changes: 14 additions & 0 deletions android/java/res/drawable/ic_antenna.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!--* Copyright (c) 2024 The Brave Authors. All rights reserved.
* 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 https://mozilla.org/MPL/2.0/. -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primitive_private_window_60"
android:pathData="M18.31 16.35c0.33 0.4 0.9 0.41 1.33-0.04 1.52-1.64 2.36-3.87 2.36-6.28s-0.86-4.68-2.36-6.28c-0.42-0.46-1-0.44-1.33-0.05C18 4.06 18.1 4.53 18.45 4.93c1.2 1.33 1.87 3.12 1.87 5.1 0 1.96-0.67 3.75-1.87 5.08-0.36 0.4-0.46 0.87-0.14 1.24Zm-12.62 0c0.32-0.37 0.2-0.84-0.14-1.24-1.2-1.33-1.87-3.12-1.87-5.08 0-1.98 0.67-3.77 1.87-5.1 0.35-0.4 0.46-0.87 0.14-1.23-0.33-0.4-0.9-0.41-1.33 0.04C2.86 5.35 2 7.62 2 10.03s0.84 4.64 2.36 6.28c0.42 0.45 1 0.43 1.33 0.04Zm9.82-2.66c0.33 0.4 0.95 0.4 1.33-0.05 0.8-0.96 1.24-2.25 1.24-3.62s-0.44-2.66-1.24-3.6c-0.38-0.48-1-0.46-1.33-0.07-0.31 0.37-0.18 0.8 0.12 1.23 0.48 0.66 0.77 1.53 0.77 2.44 0 0.9-0.27 1.8-0.77 2.44-0.3 0.42-0.43 0.87-0.12 1.23Zm-7.02 0c0.3-0.36 0.18-0.8-0.12-1.23-0.5-0.64-0.78-1.53-0.78-2.44 0-0.9 0.3-1.78 0.78-2.44 0.3-0.42 0.42-0.86 0.12-1.23-0.33-0.39-0.95-0.4-1.33 0.06-0.8 0.95-1.24 2.24-1.24 3.61 0 1.37 0.44 2.66 1.24 3.62 0.38 0.46 1 0.45 1.33 0.05Zm3.5 6.9c0.5 0 0.8-0.35 0.8-0.89v-8.1c0.58-0.29 0.99-0.88 0.99-1.58 0-0.99-0.79-1.78-1.78-1.78s-1.77 0.8-1.77 1.78c0 0.7 0.39 1.3 0.97 1.58v8.1c0 0.53 0.33 0.9 0.8 0.9Z"/>
</vector>
18 changes: 18 additions & 0 deletions android/java/res/drawable/ic_midnight_purple_circle.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!--* Copyright (c) 2024 The Brave Authors. All rights reserved.
* 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 https://mozilla.org/MPL/2.0/. -->
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="32dp"
android:height="33dp"
android:viewportWidth="32"
android:viewportHeight="33"
>
<group>
<path
android:pathData="M0,16.5C0,7.663 7.163,0.5 16,0.5C24.837,0.5 32,7.663 32,16.5C32,25.337 24.837,32.5 16,32.5C7.163,32.5 0,25.337 0,16.5Z"
android:fillColor="@color/primitive_private_window_20"/>
</group>
</vector>
15 changes: 15 additions & 0 deletions android/java/res/drawable/ic_product_private_window.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!--* Copyright (c) 2024 The Brave Authors. All rights reserved.
* 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 https://mozilla.org/MPL/2.0/. -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primitive_private_window_60"
android:fillType="evenOdd"
android:pathData="M3.1 11.37c0.14 0.46 0.42 3.12 1.27 3.89 0.87 0.79 4.17 0.78 4.8 0.43 1.42-0.76 1.99-3.24 2.24-4.32 0.14-0.62 0.59-0.62 0.59-0.62s0.47 0 0.62 0.62c0.25 1.08 0.8 3.56 2.2 4.33 0.64 0.34 3.94 0.36 4.81-0.43 0.85-0.77 1.13-3.44 1.27-3.9 0.14-0.46 0.85-0.92 1-1.08 0.14-0.15 0.14-0.76 0-0.92-0.29-0.3-3.62-0.58-7.22-0.15-0.71 0.09-0.98 0.3-2.68 0.3-1.7 0-1.97-0.22-2.69-0.3-3.58-0.43-6.92-0.15-7.2 0.15-0.14 0.16-0.14 0.77 0 0.92 0.14 0.16 0.84 0.62 0.99 1.08Z"/>
</vector>
15 changes: 15 additions & 0 deletions android/java/res/drawable/ic_product_vpn.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!--* Copyright (c) 2024 The Brave Authors. All rights reserved.
* 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 https://mozilla.org/MPL/2.0/. -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primitive_private_window_60"
android:fillType="evenOdd"
android:pathData="M5.05 6.13l6.8-3a0.36 0.36 0 0 1 0.3 0l6.8 3a0.33 0.33 0 0 1 0.2 0.3v4.52c0 4.52-3.09 8.71-7.15 9.9-4.06-1.19-7.15-5.38-7.15-9.9V6.42c0-0.12 0.07-0.24 0.2-0.3Zm7.74-4.46a1.96 1.96 0 0 0-1.58 0l-6.8 3a1.93 1.93 0 0 0-1.16 1.75v4.53c0 5.34 3.73 10.34 8.75 11.55 5.02-1.21 8.75-6.21 8.75-11.55V6.42c0-0.76-0.45-1.45-1.16-1.76l-6.8-3Zm-4.87 9.15A7 7 0 0 1 12 9.52c1.52 0 2.93 0.48 4.08 1.3a0.84 0.84 0 0 0 0.97-1.36A8.67 8.67 0 0 0 12 7.84a8.67 8.67 0 0 0-5.05 1.62 0.84 0.84 0 0 0 0.97 1.36Zm1.59 2.76A3.86 3.86 0 0 1 12 12.67c0.95 0 1.82 0.34 2.5 0.9a0.84 0.84 0 1 0 1.07-1.28A5.54 5.54 0 0 0 12 11a5.54 5.54 0 0 0-3.57 1.3 0.84 0.84 0 0 0 1.08 1.29Zm4.07 1.18c0.22 0.2 0.17 0.53-0.08 0.69a7.93 7.93 0 0 1-1.32 0.67 0.49 0.49 0 0 1-0.36 0 7.93 7.93 0 0 1-1.32-0.67c-0.25-0.16-0.3-0.5-0.08-0.69a2.38 2.38 0 0 1 1.58-0.6c0.6 0 1.16 0.23 1.58 0.6Z"/>
</vector>
16 changes: 16 additions & 0 deletions android/java/res/drawable/private_tab_gradient_background.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2024 The Brave Authors. All rights reserved.
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 https://mozilla.org/MPL/2.0/. -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="@color/primitive_private_window_20"
android:centerColor="@color/primitive_private_window_10"
android:endColor="@color/primitive_private_window_5"
android:angle="225"
/>

</shape>
Loading

0 comments on commit 7a362dd

Please sign in to comment.