Adopt injected text infrastructure for other features

[hediet]

Users of IModelDecorationOptions.beforeContentClassName or IModelDecorationOptions.afterContentClassName:

• breakpointEditorContribution.ts#L103
  • reason: reserves space inline
• breakpointEditorContribution.ts#L136:
  • reason: renders a symbol inline
• callStackEditorContribution.ts#L83
  • reason: renders a symbol inline
• 💪 Get rid of before/after css rules in foldingDecorations #136740
  • reason: renders ⋯ at end of folded lines

---

Users of IThemeDecorationRenderOptions.before or IThemeDecorationRenderOptions.after:

• colorDetector.ts#L182 and colorDetector.ts#L191:
  • reason: renders color boxes (e.g. in css)
• ghostTextWidget.ts#L276
  • reason: old implementation

---

Users of IThemeDecorationRenderOptions.beforeInjectedText or IThemeDecorationRenderOptions.afterInjectedText:

• inlayHintsController.ts#L249
  • reason: generates dynamic CSS

---

Users of IThemeDecorationInstanceRenderOptions.after:

• breakpointWidget.ts#L70
  • reason: renders a placeholder in the breakpoint editor widget e.g. "Message to log when breakpoint is hit"
• debugEditorContribution.ts#L89
  • reason: renders inline values when debugging
• repl.ts#L693
  • reason: renders a placeholder in the debug repl e.g. "Please start a debug session to evaluate expressions"
• interactiveEditor.ts#L574
  • reason: renders a placeholder in the interactive window e.g. "Type code here and press {0} to run"
• commentThreadWidget.ts#L855
  • reason: renders a placeholder in the comments widget e.g. "Type a new comment"

---

Sample showing how we could render a color box:

var jsCode = [
  '"use strict";',
  "function Person(age) {",
  "	if (age) {",
  "		this.age = age;",
  "	}",
  "}",
  "Person.prototype.getAge = function () {",
  "	return this.age;",
  "};",
].join("\n");

var editor = monaco.editor.create(document.getElementById("container"), {
  value: jsCode,
  language: "javascript",
});

var decorations = editor.deltaDecorations(
  [],
  [
    {
      range: new monaco.Range(3, 6, 3, 7),
      options: {
        after: {
          content: " ",
          inlineClassName: "special-box",
          inlineClassNameAffectsLetterSpacing: true,
        }
      }
    }
  ]
);

.special-box {
  border: solid 0.1em #000;
  box-sizing: border-box;
  margin: 0.1em 0.2em 0 0.2em;
  width: 0.8em;
  height: 0.8em;
  background-color:red;
  line-height: 0.8em;
  display: inline-block;
}

[Tyriar]

@hediet can you clarify what other features will be looked at for this?

[hediet]

Mainly the test explorer I think.

The scope of this issue is flexible and part of it is figuring out where injected text makes sense (instead of before/after css text).

[hediet]

renders ⋯ at end of folded lines

Injected text semantics currently do not make much sense for ⋯: There would be a cursor stop both to the right and to the left and the symbol would word-wrap separately.

Alex thoughts:

but maybe it’s the line wrapping algorithm that should not break before this specific injected text
the problem with the current implementation is that the … is not accounted for when wrapping, so you will get a horizontal scrollbar which also is bad

We decided to adopt injected text for ⋯ at a later point, possibly together with enhancing the feature to support { ⋯ }.