[Request] Configure items in statusbar

[Th3Whit3Wolf]

It is really weird seeing the vim mode in the bottom right hand corner. It would be nice to be able to change the positioning of items in the statusbar or to have a boolean in the settings to have the vim mode on the left like vim.

[z0al]

This doesn't seem like it will get much attention anytime soon by looking at the 👍🏻 count 😅

It would be nice to be able to change the positioning of items in the statusbar or to have a boolean in the settings to have the vim mode on the left like vim.

I'm really surprised that this isn't the case by default. It's confusing for me even though I'm a VS Code user. It gets worse when I have to - currently - constantly switch between VS Code and Oni. The placement of the Github branch, problems ..etc bothers me too.

Soooo, that might be enough motivation for me to try to tackle this myself soon-ish ;)

I think going forward the status bar should be configurable, not just the Vim mode, but all/or most of the items. . You should be able to decide what to show and where to show it somehow.

@CrossR / @bryphe would you mind sharing how you envision this? and maybe some pointers on where I should start looking if I got some time to implement it?

[z0al]

A similar VS Code issue since 2017. I hope this one doesn't end up like it :)

[andr3h3nriqu3s11]

(Continuation from #3391)
Here to discuss 😀

I figured it wouldn't be that simple but I don't quite understand what kind of items are "supposed to be hidden by the notification popup." Would you be so kind to elaborate?
When there is notification there is an entire group of items that are hidden on the moment that the notification is happens

[z0al]

I see what you mean now, thanks.

I don't really see the value of showing other items alongside a notification tbh but maybe I'm missing something. In other words, I'd be just fine with hiding everything and showing the notification to make it simple.

Another option would be to treat the notification banner just like any other status bar item. The user would decide where to show it. When shown, it takes a predefined width (which could also be a configuration).

These are just some thoughts on the top of my head. I still need to think about this more and get more context.

[z0al]

When shown, it takes a predefined width (which could also be a configuration).

Umm, it could also just take the available space. If a user puts the item in the wrong position (e.g. between two items) it will be too small, so in that case, the fix will be to show every other item before the notification. E.g.

"workbench.statusBar.items.start": ["mode", "git", "error-count", "...", "notification"]

So if we take the gif above as an example, I would expect the yellow notification banner to take the space between the error count (the X sign) the last item in the left group (start) until the first item on the right(end) group, the Space: 4 in this case.

What do you think of that?

[z0al]

I deleted a text about letting the user decide if they want to show the notification status bar item from the above comment since it's not relevant in that config. I think that will go in a different configuration e.g hidden.

"workbench.statusBar.items.hidden": ["item1"]

[andr3h3nriqu3s11]

That could work, although I think it kinda removes the purpose of the notification popup, if it's not shown on the majority of the status bar.
And it could also be achieved here by doing something like

still not perfect but it works...

[z0al]

Awesome 👏🏻

I'm assuming the final version will only show the yellow background only around the notification item. Right?

although I think it kinda removes the purpose of the notification popup, if it's not shown on the majority of the status bar.

Why do you think so? I think UX-wise it creates more focus for the end-user.

Currently flashing the full status bar forces my eyes to scan the whole bar looking for changes before focusing on the message itself. If the popup shows more often I will probably get tired and distracted.

If we have the notification on a limited space (as in, just like any other item like what you're doing above) + having the yellow background only around the notification item, IMHO I think that will be less stressful for the developer and sort of point my eyes immediately to the part that changed in the status bar (i.e. the notification message body itself). I'm no UX-expert though, so don't take my word for it :D

[andr3h3nriqu3s11]

Currently flashing the full status bar forces my eyes to scan the whole bar looking for changes before focusing on the message itself. If the popup shows more often I will probably get tired and distracted.

Good point, right now I think it changes the background of the entire bar, but that can be changed.

Although it still might be interesting the ability to hide the items when the notification appears...

I'm no UX-expert though, so don't take my word for it :D

Neither am I :D

[z0al]

Although it still might be interesting the ability to hide the items when the notification appears...

Well, if that's valuable for developers then we can have a flag like:

"workbench.statusBar.notificationMode": "full-width", // or "auto" to take the available width - like above

But in that case, it will be as simple as hiding everything and showing the notification banner because having a configuration for that might not be a good idea:

• Will be too much, as you already explored above
• Can result in status bar items jumping around when toggling a notification which will lead to an even worse UX as I described above.

Also, out of curiosity, is that a behavior you've seen in another editor?

[andr3h3nriqu3s11]

Well, if that's valuable for developers then we can have a flag like:

That's a great idea. But it will make it less customizable because then you can not have items that do not change or the notification popup changes or all changes...

For example this one is made by removing everything from the notification.start and notification.end

[z0al]

But it will make it less customizable because then you can not have items that do not change or the notification popup changes or all changes...

I'm not following 😅 . Can you elaborate a bit?

The last gif is exactly what I want though, less moving parts and more focus 👍🏻

[andr3h3nriqu3s11]

Right now I set up mine to loop like this

It could be hard to do it using this configuration, or something like it...

"workbench.statusBar.notificationMode": "full-width", // or "auto" to take the available width - like above

[z0al]

Yes, that's right.

Let's take a step back though, what is it that you want to do when a notification is shown? Giving the yellow banner more space Or changing the position of items?

If it's only about giving more space (in other words, hiding some elements) then how about instead of notificationMode we introduce something like hideOnNotification e.g

"workbench.statusBar.items.start": [ /* same as before  */],
"workbench.statusBar.items.end": [ /* same as before  */],
"workbench.statusBar.hideOnNotification": ["lindEndings", "identation"] 

That could be enough to achieve your goal with notification.start/end right?

On the other hand, We can still achieve the full-width effect by having a special value hideOnNotification e.g. ["*"]

An obvious limitation of hideOnNotification compared to notication.start/end is that you can't change the position of the items, only hide them. I personally can't think of a reason why would someone change the positioning of the items for a second only to revert it a second later, it just creates an unpleasant UX.

[z0al]

More special values can be added to hideOnNotification as well, for example, to hide the entire right side e.g

"workbench.statusBar.hideOnNotification": ["modeIndicator", "itemsEnd"] 

P.S. naming is hard, I'm just throwing random names here :D

[z0al]

Needless to say, it could be the other way around too. As in, showOnNotification instead of hideOnNotification. I don't know which one makes more sense here as I don't have a use-case for this feature to begin with.

To reiterate, we use items.start/end to configure the positioning of the items regardless of when or if they are shown and hideOnNotification or showOnNotification to configure which to show/not show when a notification is displayed. And finally statusBar.hide to configure what to hide always.

[andr3h3nriqu3s11]

Let's take a step back though, what is it that you want to do when a notification is shown? Giving the yellow banner more space Or changing the position of items?

I don't quite get this one the items are in the same position they are in the same group of the notification pop up

An obvious limitation of hideOnNotification compared to notication.start/end is that you can't change the position of the items, only hide them. I personally can't think of a reason why would someone change the positioning of the items for a second only to revert it a second later, it just creates an unpleasant UX.

Well the animation kinda is nice, and I personally think that it does make the UX a little better...
And I think it would not necessarily block you from changing the position of items it could lead to black spaces between them.
And the message could end up in the middle of the status bar or on top of an item that's already open(but I would have to try it to be sure)

[z0al]

Well the animation kinda is nice, and I personally think that it does make the UX a little better...

For a short period as 1 second, I'm not sure but that's just my personal opinion and you don't have to agree.

I don't quite get this one

To achieve the same exact status bar you show in this demo we need the followings:

// The "notification" item needs to be at the very end. Otherwise, it will take the full width
"workbench.statusBar.items.start": ["modeIndicator", "notificationCount", "lineNumber", "error-count", "...", "notification"],
"workbench.statusBar.items.end":["...", "identation", "language"] ,
"workbench.statusBar.items.showOnNotification": ["modeIndicator", "notificationCount", "lineNumber", "error-count"] 

Would that be enough?

By changing the position of the items I mean changing the position for example of the language item to be on the left side when showing a notification, then, ofc it will be shown again at the very end when the notification disappears. For something like that, we need, notification.start/end

I hope that's clear.

[andr3h3nriqu3s11]

So after trying I don't think something this hideOnNotification will be possible as code is right now, because all the child groups that the notification pop up is on are hidden...

    <View
      ?key
      style={Styles.view(
        Feature_Theme.Colors.StatusBar.background.from(theme),
        yOffset,
      )}>
      <sectionGroup style={Styles.sectionGroup(background)}>
        <section align=`FlexStart> startItems </section>
        <sectionGroup style={Styles.sectionGroup(Feature_Theme.Colors.StatusBar.background.from(theme))}>
          <section align=`FlexStart> notificationItemsStart </section>
          <section align=`Center> notificationItemsCenter </section>
          <section align=`FlexEnd> notificationItemsEnd </section>
        </sectionGroup>
        
        <section align=`FlexStart> endItems </section>
        <notificationPopups />
      </sectionGroup>
    </View>;

So even though I am forcing the <sectionGroup style={Styles.sectionGroup(Feature_Theme.Colors.StatusBar.background.from(theme))}> to have the background theme color not the animation background it still hides it... which makes it harder to do that... something like the show/hideOnNotification because they would need to be in the same section as the notification which would mean that they would have to be in the end of items.start and begging of items.end or if they are on the showOnNotification they would be moved automatically to the end/start of their sections

[andr3h3nriqu3s11]

So I did the one where it automatically moves the ones that can be hidden by the notification to the right section and I think it ended up striking the right balance between being able to change things around and easiness to configure

  "workbench.statusBar.items.start": [ "modeIndicator", "notificationCount", "macro", "leftItems", "diagnosticCount", "position", "git" ],
  "workbench.statusBar.items.hideOnNotification": [ "macro", "leftItems",  "git", "rightItems", "lineEndings", "indentation", "fileType" ],
  "workbench.statusBar.items.end": [ "..." ],

Maybe changing it to showOnNotification might make more sense...

[z0al]

So I did the one where it automatically moves the ones that can be hidden by the notification to the right section

I didn't fully grasp the concept, even with the demo lol. Can you maybe update your fork so I could play with the feature and get how it feels?

Maybe changing it to showOnNotification might make more sense...

I think so

[z0al]

Maybe in a different branch so it doesn't interfere with your existing PR :D

[andr3h3nriqu3s11]

Sure 👍
There you go
https://github.com/andr3h3nriqu3s11/oni2/tree/feat/ux/configurable-statusbar