From 7b54abbc96f62cfbbb4c204a0f22ada581994bd5 Mon Sep 17 00:00:00 2001
From: Charles Gagnon <chgagnon@microsoft.com>
Date: Tue, 25 Aug 2020 08:45:42 -0700
Subject: [PATCH] Fix connection status badge display (#11933)

---
 .../browser/media/connectionViewletPanel.css  | 25 ++++++++-----------
 .../browser/asyncServerTreeRenderer.ts        | 16 ++++++------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
index 60c470b96a..79957d4175 100644
--- a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
+++ b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
@@ -139,29 +139,24 @@
 	left: -35px;
 }
 
-.monaco-list .connection-tile > .icon.server-page::after {
-	position: absolute;
-	height: 0.25rem;
-	width: 0.25rem;
-	top: 14px;
-	left: 45px;
-	border-radius: 100%;
-	content:"";
-	font-size: 100%;
-	line-height: 100%;
-	color:white;
-	text-align:center;
-	vertical-align:middle;
+.monaco-list .connection-tile .connection-status-badge {
+	width: 0.35em;
+	height: 0.35em;
+	-webkit-border-radius: 50%;
+	-moz-border-radius: 50%;
+	border-radius: 50%;
+	margin-left: 13px;
+	margin-top: 10px;
 }
 
 /* Connected badge */
-.monaco-list .connection-tile > .icon.server-page.connected::after {
+.monaco-list .connection-tile .connection-status-badge.connected {
 	border: 0.12rem solid rgba(59, 180, 74, 100%);
 	background: rgba(59, 180, 74, 100%);
 }
 
 /* Disconnected badge */
-.monaco-list .connection-tile > .icon.server-page.disconnected::after {
+.monaco-list .connection-tile .connection-status-badge.disconnected {
 	border: 0.12rem solid rgba(208, 46, 0, 100%);
 	background: rgba(255, 255, 255, 80%);
 }
diff --git a/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts b/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
index 9655a267c9..d0a77d9b87 100644
--- a/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
+++ b/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
@@ -76,6 +76,7 @@ class ConnectionProfileTemplate extends Disposable {
 
 	private _root: HTMLElement;
 	private _icon: HTMLElement;
+	private _connectionStatusBadge: HTMLElement;
 	private _label: HTMLElement;
 	/**
 	 * _isCompact is used to render connections tiles with and without the action buttons.
@@ -91,6 +92,7 @@ class ConnectionProfileTemplate extends Disposable {
 		container.parentElement.classList.add('connection-profile');
 		this._root = dom.append(container, dom.$('.connection-tile'));
 		this._icon = dom.append(this._root, dom.$('div.icon server-page'));
+		this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge'));
 		this._label = dom.append(this._root, dom.$('div.label'));
 	}
 
@@ -98,13 +100,13 @@ class ConnectionProfileTemplate extends Disposable {
 		if (!this._isCompact) {
 			let iconPath: IconPath = getIconPath(element, this._connectionManagementService);
 			if (this._connectionManagementService.isConnected(undefined, element)) {
-				this._icon.classList.remove('disconnected');
-				this._icon.classList.add('connected');
-				renderServerIcon(this._icon, iconPath, true);
+				this._connectionStatusBadge.classList.remove('disconnected');
+				this._connectionStatusBadge.classList.add('connected');
+				renderServerIcon(this._icon, iconPath);
 			} else {
-				this._icon.classList.remove('connected');
-				this._icon.classList.add('disconnected');
-				renderServerIcon(this._icon, iconPath, false);
+				this._connectionStatusBadge.classList.remove('connected');
+				this._connectionStatusBadge.classList.add('disconnected');
+				renderServerIcon(this._icon, iconPath);
 			}
 		}
 
@@ -283,7 +285,7 @@ function getIconPath(connection: ConnectionProfile, connectionManagementService:
 	return iconPath;
 }
 
-function renderServerIcon(element: HTMLElement, iconPath: IconPath, isConnected: boolean): void {
+function renderServerIcon(element: HTMLElement, iconPath: IconPath): void {
 	if (!element) { return; }
 	if (iconPath) {
 		iconRenderer.putIcon(element, iconPath);