Re-ordering css for better readability

src/vs/editor/contrib/suggest/browser/media/suggest.css

@@ -6,36 +6,13 @@
 /* Suggest */
 .monaco-editor .suggest-widget {
 	z-index: 40;
+	width: 430px;
 }
 
 .monaco-editor .suggest-widget.docs-expanded {
 	width: 660px;
 }
 
-.monaco-editor .suggest-widget.docs-expanded > .tree {
-	width: 330px;
-}
-
-.monaco-editor .suggest-widget > .details {
-	/* .details does not use border-box, so subtract the border height here (2px). This is the case
-	because the height of .details is set prorammatically based on .header and .docs, we don't want
-	our JS to care about the size of the border (which changes based on theme type). */
-	width: 328px;
-}
-
-.monaco-editor .suggest-widget > .details,
-.monaco-editor .suggest-widget > .tree {
-	border-style: solid;
-	border-width: 1px;
-}
-
-.monaco-editor .suggest-widget,
-.monaco-editor .suggest-widget > .tree,
-.monaco-editor .suggest-widget.small.docs-expanded > .tree,
-.monaco-editor .suggest-widget.small > .details {
-	width: 430px;
-}
-
 .monaco-editor .suggest-widget.visible {
 	-webkit-transition: left .05s ease-in-out;
 	-moz-transition: left .05s ease-in-out;
@@ -49,10 +26,14 @@
 	border-width: 1px;
 }
 
+/** Styles for the list element **/
 .monaco-editor .suggest-widget > .tree {
 	height: 100%;
+	width: 430px;
 	float: left;
 	box-sizing: border-box;
+	border-style: solid;
+	border-width: 1px;
 }
 
 .monaco-editor .suggest-widget.list-right > .tree {
@@ -63,6 +44,16 @@
 	float: none;
 }
 
+.monaco-editor .suggest-widget.docs-expanded > .tree {
+	width: 330px;
+}
+
+.monaco-editor .suggest-widget.small.docs-expanded > .tree {
+	width: 430px;
+}
+
+/** Styles for each row in the list element **/
+
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row {
 	display: flex;
 	-mox-box-sizing: border-box;
@@ -90,8 +81,10 @@
 	font-weight: bold;
 }
 
+/** Icon styles **/
+
 .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .close,
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details {
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore {
 	opacity: 0.6;
 	background-position: center center;
 	background-repeat: no-repeat;
@@ -104,15 +97,17 @@
 	float: right;
 }
 
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details {
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore {
 	background-image: url('./info.svg');
 }
 
 .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .close:hover,
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details:hover {
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore:hover {
 	opacity: 1;
 }
 
+/** Type Info and icon next to the label in the focused completion item **/
+
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label {
 	margin-left: 0.8em;
 	flex: 1;
@@ -126,19 +121,21 @@
 	display: inline;
 }
 
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .docs-details,
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .readMore,
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .type-label,
-.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .docs-details,
+.monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
 .monaco-editor .suggest-widget.docs-expanded .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
 	display: none;
 }
 
-.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .docs-details,
+.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .readMore,
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main > .type-label,
 .monaco-editor .suggest-widget.docs-expanded.small .monaco-list .monaco-list-row.focused > .contents > .main > .type-label {
 	display: inline;
 }
 
+/** Styles for each row in the list **/
+
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
 	display: block;
 	height: 16px;
@@ -184,11 +181,22 @@
 	display: inline-block;
 }
 
+/** Styles for the docs of the completion item in focus **/
 .monaco-editor .suggest-widget .details {
 	max-height: 216px;
 	display: flex;
 	flex-direction: column;
 	cursor: default;
+	/* .details does not use border-box, so subtract the border height here (2px). This is the case
+	because the height of .details is set prorammatically based on .header and .docs, we don't want
+	our JS to care about the size of the border (which changes based on theme type). */
+	width: 328px;
+	border-style: solid;
+	border-width: 1px;
+}
+
+.monaco-editor .suggest-widget.small > .details {
+	width: 430px;
 }
 
 .monaco-editor .suggest-widget .details.no-docs {

src/vs/editor/contrib/suggest/browser/suggestWidget.ts

@@ -40,7 +40,7 @@ interface ISuggestionTemplateData {
 	colorspan: HTMLElement;
 	highlightedLabel: HighlightedLabel;
 	typeLabel: HTMLElement;
-	documentationDetails: HTMLElement;
+	readMore: HTMLElement;
 	disposables: IDisposable[];
 }
 
@@ -95,8 +95,8 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
 		data.disposables.push(data.highlightedLabel);
 		data.typeLabel = append(main, $('span.type-label'));
 
-		data.documentationDetails = append(main, $('span.docs-details'));
-		data.documentationDetails.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel);
+		data.readMore = append(main, $('span.readMore'));
+		data.readMore.title = nls.localize('readMore', "Read More...{0}", this.triggerKeybindingLabel);
 
 		const configureFont = () => {
 			const configuration = this.editor.getConfiguration();
@@ -111,8 +111,8 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
 			main.style.lineHeight = lineHeightPx;
 			data.icon.style.height = lineHeightPx;
 			data.icon.style.width = lineHeightPx;
-			data.documentationDetails.style.height = lineHeightPx;
-			data.documentationDetails.style.width = lineHeightPx;
+			data.readMore.style.height = lineHeightPx;
+			data.readMore.style.width = lineHeightPx;
 		};
 
 		configureFont();
@@ -149,20 +149,20 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
 		data.typeLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, '');
 
 		if (canExpandCompletionItem(element)) {
-			show(data.documentationDetails);
-			data.documentationDetails.onmousedown = e => {
+			show(data.readMore);
+			data.readMore.onmousedown = e => {
 				e.stopPropagation();
 				e.preventDefault();
 			};
-			data.documentationDetails.onclick = e => {
+			data.readMore.onclick = e => {
 				e.stopPropagation();
 				e.preventDefault();
 				this.widget.toggleDetails();
 			};
 		} else {
-			hide(data.documentationDetails);
-			data.documentationDetails.onmousedown = null;
-			data.documentationDetails.onclick = null;
+			hide(data.readMore);
+			data.readMore.onmousedown = null;
+			data.readMore.onclick = null;
 		}
 
 	}