1701130 - Find bar close button is small/narrow and hard to click

Status: VERIFIED FIXED

(Toolkit :: Find Toolbar, defect)

Description

[Stuart Cook]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

• Press Ctrl+F to open the find bar
• Try to click on the X button to close the find bar again

Actual results:

• The button's clickable area is roughly the same width as the X icon, making it very narrow and hard to click

Expected results:

• The button's clickable area should be wider (at least square), making it easy to click

Comment 1

[Stuart Cook]

I noticed this immediately after upgrading to 88 on the beta channel.

Comment 2

[Stuart Cook]

The button's width is set to width: 20px by declarations in close-icon.css that were added/moved for 1696202, so that might be related.

Comment 3

[Stuart Cook]

Attachment: Screenshot of find bar showing close button clickable area (with hover highlight)

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Toolkit::Find Toolbar' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 5

[Simona Badau, Desktop QA]

I can reproduce this issue in the latest Firefox 88 beta 4 on Windows 10 and Ubuntu 20.04. The issue is less noticeable on macOS Bug Sur 11.1 - the hover of the Close button is narrower here too.
I can't reproduce this issue on Nightly 89.0a1.

Regression window: Found commit message:
Bug 1696202 - Refactor close-icon.css to use color-mix(). r=preferences-reviewers,jaws

Setting this issue to NEW.

Comment 6

[Ryan VanderMeulen [:RyanVM]]

Presumably 89 isn't affected because MR1 rearranged things a bit on the find bar.

Comment 7

[Ryan VanderMeulen [:RyanVM]]

Attachment: Bug 1701130 - Add a margin to the findbar's close icon.

Comment 8

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9213195 [details]
Bug 1701130 - Add a margin to the findbar's close icon.

Beta/Release Uplift Approval Request

• User impact if declined: The close button on the find toolbar isn't as clickable as it previously was
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Hover the button and compare to release
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small Beta-only CSS change
• String changes made/needed:

Comment 9

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9213195 [details]
Bug 1701130 - Add a margin to the findbar's close icon.

Approved for 88.0b7. As noted in the bug and phab review, this isn't landing on central as later MR1 work already resolved the problem there.

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/bbf165e275ac

Comment 11

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue using Firefox 88.0b4 on Windows 10x64.
The issue is verified fixed with 88.0b7 (20210404185932) on Windows 10x64, macOS 11.2.3, and Ubuntu 20.04. The Close icon from Finbar looks the same as in Firefox 87.0.