Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Indent guides (#11503)

Browse source 
Builds on top of existing work from #2249, 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`)
- [x] docs (will do in a follow up PR)
- [x] benchmark performance impact

Release Notes:

- Added indent guides
([#5373](https://github.com/zed-industries/zed/issues/5373))

---------

Co-authored-by: Nate Butler <1714999+iamnbutler@users.noreply.github.com>
Co-authored-by: Remco <djsmits12@gmail.com>
This commit is contained in:
Bennet Bo Fenner 2024-05-23 15:50:59 +02:00 • committed by GitHub
parent 3eb0418bda
commit feea607bac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 1705 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

4
crates/theme/src/default_colors.rs
View file

@ -75,6 +75,8 @@ impl ThemeColors {
editor_invisible: neutral().light().step_10(),
editor_wrap_guide: neutral().light_alpha().step_7(),
editor_active_wrap_guide: neutral().light_alpha().step_8(),
editor_indent_guide: neutral().light_alpha().step_5(),
editor_indent_guide_active: neutral().light_alpha().step_6(),
editor_document_highlight_read_background: neutral().light_alpha().step_3(),
editor_document_highlight_write_background: neutral().light_alpha().step_4(),
terminal_background: neutral().light().step_1(),
@ -170,6 +172,8 @@ impl ThemeColors {
editor_invisible: neutral().dark_alpha().step_4(),
editor_wrap_guide: neutral().dark_alpha().step_4(),
editor_active_wrap_guide: neutral().dark_alpha().step_4(),
editor_indent_guide: neutral().dark_alpha().step_4(),
editor_indent_guide_active: neutral().dark_alpha().step_6(),
editor_document_highlight_read_background: neutral().dark_alpha().step_4(),
editor_document_highlight_write_background: neutral().dark_alpha().step_4(),
terminal_background: neutral().dark().step_1(),

34
crates/theme/src/default_theme.rs
View file

@ -2,7 +2,7 @@ use std::sync::Arc;
use gpui::WindowBackgroundAppearance;
use crate::prelude::*;
use crate::AccentColors;
use crate::{
default_color_scales,
@ -23,21 +23,7 @@ fn zed_pro_daylight() -> Theme {
status: StatusColors::light(),
player: PlayerColors::light(),
syntax: Arc::new(SyntaxTheme::default()),
accents: vec![
blue().light().step_9(),
orange().light().step_9(),
pink().light().step_9(),
lime().light().step_9(),
purple().light().step_9(),
amber().light().step_9(),
jade().light().step_9(),
tomato().light().step_9(),
cyan().light().step_9(),
gold().light().step_9(),
grass().light().step_9(),
indigo().light().step_9(),
iris().light().step_9(),
],
accents: AccentColors::light(),
},
}
}
@ -54,21 +40,7 @@ pub(crate) fn zed_pro_moonlight() -> Theme {
status: StatusColors::dark(),
player: PlayerColors::dark(),
syntax: Arc::new(SyntaxTheme::default()),
accents: vec![
blue().dark().step_9(),
orange().dark().step_9(),
pink().dark().step_9(),
lime().dark().step_9(),
purple().dark().step_9(),
amber().dark().step_9(),
jade().dark().step_9(),
tomato().dark().step_9(),
cyan().dark().step_9(),
gold().dark().step_9(),
grass().dark().step_9(),
indigo().dark().step_9(),
iris().dark().step_9(),
],
accents: AccentColors::dark(),
},
}
}

8
crates/theme/src/one_themes.rs
View file

@ -3,8 +3,8 @@ use std::sync::Arc;
use gpui::{hsla, FontStyle, FontWeight, HighlightStyle, WindowBackgroundAppearance};
use crate::{
default_color_scales, Appearance, PlayerColors, StatusColors, SyntaxTheme, SystemColors, Theme,
ThemeColors, ThemeFamily, ThemeStyles,
default_color_scales, AccentColors, Appearance, PlayerColors, StatusColors, SyntaxTheme,
SystemColors, Theme, ThemeColors, ThemeFamily, ThemeStyles,
};
// Note: This theme family is not the one you see in Zed at the moment.
@ -42,6 +42,7 @@ pub(crate) fn one_dark() -> Theme {
styles: ThemeStyles {
window_background_appearance: WindowBackgroundAppearance::Opaque,
system: SystemColors::default(),
accents: AccentColors(vec![blue, orange, purple, teal, red, green, yellow]),
colors: ThemeColors {
border: hsla(225. / 360., 13. / 100., 12. / 100., 1.),
border_variant: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
@ -91,6 +92,8 @@ pub(crate) fn one_dark() -> Theme {
editor_invisible: hsla(222.0 / 360., 11.5 / 100., 34.1 / 100., 1.0),
editor_wrap_guide: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
editor_active_wrap_guide: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
editor_indent_guide: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
editor_indent_guide_active: hsla(225. / 360., 13. / 100., 12. / 100., 1.),
editor_document_highlight_read_background: hsla(
207.8 / 360.,
81. / 100.,
@ -249,7 +252,6 @@ pub(crate) fn one_dark() -> Theme {
("variant".into(), HighlightStyle::default()),
],
}),
accents: vec![blue, orange, purple, teal],
},
}
}

13
crates/theme/src/registry.rs
View file

@ -12,8 +12,9 @@ use refineable::Refineable;
use util::ResultExt;
use crate::{
try_parse_color, Appearance, AppearanceContent, PlayerColors, StatusColors, SyntaxTheme,
SystemColors, Theme, ThemeColors, ThemeContent, ThemeFamily, ThemeFamilyContent, ThemeStyles,
try_parse_color, AccentColors, Appearance, AppearanceContent, PlayerColors, StatusColors,
SyntaxTheme, SystemColors, Theme, ThemeColors, ThemeContent, ThemeFamily, ThemeFamilyContent,
ThemeStyles,
};
#[derive(Debug, Clone)]
@ -118,6 +119,12 @@ impl ThemeRegistry {
};
player_colors.merge(&user_theme.style.players);
let mut accent_colors = match user_theme.appearance {
AppearanceContent::Light => AccentColors::light(),
AppearanceContent::Dark => AccentColors::dark(),
};
accent_colors.merge(&user_theme.style.accents);
let syntax_highlights = user_theme
.style
.syntax
@ -156,11 +163,11 @@ impl ThemeRegistry {
styles: ThemeStyles {
system: SystemColors::default(),
window_background_appearance,
accents: accent_colors,
colors: theme_colors,
status: status_colors,
player: player_colors,
syntax: syntax_theme,
accents: Vec::new(),
},
}
}));

