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

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

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