Implement an overflow design for status bar entries

[Alphapage]

Hello,

For now, when you add a lot of items to the statusbar via plugins, only first few items are displayed and the remaining items are hidden.

It would be great to have a dropdownlist which will show all those remaining items.

I hope such a feature could enhance vscode.

Thanks in advance for your comments.

[bpasero]

This probably qualifies for a UX review of the status bar first.

[alexreg]

This issue has been open for 5 years, wow! Do you plan to address it or not really?

[mayur-who]

is it fixed? or is there any workaround to this?

[alexreg]

Disappointing, considering this is a major UI defect.

[OleksandrKvl]

Wow, I didn't expect to find that this issue has been here for a 5 years. I understand that you might consider it to be not so critical but not for years. I use vscode for a C++ development, major contributors to my status bar are: SSH ip, git branch name, Debug (project name), CMake: [RelWithDebInfo]: Ready, Clang 13.0.0 x86_64-pc-linux-gnu, Build, build target name, debug target name. They depend on the underlying values and usually it's not possible to fit them on my 13' display. I believe that without this feature status bar is incomplete.

[barsdeveloper]

Looks like I'm late to the party, anyway I want to comment on it. This issue is a major UX annoyance and the decision to close it is not really justified (at least give a precise reason why it won't be addressed). You already do that scroll X that someone else suggested, for the tabs bar. What is the reason you are not doing it also for the Status Bar. To me it looks like a simple change that would greatly benefit user experience. It is clear from the duplicates popping up periodically that this affects a lot of users. Please consider reopening the issue.

[alexreg]

Thanks for adding your voice. I don't know if there's a formal process to express our disagreement that this addressing this issue was postponed, or we just need more people to comment here?

[ToBoMi]

My status bar is filled now.
There are static extension statuses or buttons in the status bar. They are there and they stay there.

Now I trigger a process of one extension and I would like to see the status of that extension and its temporarily progress shown in the status bar. This background process vanishes after completion. I want to know that it is running.
For me a status that shows the progress of a background process of an extension (with a rotating circle arrow thing) has a higher priority than other entires in the status bar and should therefor be shown.
I suggest some kind of priorities of statuses that are given to such entries in the status bar.

Rezising my window larger than the screen is and moving it until I see the part of interest of the status shows all items and also the temporary entry.

[OleksandrKvl]

I think it should just be allowed to move status bar entries so that client can arrange them as they wish.

[barsdeveloper]

I don't think moving the entries can be done easily, what I don't understand is why they didn't think about implementing a horizontal scroll with the overlay scrollbar like they already do for tabs. This would solve the problem.

[ToBoMi]

Related question on stackoverflow

[vrn-sn]

I don't think moving the entries can be done easily, what I don't understand is why they didn't think about implementing a horizontal scroll with the overlay scrollbar like they already do for tabs. This would solve the problem.

@bpasero, is adding something small like scrolling functionality still out-of-scope? This issue originally proposed a drop-down list, but allowing horizontal scrolling instead seems a smaller-impact UX decision.

[Dexter0-0]

I came really late to the party thinking i could contribute to this but the issue seems to be left ignored for a few years by the developers even thou a scrollbar wouldn't be a big hassle to implement and would benefit a lot of developers.

[ylazy]

While waiting for an official fix, I did some hack with custom JS/CSS:

• Use VsCode Action Buttons + Command Runner for more control over status bar items. Use icons instead of text wherever possible.
• Decrease the item padding using custom CSS (see bellow)
• Keep only the left items. Move the right items out of the status bar and hide them. Show/hide the right items when mouse over/out the status bar. Using custom CSS/JS (see bellow)

Before:

After - On Roll Out:

After - On Roll Over:

The custom CSS:

.monaco-workbench .part.statusbar>.items-container>.statusbar-item>.statusbar-item-label
{
	padding: 0 3px !important;
}

.monaco-workbench .part.statusbar>.left-items
{
	justify-content: center;
}

.monaco-workbench .part.statusbar>.right-items
{
	justify-content: center;
	align-items: center;
	background-color: rgb(17, 17, 17);
	position: absolute;
	top: -20px;
	z-index: 999;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.monaco-workbench .part.statusbar
{
	justify-content: center;
}

The custom JS:

var initCheck = setInterval(onInit, 10);
var workbench_parts_statusbar, workbench_parts_statusbar_left, workbench_parts_statusbar_right;

function onInit()
{
	var workbench_parts_statusbar = document.getElementById("workbench.parts.statusbar");
	if (workbench_parts_statusbar)
	{
		clearInterval(initCheck);
		betterStatusBar();
	}
}

function betterStatusBar()
{
	workbench_parts_statusbar = document.getElementById("workbench.parts.statusbar");
	workbench_parts_statusbar_left = workbench_parts_statusbar.childNodes[0];
	workbench_parts_statusbar_right = workbench_parts_statusbar.childNodes[1];
	
	workbench_parts_statusbar_right.style.visibility = "hidden";
	
	workbench_parts_statusbar.addEventListener("mouseenter", onStatusBarOver);
	workbench_parts_statusbar.addEventListener("mouseleave", onStatusBarOut);
}

function onStatusBarOver()
{
	workbench_parts_statusbar_right.style.visibility = "visible";
}

function onStatusBarOut()
{
	workbench_parts_statusbar_right.style.visibility = "hidden";
}