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

- 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: <!-- Add issue number if applicable -->

## **Manual testing steps**

```gherkin
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**

<img width="450" height="316" alt="Screenshot 2026-01-29 at 16 22 49"

src="https://github.com/user-attachments/assets/3dba6e1b-9f3f-4dae-8f9c-17512524bf87"
/>

- 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




https://github.com/user-attachments/assets/68be1901-f419-4d1e-891f-6d976709a610

<!-- Add actual screenshots/recordings here -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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 |


<!-- CURSOR_SUMMARY -->
---

> [!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.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
be165e0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[6471fcd](6471fcd)

Co-authored-by: Aslau Mario-Daniel <marioaslau@gmail.com>

Author: runway-github[bot]

app/components/Base/RemoteImage/index.test.tsx

@@ -336,15 +336,21 @@ describe('RemoteImage', () => {
   });
 
   describe('Image Dimensions', () => {
+    let dimensionsSpy: jest.SpyInstance;
+
     beforeEach(() => {
-      jest.spyOn(Dimensions, 'get').mockReturnValue({
+      dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
         width: 400,
         height: 800,
         scale: 1,
         fontScale: 1,
       });
     });
 
+    afterEach(() => {
+      dimensionsSpy.mockRestore();
+    });
+
     it('calculates dimensions for horizontal image', async () => {
       const { UNSAFE_getByType } = render(
         <RemoteImage

app/components/UI/BrowserUrlBar/BrowserUrlBar.styles.ts

@@ -62,13 +62,10 @@ const styleSheet = ({
     },
     cancelButtonText: {
       fontSize: 14,
-      color: colors.primary.default,
-      ...fontStyles.normal,
+      color: colors.text.default,
+      fontWeight: '500',
     },
     rightButton: { height: 50, justifyContent: 'center' },
-    closeButton: {
-      marginRight: 16,
-    },
     tabsButton: {
       height: 50,
       justifyContent: 'center',

app/components/UI/BrowserUrlBar/BrowserUrlBar.test.tsx

@@ -520,10 +520,10 @@ describe('BrowserUrlBar', () => {
       });
     });
 
-    describe('when URL bar is focused and showCloseButton is false', () => {
+    describe('when URL bar is focused', () => {
       it('renders Cancel button with text', () => {
         const { getByTestId, getByText } = renderWithProvider(
-          <BrowserUrlBar {...defaultProps} showCloseButton={false} />,
+          <BrowserUrlBar {...defaultProps} />,
           { state: mockInitialState },
         );
 
@@ -541,7 +541,7 @@ describe('BrowserUrlBar', () => {
         const props = { ...defaultProps, onCancel: onCancelMock };
 
         const { getByTestId } = renderWithProvider(
-          <BrowserUrlBar {...props} showCloseButton={false} />,
+          <BrowserUrlBar {...props} />,
           { state: mockInitialState },
         );
 
@@ -554,64 +554,10 @@ describe('BrowserUrlBar', () => {
       });
     });
 
-    describe('when URL bar is focused and showCloseButton is true', () => {
-      it('renders Close icon ButtonIcon', () => {
-        const { getByTestId, queryByText } = renderWithProvider(
-          <BrowserUrlBar {...defaultProps} showCloseButton />,
-          { state: mockInitialState },
-        );
-
-        const closeButton = getByTestId(
-          BrowserURLBarSelectorsIDs.CANCEL_BUTTON_ON_BROWSER_ID,
-        );
-        const cancelText = queryByText('Cancel');
-
-        expect(closeButton).toBeDefined();
-        expect(cancelText).toBeNull();
-      });
-
-      it('calls onCancel when Close button is pressed', () => {
-        const onCancelMock = jest.fn();
-        const props = { ...defaultProps, onCancel: onCancelMock };
-
-        const { getByTestId } = renderWithProvider(
-          <BrowserUrlBar {...props} showCloseButton />,
-          { state: mockInitialState },
-        );
-
-        const closeButton = getByTestId(
-          BrowserURLBarSelectorsIDs.CANCEL_BUTTON_ON_BROWSER_ID,
-        );
-        fireEvent.press(closeButton);
-
-        expect(onCancelMock).toHaveBeenCalled();
-      });
-
-      it('sets URL bar focused state to false when Close button is pressed', () => {
-        const setIsUrlBarFocusedMock = jest.fn();
-        const props = {
-          ...defaultProps,
-          setIsUrlBarFocused: setIsUrlBarFocusedMock,
-        };
-
-        const { getByTestId } = renderWithProvider(
-          <BrowserUrlBar {...props} showCloseButton />,
-          { state: mockInitialState },
-        );
-
-        const closeButton = getByTestId(
-          BrowserURLBarSelectorsIDs.CANCEL_BUTTON_ON_BROWSER_ID,
-        );
-        fireEvent.press(closeButton);
-
-        expect(setIsUrlBarFocusedMock).toHaveBeenCalledWith(false);
-      });
-    });
-
     describe('button rendering logic', () => {
-      it('does not render Cancel or Close button when URL bar is not focused', () => {
+      it('does not render Cancel button when URL bar is not focused', () => {
         const { queryByText } = renderWithProvider(
-          <BrowserUrlBar {...propsWithoutUrlBarFocused} showCloseButton />,
+          <BrowserUrlBar {...propsWithoutUrlBarFocused} />,
           { state: mockInitialState },
         );
 
@@ -620,19 +566,14 @@ describe('BrowserUrlBar', () => {
         expect(cancelText).toBeNull();
       });
 
-      it('renders correct button based on showCloseButton prop value change', () => {
-        const { getByText, rerender, queryByText } = renderWithProvider(
-          <BrowserUrlBar {...defaultProps} showCloseButton={false} />,
+      it('always renders Cancel text button when URL bar is focused', () => {
+        const { getByText } = renderWithProvider(
+          <BrowserUrlBar {...defaultProps} />,
           { state: mockInitialState },
         );
 
         const cancelText = getByText('Cancel');
         expect(cancelText).toBeDefined();
-
-        rerender(<BrowserUrlBar {...defaultProps} showCloseButton />);
-
-        const cancelTextAfterRerender = queryByText('Cancel');
-        expect(cancelTextAfterRerender).toBeNull();
       });
     });
   });

app/components/UI/BrowserUrlBar/BrowserUrlBar.tsx

@@ -57,7 +57,6 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
       activeUrl,
       setIsUrlBarFocused,
       isUrlBarFocused,
-      showCloseButton,
       showTabs,
     },
     ref,
@@ -143,19 +142,7 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
         );
       }
 
-      if (showCloseButton) {
-        return (
-          <ButtonIcon
-            iconName={IconName.Close}
-            onPress={onCancelInput}
-            iconColor={colors.icon.default}
-            size={ButtonIconSizes.Lg}
-            style={styles.closeButton}
-            testID={BrowserURLBarSelectorsIDs.CANCEL_BUTTON_ON_BROWSER_ID}
-          />
-        );
-      }
-
+      // Always show "Cancel" text when focused
       return (
         <TouchableOpacity
           hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
@@ -170,12 +157,9 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
       );
     }, [
       isUrlBarFocused,
-      showCloseButton,
       selectedAddress,
       handleAccountRightButtonPress,
       onCancelInput,
-      colors.icon.default,
-      styles.closeButton,
       styles.cancelButton,
       styles.cancelButtonText,
     ]);

app/components/UI/BrowserUrlBar/BrowserUrlBar.types.ts

@@ -33,6 +33,5 @@ export type BrowserUrlBarProps = {
   activeUrl: string;
   setIsUrlBarFocused: (focused: boolean) => void;
   isUrlBarFocused: boolean;
-  showCloseButton?: boolean;
   showTabs?: () => void;
 };

app/components/UI/BrowserUrlBar/__snapshots__/BrowserUrlBar.test.tsx.snap

@@ -171,9 +171,10 @@ exports[`BrowserUrlBar render matches snapshot when focused 1`] = `
         accessibilityRole="text"
         style={
           {
-            "color": "#4459ff",
-            "fontFamily": "Geist-Regular",
+            "color": "#121314",
+            "fontFamily": "Geist-Medium",
             "fontSize": 14,
+            "fontWeight": "500",
             "letterSpacing": 0,
             "lineHeight": 24,
           }

app/components/Views/BrowserTab/BrowserTab.tsx

@@ -1395,12 +1395,14 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(
               alignItems={BoxAlignItems.Center}
               twClassName="gap-2"
             >
-              <ButtonIcon
-                iconName={IconName.Close}
-                size={ButtonIconSize.Lg}
-                onPress={handleClosePress}
-                testID="browser-tab-close-button"
-              />
+              {!isUrlBarFocused && (
+                <ButtonIcon
+                  iconName={IconName.ArrowLeft}
+                  size={ButtonIconSize.Lg}
+                  onPress={handleClosePress}
+                  testID="browser-tab-close-button"
+                />
+              )}
               <Box twClassName="flex-1">
                 <BrowserUrlBar
                   ref={urlBarRef}
@@ -1414,9 +1416,6 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(
                   activeUrl={resolvedUrlRef.current}
                   setIsUrlBarFocused={setIsUrlBarFocused}
                   isUrlBarFocused={isUrlBarFocused}
-                  showCloseButton={
-                    fromTrending && isAssetsTrendingTokensEnabled
-                  }
                   showTabs={showTabsView}
                 />
               </Box>

app/components/Views/BrowserTab/__snapshots__/index.test.tsx.snap

@@ -98,7 +98,7 @@ exports[`BrowserTab render Browser 1`] = `
         >
           <SvgMock
             fill="currentColor"
-            name="Close"
+            name="ArrowLeft"
             style={
               [
                 {

app/components/Views/BrowserTab/index.test.tsx

@@ -103,6 +103,21 @@ describe('BrowserTab', () => {
     expect(screen.toJSON()).toMatchSnapshot();
   });
 
+  describe('Back Button', () => {
+    it('renders back button when URL bar is not focused', async () => {
+      renderWithProvider(<BrowserTab {...mockProps} />, {
+        state: mockInitialState,
+      });
+
+      await waitFor(() =>
+        expect(screen.getByTestId('browser-webview')).toBeVisible(),
+      );
+
+      const backButton = screen.getByTestId('browser-tab-close-button');
+      expect(backButton).toBeTruthy();
+    });
+  });
+
   describe('WebView originWhitelist', () => {
     it('sets originWhitelist to wildcard for all URLs', async () => {
       renderWithProvider(<BrowserTab {...mockProps} />, {