diff --git a/src/vs/editor/contrib/suggest/browser/suggest.css b/src/vs/editor/contrib/suggest/browser/suggest.css index 9bc5886a69ef06e791b24b5d4cb270fac2145b30..70ff232f89438302af59c49a936aa60826a69558 100644 --- a/src/vs/editor/contrib/suggest/browser/suggest.css +++ b/src/vs/editor/contrib/suggest/browser/suggest.css @@ -24,10 +24,6 @@ background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjU3NSIgaGVpZ2h0PSI2cHgiPg0KICA8c3R5bGU+DQogICAgY2lyY2xlIHsNCiAgICAgIGFuaW1hdGlvbjogYmFsbCAyLjVzIGN1YmljLWJlemllcigwLjAwMCwgMS4wMDAsIDEuMDAwLCAwLjAwMCkgaW5maW5pdGU7DQogICAgICBmaWxsOiAjYmJiOw0KICAgIH0NCg0KICAgICNiYWxscyB7DQogICAgICBhbmltYXRpb246IGJhbGxzIDIuNXMgbGluZWFyIGluZmluaXRlOw0KICAgIH0NCg0KICAgICNjaXJjbGUyIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjFzOyB9DQogICAgI2NpcmNsZTMgeyBhbmltYXRpb24tZGVsYXk6IDAuMnM7IH0NCiAgICAjY2lyY2xlNCB7IGFuaW1hdGlvbi1kZWxheTogMC4zczsgfQ0KICAgICNjaXJjbGU1IHsgYW5pbWF0aW9uLWRlbGF5OiAwLjRzOyB9DQoNCiAgICBAa2V5ZnJhbWVzIGJhbGwgew0KICAgICAgZnJvbSB7IHRyYW5zZm9ybTogbm9uZTsgfQ0KICAgICAgMjAlIHsgdHJhbnNmb3JtOiBub25lOyB9DQogICAgICA4MCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoODY0cHgpOyB9DQogICAgICB0byB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCg4NjRweCk7IH0NCiAgICB9DQoNCiAgICBAa2V5ZnJhbWVzIGJhbGxzIHsNCiAgICAgIGZyb20geyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTQwcHgpOyB9DQogICAgICB0byB7IHRyYW5zZm9ybTogdHJhbnNsYXRlWCgzMHB4KTsgfQ0KICAgIH0NCiAgPC9zdHlsZT4NCiAgPGcgaWQ9ImJhbGxzIj4NCiAgICA8Y2lyY2xlIGNsYXNzPSJjaXJjbGUiIGlkPSJjaXJjbGUxIiBjeD0iLTExNSIgY3k9IjMiIHI9IjMiLz4NCiAgICA8Y2lyY2xlIGNsYXNzPSJjaXJjbGUiIGlkPSJjaXJjbGUyIiBjeD0iLTEzMCIgY3k9IjMiIHI9IjMiIC8+DQogICAgPGNpcmNsZSBjbGFzcz0iY2lyY2xlIiBpZD0iY2lyY2xlMyIgY3g9Ii0xNDUiIGN5PSIzIiByPSIzIiAvPg0KICAgIDxjaXJjbGUgY2xhc3M9ImNpcmNsZSIgaWQ9ImNpcmNsZTQiIGN4PSItMTYwIiBjeT0iMyIgcj0iMyIgLz4NCiAgICA8Y2lyY2xlIGNsYXNzPSJjaXJjbGUiIGlkPSJjaXJjbGU1IiBjeD0iLTE3NSIgY3k9IjMiIHI9IjMiIC8+DQogIDwvZz4NCjwvc3ZnPg=='); } -.monaco-editor.mac .suggest-widget .text { - line-height: 1.3em; -} - .monaco-editor .suggest-widget > .message { padding-left: 22px; opacity: 0.7; @@ -42,7 +38,7 @@ -mox-box-sizing: border-box; box-sizing: border-box; line-height: 1.2em; - padding: 2px 10px 2px 22px; + padding: 0 10px 0 22px; background-repeat: no-repeat; background-position: 2px 2px; white-space: nowrap; @@ -67,6 +63,7 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + opacity: 0.85; } .monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs > .docs-details { @@ -87,16 +84,7 @@ opacity: 1; } -.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs { - color: #A21B1B; -} - -.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label > span { - opacity: 1; -} - -.monaco-editor .suggest-widget:not(.frozen) .monaco-list .monaco-list-row .monaco-highlighted-label .highlight { +.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight { font-weight: bold; color: #186B9E; } @@ -173,14 +161,15 @@ .monaco-editor .suggest-widget .details { height: 100%; box-sizing: border-box; - padding: 0 10px; + display: flex; + flex-direction: column; } .monaco-editor .suggest-widget .details > .header { - padding-top: 2px; + padding: 4px 5px; display: flex; - height: 20px; box-sizing: border-box; + border-bottom: 1px solid rgba(204, 204, 204, 0.5); } .monaco-editor .suggest-widget .details > .header > .title { @@ -201,15 +190,27 @@ } .monaco-editor .suggest-widget .details > .monaco-scrollable-element { - height: calc(100% - 20px); + flex: 1; } .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body { + position: absolute; + box-sizing: border-box; height: 100%; + width: 100%; +} + +.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .type { + opacity: 0.7; } .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > p { margin: 0; + padding: 4px 5px; +} + +.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > p:not(:first-child) { + border-top: 1px solid rgba(204, 204, 204, 0.5); } /* Dark theme */ @@ -218,13 +219,14 @@ border: 1px solid rgb(69, 69, 69); } -.monaco-editor.vs-dark .suggest-widget:not(.frozen) .monaco-list .monaco-list-row .monaco-highlighted-label .highlight { - color: #219AE4; + +.monaco-editor.vs-dark .suggest-widget .details > .header, +.monaco-editor.vs-dark .suggest-widget .details > .monaco-scrollable-element > .body > p { + border-color: rgba(85,85,85,0.5); } -.monaco-editor.vs-dark .suggest-widget .details > .monaco-scrollable-element > .body > .docs, -.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .docs { - color: #C07A7A; +.monaco-editor.vs-dark .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight { + color: #219AE4; } @@ -262,7 +264,7 @@ border: 2px solid #6FC3DF; } -.monaco-editor.hc-black .suggest-widget:not(.frozen) .monaco-list .monaco-list-row .monaco-highlighted-label .highlight { +.monaco-editor.hc-black .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight { color: #219AE4; } diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index 5bcbfe2d97a09cf14f1b6bec450289c82b8a70f8..850651d172cc42683781ddabc7e673da99528613 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -64,6 +64,8 @@ class Renderer implements IRenderer { const data = Object.create(null); data.disposables = []; data.root = container; + data.root.style.lineHeight = `${UnfocusedHeight}px`; + data.icon = append(container, $('.icon')); data.colorspan = append(data.icon, $('span.colorspan')); @@ -113,8 +115,8 @@ class Renderer implements IRenderer { } } - data.highlightedLabel.set(suggestion.label, (element).highlights); - data.typeLabel.innerText = (suggestion.detail || '').replace(/\n.*$/m, ''); + data.highlightedLabel.set(suggestion.label, element.highlights); + data.typeLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, ''); data.documentation.textContent = suggestion.documentation || ''; @@ -177,6 +179,7 @@ class SuggestionDetails { private el: HTMLElement; private title: HTMLElement; + private titleLabel: HighlightedLabel; private back: HTMLElement; private scrollbar: DomScrollableElement; private body: HTMLElement; @@ -197,6 +200,9 @@ class SuggestionDetails { const header = append(this.el, $('.header')); this.title = append(header, $('span.title')); + this.titleLabel = new HighlightedLabel(this.title); + this.disposables.push(this.titleLabel); + this.back = append(header, $('span.go-back')); this.back.title = nls.localize('goback', "Go back"); this.body = $('.body'); @@ -211,11 +217,8 @@ class SuggestionDetails { this.configureFont(); - this.disposables.push(this.editor.onDidChangeConfiguration((e: IConfigurationChangedEvent) => { - if (e.fontInfo) { - this.configureFont(); - } - })); + const onFontInfo = filterEvent(this.editor.onDidChangeConfiguration.bind(this.editor), (e: IConfigurationChangedEvent) => e.fontInfo); + onFontInfo(this.configureFont, this, this.disposables); } get element() { @@ -224,16 +227,16 @@ class SuggestionDetails { render(item: ICompletionItem): void { if (!item) { - this.title.textContent = ''; + this.titleLabel.set(''); this.type.textContent = ''; this.docs.textContent = ''; this.ariaLabel = null; return; } - this.title.innerText = item.suggestion.label; - this.type.innerText = item.suggestion.detail || ''; - this.docs.innerText = item.suggestion.documentation; + this.titleLabel.set(item.suggestion.label, item.highlights); + this.type.textContent = item.suggestion.detail || ''; + this.docs.textContent = item.suggestion.documentation; this.back.onmousedown = e => { e.preventDefault(); e.stopPropagation(); @@ -271,8 +274,12 @@ class SuggestionDetails { private configureFont() { const fontInfo = this.editor.getConfiguration().fontInfo; + const fontSize = `${ fontInfo.fontSize }px`; + this.title.style.fontFamily = fontInfo.fontFamily; + this.title.style.fontSize = fontSize; this.type.style.fontFamily = fontInfo.fontFamily; + this.type.style.fontSize = fontSize; } dispose(): void { @@ -489,12 +496,12 @@ export class SuggestWidget implements IContentWidget, IDisposable { } break; case State.Loading: - this.messageElement.innerText = SuggestWidget.LOADING_MESSAGE; + this.messageElement.textContent = SuggestWidget.LOADING_MESSAGE; hide(this.listElement, this.details.element); this.show(); break; case State.Empty: - this.messageElement.innerText = SuggestWidget.NO_SUGGESTIONS_MESSAGE; + this.messageElement.textContent = SuggestWidget.NO_SUGGESTIONS_MESSAGE; hide(this.listElement, this.details.element); show(this.messageElement); this.show();