Skip to content

feat: implement Url Bar Button Updates #25418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MarioAslau merged 3 commits into from
Jan 30, 2026
Merged

feat: implement Url Bar Button Updates #25418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec33fbd
feat: implement Url Bar Button Updates
MarioAslau Jan 29, 2026
fb172ba
feat: updated unit test
MarioAslau Jan 29, 2026
5acd94c
Merge branch 'main' into feat/update-url-bar-design
MarioAslau Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion app/components/Base/RemoteImage/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 2 additions & 5 deletions app/components/UI/BrowserUrlBar/BrowserUrlBar.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
75 changes: 8 additions & 67 deletions app/components/UI/BrowserUrlBar/BrowserUrlBar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
);

Expand All @@ -541,7 +541,7 @@ describe('BrowserUrlBar', () => {
const props = { ...defaultProps, onCancel: onCancelMock };

const { getByTestId } = renderWithProvider(
<BrowserUrlBar {...props} showCloseButton={false} />,
<BrowserUrlBar {...props} />,
{ state: mockInitialState },
);

Expand All @@ -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 },
);

Expand All @@ -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();
});
});
});
Expand Down
18 changes: 1 addition & 17 deletions app/components/UI/BrowserUrlBar/BrowserUrlBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
activeUrl,
setIsUrlBarFocused,
isUrlBarFocused,
showCloseButton,
showTabs,
},
ref,
Expand Down Expand Up @@ -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 }}
Expand All @@ -170,12 +157,9 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
);
}, [
isUrlBarFocused,
showCloseButton,
selectedAddress,
handleAccountRightButtonPress,
onCancelInput,
colors.icon.default,
styles.closeButton,
styles.cancelButton,
styles.cancelButtonText,
]);
Expand Down
1 change: 0 additions & 1 deletion app/components/UI/BrowserUrlBar/BrowserUrlBar.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,5 @@ export type BrowserUrlBarProps = {
activeUrl: string;
setIsUrlBarFocused: (focused: boolean) => void;
isUrlBarFocused: boolean;
showCloseButton?: boolean;
showTabs?: () => void;
};
5 changes: 3 additions & 2 deletions app/components/UI/BrowserUrlBar/__snapshots__/BrowserUrlBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
Expand Down
17 changes: 8 additions & 9 deletions app/components/Views/BrowserTab/BrowserTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Views/BrowserTab/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ exports[`BrowserTab render Browser 1`] = `
>
<SvgMock
fill="currentColor"
name="Close"
name="ArrowLeft"
style={
[
{
Expand Down
15 changes: 15 additions & 0 deletions app/components/Views/BrowserTab/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Copy Markdown
Contributor

@cursor cursor Bot Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test uses weak matcher instead of toBeOnTheScreen()

Low Severity · Bugbot Rules

The new test asserts element presence using toBeTruthy(), which is explicitly prohibited by the unit testing guidelines. The rules state: "Do not use weak matchers like toBeDefined or toBeTruthy to assert element presence. Use toBeOnTheScreen()." The assertion expect(backButton).toBeTruthy() does not properly verify that the element is rendered on screen.

Fix in Cursor Fix in Web

});
});

describe('WebView originWhitelist', () => {
it('sets originWhitelist to wildcard for all URLs', async () => {
renderWithProvider(<BrowserTab {...mockProps} />, {
Expand Down
Loading