Indent guides

[bennetbo]

Builds on top of existing work from #2249, still very much WIP, but here's a showcase:

https://github.com/zed-industries/zed/assets/53836821/4b346965-6654-496c-b379-75425d9b493f

TODO:

• [x] handle line wrapping
• [x] implement handling in multibuffer (crashes currently)
• [x] add configuration option
• [x] new theme properties? What colors to use?
• [x] Possibly support indents with different colors or background colors
• [x] investigate edge cases (e.g. indent guides and folds continue on empty lines even if the next indent is different)
• [x] add more tests (also test find_active_indent_index)
• [ ] docs
• [ ] benchmark performance impact

Release Notes:

• Added indent guides (#5373)

[d1y]

It looks great, I hope it can have built-in rainbow indentation :)

[bennetbo]

It looks great, I hope it can have built-in rainbow indentation :)

@d1y It is actually built-in. In your settings file you will be able to do something like this:

"experimental.theme_overrides": {
    "accents": [ // Specify some accent colors to use for the indent guide lines/background
      "#ffff40",
      "#7fff7f",
      "#ff7fff",
      "#4fecec"
    ]
  },
  "indent_guides": {
    "coloring": "indent_aware",  // Set this to indent_aware to paint the lines in rainbow colors
    "background_coloring": "indent_aware" // Set this to indent_aware to paint the background in rainbow colors
  },

You can also only colorize/disable the lines/the background by customizing the coloring and background_coloring values

[baldwindavid]

@bennetbo Great work! For the "fixed" color mode is there a way to set the color of the active and inactive indent guides via the theme? I see an example for the gruvbox theme accents, but thinking that is only for "indent_aware" colors. What I would be shooting for is to set the "active" indent guide to a more prominent color (maybe) and the inactive guides to transparent. Regardless of whether that is in here this will be a great addition. Thanks!

[baldwindavid]

The other notes for future consideration are:

• It would be nice to be able to toggle on and off with a command like editor::ToggleIndentGuides (similar to editor::ToggleLineNumbers).
• I want indent guides more in some languages than others. For example, I don't typically want guides in Elixir, but need them in HTML-ish code with deeper nesting. Might be nice to support language overrides similar to those for hard warp, tab size, etc.

I'm not even sure I'd want to mess with the default active/inactive theme colors mentioned in my previous comment if these sorts of settings were available.

[bennetbo]

@baldwindavid Indent guides use the theme color's editor.indent_guide and editor.indent_guide_active when coloring is set to fixed (which is the default). So they can be styled by both the theme and also the theme overrides. Thanks for the suggestions! Will add them in a follow up PR

[baldwindavid]

@bennetbo Super cool. I added "editor.indent_guide": "#00000000" and it works great.

I also see that you went ahead and added the per language config. I tried it out and quickly realized that my plan to disable for Elixir is kind of foiled in that this also disables it for heex (the elixir HTML template language). I tried this, but didn't seem to achieve what I was trying to do as the guides are still disabled for heex...

  "languages": {
    "Elixir": {
      "language_servers": ["lexical", "!elixir-ls", "!next-ls", "..."],
      "indent_guides": {
        "enabled": false
      }
    },
    "HEEX": {
      "indent_guides": {
        "enabled": true
      }
    },

At any rate, don't think that has anything to do with this PR as the language-level settings do work. Thanks!

[bennetbo]

@bennetbo Super cool. I added "editor.indent_guide": "#00000000" and it works great.

I also see that you went ahead and added the per language config. I tried it out and quickly realized that my plan to disable for Elixir is kind of foiled in that this also disables it for heex (the elixir HTML template language). I tried this, but didn't seem to achieve what I was trying to do as the guides are still disabled for heex...

  "languages": {
    "Elixir": {
      "language_servers": ["lexical", "!elixir-ls", "!next-ls", "..."],
      "indent_guides": {
        "enabled": false
      }
    },
    "HEEX": {
      "indent_guides": {
        "enabled": true
      }
    },

At any rate, don't think that has anything to do with this PR as the language-level settings do work. Thanks!

I am not familiar with HEEX and elixir, is the HEEX code in the same file as the elixir code? Right now there's no support for rendering indent guides only for a certain part of a file (the language settings get inferred from the first line of the buffer, which in your case is probably elixir -> that's why they don't show up)

[baldwindavid]

Elixir is the main language and HEEX a templating language for Elixir. They are both in the elixir extension within the zed repo.

While the elixir extension does support heex injections, the scenario I'm talking about here is for elixir in a file with a .ex extension and a heex template in a different file with the extension .heex.

[bennetbo]

Elixir is the main language and HEEX a templating language for Elixir. They are both in the elixir extension within the zed repo.

While the elixir extension does support heex injections, the scenario I'm talking about here is for elixir in a file with a .ex extension and a heex template in a different file with the extension .heex.

Hmm that is odd, I just tested it and specifying something like tab_size will also not work, HEEX always seems to use the settings that I specify for elixir