1628243 - Bookmark toolbar items are harder to touch in the new megabar redesign

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P1)

Description

[Asif Youssuff]

Saw this feedback: https://www.reddit.com/r/firefox/comments/fwhlva/address_barawesomebar_design_update_in_firefox_75/fmq6771/

I've now found that it's especially difficult on my laptop's touchscreen (and don't get me started on the trackpad!).

Sorry to moan on so much, I can tell you've put a lot of effort into this feature, but it is such as usability killer for me.

Steps to reproduce:

1. Set browser toolbar to touch
2. Show bookmarks toolbar and populate bar with bookmarks
3. Open a new tab by tapping the + symbol in the tab bar
4. Attempt to open one of the bookmarks that appear directly below the address bar

What happens:

The touch target is smaller than it was previously, making it harder to hit. The bookmarks themselves are also partially obscured and have a shadow overlaying them, making the text harder to read.

Expected result:

It should be as easy as it was in <75 tap on bookmarks in the bookmark toolbar.

My preferred solution here is bug 1627861.

Comment 1

[Marco Bonardo [:mak]]

I think touch is a valid concern here that should be discussed with UX.

Comment 2

[Marco Bonardo [:mak]]

The team plans to make some changes to ensure the bookmarks toolbar entries stay usable on touch screens.

Comment 3

[Óscar García Amor]

