Fixed issue where status bar can overflow without affecting notification beak

[nirabhromakhal]

This PR fixes #154708 with minimal changes to the notification beak.

[bpasero]

Unfortunately this breaks the overflow behaviour of the status bar: the current solution ensures that the notification bell is always the last entry even when we overflow. Now with this solution the notification bell drops first.

[nirabhromakhal]

I'm having a bit of trouble understanding your suggestion. What is expected when the bell overflows out of the status bar? Or does it never overflow?

[bpasero]

I never overflows. The elements should overflow in this order:

• first the entries on the right hand side of the status bar beginning with the first item

I suggest you just look at the overflow behaviour how it works today, that is the intended overflow behaviour (except for the bug we want to fix).

[nirabhromakhal]

In the current version, the leftmost right-hand-side items disappear when resized, and reappear with overflow when tabbing through the status bar. So the bell must always be present at the right end?
And the other right-hand-side items will overflow and pass through(under) the bell when tabbing entries?

[bpasero]

Sorry for not being clear: tabbing through entries is very special in that the browser will forcefully reveal elements. I really don't mind in what order they get revealed, as long as there is no multi-line wrapping. But I do care for how elements overflow normally when not tabbing through the items. That behaviour should be as today, otherwise on small windows we suddenly hide the notification bell for all users.

[nirabhromakhal]

So what if we make the bell postion absolute and the rest of the right items can be hidden on overflow and pass through (under) the bell.

Now for small windows, some of the right items will be hidden and the bell will always be at the right end(visible) due to absolute positioning.

[bpasero]

No, I do not believe that changing the overflow behaviour is an option here. There can be a lot of people with careful crafted multi-window layouts where then suddenly status bar elements would appear differently.

[nirabhromakhal]

So you mean that the overflow must be set visible for the status bar?

[bpasero]

One idea I had was to set overflow: hidden by default as used to do and then only change to overflow: visible when a beak is showing anywhere. The beak is quite transient and goes away quickly anyway that it would reduce the chances of triggering this issue.

An alternative would be to find a way to show the beak always even when overflow: hidden.

[nirabhromakhal]

Ok so, overflow is hidden, beak is showing, bell is showing always, and what will happen to the status bar right items when tabbing?

[bpasero]

Yeah, in the case of beak showing we would still hit this issue. So maybe the best fix is to find a solution for beak showing without having to set overflow: visible.

[nirabhromakhal]

An alternative would be to find a way to show the beak always even when overflow: hidden.

The current solution shows the beak even with overflow hidden. And I was thinking of making the bell position:absolute as well.

[bpasero]

To summarise:

• do not break todays overflow behaviour, elements to the left on the right hand side should drop first until only the bell is visible
• do not break the beak showing when it is showing
• when keyboard focus is inside status bar, do not wrap multi line but allow to jump through elements (this works actually when overflow: hidden) - this is the actual fix for Status bar can overflow when tabbing through entries #154708

[nirabhromakhal]

Things are clearer now, though I still have one question. Suppose the window is so small that only the left-hand items are showing along with the bell on the right. Now if we tab through the entries, where will the right items be displayed?

Will the left items push left (overflow) in order to show the right items?

[bpasero]

I think I am fine with how overflow: hidden behaves. It seems a bit random but the element gets revealed which is good for accessibility reasons and there is no multiline dropping:

[nirabhromakhal]

The clip you shared seems like a good solution. To make the beak display always, we just need to remove position: relative from the right items container, and change the beak position to right: 17px.

[nirabhromakhal]

The overflow behavior is same as earlier and the beak is always showing when the bell is clicked

overflow.hidden.with.beak.mp4

.

[bpasero]

Unfortunately it is not that easy: the beak can show for any status item, not just the notifications. So it has to be positioned above the status item that enables it.

[nirabhromakhal]

Ok, so what will happen if somebody clicked the bell and then tabbed to a different line of items? Will the notification box along with the beak disappear and then reappear when the bell is visible?

[bpasero]

The notification box is actually independent from the status entry, but yeah the beak would disappear because it is coming from the status item.

[nirabhromakhal]

How about this solution? I made the notification bell always visible using position: absolute

static.notif.bell.mp4

