Always show the overload count, even if there are more than 10

mjbvz · mjbvz · commit e1983faa78e6 · 2019-11-13T21:28:04.000-08:00
Fixes microsoft#84682 Also switches the use flexboxes to layout the parameter hints widget instead of absolute positioning
diff --git a/src/vs/editor/contrib/parameterHints/parameterHints.css b/src/vs/editor/contrib/parameterHints/parameterHints.css
@@ -13,12 +13,12 @@
 .monaco-editor .parameter-hints-widget > .wrapper {
 	max-width: 440px;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 }
 
 .monaco-editor .parameter-hints-widget.multiple {
 	min-height: 3.3em;
-	padding: 0 0 0 1.9em;
+	padding: 0;
 }
 
 .monaco-editor .parameter-hints-widget.visible {
@@ -62,20 +62,19 @@
 	padding: 0 0.4em;
 }
 
-.monaco-editor .parameter-hints-widget .buttons {
-	position: absolute;
+.monaco-editor .parameter-hints-widget .controls {
 	display: none;
-	bottom: 0;
-	left: 0;
+	flex-direction: column;
+	align-items: center;
+	min-width: 22px;
+	justify-content: flex-end;
 }
 
-.monaco-editor .parameter-hints-widget.multiple .buttons {
-	display: block;
+.monaco-editor .parameter-hints-widget.multiple .controls {
+	display: flex;
 }
 
 .monaco-editor .parameter-hints-widget.multiple .button {
-	position: absolute;
-	left: 2px;
 	width: 16px;
 	height: 16px;
 	background-repeat: no-repeat;
@@ -88,26 +87,16 @@
 }
 
 .monaco-editor .parameter-hints-widget .button.next {
-	bottom: 0;
 	background-image: url('arrow-down.svg');
 }
 
 .monaco-editor .parameter-hints-widget .overloads {
-	position: absolute;
-	display: none;
 	text-align: center;
-	bottom: 14px;
-	left: 0;
-	width: 22px;
 	height: 12px;
 	line-height: 12px;
 	opacity: 0.5;
 }
 
-.monaco-editor .parameter-hints-widget.multiple .overloads {
-	display: block;
-}
-
 .monaco-editor .parameter-hints-widget .signature .parameter.active {
 	font-weight: bold;
 	text-decoration: underline;
diff --git a/src/vs/editor/contrib/parameterHints/parameterHintsWidget.ts b/src/vs/editor/contrib/parameterHints/parameterHintsWidget.ts
@@ -22,6 +22,7 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { editorHoverBackground, editorHoverBorder, textCodeBlockBackground, textLinkForeground, editorHoverForeground } from 'vs/platform/theme/common/colorRegistry';
 import { HIGH_CONTRAST, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { ParameterHintsModel, TriggerContext } from 'vs/editor/contrib/parameterHints/parameterHintsModel';
+import { pad } from 'vs/base/common/strings';
 
 const $ = dom.$;
 
@@ -76,18 +77,17 @@ export class ParameterHintsWidget extends Disposable implements IContentWidget {
 		const wrapper = dom.append(element, $('.wrapper'));
 		wrapper.tabIndex = -1;
 
-		const buttons = dom.append(wrapper, $('.buttons'));
-		const previous = dom.append(buttons, $('.button.previous'));
-		const next = dom.append(buttons, $('.button.next'));
+		const controls = dom.append(wrapper, $('.controls'));
+		const previous = dom.append(controls, $('.button.previous'));
+		const overloads = dom.append(controls, $('.overloads'));
+		const next = dom.append(controls, $('.button.next'));
 
 		const onPreviousClick = stop(domEvent(previous, 'click'));
 		this._register(onPreviousClick(this.previous, this));
 
 		const onNextClick = stop(domEvent(next, 'click'));
 		this._register(onNextClick(this.next, this));
 
-		const overloads = dom.append(wrapper, $('.overloads'));
-
 		const body = $('.body');
 		const scrollbar = new DomScrollableElement(body, {});
 		this._register(scrollbar);
@@ -239,12 +239,8 @@ export class ParameterHintsWidget extends Disposable implements IContentWidget {
 		dom.toggleClass(this.domNodes.signature, 'has-docs', hasDocs);
 		dom.toggleClass(this.domNodes.docs, 'empty', !hasDocs);
 
-		let currentOverload = String(hints.activeSignature + 1);
-		if (hints.signatures.length < 10) {
-			currentOverload += `/${hints.signatures.length}`;
-		}
-
-		this.domNodes.overloads.textContent = currentOverload;
+		this.domNodes.overloads.textContent =
+			pad(hints.activeSignature + 1, hints.signatures.length.toString().length) + '/' + hints.signatures.length;
 
 		if (activeParameter) {
 			const labelToAnnounce = this.getParameterLabel(signature, hints.activeParameter);
