Open Bug 1630508 Opened 8 months ago Updated 4 months ago

For compact UI density, consider reducing the megabar's overlap of adjacent toolbars from 2px to 0

Categories

(Firefox :: Address Bar, enhancement, P5)

enhancement
Points:
1

Tracking

()

Tracking Status
firefox77 --- affected

People

(Reporter: dao, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: blocked-ux)

Attachments

(7 files, 1 obsolete file)

Compact mode is sort of a power user feature, so might be a good way for people to opt out from what they perceived as an oversized address bar. This would also allow us to reduce the bookmarks toolbar height by 2px.

Points: --- → 1
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED
Iteration: --- → 77.1 - Apr 6 - Apr 19
Priority: P3 → P1
Keywords: blocked-ux

verdi:

I don't think we should do that first one (1630508). The new patch for the bm toolbar looks good in both regular and compact mode I think. Let's stick with that for now.

Assignee: dao+bmo → nobody
Status: ASSIGNED → NEW
Iteration: 77.1 - Apr 6 - Apr 19 → ---
Priority: P1 → P5

I don't think it looks good in compact mode: if I explicitly choose compact mode it's because I don't like wasted space, and the big bar is wasted space, imho.

Attachment #9140977 - Attachment is obsolete: true
Attachment #9140977 - Attachment is obsolete: false
Attached image compact.png

I took a stab at building Dão's patch on my machine to get a better idea of how it looks - Dão's patch is on top, Firefox 68 is below that.

  • The old version of Firefox still fits in better with compact mode, imo
  • as Dão mentioned, compact mode is a bit of a "power user" feature, so I appreciate that 68's design fits in better from a design perspective with another "power user" feature, the search bar
  • The old version simply uses the focus color to color in the existing border of the address bar
  • The old version it eliminates the distraction that we have heard about from users with disabilities because it doesn't expand
  • For what it is worth, I think the old version also looks more elegant since it fits in with the overall design of the Firefox chrome very well - no borders are touching, there is good spacing

Dão's version looks good and is more compact, but a patch that colors in the existing border would be fantastic, and I think would quell a lot of the outcry we have seen over the last few months.

Users have to look to enable compact mode, and they are likely more habituated in their habits - they are unlikely to be new to computing and are likely to be aware of the search functionality that is built into the address bar. While I am sure that you will see more engagement from the redesigned address bar in normal mode, this would be a nod to longtime Firefox users - with the only caveat being that the legacy appearance would be unsupported in normal mode - because the normal mode is where we expect non-power users to be using.

I would prefer to be able to recommend this and to head off most objections without needing to recommend userChrome hacks. Not asking for a death by a thousand cuts, but rather a single option that already exists that is redefined to be the compact/classic mode.

I appreciate your consideration of my feedback and hope that we can get some traction on a change here.

I played around some more with Dão's patch, and given the calculated values in the design of the urlbar, I was unable to figure out how to create some rules that targeted the compact mode specifically.

In any case, I modified

:root[uidensity=compact] {
  --urlbar-breakout-extend: 0px;

  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
  --urlbar-icon-padding: 4px;
}

to

  --urlbar-breakout-extend: -2px;

  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
  --urlbar-icon-padding: 4px;
}

and while it does bulge a little bit on focus, I think it is a lot more palatable than the existing expansion on focus - it is a lot more toned down for the compact audience.

Throwing this out there as a possible compromise that is likely still fairly maintainable given that it is a modification of Dão's patch.

The only real issue I see with this patch (other than the fact that it continues to expand on focus) is that there might be too much padding on the bottom of the suggestions list given how skinny the top is on focus.

I took a video with the way it looks - hoping it gives you a better idea of how it feels.

