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.

[71]

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/).

[71]

I'm fine with this name, but I wonder if we should try to match the CSS property text-transform, since it accomplishes something very similar. Something like activeModeDisplayTextTransform?

[71]

nit:

Suggested change

[71]

Suggested change

	"description": "Controls how the active mode is formmated in the status bar.",
	"description": "Controls how the active mode is formatted in the status bar.",

[71]

Suggested change

	"Display the name with its original formmatting.",
	"Display the name with its original formatting.",

[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.

[71]

@tylerlaprade Thanks for the changes! You should be able to run the tests from VS Code, in "Run and Debug > Run all tests". I recommend launching the extension with "Launch extension" instead though.

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.

[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!

[71]

nit: remove empty line

Suggested change

[71]

This defines activeModeDisplayTextTransform as a property set on modes, not a global configuration. You need to move this below and name it "dance.activeModeDisplayTextTransform" instead.

[71]

This is a good way to get the key, but to avoid reading the configuration every time the mode changes (which can occur pretty often), I would instead use observePreference() in src/state/extension.ts to keep a field of Extension in sync with the configuration, and then read from _extension in notifyDidBecomeActive().

[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.