Affected versions

• Fx90.0a1 2021-05-04
• Firefox 89 beta 7

Affected platforms

• Windows 10 64-bit
• OSX 11.2.3
• Ubuntu 18.04 64-bit

Steps to reproduce

1. Launch Firefox and go to about:preferences
2. Tick the option to add search bar in toolbar
3. Reduce the browser width to a minimum where the search bar is still visible (not hidden by the overflow menu)
4. Click on the search bar and press the Up arrow key

Expected result

• "Change Search Settings" label is centered

Actual result

• "Change Search Settings" label exceeds the button

Regression range

• Introduced with bug 1705507. Before, the label was centered and this issue was only spotted in older Ubuntu versions.

In my opinion we should just move the search bar to the compact view of these buttons, like the Address Bar.

Depends on D115771

Marco, the compact search settings button doesn't translate directly to a narrow search bar. See comment https://phabricator.services.mozilla.com/D115771#3770586. What did you have in mind when suggesting we use it? Maybe we could just list it at the end of the list of engines, without any kind of special offset? Although then it might be confused for an engine.

No, we should not just make the button compact, we should make the search bar one-offs identical to the urlbar one-offs, included the add search engine buttons becoming compact.
That should allow us to also share the code more easily.
I discussed this briefly in the Search Slack channel some weeks ago (https://mozilla.slack.com/archives/CFLFWM98V/p1620147344104800) and also made some quick patch to do it, but of course this is just a test patch, where I didn't remove the no more necessary code, I didn't port the compact add engine buttons implementation, and there's a bug where for certain widths we miscalculate the one-offs area height, so the second row disappears.

To breakdown the work, I'd actually suggest to start by porting the add engine compact buttons, those should not change the layout by much. Then enlarge the min-width to include 4 buttons instead of 3 (I think there's a bug in the current implementation regarding min panel width, maybe related to a wrong css rule, and padding not being accounted). Then we should be able to put the compact settings button in the 4th column (visually), so we'll have 3 columns with engines (like now) and a new 4th column for the settings button.

Thank you very much for the direction, Marco.
I see, we should apply a compact design to not only settings button but add engine button.
I try to implement along with the above one by one.

Depends on D116057

Depends on D116068

https://hg.mozilla.org/mozilla-central/rev/f080102d86e6
https://hg.mozilla.org/mozilla-central/rev/5084fef21424
https://hg.mozilla.org/mozilla-central/rev/740a98a07d37
https://hg.mozilla.org/mozilla-central/rev/a5c85f93707c

The patch landed in nightly and beta is affected.
:daisuke, is this bug important enough to require an uplift?
If not please set status_beta to wontfix.

For more information, please visit auto_nag documentation.

Verified as fixed with Fx Nightly 91.0a1 on Windows 10x64, macOS 10.12.6 and Ubuntu 16.4.