Rainbow parentheses feature #7027

adamconroy · 2020-06-02T20:38:23Z

Colorize matching parentheses, braces, and brackets in a series of colors. This is customizable in the theme CSS. It can also be turned on/off dynamically per document through the Code -> Rainbow parentheses option.

Example in light and dark themes:

Closes #1888

…facing settings

gtritchie

Very minor tweaks requested, and a few additional generic questions:

guessing you already did, but make sure the themes unit-tests pass
have you sanity tested in IE11?
what happens if someone has previously imported a custom theme, then upgrades and turns on rainbow parentheses; just curious how that works in general when we add new css rules to the themes

src/cpp/session/include/session/prefs/UserPrefValues.hpp

src/cpp/session/prefs/UserPrefValues.cpp

src/gwt/acesupport/acemode/c_cpp_highlight_rules.js

src/gwt/acesupport/acemode/c_cpp.js

src/gwt/acesupport/acemode/r_highlight_rules.js

gtritchie · 2020-06-03T19:02:20Z

src/gwt/acesupport/acemode/rainbow_paren_highlight_rules.js

+/*
+ * rainbow_paren_highlight_rules.js
+ *
+ * Copyright (C) 2009-20 by RStudio, PBC


Switch to our new "current-year only" format.

gtritchie · 2020-06-03T19:07:44Z

src/gwt/src/org/rstudio/studio/client/workbench/prefs/views/EditingPreferencesPane.java

@@ -77,6 +77,7 @@ public EditingPreferencesPane(UserPrefs prefs,
            "When enabled, the indentation for documents not part of an RStudio project " +
            "will be automatically detected."));
      editingPanel.add(checkboxPref("Insert matching parens/quotes", prefs_.insertMatching()));
+      editingPanel.add(checkboxPref("Rainbow parentheses", prefs_.rainbowParentheses()));


Does everything in this pane still fit (vertically)? Noticed this pane is getting very full. I ran into a problem adding a checkbox to the Code / Display pane in #7030 and had to remove some other spacing or it was slightly clipped at the bottom

It does, there's still room for like...one more checkbox. It's definitely cramped though. We are in the situation where we want to start thinking about a different format for our options panel.

kevinushey

Nicely done! Overall this LGTM -- the one thing that I think is missing is one bit of code where we check this explicit type for parentheses; e.g. here:

https://github.com/rstudio/rstudio/blob/master/src/gwt/acesupport/acemode/token_cursor.js#L1102-L1130

I think that code needs to be changed to accommodate the new type.

kevinushey · 2020-06-08T00:03:36Z

Also echoing Gary's question here:

what happens if someone has previously imported a custom theme, then upgrades and turns on rainbow parentheses; just curious how that works in general when we add new css rules to the themes

I think we need to still include the default paren.keyword.operator type so that "default" highlight rules can be selected for parentheses, in case a custom theme doesn't define these colors yet. (But we want the rainbow rules to have a higher precedence than the "default" rules.)

adamconroy · 2020-06-10T01:19:05Z

Unfortunately in the themes paren.keyword.operator is defined with !important. I can add important to all the styles that I just added but that's a pretty bad escalation that leads to more trouble down the line. I think if we can just communicate that custom themes will need to adapt as we add styles that will be fine, not everything can be backwards compatible. I can be thorough about this in the blog post about the feature. Rainbow parens defaults to off and still uses the old style so they don't lose any functionality in that case.

…studio into feature/rainbow-parens

gtritchie

LGTM! Excited to see this in action.

jmcphers

I do think it's going to be a problem that this feature won't work with old custom themes. Here is a proposal for resolving the issue:

Make the theme CSS rules for the colors more specific; e.g., rather than .ace_paren_color_0, the theme could specify div .ace_editor .ace_paren_color_0.
Define a default set of dark/light CSS colors for parens and include them in our root style sheet, themes.css (i.e. .ace_paren_color_0, .editor_dark .ace_paren_color_0).

This way the themes can customize the colors as needed, but if the theme fails to provide the colors we will still get nice defaults. What do you think?

jmcphers · 2020-06-15T20:29:14Z

src/cpp/session/resources/schema/user-prefs-schema.json

@@ -515,6 +515,11 @@
            "title": "Highlight R function calls",
            "description": "Whether to highlight R function calls in the code editor."
        },
+        "rainbow_parentheses": {
+            "type": "boolean",
+            "default": false,


Add a title to this (and regenerate prefs) so it can be set from the Command palette.

(note you'll probably have to merge master into your branch to get this capability)

adamconroy · 2020-06-15T20:58:07Z

That solution sounds good. I wish we could just remove !important from most/all of the styles but there are so many of them who knows what will happen, especially with custom themes.

jmcphers · 2020-06-15T22:23:41Z

If you go the route of adding default styles, it looks like you could even forgo the addition of adding CSS rules to individual themes, since we just have one rainbow set for dark themes and another for light themes (easily scoped with .editor_dark). That would make the change much simpler w/o closing the door to custom rainbow colors in custom themes.

…ow_parens UserPref

…ure/rainbow-parens

adamconroy · 2020-06-17T21:43:34Z

Ok this should be good to go now!

jmcphers

LGTM!

adamconroy · 2020-06-17T23:51:06Z

@kevinushey it this looks good to you it's ready to go!

kevinushey

LGTM!

jmcphers · 2020-06-18T16:41:08Z

🎉

adamconroy added 4 commits June 1, 2020 19:26

initial rainbow parentheses implementation

7ec038a

regenerate themes with parentheses colors

5065fb7

just use the standard nomenclature of rainbow parentheses to in user …

74e002b

…facing settings

remove debug code and re-enable sync rainbow editor setting

b9bc1cd

adamconroy requested review from jmcphers and kevinushey June 2, 2020 20:46

add NEWS entry

6a27746

gtritchie requested changes Jun 3, 2020

View reviewed changes

kevinushey requested changes Jun 7, 2020

View reviewed changes

Merge branch 'master' into feature/rainbow-parens

7182281

adamconroy added 3 commits June 9, 2020 21:57

pr feedback

04342f3

Merge branch 'feature/rainbow-parens' of https://github.com/rstudio/r…

275c941

…studio into feature/rainbow-parens

pr feedback, update user pref for new interface

0d5106c

gtritchie approved these changes Jun 15, 2020

View reviewed changes

make token cursor paren matching consistent

89d7ddf

jmcphers requested changes Jun 15, 2020

View reviewed changes

adamconroy added 4 commits June 17, 2020 01:58

merge

efae97f

move paren_color style from rsthemes to themeStyles.css, update rainb…

241740f

…ow_parens UserPref

remove ace_paren from rstheme tests

db44549

Merge branch 'master' of https://github.com/rstudio/rstudio into feat…

c956b7e

…ure/rainbow-parens

jmcphers approved these changes Jun 17, 2020

View reviewed changes

kevinushey approved these changes Jun 17, 2020

View reviewed changes

kevinushey merged commit 1d578c6 into master Jun 18, 2020

gadenbuie mentioned this pull request Jun 18, 2020

Custom colors for rainbow parentheses gadenbuie/rsthemes#28

Closed

3 tasks

jmcphers added the rainbow parens label Jun 24, 2020

valerie-rstudio deleted the feature/rainbow-parens branch January 21, 2022 17:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rainbow parentheses feature #7027

Rainbow parentheses feature #7027

adamconroy commented Jun 2, 2020 •

edited

gtritchie left a comment

gtritchie Jun 3, 2020

gtritchie Jun 3, 2020

adamconroy Jun 10, 2020

kevinushey left a comment

kevinushey commented Jun 8, 2020

adamconroy commented Jun 10, 2020 •

edited

gtritchie left a comment

jmcphers left a comment •

edited

jmcphers Jun 15, 2020

jmcphers Jun 15, 2020

adamconroy commented Jun 15, 2020

jmcphers commented Jun 15, 2020

adamconroy commented Jun 17, 2020

jmcphers left a comment

adamconroy commented Jun 17, 2020

kevinushey left a comment

jmcphers commented Jun 18, 2020

Rainbow parentheses feature #7027

Rainbow parentheses feature #7027

Conversation

adamconroy commented Jun 2, 2020 • edited

gtritchie left a comment

Choose a reason for hiding this comment

gtritchie Jun 3, 2020

Choose a reason for hiding this comment

gtritchie Jun 3, 2020

Choose a reason for hiding this comment

adamconroy Jun 10, 2020

Choose a reason for hiding this comment

kevinushey left a comment

Choose a reason for hiding this comment

kevinushey commented Jun 8, 2020

adamconroy commented Jun 10, 2020 • edited

gtritchie left a comment

Choose a reason for hiding this comment

jmcphers left a comment • edited

Choose a reason for hiding this comment

jmcphers Jun 15, 2020

Choose a reason for hiding this comment

jmcphers Jun 15, 2020

Choose a reason for hiding this comment

adamconroy commented Jun 15, 2020

jmcphers commented Jun 15, 2020

adamconroy commented Jun 17, 2020

jmcphers left a comment

Choose a reason for hiding this comment

adamconroy commented Jun 17, 2020

kevinushey left a comment

Choose a reason for hiding this comment

jmcphers commented Jun 18, 2020

adamconroy commented Jun 2, 2020 •

edited

adamconroy commented Jun 10, 2020 •

edited

jmcphers left a comment •

edited