Skip to content

Commit 33441d0

Browse files
wizard04wsuwizard04wsu
committed
Improve styling of soft-wrapped regexes
- Fixed toggling of stylesheets from menu/console. - Improved the styling around line breaks created within a regex when it gets soft-wrapped. Auto-indent whitespace is no longer displayed within a regex; any additional lines will be flush with the left edge of the text editor instead of matching the indentation of the previous line. This way there's no confusion about whether that extra whitespace is part of the regex or not. - Made the character set background color slightly more opaque, and prevented descendant elements from duplicating the background. - Removed the "-unit" calculations that are based on line-height since Atom only allows a unitless value for that setting.
1 parent 60cb94d commit 33441d0

5 files changed

Lines changed: 61 additions & 67 deletions

File tree

‎lib/javascript-regex.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ const thisPackage = {
2222
"regex_pattern",
2323
],
2424

25+
styleSheets: {
26+
"showCharacterSetBackgrounds": "charset-backgrounds",
27+
"showGroupOutlines": "group-outlines",
28+
},
29+
2530

2631
injectionPoints: [
2732
{
@@ -59,13 +64,13 @@ const thisPackage = {
5964
};
6065

6166
function toggleConfig(configName){
62-
atom.config.set(configName, !atom.config.get(`${thisPackage.name}.${configName}`));
67+
atom.config.set(`${thisPackage.name}.${configName}`, !atom.config.get(`${thisPackage.name}.${configName}`));
6368
};
6469

65-
function updateStyleSheet(configName, filename){
70+
function updateStyleSheet(configName){
6671
disposableStyleSheets[configName]?.dispose();
6772
if(atom.config.get(`${thisPackage.name}.${configName}`)){
68-
let path = `${package.path}/styles/${filename}.less`,
73+
let path = `${package.path}/styles/${thisPackage.styleSheets[configName]}.less`,
6974
css = package.themeManager.loadStylesheet(path);
7075
disposableStyleSheets[configName] = package.styleManager.addStyleSheet(css, { sourcePath: path, priority: 1 });
7176
}
@@ -144,18 +149,18 @@ module.exports = {
144149
"javascript-regex:toggle-group-outlines": ()=>toggleConfig("showGroupOutlines"),
145150
}));
146151

147-
// Load the main syntax highlighting stylesheet.
152+
// Load the main stylesheet.
148153
let path = `${package.path}/styles/base.less`,
149154
css = package.themeManager.loadStylesheet(path);
150155
disposableStyleSheets["main"] = package.styleManager.addStyleSheet(css, { sourcePath: path, priority: 1 });
151156

152-
// Load stylesheets per the package settings.
153-
updateStyleSheet("showCharacterSetBackgrounds", "charset-backgrounds");
154-
updateStyleSheet("showGroupOutlines", "group-outlines");
157+
// Load additional stylesheets per the package settings.
158+
updateStyleSheet("showCharacterSetBackgrounds");
159+
updateStyleSheet("showGroupOutlines");
155160

156161
// Observe changes to the package settings.
157-
atom.config.onDidChange(`${thisPackage.name}.showCharacterSetBackgrounds`, {}, ()=>updateStyleSheet("showCharacterSetBackgrounds", "charset-backgrounds"));
158-
atom.config.onDidChange(`${thisPackage.name}.showGroupOutlines`, {}, ()=>updateStyleSheet("showGroupOutlines", "group-outlines"));
162+
atom.config.onDidChange(`${thisPackage.name}.showCharacterSetBackgrounds`, {}, ()=>updateStyleSheet("showCharacterSetBackgrounds"));
163+
atom.config.onDidChange(`${thisPackage.name}.showGroupOutlines`, {}, ()=>updateStyleSheet("showGroupOutlines"));
159164
},
160165

161166
serialize(){},

‎styles/base.less‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
}
1111

