commit c4bc25250299e9a6befdbfefffa73b368d9619d2 parent 654474dd66681580ce45080213360a5f52d8b2e5 Author: Gabriel Luong <gabriel.luong@gmail.com> Date: Wed, 10 Dec 2025 15:33:11 +0000 Bug 2004511 - Part 22: Use primary container for the selected tab in TabHistoryViewHolder r=android-reviewers,007 - Removes `layerNonOpaque` and replaces it with the M3 color token used for selected tabs. - Using the Tab Management Figma as reference: https://www.figma.com/design/EWyFmiYienV32vUUeE0Im1/Tab-Management-for-Android?node-id=15797-17925&m=dev Differential Revision: https://phabricator.services.mozilla.com/D275408 Diffstat:
5 files changed, 2 insertions(+), 14 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabhistory/TabHistoryViewHolder.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabhistory/TabHistoryViewHolder.kt @@ -8,9 +8,9 @@ import androidx.recyclerview.widget.RecyclerView import mozilla.components.browser.icons.BrowserIcons import mozilla.components.support.ktx.android.content.getColorFromAttr import mozilla.components.ui.widgets.WidgetSiteItemView -import org.mozilla.fenix.R import org.mozilla.fenix.ext.components import org.mozilla.fenix.ext.loadIntoView +import com.google.android.material.R as materialR class TabHistoryViewHolder( private val view: WidgetSiteItemView, @@ -32,7 +32,7 @@ class TabHistoryViewHolder( if (item.isSelected) { view.setBackgroundColor( - view.context.getColorFromAttr(R.attr.layerNonOpaque), + view.context.getColorFromAttr(materialR.attr.colorPrimaryContainer), ) } else { view.background = null diff --git a/mobile/android/fenix/app/src/main/res/values-night/colors.xml b/mobile/android/fenix/app/src/main/res/values-night/colors.xml @@ -56,8 +56,6 @@ <color name="fx_mobile_layer_color_2">@color/photonDarkGrey30</color> <!-- Search --> <color name="fx_mobile_layer_color_3">@color/photonDarkGrey80</color> - <!-- Selected tab --> - <color name="fx_mobile_layer_color_accent_nonopaque">@color/photonViolet50A32</color> <color name="fx_mobile_layer_color_scrim">@color/photonDarkGrey90A95</color> <!-- Tooltip --> <color name="fx_mobile_layer_color_gradient_start">@color/photonViolet70</color> diff --git a/mobile/android/fenix/app/src/main/res/values/attrs.xml b/mobile/android/fenix/app/src/main/res/values/attrs.xml @@ -10,8 +10,6 @@ <attr name="layer2" format="reference" /> <!-- Search --> <attr name="layer3" format="reference" /> - <!-- Selected tab --> - <attr name="layerNonOpaque" format="reference" /> <attr name="scrim" format="reference" /> <!-- Action --> diff --git a/mobile/android/fenix/app/src/main/res/values/colors.xml b/mobile/android/fenix/app/src/main/res/values/colors.xml @@ -56,8 +56,6 @@ <color name="fx_mobile_layer_color_2">@color/photonWhite</color> <!-- Search --> <color name="fx_mobile_layer_color_3">@color/photonLightGrey20</color> - <!-- Selected tab --> - <color name="fx_mobile_layer_color_accent_nonopaque">@color/photonViolet70A12</color> <color name="fx_mobile_layer_color_scrim">@color/photonDarkGrey30A95</color> <!-- Tooltip --> <color name="fx_mobile_layer_color_gradient_start">@color/photonViolet70</color> @@ -185,8 +183,6 @@ <color name="fx_mobile_private_layer_color_2">@color/photonViolet90</color> <!-- Search --> <color name="fx_mobile_private_layer_color_3">@color/photonInk90</color> - <!-- Selected tab --> - <color name="fx_mobile_private_layer_color_accent_nonopaque">@color/photonViolet50A32</color> <color name="fx_mobile_private_layer_color_scrim">@color/photonDarkGrey90A95</color> <!-- Action --> diff --git a/mobile/android/fenix/app/src/main/res/values/styles.xml b/mobile/android/fenix/app/src/main/res/values/styles.xml @@ -101,8 +101,6 @@ <item name="layer2">@color/fx_mobile_layer_color_2</item> <!-- Search --> <item name="layer3">@color/fx_mobile_layer_color_3</item> - <!-- Selected tab --> - <item name="layerNonOpaque">@color/fx_mobile_layer_color_accent_nonopaque</item> <item name="scrim">@color/fx_mobile_layer_color_scrim</item> <!-- Action --> @@ -389,8 +387,6 @@ <item name="layer2">@color/fx_mobile_private_layer_color_2</item> <!-- Search --> <item name="layer3">@color/fx_mobile_private_layer_color_3</item> - <!-- Selected tab --> - <item name="layerNonOpaque">@color/fx_mobile_private_layer_color_accent_nonopaque</item> <item name="scrim">@color/fx_mobile_private_layer_color_scrim</item> <!-- Action -->