[bpasero]

Maybe let me try an attempt tomorrow that makes the has-beak property dynamic so that we can just toggle overflow based on that, I feel that would be the simplest solution without risk of regressions.

[nirabhromakhal]

I feel that whenever the overflow becomes visible, then if we tab through the entries, the problem will reappear.

[bpasero]

This is really a though one, tried a lot more things but couldn't come up with something nice.

One direction I had thought would be fruitful is to find a way to prevent display: flex from overflowing the status bar container when it wraps. Tried what https://stackoverflow.com/questions/50068078/how-to-prevent-flex-items-from-overflowing-flex-parent-with-no-wrap indicates, but I think since we explicitly set flex-wrap: wrap, it is somewhat expected that the elements flow out.

Summarising again the requirements:

• the beak should be visible over the status item where it belongs to, so it likely needs to be positioned relative to the status item
• the behaviour of flex-wrap: wrap is really nice because status items on the right hand side drop fully (without clipping) from left to right which is exactly the overflow behaviour we want
• being able to access all status bar items with the keyboard is important and I really like how it works when overflow: hidden
• a CSS only solution would be nice but it is not impossible to do a bit of JS trickery in statusbarPart.ts

[nirabhromakhal]

How about this solution? I made the notification bell always visible using position: absolute

This is done only using css and the beak is always displayed over the bell, and the bell is always shown at the far right, other right-hand-items are displayed next to the bell when tabbing.
I think this satisfies all the requirements.

Additionally, when the notification box isn't displayed, the beak isn't displayed as well. And if we hide the status bar from settings, the absolute positioned bell isn't displayed as expected.

[bpasero]

@nirabhromakhal but any item in the status bar can show a beak:

Even the most left one

[nirabhromakhal]

Even the most left one

What are the steps to recreate this issue? I am only able to see the beak on the right.
Please check my most recent commit. I think it will always show on the right above the bell.

static.notif.bell.mp4

[bpasero]

@nirabhromakhal we currently do not ship any other status item besides "Notifications" and "Feedback" with a beak that both happen to be on the right hand side.

When running locally out of sources, just set showBeak: true to a status bar item, such as:

vscode/src/vs/workbench/contrib/markers/browser/markers.contribution.ts

Lines 458 to 464 in 6246902

	return {
	name: localize('status.problems', "Problems"),
	text: this.getMarkersText(markersStatistics),
	ariaLabel: tooltip,
	tooltip,
	command: 'workbench.actions.view.toggleProblems'
	};

[nirabhromakhal]

Okay, there does not seem to be any simple solution to this problem.
How about I add a beak-div to every status item, the beak will be displayed relative to the status item?

[bpasero]

Yeah worth a try 👍 . I think we have freedom how the beak is actually implemented. I wonder if we would still hit the issue with overflow:hidden though when the parent prevents overflowing, but we can see then.

[nirabhromakhal]

Can you check my latest commit? Right now, I have:

overflow hidden
beak relative to parent item, shows as expected
tabbing through entries works as expected, but notifications beak doesn't disappear unless bell is clicked

[bpasero]

@nirabhromakhal this seems to be working quite well upon first testing, nice 👍

I think your change however reverts some of the changes that meanwhile went into main branch, can you clean it up and then I do a review?

[nirabhromakhal]

If you meant that I need to fetch upstream from microsoft/vscode, I have done it just now. If there is anything else, I'm not sure how to revert.

[bpasero]

Rather than having a beak-div-show, why not add a CSS class name to the beak container (status-item-beak-container) and then use the existing has-beak rule to make this work, e.g.:

.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-beak > .status-bar-beak-container

[nirabhromakhal]

yes sure

[nirabhromakhal]

I removed a line-break (empty line) by mistake, should I commit again (with the line break)?

[bpasero]

Sure.

[bpasero]

Why do we need to change to margin here?

[nirabhromakhal]

The centering of the beak is done now based on the width of the status item.
Since the padding is included within the width for the bell, the beak doesn't show at the center for the bell but shows correctly for other status items, unless we change it to margin-right.

[bpasero]

Thanks a lot, let's merge this in. I have some 💄 follow up changes that I will push once this lands in main.