1212
//the pattern
13-
.syntax--meta.syntax--pattern {
13+
> .syntax--meta.syntax--pattern {
1414

1515
//invalid content (that isn't already classed as such)
1616
color: @invalid;
@@ -237,4 +237,9 @@
237237
}
238238
}
239239
}
240+
241+
//remove Atom editor's indent guides so that wrapped lines are flush with the left side of the editor
242+
.indent-guide {
243+
display: none;
244+
}
240245
}

‎styles/charset-backgrounds.less‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
@import "colors.less";
2+
//@editor-background-color: #282c34; //TODO: use JavaScript to update this with editor's current background color, and watch for changes
23

3-
.syntax--source.syntax--js .syntax--string.syntax--regexp {
4+
5+
.syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
46

5-
//the pattern
6-
.syntax--meta.syntax--pattern {
7+
//character sets
8+
.syntax--constant.syntax--other.syntax--character-class.syntax--set {
9+
background-color: @charset-bg;
710

8-
//character sets
911
.syntax--constant.syntax--other.syntax--character-class.syntax--set {
10-
background-color: @charset-bg;
12+
background-color: transparent;
13+
}
14+
15+
//inside the set -> character ranges
16+
.syntax--constant.syntax--other.syntax--character-class.syntax--range {
17+
background-color: @charset-range-bg;
1118

12-
//inside the set -> character ranges
1319
.syntax--constant.syntax--other.syntax--character-class.syntax--range {
14-
background-color: @charset-range-bg;
20+
background-color: transparent;
1521
}
1622
}
1723
}

‎styles/colors.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@
2424

2525
// Colors used inside of a character set
2626
@charset: #56b6c2;
27-
@charset-bg: fade(#56b6c2, 6%);
27+
@charset-bg: fade(#56b6c2, 8%);
2828
@charset-delimiter: #88eeee;
2929
@charset-character-special: mix(@character-numeric, @charset, 60%);
3030
@charset-character-class: mix(@character-class, @charset, 60%);
3131
@charset-character-class-property: mix(@character-class-property, @charset, 75%);
3232
@charset-character-numeric: @character-numeric;
3333
@charset-character-numeric-charcode: @character-numeric-charcode;
3434
@charset-range-dash: @charset-delimiter;
35-
@charset-range-bg: fade(#88eeee, 6%);
35+
@charset-range-bg: fade(#88eeee, 8%);

‎styles/group-outlines.less‎

Lines changed: 26 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
@import "colors.less";
22

3-
@half-line-height-unit: ~"calc(var(--editor-line-height) / 2)";
4-
@half-line-height-nounit: ~"calc(var(--editor-line-height) * 1em / 2)";
5-
//@line-padding-unit: ~"calc(var(--editor-line-height) - 1em)";
6-
//@line-padding-nounit: ~"calc(var(--editor-line-height) * 1em - 1em)";
7-
@half-line-padding-unit: ~"calc((var(--editor-line-height) - 1em) / 2)";
8-
@half-line-padding-nounit: ~"calc((var(--editor-line-height) * 1em - 1em) / 2)";
9-
@indent-width-unit: ~"calc(0.5em + (var(--editor-line-height) - 1em) / 4)";
10-
@indent-width-nounit: ~"calc(0.5em + (var(--editor-line-height) * 1em - 1em) / 4)";
11-
3+
@half-line-height: ~"calc(var(--editor-line-height) * 1em / 2)";
4+
@half-line-padding: ~"calc((var(--editor-line-height) * 1em - 1em) / 2)";
125

136

147
.syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
@@ -24,8 +17,6 @@
2417
background-color: @group-bg;
2518
padding: 1px 0;
2619
position: relative;
27-
//border-radius: @half-line-height-unit;
28-
//border-radius: @half-line-height-nounit;
2920

3021
//lines above and below group content
3122
&::before {
@@ -34,8 +25,7 @@
3425
display: block;
3526
border: 1px solid @group-delimiter;
3627
border-width: 1px 0;
37-
inset: -1px @half-line-height-unit;
38-
inset: -1px @half-line-height-nounit;
28+
inset: -1px @half-line-height;
3929
}
4030
&.syntax--capturing::before {
4131
border-color: @group-delimiter-capturing;
@@ -60,13 +50,11 @@
6050
&.syntax--end::after {
6151
content: "";
6252
position: absolute;
63-
width: @half-line-height-unit;
64-
width: @half-line-height-nounit;
53+
width: @half-line-height;
6554
}
6655

6756
&.syntax--begin::before {
68-
inset: 1px auto 2px @half-line-padding-unit;
69-
inset: 1px auto 2px @half-line-padding-nounit;
57+
inset: 1px auto 2px @half-line-padding;
7058
border-top-left-radius: 100% 50%;
7159
border-bottom-left-radius: 100% 50%;
7260
box-shadow:
@@ -76,8 +64,7 @@
7664
}
7765

7866
&.syntax--end::after {
79-
inset: 1px @half-line-padding-unit 2px auto;
80-
inset: 1px @half-line-padding-nounit 2px auto;
67+
inset: 1px @half-line-padding 2px auto;
8168
border-top-right-radius: 100% 50%;
8269
border-bottom-right-radius: 100% 50%;
8370
box-shadow:
@@ -106,45 +93,36 @@
10693
}
10794
}
10895

109-
.line > :first-child > .syntax--source.syntax--js:first-child > .syntax--string.syntax--regexp:first-child > .syntax--meta.syntax--pattern:first-child {
96+
//adjustments for breaks in a wrapped line
97+
.line .syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
11098

111-
> .syntax--meta.syntax--pattern:first-child > .syntax--meta.syntax--group:first-child,
112-
.syntax--meta.syntax--group:first-child {
99+
> .syntax--meta.syntax--group:first-child,
100+
:not(.syntax--invalid) > .syntax--meta.syntax--group:first-child {
113101

114102
&::before {
115-
left: @indent-width-unit;
116-
left: @indent-width-nounit;
103+
left: 0;
117104
}
118105
}
119-
:not(:first-child) .syntax--meta.syntax--group:first-child {
106+
:not(.syntax--invalid):not(:first-child) .syntax--meta.syntax--group:first-child {
120107

121108
&::before {
122-
left: @half-line-height-unit;
123-
left: @half-line-height-nounit;
109+
left: @half-line-height;
124110
}
125111
}
126112
}
127-
/*.line > :first-child > .syntax--source.syntax--js:first-child > .syntax--string.syntax--regexp:first-child {
128-
.syntax--meta.syntax--group:first-child {
129-
border-top-left-radius: 0;
130-
border-bottom-left-radius: 0;
113+
.line .syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
114+
115+
> .syntax--meta.syntax--group:last-child,
116+
:not(.syntax--invalid) > .syntax--meta.syntax--group:last-child {
117+
118+
&::before {
119+
right: 0;
120+
}
131121
}
132-
:not(:first-child) .syntax--meta.syntax--group:first-child {
133-
border-top-right-radius: @line-padding-unit 50%;
134-
border-top-right-radius: @line-padding-nounit 50%;
135-
border-bottom-right-radius: @line-padding-unit 50%;
136-
border-bottom-right-radius: @line-padding-nounit 50%;
122+
:not(.syntax--invalid):not(:last-child) .syntax--meta.syntax--group:last-child {
123+
124+
&::before {
125+
right: @half-line-height;
126+
}
137127
}
138128
}
139-
.line > :last-child > .syntax--source.syntax--js:last-child > .syntax--string.syntax--regexp:last-child {
140-
.syntax--meta.syntax--group:last-child {
141-
border-top-right-radius: 0;
142-
border-bottom-right-radius: 0;
143-
}
144-
:not(:last-child) .syntax--meta.syntax--group:last-child {
145-
border-top-left-radius: @line-padding-unit 50%;
146-
border-top-left-radius: @line-padding-nounit 50%;
147-
border-bottom-left-radius: @line-padding-unit 50%;
148-
border-bottom-left-radius: @line-padding-nounit 50%;
149-
}
150-
}*/

0 commit comments

Comments
 (0)