Custom formatting of display name

[tylerlaprade]

I always wish I could show the mode in the status bar in uppercase so that I notice it more. This is how Vim does it, I believe. Rather than making a simple boolean, I made it an enum so other display modes can be added in the future. This would be helpful for someone who has a lot of custom modes and wants to change how they're displayed.

This is my first time working on a VSCode extension, so feedback is very welcome. I wasn't sure how to build. I ran npm i, but it change the yarn file and added far more to package-lock.json than I expected, so I reverted it. I also didn't touch any validation of the setting (although I did add a default to the switch case to handle unrecognized values).

[bezbac]

Hi! Just FYI, it's already possible to customise this (albeit a little hacky) using a library such as https://github.com/be5invis/vscode-custom-css.

Screenshots:

Here is the css styles I use myself:

#gregoire\.dance {
  order: -1;
  background-color: #959da5;
  color: black;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px solid rgb(19, 19, 19);
  width: 10ch;
  display: flex;
  justify-content: center;

  .codicon {
    display: none;
  }

  &:has(*[aria-label="zap  normal, Dance - Set mode"]) {
    background-color: #6a737d;
  }

  &:has(*[aria-label="zap  insert, Dance - Set mode"]) {
    background-color: #85e89d;
  }

  &:has(*[aria-label="zap  select, Dance - Set mode"]) {
    background-color: #9ecbff;
  }

  &:has(*[aria-label="zap  magit, Dance - Set mode"]) {
    background-color: #d76496;
  }

  &:has(*[aria-label="zap  <no active mode>, Dance - Set mode"]) {
    background-color: #6a737d;
  }

  &:has(*[aria-label="zap  <no active mode>, Dance - Set mode"]) a {
    display: none;
  }

  &:has(*[aria-label="zap  <no active mode>, Dance - Set mode"]):before {
    content: "None";
  }
}

You can find the full reference in my dotfiles.

[tylerlaprade]

Thanks for the suggestion - I am not interested in tweaking my CSS, though, since that's going to require more ongoing maintenance as things break due to future changes.

[akdor1154]

Tangential, but i tackle the "oops i forgot which mode im in" by customizing the cursor - are the defaults reasonable here do you think?

[tylerlaprade]

Thanks for the PR! One thing to keep in mind for this PR: #338 adds "namespaced modes" like helix/normal. We should take this into account when changing the formatting of the mode IMO (e.g. would be nice to show/hide the prefix helix/).

Very interesting! I'm not sure if that should be a separate setting, since the menu would start getting very long if we start getting into exponential combinations of possible settings. There'd be 5 menu entries at the moment (2x2 plus "as-is"), at a minimum.

I addressed all the other feedback, although I can't figure out how to run tests locally.

[tylerlaprade]

I'm not sure what you intended, though: the configuration is documented as being set per-mode, but the code you added reads a global property instead.

@71, that's right, I intended it to be global. Open to suggestions or edits if the documentation isn't clear!

[tylerlaprade]

Thanks @71 for your patience and feedback, and sorry for the delay. As a newcomer to extension development, seeing everything "just work" when I pressed F5 for the first time was magical!

I've addressed all your comments. I'm still not able to run the tests, though, as I don't see the command you mentioned, and npm test runs into an access issue.

I did, however, launch the extension locally and confirmed it works, checking the behavior of all three of the options.