Refactor #30235 ⁃ [TabScrollController refactor] Use transform instead of constraints to animate toolbars (#30255)

* Use transform in animation instead of constraints * Improve code readability plus documentation

Author: yoanarios

firefox-ios/Client/Frontend/Browser/BrowserViewController/Extensions/BrowserViewController+TabScrollHandlerDelegate.swift

@@ -9,6 +9,14 @@ extension BrowserViewController: TabScrollHandler.Delegate {
  return calculateOverKeyboardScrollHeight(safeAreaInsets: UIWindow.keyWindow?.safeAreaInsets)
  }
 
+ // Checks if minimal address bar is enabled and tab is on reader mode bar or findInPage
+ private var shouldSendAlphaChangeAction: Bool {
+ guard let tab = tabManager.selectedTab,
+ let tabURL = tab.url else { return false }
+
+ return isMinimalAddressBarEnabled && !tab.isFindInPageMode && !tabURL.isReaderModeURL
+ }
+
  private var headerOffset: CGFloat {
  let baseOffset = -getHeaderSize().height
  let isiPad = UIDevice.current.userInterfaceIdiom == .pad
@@ -20,28 +28,32 @@ extension BrowserViewController: TabScrollHandler.Delegate {
  return baseOffset + UX.minimalHeaderOffset
  }
 
- /// Interactive toolbar transition.
- /// Top bar moves in [headerOffset, 0] using `originTop - clampProgress`
- /// Bottom bar moves in [0, height]using `originBottom + clampProgress`
- /// Values are clamped to their ranges, then layout is requested.
+ /// Animates the toolbar transition between expanded and collapsed states based on scroll progress.
+ /// This method applies a smooth translation transform to either the top or bottom toolbar
+ /// (depending on whether `isBottomSearchBar` is true), animating its movement as the user scrolls.
+ /// - Parameters:
+ /// - progress: The current scroll progress used to determine the translation amount.
+ /// Positive values indicate upward scrolling (collapsing), and negative values indicate downward scrolling (expanding).
+ /// - state: The target display state of the toolbar (`.collapsed` or `.expanded`).
  func updateToolbarTransition(progress: CGFloat, towards state: TabScrollHandler.ToolbarDisplayState) {
- // Clamp movement to the intended direction (toward `state`)
- let clampProgress = (state == .collapsed) ? max(0, progress) : min(0, progress)
-
- // Top toolbar: range [headerOffset ... 0]
- if !isBottomSearchBar {
- let originTop: CGFloat = (state == .expanded) ? 0 : headerOffset
- let topOffset = clamp(offset: originTop - clampProgress, min: headerOffset, max: 0)
- headerTopConstraint?.update(offset: topOffset)
- header.superview?.layoutIfNeeded()
+ let isCollapsing = (state == .collapsed)
+ let clampProgress = isCollapsing ? max(0, progress) : min(0, progress)
+
+ UIView.animate(withDuration: 0.2, delay: 0, options: [.curveEaseOut]) { [self] in
+ if isBottomSearchBar {
+ let translationY = isCollapsing ? clampProgress : 0
+ let transform = CGAffineTransform(translationX: 0, y: translationY)
+ bottomContainer.transform = transform
+ overKeyboardContainer.transform = transform
+ bottomBlurView.transform = transform
+ } else {
+ let topTransform = isCollapsing
+ ? CGAffineTransform(translationX: 0, y: -clampProgress)
+ : .identity
+ header.transform = topTransform
+ topBlurView.transform = topTransform
+ }
  }
-
- // Bottom toolbar: range [0 ... height]
- let bottomContainerHeight = getBottomContainerSize().height
- let originBottom: CGFloat = (state == .expanded) ? bottomContainerHeight : 0
- let bottomOffset = clamp(offset: originBottom + clampProgress, min: 0, max: bottomContainerHeight)
- bottomContainerConstraint?.update(offset: bottomOffset)
- bottomContainer.superview?.layoutIfNeeded()
  }
 
  func showToolbar() {
@@ -67,7 +79,7 @@ extension BrowserViewController: TabScrollHandler.Delegate {
 
  private func updateTopToolbar(topOffset: CGFloat, alpha: CGFloat) {
  guard UIAccessibility.isReduceMotionEnabled else {
- animateTopToolbar(topOffset: topOffset, alpha: alpha)
+ animateTopToolbar(alpha: alpha)
  return
  }
 
@@ -91,9 +103,7 @@ extension BrowserViewController: TabScrollHandler.Delegate {
  overKeyboardContainerOffset: CGFloat,
  alpha: CGFloat) {
  guard UIAccessibility.isReduceMotionEnabled else {
- animateBottomToolbar(bottomOffset: bottomContainerOffset,
- overKeyboardOffset: overKeyboardContainerOffset,
- alpha: alpha)
+ animateBottomToolbar(alpha: alpha)
  return
  }
 
@@ -114,16 +124,19 @@ extension BrowserViewController: TabScrollHandler.Delegate {
  }
  }
 
- private func animateTopToolbar(topOffset: CGFloat, alpha: CGFloat) {
- headerTopConstraint?.update(offset: topOffset)
-
+ private func animateTopToolbar(alpha: CGFloat) {
+ let isShowing = alpha == 1
  UIView.animate(withDuration: UX.topToolbarDuration,
  delay: 0,
- options: [.curveEaseOut, .beginFromCurrentState]) { [weak self] in
- guard let self else { return }
-
- header.superview?.layoutIfNeeded()
- header.updateAlphaForSubviews(alpha)
+ options: [.curveEaseOut]) { [self] in
+ if !isShowing {
+ header.transform = .identity.translatedBy(x: 0, y: -topBlurView.frame.height)
+ topBlurView.transform = .identity.translatedBy(x: 0,
+ y: -topBlurView.frame.height)
+ } else {
+ header.transform = .identity
+ topBlurView.transform = .identity
+ }
  }
 
  if shouldSendAlphaChangeAction {
@@ -135,20 +148,23 @@ extension BrowserViewController: TabScrollHandler.Delegate {
  )
  )
  }
- }
-
- private func animateBottomToolbar(bottomOffset: CGFloat,
- overKeyboardOffset: CGFloat,
- alpha: CGFloat) {
- bottomContainerConstraint?.update(offset: bottomOffset)
- overKeyboardContainerConstraint?.update(offset: overKeyboardOffset)
+ }
 
+ private func animateBottomToolbar(alpha: CGFloat) {
+ let isShowing = alpha == 1
+ let customOffset: CGFloat = getBottomContainerSize().height + overKeyboardContainerHeight
  UIView.animate(withDuration: UX.bottomToolbarDuration,
  delay: 0,
- options: [.curveEaseOut, .beginFromCurrentState]) { [weak self] in
- guard let self else { return }
-
- bottomContainer.superview?.layoutIfNeeded()
+ options: [.curveEaseOut]) { [self] in
+ if !isShowing {
+ bottomContainer.transform = .identity.translatedBy(x: 0, y: customOffset)
+ overKeyboardContainer.transform = .identity.translatedBy(x: 0, y: customOffset)
+ bottomBlurView.transform = .identity.translatedBy(x: 0, y: customOffset)
+ } else {
+ bottomContainer.transform = .identity
+ overKeyboardContainer.transform = .identity
+ bottomBlurView.transform = .identity
+ }
  }
 
  if shouldSendAlphaChangeAction {
@@ -162,14 +178,6 @@ extension BrowserViewController: TabScrollHandler.Delegate {
  }
  }
 
- // Checks if minimal address bar is enabled and tab is on reader mode bar or findInPage
- private var shouldSendAlphaChangeAction: Bool {
- guard let tab = tabManager.selectedTab,
- let tabURL = tab.url else { return false }
-
- return isMinimalAddressBarEnabled && !tab.isFindInPageMode && !tabURL.isReaderModeURL
- }
-
  /// Helper method for testing overKeyboardScrollHeight behavior.
  /// - Parameters:
  /// - safeAreaInsets: The safe area insets to use (nil treated as .zero).

firefox-ios/Client/Frontend/Browser/BrowserViewController/Views/BrowserViewController.swift

@@ -47,7 +47,7 @@ class BrowserViewController: UIViewController,
  static let minimalHeaderOffset: CGFloat = 14
 
  static let topToolbarDuration: TimeInterval = 0.3
- static let bottomToolbarDuration: TimeInterval = 0.5
+ static let bottomToolbarDuration: TimeInterval = 0.4
  }
 
  /// Describes the state of the current search session. This state is used
@@ -223,11 +223,11 @@ class BrowserViewController: UIViewController,
  }()
 
  // MARK: Blur views for translucent toolbars
- private lazy var topBlurView: UIVisualEffectView = .build { view in
+ lazy var topBlurView: UIVisualEffectView = .build { view in
  view.effect = self.effect
  }
 
- private lazy var bottomBlurView: UIVisualEffectView = .build { view in
+ lazy var bottomBlurView: UIVisualEffectView = .build { view in
  view.effect = self.effect
  }