20
crates/theme/src/schema.rs
View file

@ -75,6 +75,9 @@ pub struct ThemeStyleContent {
#[serde(default, rename = "background.appearance")]
pub window_background_appearance: Option<WindowBackgroundContent>,
#[serde(default)]
pub accents: Vec<AccentContent>,
#[serde(flatten, default)]
pub colors: ThemeColorsContent,
@ -381,6 +384,12 @@ pub struct ThemeColorsContent {
#[serde(rename = "editor.active_wrap_guide")]
pub editor_active_wrap_guide: Option<String>,
#[serde(rename = "editor.indent_guide")]
pub editor_indent_guide: Option<String>,
#[serde(rename = "editor.indent_guide_active")]
pub editor_indent_guide_active: Option<String>,
/// Read-access of a symbol, like reading a variable.
///
/// A document highlight is a range inside a text document which deserves
@ -747,6 +756,14 @@ impl ThemeColorsContent {
.editor_active_wrap_guide
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
editor_indent_guide: self
.editor_indent_guide
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
editor_indent_guide_active: self
.editor_indent_guide_active
.as_ref()
.and_then(|color| try_parse_color(color).ok()),
editor_document_highlight_read_background: self
.editor_document_highlight_read_background
.as_ref()
@ -1196,6 +1213,9 @@ impl StatusColorsContent {
}
}
#[derive(Debug, Clone, Serialize, Deserialize, JsonSchema)]
pub struct AccentContent(pub Option<String>);
#[derive(Debug, Clone, Serialize, Deserialize, JsonSchema)]
pub struct PlayerColorContent {
pub cursor: Option<String>,

1
crates/theme/src/settings.rs
View file

@ -325,6 +325,7 @@ impl ThemeSettings {
.status
.refine(&theme_overrides.status_colors_refinement());
base_theme.styles.player.merge(&theme_overrides.players);
base_theme.styles.accents.merge(&theme_overrides.accents);
base_theme.styles.syntax =
SyntaxTheme::merge(base_theme.styles.syntax, theme_overrides.syntax_overrides());

2
crates/theme/src/styles.rs
View file

@ -1,3 +1,4 @@
mod accents;
mod colors;
mod players;
mod status;
@ -7,6 +8,7 @@ mod system;
#[cfg(feature = "stories")]
mod stories;
pub use accents::*;
pub use colors::*;
pub use players::*;
pub use status::*;

85
crates/theme/src/styles/accents.rs Normal file
View file

@ -0,0 +1,85 @@
use gpui::Hsla;
use serde_derive::Deserialize;
use crate::{
amber, blue, cyan, gold, grass, indigo, iris, jade, lime, orange, pink, purple, tomato,
try_parse_color, AccentContent,
};
/// A collection of colors that are used to color indent aware lines in the editor.
#[derive(Clone, Deserialize)]
pub struct AccentColors(pub Vec<Hsla>);
impl Default for AccentColors {
/// Don't use this!
/// We have to have a default to be `[refineable::Refinable]`.
/// TODO "Find a way to not need this for Refinable"
fn default() -> Self {
Self::dark()
}
}
impl AccentColors {
pub fn dark() -> Self {
Self(vec![
blue().dark().step_9(),
orange().dark().step_9(),
pink().dark().step_9(),
lime().dark().step_9(),
purple().dark().step_9(),
amber().dark().step_9(),
jade().dark().step_9(),
tomato().dark().step_9(),
cyan().dark().step_9(),
gold().dark().step_9(),
grass().dark().step_9(),
indigo().dark().step_9(),
iris().dark().step_9(),
])
}
pub fn light() -> Self {
Self(vec![
blue().light().step_9(),
orange().light().step_9(),
pink().light().step_9(),
lime().light().step_9(),
purple().light().step_9(),
amber().light().step_9(),
jade().light().step_9(),
tomato().light().step_9(),
cyan().light().step_9(),
gold().light().step_9(),
grass().light().step_9(),
indigo().light().step_9(),
iris().light().step_9(),
])
}
}
impl AccentColors {
pub fn color_for_index(&self, index: u32) -> Hsla {
self.0[index as usize % self.0.len()]
}
/// Merges the given accent colors into this [`AccentColors`] instance.
pub fn merge(&mut self, accent_colors: &[AccentContent]) {
if accent_colors.is_empty() {
return;
}
let colors = accent_colors
.iter()
.filter_map(|accent_color| {
accent_color
.0
.as_ref()
.and_then(|color| try_parse_color(color).ok())
})
.collect::<Vec<_>>();
if !colors.is_empty() {
self.0 = colors;
}
}
}

9
crates/theme/src/styles/colors.rs
View file

@ -2,7 +2,9 @@ use gpui::{Hsla, WindowBackgroundAppearance};
use refineable::Refineable;
use std::sync::Arc;
use crate::{PlayerColors, StatusColors, StatusColorsRefinement, SyntaxTheme, SystemColors};
use crate::{
AccentColors, PlayerColors, StatusColors, StatusColorsRefinement, SyntaxTheme, SystemColors,
};
#[derive(Refineable, Clone, Debug)]
#[refineable(Debug, serde::Deserialize)]
@ -154,6 +156,8 @@ pub struct ThemeColors {
pub editor_invisible: Hsla,
pub editor_wrap_guide: Hsla,
pub editor_active_wrap_guide: Hsla,
pub editor_indent_guide: Hsla,
pub editor_indent_guide_active: Hsla,
/// Read-access of a symbol, like reading a variable.
///
/// A document highlight is a range inside a text document which deserves
@ -242,7 +246,7 @@ pub struct ThemeStyles {
/// An array of colors used for theme elements that iterate through a series of colors.
///
/// Example: Player colors, rainbow brackets and indent guides, etc.
pub accents: Vec<Hsla>,
pub accents: AccentColors,
#[refineable]
pub colors: ThemeColors,
@ -251,6 +255,7 @@ pub struct ThemeStyles {
pub status: StatusColors,
pub player: PlayerColors,
pub syntax: Arc<SyntaxTheme>,
}

6
crates/theme/src/theme.rs
View file

@ -125,6 +125,12 @@ impl Theme {
&self.styles.system
}
/// Returns the [`AccentColors`] for the theme.
#[inline(always)]
pub fn accents(&self) -> &AccentColors {
&self.styles.accents
}
/// Returns the [`PlayerColors`] for the theme.
#[inline(always)]
pub fn players(&self) -> &PlayerColors {