Merge View: collapseUnchanged doesn't allow customizing "⦚ N unchanged lines ⦚" bars text

[VasylMarchuk]

Describe the issue

The squiggly ⦚ lines of the "⦚ N unchanged lines ⦚" text, hardcoded into collapseUnchanged bars for expanding hidden lines are cool, but we unfortunately couldn't fit them into our theme design, and the text isn't customizable :( It took us significant efforts to customize-hack the text with ninja :before and :after CSS elements, but the implementation is clumsy and unreliable.

Details

Amount of ninja CSS we had to use for customizing the bar & text

Suggestion

It would be great if we could provide a callback, or something, in collapseUnchanged options, that would be passed the number of lines, and return the text for those bars.

Reproduction link

We have a complete functioning demo of CodeMirror, wrapped into an Ember.js component over at https://app.codecrafters.io/demo/code-mirror, configurable with most of the standard extensions & their options in realtime, please feel free to test over there. It's ok if people discover the link here on GitHub, but please don't link to it, yet :)

All of the documents used as examples in the Demo's document drop-down can be found here. The Ember.js component itself, which wraps CodeMirror, passes it all enabled extensions, and handles updates is here, just in case.

Our current CodeMirror & Merge versions

npm ls --depth=0 | grep codemirror
├── @codemirror/[email protected]
├── @codemirror/[email protected]
├── @uiw/[email protected]
├── [email protected]

[marijnh]

The text is configurable via phrases, but indeed, the squigglies aren't. Would moving those into CSS before/after elements work for you?

[VasylMarchuk]

Not really @marijnh, it wouldn't, for several reasons:

• we're already using the :before element to add an icon expand-diff-top|middle|bottom.svg
• in general using :before and :after triples the needed styles, as now you have to specify background & border + hover state + mousedown state, and everything else for all three — the element, the :before, and the :after — they aren't inherited

[VasylMarchuk]

But also, there's a bigger problem with the "Expand xxx changed lines" bar, and I was about to create a separate issue just for this, but I guess I'll just put it here:

Please note how in, for example, VSCode and Github, the "Expand xxx changed lines" bar either extends into the gutter, or has a dedicated gutter element:

The problem

The way CodeMirror renders this bar — it is siblings with other lines in the document, it doesn't overlay the gutter, nor does it have a dedicated gutter element. This leads to a problem of the "gap":

Details

We have spent several weeks trying to solve this issue in various ways, coming up with CSS hacks, border color tweaks etc, but border is too noisy, gap is too noticeable. In addition, gutters div has varying width, depending on enabled gutters — and this voids any possible easy CSS solutions:

Our temporary solution

Unfortunately all we could come up with, for now, is this implementation, our :before element has a crazy negative left margin and extends way beyond all possible gutters, but we couldn't solve the big padding before icon & text issue:

[VasylMarchuk]

So TLDR:

• it would be cool if Expand xxx unchanged lines bar would overlay the gutter
• or if not — a dedicated gutter element would solve a lot of related headache
• it would be cool if we could provide a callback that would be responsible for generating the icon & text of the bar
  • or even better — a class, like we do with GutterMarker, for example, and it's toDOM method, responsible for rendering the entire DOM of the bar

UPD: I really should have stayed on point with customizing the text / removing the squiggles, sorry! Would you like me to create a separate issue for expand unchanged bar + gutter difficulties? But at least you know the background story now 😀

[marijnh]

we're already using the :before element to add an icon expand-diff-top|middle|bottom.svg

Yes, and that'd override the default style, which is what you want here, right?

in general using :before and :after triples the needed styles, as now you have to specify background & border + hover state + mousedown state, and everything else for all three — the element, the :before, and the :after — they aren't inherited

:before/:after elements definitely do inherit the styles of their parent element.

Does gutterWidgetClass help with your gutter styling? If not, please do open a separate issue.

[VasylMarchuk]

:before/:after elements definitely do inherit the styles of their parent element

They do for some, but not for all, for example background and border aren't inherited, which are the ones we actually care about most:

.decorate-me {
  margin: 30px 50px;
  padding: 50px 30px;
  background: red;
  border: 3px solid green;
}

.decorate-me:before {
  content: "Pseudo text";
  outline: 1px dashed navy;
  margin-left: -70px;
}

In addition, if we set the same background color for both the element & pseudo-element: we can't use rgba, because the pseudo gets transparency over transparency -> a different color.

Also: when trying to set an svg icon as a background for the :before element, I couldn't find a way to specify the svg color: color doesn't apply, and using fill: currentColor in the svg itself doesn't work either. We had to use separate svg files for icons in hover state, mousedown state, and then again for the Dark skin: so 18 icons in total.

[VasylMarchuk]

Please let me spend a couple hours to experiment with the squiggles being in before/after pseudo elements and if that helps address our concerns, I will come back to you once I know.

UPD: Still experimenting, quite tricky to simulate on the fly, plus had another urgent task.

[marijnh]

They do for some, but not for all, for example background and border aren't inherited, which are the ones we actually care about most:

Those never are—CSS inheritance generally only applies to properties where inheritance makes sense.

[VasylMarchuk]

Alright, sorry it took so long to test, I can confirm that this solves at least the need to cover up the squiggly lines manually, and should simplify the necessary style overrides, so let's go ahead and maybe move squiggly lines into :before and :after elements? @marijnh

[marijnh]

Attached patch makes this change.

[VasylMarchuk]

Big thanks, I will start using this and will update our styles shortly!

[VasylMarchuk]

Hey @marijnh, would you be so kind to give an example of using gutterWidgetClass?

Does gutterWidgetClass help with your gutter styling?

For example, I'd like to add a class collapseUnchangedBarGutter to all gutter elements (inside cm-lineNumbers, cm-foldGutter, cm-changeGutter) that appear next to Collapse Unchanged widgets:

Is that possible? Did I understand correctly that this is the purpose of gutterWidgetClass?

I've searched the entire Internet and haven't been able to find a single usage example, and the docs are scarce about this.

In fact, I haven't even been able to import it:

import { gutterWidgetClass } from '@codemirror/view';
// --> '"@codemirror/view"' has no exported member named 'gutterWidgetClass'. Did you mean 'gutterLineClass'?

Am I supposed to import it [somehow] and then just add it to the list of extensions? Configured with WidgetType and BlockInfo? Also where would BlockInfo come from?

PS: Big thanks in advance, sorry for late response on this, currently changing our styles to match your latest patches

[marijnh]

gutterWidgetClass was added in @codemirror/view 6.32.0. Maybe you're using an older version? The way to use it is to define a gutter marker and make the predicate you give to gutterWidgetClass check whether it is dealing with a merge widget, and if so, return such a widget. Though I guess, since @codemirror/merge doesn't export the widget type, doing this check might be a bit tricky.