(In reply to Marco Bonardo [:mak] from comment #2)

The team plans to make some changes to ensure the bookmarks toolbar entries stay usable on touch screens.

Not only in touch screens, in desktop is annoying too

Comment 5

[GE]

The drop shadow of the megabar also makes the bookmarks harder to read, especially for users with poor eyesight.

Comment 6

[milaq]

The urlbar should really only get enlarged when the user is actively doing something in it, e.g. typing.
It getting enlarged when the user has no intention to do anything with it, e.g. using the bookmarks bar, is poor UX.
It also seriously obscures the bookmarks bar on a new tab page on desktop and even leaks ~2px into the titlebar.

Comment 7

[Dão Gottwald [:dao]]

Attachment: Bug 1628243 - Tweak bookmarks toolbar for touch access.

Comment 8

[marczellm]

Why tweak the bookmarks toolbar? There is nothing wrong with it. Everything wrong is with the new address bar.
Is there a way to pay Mozilla to listen?

Comment 9

[Dão Gottwald [:dao]]

(In reply to marczellm from comment #8)

Why tweak the bookmarks toolbar? There is nothing wrong with it. Everything wrong is with the new address bar.

We discussed this with our UX designers yesterday and came to the conclusion that the bookmark items are really too slim for comfortable touch use regardless of the new address bar design.

Comment 10

[Óscar García Amor]

(In reply to Dão Gottwald [::dao] from comment #9)

We discussed this with our UX designers yesterday and came to the conclusion that the bookmark items are really too slim for comfortable touch use regardless of the new address bar design.

And your solution is adding more padding to bar? Seriously you think that for fix a broken leg is break the other one?

Comment 12

[Dão Gottwald [:dao]]

needinfo verdi for feedback on my patch.

Comment 13

[Asif Youssuff]

(In reply to Dão Gottwald [::dao] from comment #9)

We discussed this with our UX designers yesterday and came to the conclusion that the bookmark items are really too slim for comfortable touch use regardless of the new address bar design.

I had suspected that this would be the solution. The patch (as far as I can tell) modifies the padding in all toolbar customization modes, not just touch mode.

I think a more localized fix works better here, since if not, we basically regress the look and feel for people who preferred a short bookmarks bar (which I understood to also be a goal) - see your comment 2 in bug 1577340.

Comment 14

[Dão Gottwald [:dao]]

(In reply to Asif Youssuff from comment #13)

(In reply to Dão Gottwald [::dao] from comment #9)

We discussed this with our UX designers yesterday and came to the conclusion that the bookmark items are really too slim for comfortable touch use regardless of the new address bar design.

I had suspected that this would be the solution. The patch (as far as I can tell) modifies the padding in all toolbar customization modes, not just touch mode.

It adds a bit of padding for normal mode because users with a touch screen may occasionally use it without enabling touch mode. The patch adds more padding for proper touch mode, and it doesn't add any padding for compact mode.

Comment 15

[Óscar García Amor]

IMHO, the problem is that only are thinking on big screens with big resolutions, try this in a laptop with resolution of 1280x720 with standard density adding more padding to bookmark toolbar as proposed. Lose more and more screen to add a nice effect?

And think in people with visual problems. The shadow of new megabar on top of texts difficult very much the reading of favorites or folder names.

Comment 16

[Asif Youssuff]

(In reply to Dão Gottwald [::dao] from comment #14)

It adds a bit of padding for normal mode because users with a touch screen may occasionally use it without enabling touch mode. The patch adds more padding for proper touch mode, and it doesn't add any padding for compact mode.

Thanks for the explanation. Clearly I didn't look at the patch carefully enough.

Comment 17

[fionik]

(In reply to Óscar García Amor from comment #15)

IMHO, the problem is that only are thinking on big screens with big resolutions, try this in a laptop with resolution of 1280x720 with standard density adding more padding to bookmark toolbar as proposed. Lose more and more screen to add a nice effect?
And think in people with visual problems. The shadow of new megabar on top of texts difficult very much the reading of favorites or folder names.

It does not matter whether the screen is big or not. I have a true 4K display and this new mega bar is simply irritating. The fact that it grows when clicked, the fact that it throws shadow on the bookmarks. This is just so alien for the modern UI where the things become functional and simple this kinda "eye candy" just makes things worse.

Comment 19

[Marcin Raczkowski]

This is a second bug that aims to work around a problem of adress bar being to big. First you had to move container indicators, now you're messing with bookmarks tab. What if somoene has a custom tab underneeth the adress bar?

The only proper solution to the problem that is created by address bar extending outside it's container, is to make it fit the container and don't overlap other UI elements.

It should not encroach neither on tabs, nor on bookmarks, nor on anything else that might be above/bellow it. It should simply not go outside it's container period.

After playing with the new bar for a bit, It's not a bad change - except as mentioned it needlessly goes outside the container.

Comment 20

[Marcin Raczkowski]

Sorry for double post but I don't see any way to edit my comment. The other bug I'm referring to is: #1588780

In essence MegaBar is causing problems obscuring other UI elements, and instead of addressing the root of the problem - MegaBar obscuring other UI components, you adjust other UI components. This is not going to work if someone adjsuted order of toolbars for example.

There's a space to make a MegaBar bigger within it's container, but it should simply not outgrow it's container, or it'll always obscure something.

So the easiest solution would be to reduce padding and shadow, still making a bar bigger to pull focus, while nto obscuring other UI elements.

Comment 21

[bchristianson]

I agree. Element placement and behavior should make no assumptions about what is surrounding it. There’s no guarantee that the tabs, toolbars, buttons, or other items will match the test cases.

Comment 22

[Markus Popp]

For a quick fix, could you reintroduce browser.urlbar.megabar again to give people the option to disable the megabar (at least until all these issues are sorted out)?

Comment 26

[Andy Bajka]

I suggest the auto expanding of the address bar be removed. The address bar is best left as one size. If I click into the address bar it should NOT expand. If I crate a new tab the address bar should NOT expand.

Comment 27

[BelFox]

Dear Mozilla developers, please be so kind to review the activity diagram I posted as an attachment in bug 1627861 (see also comment https://bugzilla.mozilla.org/show_bug.cgi?id=1627861#c24). The solution presented there may eliminate the need to make the bookmarks bar bigger (as is suggested as a solution here).

Making the bookmarks bar bigger to solve megabar issues will probably irritate even more users, to be avoided after the backlash the megabar already caused. This solution won't cover the bookmarks when the user is not interacting with the address/megabar.

Comment 28

[wroot]

Definitely not asking to increase the size of bookmarks toolbar. Just don't need address bar to go big. I know it is there, i don't use it, i have bookmarks. But it is enlargening when you open a new tab, when you close the last tab and new tab is opened automatically. Even if i don't plan to press on the address bar it does this thing.

Comment 29

[Dão Gottwald [:dao]]

Attachment: 1pxtopmargin.png

Update from verdi:

I like the added top and bottom padding of the bookmark. Can you also add 1px to the top margin so the top of the bm box is just touching the bottom of the expanded bar instead of just under it (purple one instead of the green one)?

Comment 30

[gwarser]

Shadow is also reduced?

Comment 31

[Dão Gottwald [:dao]]

(In reply to gwarser from comment #30)

Shadow is also reduced?

Not at this time. We might want to investigate that in a separate bug.

Comment 32

[Marcin Raczkowski]

Why are you continuing on this horrid path of altering other elements of the UI instead of making a expansion smaller by 2px?
What if I have something else besides bookmarks bellow address bar? Should I file separate bug for that?

What's even the point of UI editor then?

Comment 33

[BelFox]

(In reply to Marcin Raczkowski from comment #32)

Why are you continuing on this horrid path of altering other elements of the UI instead of making a expansion smaller by 2px?

... or checking my solution in Comment 27, which prevents overlap with elements beneath the address bar when the user is not interacting with it?
Would really like to hear feedback on this... Why could it work? Why wouldn't it?

Comment 34

[Dão Gottwald [:dao]]

(In reply to Ruben from comment #33)

... or checking my solution in Comment 27, which prevents overlap with elements beneath the address bar when the user is not interacting with it?
Would really like to hear feedback on this... Why could it work? Why wouldn't it?

See comment 9.

Comment 35

[gwarser]

(In reply to Dão Gottwald [::dao] from comment #31)

(In reply to gwarser from comment #30)

Shadow is also reduced?

Not at this time. We might want to investigate that in a separate bug.

But on the picture it does not look like "live" in my Firefox. Maybe it's because difference in size/dpi/disco-highlighting.

Comment 36

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bb328e9ca301
Tweak bookmarks toolbar for touch access. r=harry

Comment 37

[Noemi Erli[:noemi_erli]]

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

Comment 38

[Óscar García Amor]

Bad solution, make interface bigger and bigger for fancy and innecessary effect is a step back. In a small monitors or low resolutions you lose a lot of screen. Maybe you think that 4px is too lite, but look difference in 1280x720 screen.

Comment 39

[Dão Gottwald [:dao]]

Comment on attachment 9139417 [details]
Bug 1628243 - Tweak bookmarks toolbar for touch access.

Beta/Release Uplift Approval Request

• User impact if declined: see comment 0
• 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: see comment 0
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): We're only adjusting some CSS padding and margins in the bookmarks toolbar
• String changes made/needed:

Comment 40

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9139417 [details]
Bug 1628243 - Tweak bookmarks toolbar for touch access.

Minor CSS fix for a commonly-reported megabar regression. Approved for 76.0b6.

Comment 41

[Andy Bajka]

How can we see what changes have been made? I'm currently running Firefox 75.0 on macOS.

Comment 42

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/releases/mozilla-beta/rev/903e4bdc6cc2

Comment 43

[Andy Bajka]

So if I understand correctly the next version of Firefox is 76.0 and I will see the changes then?

Comment 44

[Drew Willcoxon :adw]

Yes, or you can try Nightly now.

Comment 45

[Marco Bonardo [:mak]]

Firefox 76 will be released on May 5th

Comment 46

[Petruta Horea [:phorea], Desktop Test Engineering (back on Sep 5th)]

Verified this with Touch option enabled using Firefox 76 beta 6 and Nightly 77.0a1 2020-04-20 under Win 10 64-bit and Ubuntu 18.04 64-bit.
We also used a touchscreen device with Win 10 (Arch for touch Lenovo Yoga).
The items from the toolbar bookmark are more easily to select when the address bar is in focus.

The Touch option is not available under OS X.

Comment 47

[Dão Gottwald [:dao]]

Target milestone reflects when a change landed on mozilla-central.