Add toolbar separator (#4890)

* Add option to add toolbar separator after toolbar component

src/sql/azdata.proposed.d.ts

@@ -2590,6 +2590,7 @@ declare module 'azdata' {
 	export interface ToolbarComponent {
 		component: Component;
 		title?: string;
+		toolbarSeparatorAfter?: boolean;
 	}
 
 	/**

src/sql/base/browser/ui/taskbar/media/taskbar.css

@@ -68,9 +68,8 @@
 
 .taskbarSeparator {
 	width: 1px;
-	background-color:#555;
-	margin-right: 6px;
-	margin-top: 3px;
+	background-color:#A5A5A5;
+	margin: 6px 8px;
 }
 
 .taskbarTextSeparator {

src/sql/parts/modelComponents/toolbarContainer.component.ts

@@ -3,6 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./toolbarLayout';
+import 'vs/css!../../../sql/base/browser/ui/taskbar/media/taskbar';
 
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
@@ -18,6 +19,7 @@ import { CommonServiceInterface } from 'sql/services/common/commonServiceInterfa
 
 export interface ToolbarItemConfig {
 	title?: string;
+	toolbarSeparatorAfter?: boolean;
 }
 
 export class ToolbarItem {
@@ -37,6 +39,8 @@ export class ToolbarItem {
 					<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
 					</model-component-wrapper>
 				</div>
+				<div *ngIf="shouldShowToolbarSeparator(item)" class="taskbarSeparator" >
+				</div>
 			</div>
 			</ng-container>
 		</div>
@@ -85,6 +89,13 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 		return this.hasTitle(item) && this.isHorizontal();
 	}
 
+	public shouldShowToolbarSeparator(item: ToolbarItem): boolean {
+		if (!item || !item.config) {
+			return false;
+		}
+		return item.config.toolbarSeparatorAfter;
+	}
+
 	private hasTitle(item: ToolbarItem): boolean {
 		return item && item.config && item.config.title !== undefined;
 	}

src/sql/workbench/api/node/extHostModelView.ts

@@ -428,7 +428,8 @@ class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarCont
 		let componentWrapper = toolbarComponent.component as ComponentWrapper;
 
 		return new InternalItemConfig(componentWrapper, {
-			title: toolbarComponent.title
+			title: toolbarComponent.title,
+			toolbarSeparatorAfter: toolbarComponent.toolbarSeparatorAfter
 		});
 	}