1783762 - QuickActions buttons ("View Add-ons", "View History", ..., "Open Inspector") look awkward when wrapped to multiple lines

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Daniel Holbert [:dholbert]]

Attachment: image.png

STR:

1. In Nightly, focus your Address Bar.
2. In the dropdown that appears, look at the row of buttons that starts with "View Add-ons" etc.
3. Resize your window such that the last button ("Open inspector") wraps to a new line when the dropdown appears. (Skinnier address-bar produces a skinnier dropdown.)

ACTUAL RESULTS:

• The buttons look pretty awkwardly spaced when a single one wraps to a new line. See attached screenshot.
• If you mouse over the contents of the dropdown, the button area feels kind of awkwardly-sparse. Everywhere else in the panel seems much more "space-filling" when you mouse across it. (I'll post a screencast to demonstrate this)

EXPECTED RESULTS:

• Intuitively I'd expect a better-packed / more-space-filling design, with less space between the buttons.
• We might also want to add some logic to prevent the "just one button wraps to the next line" result, which feels particularly broken/unbalanced.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast comparing distance between clickable areas of button-rows at the top vs. at the bottom of this panel

Quoting comment 0:

If you mouse over the contents of the dropdown, the button area feels kind of awkwardly-sparse. Everywhere else in the panel seems much more "space-filling" when you mouse across it. (I'll post a screencast to demonstrate this)

Here's a screencast to hopefully demonstrate this.

(In this screencast, I've made my window extra-skinny to force the buttons at the bottom of the panel to linewrap into two lines. As you can see in the screencast, these buttons are much more tightly stacked, without much space between the lines; whereas the new buttons near the top of the panel have awkward dead space between the lines.)

Comment 2

[Adrian Florinescu [:aflorinescu]]

QA agrees with Daniel, the Quick Actions in address bar should be contained inside one row regardless: we shouldn't wrap to multiple lines.

Once bug 1783153 is fixed and different icons are available for each possible action, we could find alternate options to keep the quick actions in the same line even after min resize: as something that comes off the top of my head: make the quick actions buttons dynamic, resizing the size to fit the address bad width, even if we end up having icon+truncated text.

Dale, I won't add UX-wanted for this, leaving it to your plate.

Comment 3

[Dale Harvey (:daleharvey)]

Yeh we should make sure these don't wrap unless you are in actions search mode, will leave tracking and get to it soon

Comment 4

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

The severity field is not set for this bug.
:adw, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[Drew Willcoxon :adw]

The vertical padding part is bug 1783463.

Comment 6

[Dale Harvey (:daleharvey)]

Attachment: WIP: Bug 1783762 - Ensure only one row of QuickActions are shown when not in search mode

Comment 7

[Dale Harvey (:daleharvey)]

Attachment: Bug 1783762 - Dont wrap QuickActions unless in search mode. r=daisuke

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e2ce8d3d4a4b
Dont wrap QuickActions unless in search mode. r=daisuke

Comment 9

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/e2ce8d3d4a4b

Comment 10

[Cristian Baica [:cbaica], Release Desktop QA]

The issue is verified fixed in the latest Fx 107.0a1 on Windows 10 and Ubuntu 22.04. The wrapping is done correctly (but differently - buttons decrease in size) and when search mode is enabled, the address bar corectly expands.