Bug 1870938 - Add display/edit toolbar separator and update url bar background

fenix/125.0
sarah541 2 months ago committed by mergify[bot]
parent e1ec8d67fa
commit 130fecde97

@ -444,14 +444,16 @@ abstract class BaseBrowserFragment :
lifecycleOwner = viewLifecycleOwner,
)
val browserToolbar = browserToolbarView.view
if (IncompleteRedesignToolbarFeature(context.settings()).isEnabled) {
browserToolbar.showPageActionSeparator()
val isToolbarAtBottom = context.components.settings.toolbarPosition == ToolbarPosition.BOTTOM
// The toolbar view has already been added directly to the container.
// We should remove it and add the view to the navigation bar container.
// Should refactor this so there is no added view to remove to begin with:
// https://bugzilla.mozilla.org/show_bug.cgi?id=1870976
val browserToolbar = browserToolbarView.view
if (isToolbarAtBottom) {
binding.browserLayout.removeView(browserToolbar)
}
@ -486,6 +488,8 @@ abstract class BaseBrowserFragment :
owner = this,
view = view,
)
} else {
browserToolbar.hidePageActionSeparator()
}
toolbarIntegration.set(

@ -414,49 +414,6 @@ class BrowserFragment : BaseBrowserFragment(), UserInteractionHandler {
}
}
private fun initReloadAction(context: Context) {
if (!IncompleteRedesignToolbarFeature(context.settings()).isEnabled || refreshAction != null) {
return
}
refreshAction =
BrowserToolbar.TwoStateButton(
primaryImage = AppCompatResources.getDrawable(
context,
R.drawable.mozac_ic_arrow_clockwise_24,
)!!,
primaryContentDescription = context.getString(R.string.browser_menu_refresh),
primaryImageTintResource = ThemeManager.resolveAttribute(R.attr.textPrimary, context),
isInPrimaryState = {
getCurrentTab()?.content?.loading == false
},
secondaryImage = AppCompatResources.getDrawable(
context,
R.drawable.mozac_ic_stop,
)!!,
secondaryContentDescription = context.getString(R.string.browser_menu_stop),
disableInSecondaryState = false,
longClickListener = {
browserToolbarInteractor.onBrowserToolbarMenuItemTapped(
ToolbarMenu.Item.Reload(bypassCache = true),
)
},
listener = {
if (getCurrentTab()?.content?.loading == true) {
browserToolbarInteractor.onBrowserToolbarMenuItemTapped(ToolbarMenu.Item.Stop)
} else {
browserToolbarInteractor.onBrowserToolbarMenuItemTapped(
ToolbarMenu.Item.Reload(bypassCache = false),
)
}
},
)
refreshAction?.let {
browserToolbarView.view.addPageAction(it)
}
}
private fun initReviewQualityCheck(context: Context, view: View) {
val reviewQualityCheck =
BrowserToolbar.ToggleButton(

@ -12,6 +12,7 @@ import android.view.View
import android.view.ViewGroup
import androidx.annotation.LayoutRes
import androidx.annotation.VisibleForTesting
import androidx.appcompat.content.res.AppCompatResources
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.content.ContextCompat
import androidx.lifecycle.LifecycleOwner
@ -80,13 +81,23 @@ class BrowserToolbarView(
with(context) {
val isPinningSupported = components.useCases.webAppUseCases.isPinningSupported()
val searchUrlBackground = if (IncompleteRedesignToolbarFeature(context.settings()).isEnabled) {
R.drawable.search_url_background
} else {
R.drawable.search_old_url_background
}
view.apply {
setToolbarBehavior()
elevation = resources.getDimension(R.dimen.browser_fragment_toolbar_elevation)
if (!isCustomTabSession) {
display.setUrlBackground(getDrawable(R.drawable.search_url_background))
display.setUrlBackground(
AppCompatResources.getDrawable(
context,
searchUrlBackground,
),
)
}
display.onUrlClicked = {
@ -111,6 +122,10 @@ class BrowserToolbarView(
context,
ThemeManager.resolveAttribute(R.attr.borderPrimary, context),
)
val pageActionSeparatorColor = ContextCompat.getColor(
context,
ThemeManager.resolveAttribute(R.attr.borderToolbarDivider, context),
)
display.urlFormatter = { url -> URLStringUtils.toDisplayUrl(url) }
@ -126,6 +141,7 @@ class BrowserToolbarView(
context,
R.color.fx_mobile_icon_color_information,
),
pageActionSeparator = pageActionSeparatorColor,
)
display.hint = context.getString(R.string.search_hint)

@ -83,6 +83,7 @@ import org.mozilla.fenix.components.Core.Companion.BOOKMARKS_SEARCH_ENGINE_ID
import org.mozilla.fenix.components.Core.Companion.HISTORY_SEARCH_ENGINE_ID
import org.mozilla.fenix.components.Core.Companion.TABS_SEARCH_ENGINE_ID
import org.mozilla.fenix.components.appstate.AppAction
import org.mozilla.fenix.components.toolbar.IncompleteRedesignToolbarFeature
import org.mozilla.fenix.components.toolbar.ToolbarPosition
import org.mozilla.fenix.databinding.FragmentSearchDialogBinding
import org.mozilla.fenix.databinding.SearchSuggestionsHintBinding
@ -252,6 +253,11 @@ class SearchDialogFragment : AppCompatDialogFragment(), UserInteractionHandler {
binding.toolbar,
fromHomeFragment,
).also {
if (!IncompleteRedesignToolbarFeature(requireContext().settings()).isEnabled) {
it.view.hidePageActionSeparator()
} else {
it.view.showPageActionSeparator()
}
inlineAutocompleteEditText = it.view.findViewById(R.id.mozac_browser_toolbar_edit_url_view)
inlineAutocompleteEditText.increaseTapArea(TAP_INCREASE_DPS_4)
}

@ -18,6 +18,8 @@ import mozilla.components.support.ktx.android.view.hideKeyboard
import org.mozilla.fenix.GleanMetrics.Events
import org.mozilla.fenix.R
import org.mozilla.fenix.components.Components
import org.mozilla.fenix.components.toolbar.IncompleteRedesignToolbarFeature
import org.mozilla.fenix.ext.settings
import org.mozilla.fenix.search.SearchEngineSource
import org.mozilla.fenix.search.SearchFragmentState
import org.mozilla.fenix.utils.Settings
@ -99,10 +101,20 @@ class ToolbarView(
R.color.suggestion_highlight_color,
),
clear = context.getColorFromAttr(R.attr.textPrimary),
pageActionSeparator = context.getColorFromAttr(R.attr.borderToolbarDivider),
)
val searchUrlBackground = if (IncompleteRedesignToolbarFeature(context.settings()).isEnabled) {
R.drawable.search_url_background
} else {
R.drawable.search_old_url_background
}
edit.setUrlBackground(
AppCompatResources.getDrawable(context, R.drawable.search_url_background),
AppCompatResources.getDrawable(
context,
searchUrlBackground,
),
)
private = isPrivate

@ -105,6 +105,7 @@ private val darkColorPalette = FirefoxColors(
layerConfirmation = PhotonColors.Green80,
layerError = PhotonColors.Pink80,
layerInfo = PhotonColors.Blue50,
layerSearch = PhotonColors.DarkGrey80,
actionPrimary = PhotonColors.Violet60,
actionSecondary = PhotonColors.LightGrey30,
actionTertiary = PhotonColors.DarkGrey10,
@ -161,6 +162,7 @@ private val darkColorPalette = FirefoxColors(
borderAccent = PhotonColors.Violet40,
borderDisabled = PhotonColors.LightGrey05A40,
borderWarning = PhotonColors.Red40,
borderToolbarDivider = PhotonColors.DarkGrey60,
)
private val lightColorPalette = FirefoxColors(
@ -180,6 +182,7 @@ private val lightColorPalette = FirefoxColors(
layerConfirmation = PhotonColors.Green20,
layerError = PhotonColors.Red10,
layerInfo = PhotonColors.Blue50A44,
layerSearch = PhotonColors.LightGrey30,
actionPrimary = PhotonColors.Ink20,
actionSecondary = PhotonColors.LightGrey30,
actionTertiary = PhotonColors.LightGrey40,
@ -236,12 +239,15 @@ private val lightColorPalette = FirefoxColors(
borderAccent = PhotonColors.Ink20,
borderDisabled = PhotonColors.DarkGrey90A40,
borderWarning = PhotonColors.Red70,
borderToolbarDivider = PhotonColors.LightGrey10,
)
private val privateColorPalette = darkColorPalette.copy(
layer1 = PhotonColors.Ink50,
layer2 = PhotonColors.Ink50,
layer3 = PhotonColors.Ink90,
layerSearch = PhotonColors.Ink90,
borderToolbarDivider = PhotonColors.Violet80,
)
/**
@ -266,6 +272,7 @@ class FirefoxColors(
layerConfirmation: Color,
layerError: Color,
layerInfo: Color,
layerSearch: Color,
actionPrimary: Color,
actionSecondary: Color,
actionTertiary: Color,
@ -322,6 +329,7 @@ class FirefoxColors(
borderAccent: Color,
borderDisabled: Color,
borderWarning: Color,
borderToolbarDivider: Color,
) {
// Layers
@ -388,6 +396,10 @@ class FirefoxColors(
var layerInfo by mutableStateOf(layerInfo)
private set
// Search
var layerSearch by mutableStateOf(layerSearch)
private set
// Actions
// Primary button, Snackbar, Floating action button, Chip selected
@ -608,6 +620,14 @@ class FirefoxColors(
var borderWarning by mutableStateOf(borderWarning)
private set
// Toolbar divider
var borderToolbarDivider by mutableStateOf(borderToolbarDivider)
private set
/**
* Updates the existing colors with the provided [FirefoxColors].
*/
@Suppress("LongMethod")
fun update(other: FirefoxColors) {
layer1 = other.layer1
layer2 = other.layer2
@ -625,6 +645,7 @@ class FirefoxColors(
layerConfirmation = other.layerConfirmation
layerError = other.layerError
layerInfo = other.layerInfo
layerSearch = other.layerSearch
actionPrimary = other.actionPrimary
actionSecondary = other.actionSecondary
actionTertiary = other.actionTertiary
@ -681,11 +702,13 @@ class FirefoxColors(
borderAccent = other.borderAccent
borderDisabled = other.borderDisabled
borderWarning = other.borderWarning
borderToolbarDivider = other.borderToolbarDivider
}
/**
* Return a copy of this [FirefoxColors] and optionally overriding any of the provided values.
*/
@Suppress("LongMethod")
fun copy(
layer1: Color = this.layer1,
layer2: Color = this.layer2,
@ -703,6 +726,7 @@ class FirefoxColors(
layerConfirmation: Color = this.layerConfirmation,
layerError: Color = this.layerError,
layerInfo: Color = this.layerInfo,
layerSearch: Color = this.layerSearch,
actionPrimary: Color = this.actionPrimary,
actionSecondary: Color = this.actionSecondary,
actionTertiary: Color = this.actionTertiary,
@ -759,6 +783,7 @@ class FirefoxColors(
borderAccent: Color = this.borderAccent,
borderDisabled: Color = this.borderDisabled,
borderWarning: Color = this.borderWarning,
borderToolbarDivider: Color = this.borderToolbarDivider,
): FirefoxColors = FirefoxColors(
layer1 = layer1,
layer2 = layer2,
@ -776,6 +801,7 @@ class FirefoxColors(
layerConfirmation = layerConfirmation,
layerError = layerError,
layerInfo = layerInfo,
layerSearch = layerSearch,
actionPrimary = actionPrimary,
actionSecondary = actionSecondary,
actionTertiary = actionTertiary,
@ -832,6 +858,7 @@ class FirefoxColors(
borderAccent = borderAccent,
borderDisabled = borderDisabled,
borderWarning = borderWarning,
borderToolbarDivider = borderToolbarDivider,
)
}

@ -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">
<solid android:color="?layer3"/>
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>

@ -3,10 +3,10 @@
- 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">
<solid android:color="?layer3"/>
<solid android:color="?layerSearch"/>
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>

@ -31,6 +31,8 @@
<color name="fx_mobile_layer_color_error" tools:ignore="UnusedResources">@color/photonPink80</color>
<!-- Info background -->
<color name="fx_mobile_layer_color_info" tools:ignore="UnusedResources">@color/photonBlue50A80</color>
<!-- Search -->
<color name="fx_mobile_layer_color_search">@color/photonDarkGrey80</color>
<!-- Action -->
<!-- Primary button, Snackbar, Floating action button, Chip selected -->
@ -143,6 +145,8 @@
<color name="fx_mobile_border_color_disabled" tools:ignore="UnusedResources">@color/photonLightGrey05A40</color>
<!-- Form parts -->
<color name="fx_mobile_border_color_warning" tools:ignore="UnusedResources">@color/photonRed40</color>
<!-- Toolbar divider -->
<color name="fx_mobile_border_color_toolbar_divider">@color/photonDarkGrey60</color>
<!-- Normal theme colors for dark mode -->
<color name="accent_normal_theme">@color/photonViolet50</color>

@ -12,6 +12,7 @@
<attr name="layer2" format="reference" />
<!-- Search -->
<attr name="layer3" format="reference" />
<attr name="layerSearch" format="reference" />
<!-- Selected tab -->
<attr name="layerNonOpaque" format="reference" />
<attr name="scrim" format="reference" />
@ -47,6 +48,8 @@
<!-- Border -->
<!-- Default, Divider, Dotted -->
<attr name="borderPrimary" format="reference" />
<!-- Toolbar divider -->
<attr name="borderToolbarDivider" format="reference"/>
<!-- Color palette attributes -->
<attr name="accent" format="reference" />

@ -12,6 +12,7 @@
<color name="fx_mobile_layer_color_2">@color/photonWhite</color>
<!-- Search -->
<color name="fx_mobile_layer_color_3">@color/photonLightGrey20</color>
<color name="fx_mobile_layer_color_search">@color/photonLightGrey30</color>
<!-- App Bar Top (edit), Text Cursor, Selected Tab Check -->
<color name="fx_mobile_layer_color_accent">@color/photonInk20</color>
<!-- Selected tab -->
@ -133,6 +134,8 @@
<!-- Border -->
<!-- Default, Divider, Dotted -->
<color name="fx_mobile_border_color_primary">@color/photonLightGrey30</color>
<!-- Toolbar divider -->
<color name="fx_mobile_border_color_toolbar_divider">@color/photonLightGrey10</color>
<!-- Onboarding -->
<color name="fx_mobile_border_color_inverted" tools:ignore="UnusedResources">@color/photonDarkGrey05</color>
<!-- Form parts -->
@ -153,6 +156,7 @@
<color name="fx_mobile_private_layer_color_2">@color/photonInk50</color>
<!-- Search -->
<color name="fx_mobile_private_layer_color_3">@color/photonInk90</color>
<color name="fx_mobile_private_layer_color_search">@color/photonInk90</color>
<!-- Homescreen background, Toolbar -->
<color name="fx_mobile_private_layer_color_4_start">@color/photonPurple70</color>
<!-- Homescreen background, Toolbar -->
@ -274,6 +278,8 @@
<color name="fx_mobile_private_border_color_disabled" tools:ignore="UnusedResources">@color/photonLightGrey05A40</color>
<!-- Form parts -->
<color name="fx_mobile_private_border_color_warning" tools:ignore="UnusedResources">@color/photonRed40</color>
<!-- Toolbar divider -->
<color name="fx_mobile_private_border_color_toolbar_divider">@color/photonViolet80</color>
<!-- Light theme color palette -->
<color name="primary_text_light_theme">@color/photonInk80</color>

@ -50,6 +50,7 @@
<item name="layer2">@color/fx_mobile_layer_color_2</item>
<!-- Search -->
<item name="layer3">@color/fx_mobile_layer_color_3</item>
<item name="layerSearch">@color/fx_mobile_layer_color_search</item>
<!-- Selected tab -->
<item name="layerNonOpaque">@color/fx_mobile_layer_color_accent_nonopaque</item>
<item name="scrim">@color/fx_mobile_layer_color_scrim</item>
@ -85,7 +86,8 @@
<!-- Border -->
<!-- Default, Divider, Dotted -->
<item name="borderPrimary">@color/fx_mobile_border_color_primary</item>
<!-- Toolbar divider -->
<item name="borderToolbarDivider">@color/fx_mobile_border_color_toolbar_divider</item>
<!-- Active thumb color & Active track color (30% transparency) -->
<item name="colorControlActivated">@color/accent_high_contrast_normal_theme</item>
<!-- Inactive thumb color -->
@ -243,6 +245,7 @@
<item name="layer2">@color/fx_mobile_private_layer_color_2</item>
<!-- Search -->
<item name="layer3">@color/fx_mobile_private_layer_color_3</item>
<item name="layerSearch">@color/fx_mobile_private_layer_color_search</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>
@ -278,6 +281,8 @@
<!-- Border -->
<!-- Default, Divider, Dotted -->
<item name="borderPrimary">@color/fx_mobile_private_border_color_primary</item>
<!-- Toolbar divider -->
<item name="borderToolbarDivider">@color/fx_mobile_private_border_color_toolbar_divider</item>
<!-- Inactive thumb color -->
<item name="colorSwitchThumbNormal">@color/toggle_off_knob_dark_theme</item>

@ -147,6 +147,7 @@ class ToolbarViewTest {
every { context.settings().shouldShowHistorySuggestions } returns true
every { context.settings().shouldShowBookmarkSuggestions } returns true
every { context.settings().isTabletAndTabStripEnabled } returns false
every { context.settings().enableIncompleteToolbarRedesign } returns false
val view = buildToolbarView(false)
mockkObject(FeatureFlags)
@ -163,6 +164,7 @@ class ToolbarViewTest {
every { context.settings().shouldShowHistorySuggestions } returns true
every { context.settings().shouldShowBookmarkSuggestions } returns true
every { context.settings().isTabletAndTabStripEnabled } returns false
every { context.settings().enableIncompleteToolbarRedesign } returns false
val view = buildToolbarView(false)
mockkObject(FeatureFlags)

Loading…
Cancel
Save