chore(runway): cherry-pick feat: implement Url Bar Button Updates

[runway-github]

• feat: implement Url Bar Button Updates (feat: implement Url Bar Button Updates #25418)

Description

This PR updates the WebBrowser URL bar button interactions to match the
new design specifications and fix the "3 X buttons" issue.

Jira Ticket: https://consensyssoftware.atlassian.net/browse/MCWP-310

Problem

Previously, the URL bar could display up to 3 "X" buttons
simultaneously:

1. Top-left back button (always an X)
2. Clear input button (CircleX inside input)
3. Cancel button (could be X when showCloseButton was true)

This created a confusing user experience where multiple
identical-looking buttons performed different actions.

Solution

• Back Button: Changed icon from X to < (ArrowLeft) and hidden
  when URL input is focused
• Cancel Button: Now always displays "Cancel" text (never an X
  icon), styled to match the Explore search bar
• Clear Button: Unchanged - CircleX inside input to clear text
  (already correct)
• Removed the showCloseButton prop that was causing the Cancel button
  to show an X icon in certain flows

Button Behavior Summary

State	Before	After
Not focused	X button (left) + Tabs + Account	< button (left)

• Tabs + Account |
  | Focused | X button (left) + Clear (X) + Cancel (X or text) | Clear
  (X) + Cancel (text) |

Changelog

CHANGELOG entry: Updated browser URL bar buttons - back button now shows
chevron icon and hides when typing, cancel button always shows text
instead of X icon

Related issues

Fixes:

Manual testing steps

Feature: Browser URL Bar Button Interactions

  Scenario: User sees back button when browsing
    Given the user has opened a website in the browser
    And the URL bar is not focused

    When user views the browser top bar
    Then the back button should display a "<" chevron icon on the left
    And the tabs button and account button should be visible on the right

  Scenario: User focuses on URL bar to search
    Given the user has opened a website in the browser
    And the URL bar is not focused

    When user taps on the URL bar
    Then the back button should be hidden
    And the "Cancel" text button should appear on the right
    And the clear (X) button should appear inside the input field

  Scenario: User clears search input
    Given the user has focused on the URL bar
    And has typed some text

    When user taps the clear (X) button inside the input
    Then the text should be cleared
    And the URL bar should remain focused

  Scenario: User cancels search
    Given the user has focused on the URL bar

    When user taps the "Cancel" button
    Then the URL bar should lose focus
    And the back button "<" should reappear
    And the current page URL should be restored

  Scenario: User navigates back to Explore
    Given the user has opened a website in the browser
    And the URL bar is not focused

    When user taps the back button "<"
    Then user should be navigated back to the Explore/Trending page

Screenshots/Recordings

Before

• Back button showed "X" icon
• Cancel button could show "X" icon (when opened from Trending)
• 3 X buttons could be visible simultaneously when URL bar was focused

After

• Back button shows "<" chevron icon
• Back button hides when URL bar is focused
• Cancel button always shows "Cancel" text
• Only the clear button (inside input) shows an X when focused

UrlDesignUpdate.mov

Pre-merge author checklist

• I've followed MetaMask Contributor
  Docs and MetaMask Mobile
  Coding
  Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format
  if applicable
• I've applied the right labels on the PR (see labeling
  guidelines).
  Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the
  app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described
  in the ticket it closes and includes the necessary testing evidence such
  as recordings and or screenshots.

---

Files Changed

File	Change
BrowserTab.tsx	Changed back button icon to ArrowLeft, hide when
URL bar focused
BrowserUrlBar.tsx	Removed showCloseButton prop, simplified
renderRightButton
BrowserUrlBar.types.ts	Removed showCloseButton prop type
BrowserUrlBar.styles.ts	Updated cancelButtonText to use default
text color with medium weight
BrowserUrlBar.test.tsx	Updated tests for removed showCloseButton
functionality
BrowserTab/index.test.tsx	Added test for back button visibility
RemoteImage/index.test.tsx	Fixed flaky test by properly cleaning
up Dimensions mock

---

Note

Low Risk
Low risk UI behavior/styling changes in the in-app browser header plus test updates; main risk is minor UX regressions around focus state and navigation affordances.

Overview
Browser URL bar button behavior is simplified to match new designs. BrowserUrlBar no longer supports showCloseButton; when focused it always shows a text Cancel button (with updated styling) instead of sometimes rendering a close icon.

Browser header navigation icon is updated. BrowserTab replaces the left-side close icon with an ArrowLeft button and hides it while the URL bar is focused.

Tests and snapshots are updated accordingly, and RemoteImage tests now properly restore the Dimensions.get spy to reduce test flakiness.

^{Written by Cursor Bugbot for commit be165e0. This will update automatically on new commits. Configure here.}

6471fcd

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - base branch is not main (base: release/7.64.0)

All E2E tests pre-selected.

View GitHub Actions results

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

[cursor]

Test uses weak matcher instead of toBeOnTheScreen

Low Severity · Bugbot Rules

The newly added test uses expect(backButton).toBeTruthy() to assert element presence. This violates the BUGBOT rule: "Do not use weak matchers like toBeDefined or toBeTruthy to assert element presence. Use toBeOnTheScreen()." The assertion at line 117 needs to use toBeOnTheScreen() instead of toBeTruthy() for proper element presence verification.

 

[cursor]

Duplicate test for Cancel button rendering when focused

Low Severity

The test 'always renders Cancel text button when URL bar is focused' at line 569 is redundant with the test 'renders Cancel button with text' at line 524. Both tests render BrowserUrlBar with defaultProps (which has isUrlBarFocused: true) and verify the Cancel button text is present. The first test already covers this case with more thorough assertions (checking both testID and text), making the second test unnecessary.

Additional Locations (1)

• app/components/UI/BrowserUrlBar/BrowserUrlBar.test.tsx#L522-L537

 

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[metamaskbot]

No release label on PR. Adding release label release-7.64.0 on PR, as PR was cherry-picked in branch 7.64.0.