(In reply to Asif Youssuff from comment #4)

Dão's version looks good and is more compact, but a patch that colors in the existing border would be fantastic, and I think would quell a lot of the outcry we have seen over the last few months.

Compact mode is meant to make the UI more compact rather than provide an alternative UI. I think having the megabar not overlap other toolbars would be in line with that philosophy whereas what you propose goes beyond that. Verdi thought what I proposed might already go too far, so I'm not sure your proposal is a realistic way to move this bug forward...

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

Verdi thought what I proposed might already go too far

Seen a couple of references here to a Verdi.

Is there a way that people interested in making this situation better can know how the Verdi works, so they can provide meaningful and useful contributions?

An out-of-band thumb up/down system isn't a very positive contributor experience.

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

(In reply to Asif Youssuff from comment #4)

Dão's version looks good and is more compact, but a patch that colors in the existing border would be fantastic, and I think would quell a lot of the outcry we have seen over the last few months.

Compact mode is meant to make the UI more compact rather than provide an alternative UI.

For me, a more compact mode means less density at all time and that include focused widgets. I'm sure a lot of users using the compact mode think the same. The reddit thread, even if their a bias in the sample seems to show the same feeling about the compact mode.

I really like the solution that Asif has proposed. I understand it creates a larger difference between compact and normal density modes, but given that compact mode is seen as a power-user feature, there are a non-insignificant number of power-users expressing discomfort caused by the current design's overlap, and this still provides more prominence to the address bar compared to the old design, isn't it worth at least exploring this option?

Attached patch dao-updated.diffSplinter Review
Assignee: nobody → yoasif
Assignee: yoasif → nobody

I went ahead and continued working on the patch a bit more today after speaking to the search team on Matrix.

They informed me that one of the considerations of the megabar redesign was to ensure that users always knew that their input focus was on the address bar when opening tabs, so that they "clearly know the current focus state of your application".

I took a look at Safari on macOS and GNOME Web on Linux and it looked to me that the border that they showed around their address bars were thicker than the one in Firefox currently.

In order to solve for this need, I went ahead and added this to the patch in all modes (not just compact) - of course, this can be committed in a separate bug if preferred for organizational purposes.

I think it looks pretty good in all modes, so I hope that this makes sense.

Additionally, I went ahead and fixed the other big issue I had noted in the previous patch -- the one off search panel at the bottom of the suggestions panel looked way too large for the compact mode. The padding here has been modified and I think that looks good too (no modification in any mode but compact).

Lastly, while I continued to abstain from expansion on focus (since that now feels solved with a larger border), the input area inside the address bar looked too short as I typed into it in the context of the rest of the popup panel that appears when suggestions are shown.

For that issue, I went ahead re-enabled the expansion at the top of the panel when the panel is expanded - it overall leads to a more balanced look, in my opinion.

I would love to discuss this further to see if this is palatable to the team and to our userbase.

Video attached.

New video, basically the same as the last one, but where the searchbar and urlbar borders are thin until focused, making it more consistent with the current look and feel, but adding the on focus improvement.

Attachment #9154719 - Attachment is obsolete: true

Uploading my proposed patch here in case it is of interest to anyone. Hope this helps.

See Also: → 1644601

This is how the expanded url bar comes in contact with the tab underlines of the "Multi-Account Containers" extension in compact mode. It makes distinguishing the container colors harder. And for color-blind people with a lot of containers it's surely not ideal.

Any update on this? I think a small amount of expanding is ok as long as it does not exceed the toolbar lines (I made the lines red in attached screenshot so it's clear what exact I'm talking about).

(In reply to Will from comment #16)

Any update on this?

TL;DR: browser.urlbar.suggest.topsites=false + ui.prefersReducedMotion=true prevents at least initial "focus swell".

Prose: Not related to the "Compact mode", and not precisely addressing this issue only, but since Fx 78 URL bar "focus-swelling" is affected by user preference for "reduced motion", which is:

  • either inherited from system (in Windows OS it is in Settings - Display - Show animations in Windows: off; yes, not very intuitive),
  • or set by about:config pref ui.prefersReducedMotion that overrides the system one (boolean, true turns off most of effects, like fade-ins or drop downs).

You also have to disable "top sites suggestions" for URL bar: Firefox - Tools - Options - Privacy and Security - Address bar [..] suggest: Top sites (off) (or in config browser.urlbar.suggest.topsites=false.

With those two preferences set this way focused URL bar will not swell. (Alas, only until it shows some suggestion.)

I think it is quite reasonable move that is in line with my personal preferences - I tend to disable all animations anyway, because most apps feels way snappier this way for me, and I've had top sites in URL bar turned off as soon as it was implemented.


As I understand it, the main motivation for implementing this after many "wontfix" dupe requests asking for similar option around (BTW, if you stumble upon any of those lacking this info, kindly mention this info there) was bug 1629303 so we all should be grateful for mr Janda and his unfortunate disorder, because FMPoW this was the final or the only argument that persuaded right people, probably. I've came to this conclusion mainly because of release note We reduced a number of animations such as tab hover, search bar expansion, and others to reduce motion for users with migraines and epilepsy. -- https://www.mozilla.org/en-US/firefox/78.0/releasenotes/

Severity: -- → S4
You need to log in before you can comment on or make changes to this bug.