Test: glyph margin widgets

[joyceerhl]

Refs: #176316

• anyOS @hediet
• anyOS @connor4312
• anyOS @roblourens

Authors: @joyceerhl @alexdima
Complexity: 4

Create Issue

---

We've added support for GlyphMarginWidgets in the code editor. This allows decoration authors in core only (not extension authors) to handle clicks on glyph margin decorations by passing in a DOM node that has attached listeners.

Test: please take a look at the IGlyphMarginWidget interface and the new methods for adding, layouting, and removing widgets. Verify that the methods and properties make sense, are properly documented, and behave as expected.

edit from hediet: Try out the new API in the monaco editor playground!

Refs:

• vscode/src/vs/editor/browser/editorBrowser.ts

  Lines 255 to 271 in f907729

  	/**
  	* A glyph margin widget renders in the editor glyph margin.
  	*/
  	export interface IGlyphMarginWidget {
  	/**
  	* Get a unique identifier of the glyph widget.
  	*/
  	getId(): string;
  	/**
  	* Get the dom node of the glyph widget.
  	*/
  	getDomNode(): HTMLElement;
  	/**
  	* Get the placement of the glyph widget.
  	*/
  	getPosition(): IGlyphMarginWidgetPosition;
  	}

• vscode/src/vs/editor/browser/editorBrowser.ts

  Lines 1029 to 1041 in f907729

  	/**
  	* Add a glyph margin widget. Widgets must have unique ids, otherwise they will be overwritten.
  	*/
  	addGlyphMarginWidget(widget: IGlyphMarginWidget): void;
  	/**
  	* Layout/Reposition a glyph margin widget. This is a ping to the editor to call widget.getPosition()
  	* and update appropriately.
  	*/
  	layoutGlyphMarginWidget(widget: IGlyphMarginWidget): void;
  	/**
  	* Remove a glyph margin widget.
  	*/
  	removeGlyphMarginWidget(widget: IGlyphMarginWidget): void;

[hediet]

This looks like an ideal use case to try the monaco editor playground!
https://microsoft.github.io/monaco-editor/playground.html?source=v0.40.0-dev.20230626#example-creating-the-editor-hello-world

[hediet]

Works nicely!

Just some notes/thoughts:

• Why does a widget have a range and not just a position? Can you add some docs there?
• You followed the same API that Content and Overlay widgets have, but I think that API is quite outdated (addGlyphMarginWidget should return a disposable instead of having removeGlyphMarginWidget, layoutGlyphMarginWidget could be replaced by an "onChange" event and I don't think getId is needed).
  • Personally, I'd prefer a more modern API over consistency for the monaco editor (and would eventually refactor the other APIs as well), but I can understand the other side as well
• Just curious, for what feature did you add GlyphMarginWidgets?