Question: icon in the gutters for editor decoration

[BoykoAlex]

My apologies if questions are expected to be posted elsewhere. Please point me to that place where questions such as this one can posted. Thanks.

Question. I'd like to show a decoration in the editor gutters for some text range. The decoration is icon in the gutters.

I have injected the EditorDecorationService:

import { EditorDecorationsService, SetDecorationParams, EditorDecorationStyle } from '@theia/editor/lib/browser';
...
    constructor(
        @inject(EditorDecorationsService) protected readonly decorationService: EditorDecorationsService
    ) {}

Setting the decoration:

    highlight(params: HighlightParams) {
        const decorationParams: SetDecorationParams = {
            uri: params.doc.uri,
            kind: BOOT_LIVE_HINTS,
            newDecorations: params.ranges.map(r => {
                return {
                    range: Range.create(r.start.line, r.start.character, r.end.line, r.end.character),
                    options: {
                        inlineClassName: INLINE_BOOT_HINT_DECORATION_STYLE.className,
                        linesDecorationsClassName: LINE_BOOT_HINT_DECORATION_STYLE.className,
                        hoverMessage: 'Ho-ho, Boot Hint!',
                        isWholeLine: false
                    }
                }
            })
        };
        this.decorationService.setDecorations(decorationParams);
    }

Style for line decoration and The HighlightParams:

const LINE_BOOT_HINT_DECORATION_STYLE = new EditorDecorationStyle('line-boot-hint-decoration', style => {
    style.content = '../../images/boot-icon.png';
    style.display = 'block';
    style.width = '10px';
    style.height = '1em';
    style.margin = '0 2px 0 0';
});

export interface HighlightParams {
    doc: TextDocumentIdentifier
    ranges: Range[]
}

How should the LINE_BOOT_HINT_DECORATION_STYLE look like to display the icon in the gutters? Any help is appreciated.

[AlexTugarev]

First of all, please use TextEditor.deltaDecorations instead of of the EditorDecorationsService, which I'd like to get rid of, see #1785.

FYI, you can use monaco playground to test your styles. style.content = 'icon.png' won't work, please read on content attribute.

Try something like background-image: url('icon.png'); for the style of glyphMarginClassName.

[BoykoAlex]

Thanks. Will stay away from using 'EditorDecorationsService'
Where should I be placing my icon image in my package?
Currently:

browser-app
electron-app
extension
  src
    browser
      code.ts <-- references "boot-icon.png" via CSS style "url("../../images/boot-icon.png")"
  images
    boot-icon.png <-- located here
  package.json <-- "images" included in "files" property.

I see this in the console: GET http://localhost:3000/images/boot-icon.png 404 (Not Found)

When I had to do the same in Atom the URL for the icon was atom://spring-boot/styles/boot-icon.png where spring-boot was extension id abd then styles/boot-icon.png the path within the extension.

Does this URL should be similar to Atom's? Maybe @theia/<my extension id>/images/boot-icon.png ?

[AlexTugarev]

here is an example how to reference images: https://github.com/theia-ide/theia/blob/master/packages/core/src/browser/style/variables-bright.useable.css#L158