Notebook main toolbar additions (#10271)

* Reworking notebook action bar functionality and appearance. * added separator * Revised notebookActions for collapse, clear and trusted such that they can be implemented with a boolean set to T of F and show labels or shift them into tooltip for accessibility. Updated styles for select boxes. Added toolbar icons to common icon location. Split icon definition for use as masked or background-image. * Completed styles for action icons: collapse, clear and trusted. Added theme colors. Simplified icon behavior styles. * Made maskedIconClass optional. Added theme colors for toolbar icons, select box border and dropdown arrow. Experimenting with adding masked icon to pseudo element so I can pull out label text from icons. * Added icons styles to handle masked SVG elements as pseudo element beside button text. Added icons using this method to respect the color theming system. * Adjusted styles for the cell and run all icons in notebook toolbar. * Prepped notebook toolbar with placeholder icon for Underline action. Implemented Underline action. Added custom --wip-- ButtonMenu control, a modified copy of DropDown. * Revised colorRegistry and corresponding notebook styles. Removed unused code from new custom control: buttonMneu. Revised icon styles to create a dropdown arrow for buttonMenu. * Added new icon for Underline action. * Removed comment from needed markup. * Replaced actionItemProvider with optional undefined per DropdownMenuActionViewItem constructor. * Cleaned up new control, removing unneeded code and referencing what the class needs. Corrected style declaration for overriding input box padding. Removed unused notebook color styles. Scoped element styles to the toolbar so others outside the toolbar are not affected. * Removed unnecessary !important from style override. * Removed reference to unused color entry. * Syntax cleanup. * Put notebook toolbar improvements behind the preview flag. This involves some conditionals and CSS classes. * Updated icon used for Manage Packages. Created and updated styles for notebook toolbar icon spacing. Modified notebook.component contributed actions so that the label text is shifted into the title attribute. Added new icon for Not Trusted toggle. * Replaced SVG code for not-trusted icon. * Addressed PR feedback: changed masked classname. Revised component and CSS accordingly. Removed unnecessary instance of in-preview class. Fixed code logic that assigns label text to tooltip on incoming contributed action
2026-01-26 01:25:38 -05:00 · 2020-05-15 19:13:31 -07:00
parent 0f10f44755
commit 47687ff6b2
26 changed files with 733 additions and 178 deletions
--- a/src/sql/base/browser/ui/buttonMenu/buttonMenu.css
+++ b/src/sql/base/browser/ui/buttonMenu/buttonMenu.css
@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.button-menu .in-preview .monaco-dropdown {
+	height: auto;
+	padding: 0;
+}
+.button-menu.masked-pseudo-after.dropdown-arrow:after {
+	right: -2px;
+	width: 20px;
+}
--- a/src/sql/base/browser/ui/buttonMenu/buttonMenu.ts
+++ b/src/sql/base/browser/ui/buttonMenu/buttonMenu.ts
@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./buttonMenu';
+import { IAction, IActionRunner } from 'vs/base/common/actions';
+import { BaseActionViewItem, IActionViewItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
+import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
+import { append, $, addClasses } from 'vs/base/browser/dom';
+import { IDropdownMenuOptions, DropdownMenu, IActionProvider, IContextMenuProvider, ILabelRenderer } from 'vs/base/browser/ui/dropdown/dropdown';
+
+export class DropdownMenuActionViewItem extends BaseActionViewItem {
+	private menuActionsOrProvider: ReadonlyArray<IAction> | IActionProvider;
+	private dropdownMenu: DropdownMenu | undefined;
+	private menuLabel?: string | undefined;
+	private contextMenuProvider: IContextMenuProvider;
+	private actionViewItemProvider?: IActionViewItemProvider;
+	private keybindings?: (action: IAction) => ResolvedKeybinding | undefined;
+	private cssClass: string | undefined;
+	private anchorAlignmentProvider: (() => AnchorAlignment) | undefined;
+
+	constructor(
+		action: IAction,
+		menuActionsOrProvider: ReadonlyArray<IAction> | IActionProvider,
+		contextMenuProvider: IContextMenuProvider,
+		actionViewItemProvider: IActionViewItemProvider | undefined,
+		actionRunner: IActionRunner,
+		keybindings: ((action: IAction) => ResolvedKeybinding | undefined) | undefined,
+		cssClass: string | undefined,
+		menuLabel: string | undefined,
+		anchorAlignmentProvider?: () => AnchorAlignment) {
+
+		super(null, action);
+
+		this.menuActionsOrProvider = menuActionsOrProvider;
+		this.contextMenuProvider = contextMenuProvider;
+		this.actionViewItemProvider = actionViewItemProvider;
+		this.actionRunner = actionRunner;
+		this.keybindings = keybindings;
+		this.cssClass = cssClass;
+		this.menuLabel = menuLabel;
+		this.anchorAlignmentProvider = anchorAlignmentProvider;
+	}
+
+	render(container: HTMLElement): void {
+		const labelRenderer: ILabelRenderer = (el: HTMLElement): IDisposable | null => {
+			this.element = append(el, $('a.action-label.button-menu'));
+			if (this.cssClass) {
+				addClasses(this.element, this.cssClass);
+			}
+			if (this.menuLabel) {
+				this.element.innerText = this.menuLabel;
+			}
+
+			this.element.tabIndex = 0;
+			this.element.setAttribute('role', 'button');
+			this.element.setAttribute('aria-haspopup', 'true');
+			this.element.title = this._action.label || '';
+
+			return null;
+		};
+
+		const options: IDropdownMenuOptions = {
+			contextMenuProvider: this.contextMenuProvider,
+			labelRenderer: labelRenderer
+		};
+
+		// Render the DropdownMenu around a simple action to toggle it
+		if (Array.isArray(this.menuActionsOrProvider)) {
+			options.actions = this.menuActionsOrProvider;
+		} else {
+			options.actionProvider = this.menuActionsOrProvider as IActionProvider;
+		}
+
+		this.dropdownMenu = this._register(new DropdownMenu(container, options));
+		this.dropdownMenu.menuOptions = {
+			actionViewItemProvider: this.actionViewItemProvider,
+			actionRunner: this.actionRunner,
+			getKeyBinding: this.keybindings,
+			context: this._context
+		};
+
+		if (this.anchorAlignmentProvider) {
+			const that = this;
+
+			this.dropdownMenu.menuOptions = {
+				...this.dropdownMenu.menuOptions,
+				get anchorAlignment(): AnchorAlignment {
+					return that.anchorAlignmentProvider!();
+				}
+			};
+		}
+	}
+
+	setActionContext(newContext: unknown): void {
+		super.setActionContext(newContext);
+
+		if (this.dropdownMenu) {
+			if (this.dropdownMenu.menuOptions) {
+				this.dropdownMenu.menuOptions.context = newContext;
+			} else {
+				this.dropdownMenu.menuOptions = { context: newContext };
+			}
+		}
+	}
+
+	show(): void {
+		this.dropdownMenu?.show();
+	}
+}
--- a/src/sql/base/browser/ui/selectBox/media/selectBox.css
+++ b/src/sql/base/browser/ui/selectBox/media/selectBox.css
@@ -15,6 +15,10 @@
 }

 .monaco-select-box {
-	padding: 2px 8px;
-	padding: 0 22px 0 6px !important; /* I don't like this but for now its fine */
+	padding: 0 22px 0 6px;
+}
+
+.monaco-inputbox > .wrapper > .input,
+.monaco-inputbox > .wrapper > .mirror {
+	padding-left: 6px !important;
 }
--- a/src/sql/base/browser/ui/taskbar/media/taskbar.css
+++ b/src/sql/base/browser/ui/taskbar/media/taskbar.css
@@ -26,6 +26,7 @@
 }

 .carbon-taskbar.monaco-toolbar .monaco-action-bar.animated .actions-container {
+	box-sizing: border-box;
 	justify-content: flex-start;
 	padding-left: 15px;
 	flex-wrap: wrap;
--- a/src/sql/media/icons/action-collapse.svg
+++ b/src/sql/media/icons/action-collapse.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1H16V2H0V1ZM7 5V4H16V5H7ZM0.148438 6.14844L2.5 3.79688L4.85156 6.14844L4.14844 6.85156L3 5.71094V15H2V5.71094L0.851562 6.85156L0.148438 6.14844Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/action-expand.svg
+++ b/src/sql/media/icons/action-expand.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <title>opac_command_icons_bv</title>
+  <path d="M0,1H16V2H0ZM3,13.289l1.148-1.141.7.7L2.5,15.2.148,12.852l.7-.7L2,13.289V4H3ZM7,5V4h9V5ZM7,8V7h9V8Zm0,3V10h9v1Zm0,3V13h9v1Z"/>
+  <rect width="16" height="16" fill="none"/>
+</svg>
--- a/src/sql/media/icons/clear.svg
+++ b/src/sql/media/icons/clear.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15.953V14.4609H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 1.414L4.203 6.961L9 11.75L14.539 6.211L9.75 1.414ZM7.289 13.461L8.289 12.461L3.5 7.664L1.109 10.062C1.036 10.136 1 10.227 1 10.336C1 10.445 1.036 10.537 1.109 10.609L3.953 13.461H7.289ZM8.711 13.461H12V14.461H3.539L0.391 11.305C0.266 11.18 0.169 11.033 0.102 10.863C0.034 10.694 0 10.518 0 10.336C0 10.154 0.034 9.978 0.102 9.809C0.169 9.64 0.269 9.49 0.398 9.359L9.75 0L15.953 6.211L8.711 13.461Z" fill="#0078D4"/>
+</g>
+</svg>
--- a/src/sql/media/icons/code.svg
+++ b/src/sql/media/icons/code.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.125 1.5H7.875L4.875 10.5H4.125L7.125 1.5Z" fill="#0078D4"/>
+<path d="M9.07481 8.92422L8.5498 8.32422L10.9498 5.99922L8.5498 3.67422L9.07481 3.07422L11.9998 5.99922L9.07481 8.92422Z" fill="#0078D4"/>
+<path d="M2.925 8.92422L3.45 8.32422L1.05 5.99922L3.45 3.67422L2.925 3.07422L0 5.99922L2.925 8.92422Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/common-icons.css
+++ b/src/sql/media/icons/common-icons.css
@@ -4,12 +4,12 @@
 *--------------------------------------------------------------------------------------------*/

 .vs .codicon.settings {
-	background-image: url('settings.svg');
+	background-image: url("settings.svg");
 }

 .vs-dark .codicon.settings,
 .hc-black .codicon.settings {
-	background-image: url('settings_inverse.svg');
+	background-image: url("settings_inverse.svg");
 }

 .vs .codicon.backup,
@@ -123,21 +123,21 @@
 .vs .codicon.scriptToClipboard,
 .vs-dark .codicon.scriptToClipboard,
 .hc-black .codicon.scriptToClipboard {
-	background-image: url('script_to_clipboard.svg');
+	background-image: url("script_to_clipboard.svg");
 	background-repeat: no-repeat;
 	background-position: 2px center;
 }

 .vs .codicon.close,
 .vs .codicon.remove {
-	background: url('close.svg') center center no-repeat !important;
+	background: url("close.svg") center center no-repeat !important;
 }

 .vs-dark .codicon.close,
 .hc-black .codicon.close,
 .vs-dark .codicon.remove,
 .hc-black .codicon.remove {
-	background: url('close_inverse.svg') center center no-repeat !important;
+	background: url("close_inverse.svg") center center no-repeat !important;
 }

 .vs .codicon.filter {
@@ -181,20 +181,20 @@

 .hc-black .codicon.toggle-more,
 .vs-dark .codicon.toggle-more {
-	background: url('ellipsis-inverse.svg') center center no-repeat;
+	background: url("ellipsis-inverse.svg") center center no-repeat;
 }

 .vs .codicon.toggle-more {
-	background: url('ellipsis.svg') center center no-repeat;
+	background: url("ellipsis.svg") center center no-repeat;
 }

 .hc-black .codicon.new,
 .vs-dark .codicon.new {
-	background: url('new_inverse.svg') center center no-repeat;
+	background: url("new_inverse.svg") center center no-repeat;
 }

 .vs .codicon.new {
-	background: url('new.svg') center center no-repeat;
+	background: url("new.svg") center center no-repeat;
 }

 .vs .codicon.new-query,
@@ -206,7 +206,7 @@
 .vs .codicon.configure-dashboard,
 .hc-black .codicon.configure-dashboard,
 .vs-dark .codicon.configure-dashboard {
-	background: url('configuredashboard.svg') center center no-repeat;
+	background: url("configuredashboard.svg") center center no-repeat;
 }

 .vs .codicon.edit,
@@ -217,95 +217,212 @@

 .hc-black .codicon.pin,
 .vs-dark .codicon.pin {
-	background: url('pin_inverse.svg') center center no-repeat;
+	background: url("pin_inverse.svg") center center no-repeat;
 }

 .vs .codicon.pin {
-	background: url('pin.svg') center center no-repeat;
+	background: url("pin.svg") center center no-repeat;
 }

 .hc-black .codicon.unpin,
 .vs-dark .codicon.unpin {
-	background: url('unpin_inverse.svg') center center no-repeat;
+	background: url("unpin_inverse.svg") center center no-repeat;
 }

 .vs .codicon.unpin {
-	background: url('unpin.svg') center center no-repeat;
+	background: url("unpin.svg") center center no-repeat;
 }

 .vs .sql.codicon.pause {
-	background-image: url('pause.svg')
+	background-image: url("pause.svg");
 }

 .vs-dark .sql.codicon.pause,
 .hc-black .sql.codicon.pause {
-	background-image: url('pause_inverse.svg')
+	background-image: url("pause_inverse.svg");
 }

 .vs .sql.codicon.continue {
-	background-image: url('continue.svg')
+	background-image: url("continue.svg");
 }

 .vs-dark .sql.codicon.continue,
 .hc-black .sql.codicon.continue {
-	background-image: url('continue_inverse.svg')
+	background-image: url("continue_inverse.svg");
 }

 .vs .sql.codicon.checked {
-	background-image: url('check.svg')
+	background-image: url("check.svg");
 }

 .vs-dark .sql.codicon.checked,
 .hc-black .sql.codicon.checked {
-	background-image: url('check_inverse.svg')
+	background-image: url("check_inverse.svg");
 }

 .vs .sql.codicon.start {
-	background-image: url('start.svg')
+	background-image: url("start.svg");
 }

 .vs-dark .sql.codicon.start,
 .hc-black .sql.codicon.start {
-	background-image: url('start_inverse.svg')
+	background-image: url("start_inverse.svg");
 }

 .vs .sql.codicon.stop {
-	background-image: url('stop.svg')
+	background-image: url("stop.svg");
 }

 .vs-dark .sql.codicon.stop,
 .hc-black .sql.codicon.stop {
-	background-image: url('stop_inverse.svg')
+	background-image: url("stop_inverse.svg");
 }

 /* Notebook cells */
 .codicon.toolbarIconRunInactive {
-	background-image: url('execute_cell_grey.svg');
+	background-image: url("execute_cell_grey.svg");
 }
 .codicon.toolbarIconRun {
-	background-image: url('execute_cell.svg');
+	background-image: url("execute_cell.svg");
 }
 .codicon.toolbarIconRunError {
-	background-image: url('execute_cell_error.svg');
+	background-image: url("execute_cell_error.svg");
 }
 .codicon.toolbarIconStop {
-	background-image: url('stop_cell_solidanimation.svg');
+	background-image: url("stop_cell_solidanimation.svg");
 }
 .vs-dark .codicon.toolbarIconRunInactive {
-	background-image: url('execute_cell_dark.svg');
+	background-image: url("execute_cell_dark.svg");
 }
 .vs-dark .codicon.toolbarIconRun {
-	background-image: url('execute_cell_white.svg');
+	background-image: url("execute_cell_white.svg");
 }
 .hc-black .codicon.toolbarIconRunInactive {
-	background-image: url('execute_cell_hc.svg');
+	background-image: url("execute_cell_hc.svg");
 }
 .hc-black .codicon.toolbarIconRun {
-	background-image: url('execute_cell_orange_hc.svg');
+	background-image: url("execute_cell_orange_hc.svg");
 }
 .vs-dark .codicon.toolbarIconStop,
 .hc-black .codicon.toolbarIconStop {
-	background-image: url('stop_cell_solidanimation_inverse.svg');
+	background-image: url("stop_cell_solidanimation_inverse.svg");
+}
+
+/* Icons as masked elements for easy theme switching.
+Includes non-masked style declarations. */
+.masked-icon {
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	-webkit-mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 50% 100%;
+	mask-size: 50% 100%;
+}
+
+.codicon.bold {
+	-webkit-mask-image: url("toolbar-bold.svg");
+	mask-image: url("toolbar-bold.svg");
+}
+.codicon.italic {
+	-webkit-mask-image: url("toolbar-italic.svg");
+	mask-image: url("toolbar-italic.svg");
+}
+.codicon.underline {
+	-webkit-mask-image: url("toolbar-underline.svg");
+	mask-image: url("toolbar-underline.svg");
+}
+.codicon.highlight {
+	-webkit-mask-image: url("toolbar-highlight.svg");
+	mask-image: url("toolbar-highlight.svg");
+}
+.codicon.code {
+	-webkit-mask-image: url("toolbar-code.svg");
+	mask-image: url("toolbar-code.svg");
+}
+.codicon.insert-link {
+	-webkit-mask-image: url("toolbar-link.svg");
+	mask-image: url("toolbar-link.svg");
+}
+.codicon.list {
+	-webkit-mask-image: url("toolbar-list.svg");
+	mask-image: url("toolbar-list.svg");
+}
+.codicon.ordered-list {
+	-webkit-mask-image: url("toolbar-ordered-list.svg");
+	mask-image: url("toolbar-ordered-list.svg");
+}
+.codicon.insert-image {
+	-webkit-mask-image: url("toolbar-image.svg");
+	mask-image: url("toolbar-image.svg");
+}
+.codicon.split-toggle-on {
+	-webkit-mask-image: url("toolbar-preview-toggle-on.svg");
+	mask-image: url("toolbar-preview-toggle-on.svg");
+}
+.codicon.split-toggle-off {
+	-webkit-mask-image: url("toolbar-preview-toggle-off.svg");
+	mask-image: url("toolbar-preview-toggle-off.svg");
+}
+.codicon.code {
+	-webkit-mask-image: url("code.svg");
+	mask-image: url("code.svg");
+}
+.codicon.markdown {
+	-webkit-mask-image: url("markdown.svg");
+	mask-image: url("markdown.svg");
+}
+
+.codicon:not(.masked-icon).icon-expand-cells {
+	background-image: url("action-expand.svg");
+}
+.codicon.masked-icon.icon-expand-cells {
+	background-image: none;
+	-webkit-mask-image: url("action-expand.svg");
+	mask-image: url("action-expand.svg");
+}
+
+.codicon:not(.masked-icon).icon-collapse-cells {
+	background-image: url("action-collapse.svg");
+}
+.codicon.masked-icon.icon-collapse-cells {
+	-webkit-mask-image: url("action-collapse.svg");
+	mask-image: url("action-collapse.svg");
+}
+
+.codicon:not(.masked-icon).icon-clear-results {
+	background-image: url("clear.svg");
+}
+.codicon.masked-icon.icon-clear-results {
+	-webkit-mask-image: url("clear.svg");
+	mask-image: url("clear.svg");
+}
+
+.codicon:not(.masked-icon).icon-shield {
+	background-image: url("shield.svg");
+}
+.codicon.masked-icon.icon-shield {
+	-webkit-mask-image: url("shield.svg");
+	mask-image: url("shield.svg");
+}
+
+.codicon:not(.masked-icon).icon-shield-x {
+	background-image: url("shield-x.svg");
+}
+.codicon.masked-icon.icon-shield-x {
+	-webkit-mask-image: url("shield-x.svg");
+	mask-image: url("shield-x.svg");
+}
+
+.codicon:not(.masked-icon).packages {
+	background-image: url("packages.svg");
+}
+.codicon.masked-icon.packages {
+	background-image: none;
+	-webkit-mask-image: url("packages.svg");
+	mask-image: url("packages.svg");
 }

 .codicon.arrow-up {
@@ -316,78 +433,95 @@
 	background-image: url("chevron_up_inverse.svg");
 }

-.codicon.arrow-down {
+.codicon:not(.masked-icon).arrow-down {
 	background-image: url("chevron_down.svg");
 }
-.vs-dark .codicon.arrow-down,
-.hc-black .codicon.arrow-down {
+.vs-dark .codicon:not(.masked-icon).arrow-down,
+.hc-black .codicon:not(.masked-icon).arrow-down {
 	background-image: url("chevron_down_inverse.svg");
 }
-
-/* Icons as masked elements for easy theme switching */
-.codicon.bold {
-	-webkit-mask-image: url('toolbar-bold.svg');
-	mask-image: url('toolbar-bold.svg');
-}
-.codicon.italic {
-	-webkit-mask-image: url('toolbar-italic.svg');
-	mask-image: url('toolbar-italic.svg');
-}
-.codicon.highlight {
-	-webkit-mask-image: url('toolbar-highlight.svg');
-	mask-image: url('toolbar-highlight.svg');
-}
-.codicon.code {
-	-webkit-mask-image: url('toolbar-code.svg');
-	mask-image: url('toolbar-code.svg');
-}
-.codicon.insert-link {
-	-webkit-mask-image: url('toolbar-link.svg');
-	mask-image: url('toolbar-link.svg');
-}
-.codicon.list {
-	-webkit-mask-image: url('toolbar-list.svg');
-	mask-image: url('toolbar-list.svg');
-}
-.codicon.ordered-list {
-	-webkit-mask-image: url('toolbar-ordered-list.svg');
-	mask-image: url('toolbar-ordered-list.svg');
-}
-.codicon.insert-image {
-	-webkit-mask-image: url('toolbar-image.svg');
-	mask-image: url('toolbar-image.svg');
-}
-.codicon.split-toggle-on {
-	-webkit-mask-image: url('toolbar-preview-toggle-on.svg');
-	mask-image: url('toolbar-preview-toggle-on.svg');
-}
-.codicon.split-toggle-off {
-	-webkit-mask-image: url('toolbar-preview-toggle-off.svg');
-	mask-image: url('toolbar-preview-toggle-off.svg');
+.codicon.masked-icon.arrow-down {
+	background-image: none;
+	-webkit-mask-image: url("chevron_down.svg");
+	mask-image: url("chevron_down.svg");
+}
+
+.vs .codicon.new-blue {
+	background-image: url("new-blue.svg");
+}
+.vs .codicon.start-outline {
+	background-image: url("start-outline.svg");
+}
+
+/* Masked element inside pseudo element */
+.masked-pseudo {
+	background-image: none !important;
+}
+.masked-pseudo:before,
+.masked-pseudo-after:after {
+	content: "";
+	display: block;
+	position: absolute;
+	-webkit-mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 50% 100%;
+	mask-size: 50% 100%;
+}
+.masked-pseudo:before {
+	height: 23px;
+	left: 0;
+	top: 2px;
+	width: 30px;
+}
+.masked-pseudo-after:after {
+	height: 23px;
+	right: 0;
+	top: 2px;
+	width: 30px;
+}
+.masked-pseudo-after.dropdown-arrow:after {
+	background-image: none;
+	-webkit-mask-image: url("chevron_down.svg");
+	mask-image: url("chevron_down.svg");
+}
+.masked-pseudo.add-new:before {
+	-webkit-mask-image: url("new.svg");
+	mask-image: url("new.svg");
+}
+.masked-pseudo.start-outline:before {
+	-webkit-mask-image: url("start-outline.svg");
+	mask-image: url("start-outline.svg");
+}
+
+.masked-pseudo.code:before {
+	-webkit-mask-image: url("code.svg");
+	mask-image: url("code.svg");
+}
+.masked-pseudo.markdown:before {
+	-webkit-mask-image: url("markdown.svg");
+	mask-image: url("markdown.svg");
 }

-/* Cell toolbar icons */
 .cell-tool-close {
-	background-image: url('close-blue.svg');
+	background-image: url("close-blue.svg");
 }
 .cell-tool-edit {
-	background-image: url('edit.svg');
-}
-.cell-tool-add {
-	background-image: url('new-blue.svg');
+	background-image: url("edit.svg");
 }
 .cell-tool-move-up {
-	background-image: url('down-arrow-blue.svg');
+	background-image: url("down-arrow-blue.svg");
 	transform: scale(-1);
 }
 .cell-tool-move-down {
-	background-image: url('down-arrow-blue.svg');
+	background-image: url("down-arrow-blue.svg");
 }
 .cell-tool-delete {
-	background-image: url('garbage-can-blue.svg');
+	background-image: url("garbage-can-blue.svg");
 }
 .cell-tool-more {
-	background-image: url('ellipsis-blue.svg');
+	background-image: url("ellipsis-blue.svg");
 }

 .database-colored.codicon {
--- a/src/sql/media/icons/markdown.svg
+++ b/src/sql/media/icons/markdown.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.97141 5.96478C3.91424 6.1158 3.85805 6.26778 3.80285 6.42072L3.76737 6.42073C3.73189 6.27162 3.6826 6.12346 3.61952 5.97626C3.55643 5.82906 3.49335 5.68473 3.43026 5.54327L1.14736 0.42188H0V7.7627H0.839822V2.8478C0.839822 2.60692 0.837851 2.36701 0.833908 2.12805C0.829965 1.88909 0.818137 1.64918 0.798423 1.40831C0.837851 1.53448 0.874322 1.66256 0.907836 1.79255C0.94135 1.92255 0.985707 2.0468 1.04091 2.16533L3.5722 7.76272H3.99803L6.53523 2.11944C6.58649 2.00857 6.62887 1.89195 6.66239 1.76961C6.6959 1.64726 6.72843 1.52683 6.75997 1.4083C6.74815 1.64917 6.73632 1.88718 6.72449 2.12231C6.71266 2.35745 6.70675 2.59545 6.70675 2.83632V7.7627H7.57022V0.421875H6.48201L4.15771 5.52032C4.09068 5.66561 4.02858 5.81376 3.97141 5.96478ZM10.2198 7.91182L12 6.18558L11.4677 5.66943L10.5983 6.50674V0.421884H9.84128V6.50674L8.97188 5.66943L8.4396 6.18558L10.2198 7.91182Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/packages.svg
+++ b/src/sql/media/icons/packages.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8H15V16H5V8H4V5H10V3H2V10H5V11H1V3H0V0H12V3H11V5H16V8ZM1 2H11V1H1V2ZM14 8H6V15H14V8ZM15 6H5V7H15V6ZM11 12H7V11H11V12ZM7 14V13H10V14H7Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/shield-x.svg
+++ b/src/sql/media/icons/shield-x.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.707107 0.0467995L0 0.753906L13.2731 14.027L13.9802 13.3199L0.707107 0.0467995Z" fill="#0078D4"/>
+<path d="M11.919 11.2462C11.5113 11.7276 11.0706 12.1801 10.6 12.6002C10.118 13.0289 9.61185 13.4295 9.084 13.8002C8.56133 14.1729 8.03333 14.5129 7.5 14.8202C6.958 14.5082 6.42667 14.1699 5.906 13.8052C5.37988 13.4346 4.87694 13.0322 4.4 12.6002C3.92098 12.1679 3.47225 11.7031 3.057 11.2092C2.64762 10.7248 2.28594 10.2021 1.977 9.6482C1.66983 9.09775 1.42851 8.51306 1.258 7.9062C1.0845 7.28581 0.997672 6.6444 1 6.0002V2.9842C1.7568 2.94731 2.50663 2.82145 3.234 2.6092C3.24581 2.60679 3.25749 2.60378 3.269 2.6002L2.452 1.7832H2.445C2.05379 1.86792 1.65717 1.92539 1.258 1.9552C0.852 1.9852 0.432667 2.0002 0 2.0002V6.0002C0.00576517 7.43903 0.376682 8.85285 1.078 10.1092C1.4206 10.7198 1.81825 11.2979 2.266 11.8362C2.72145 12.3857 3.22039 12.8977 3.758 13.3672C4.29894 13.8419 4.86653 14.2852 5.458 14.6952C6.052 15.1072 6.652 15.4875 7.258 15.8362L7.5 15.9772L7.742 15.8362C8.36412 15.4911 8.9667 15.1118 9.547 14.7002C10.1359 14.2839 10.7033 13.838 11.247 13.3642C11.7421 12.9319 12.205 12.4639 12.632 11.9642L11.919 11.2462Z" fill="#0078D4"/>
+<path d="M13.7422 1.95309C13.343 1.92327 12.9464 1.8658 12.5552 1.78109C12.1655 1.69691 11.7838 1.57948 11.4142 1.43009C11.022 1.2698 10.6454 1.07363 10.2892 0.844089C10.0778 0.702279 9.85581 0.57691 9.6252 0.469089C9.40678 0.36608 9.18238 0.276252 8.9532 0.200089C8.72526 0.126304 8.4909 0.0740751 8.2532 0.0440894C8.0034 0.0134013 7.75188 -0.0012953 7.5002 8.94351e-05C7.00561 8.10423e-05 6.51358 0.0711405 6.0392 0.211089C5.56916 0.35906 5.12215 0.572129 4.7112 0.844089C4.35504 1.07363 3.97844 1.2698 3.5862 1.43009C3.5692 1.43709 3.5512 1.43909 3.5332 1.44609L4.2952 2.20709C4.63598 2.049 4.96543 1.86757 5.2812 1.66409C5.60941 1.44477 5.96739 1.27369 6.3442 1.15609C6.71995 1.04837 7.10935 0.995823 7.5002 1.00009C7.89393 1.00048 8.28569 1.05568 8.6642 1.16409C9.03785 1.27977 9.39309 1.44813 9.7192 1.66409C10.3557 2.07474 11.0473 2.39292 11.7732 2.60909C12.4983 2.82084 13.2457 2.9467 14.0002 2.98409V6.00009C13.9932 6.64417 13.9038 7.28471 13.7342 7.90609C13.5671 8.5129 13.3285 9.09768 13.0232 9.64809C12.8725 9.92209 12.7089 10.1888 12.5322 10.4481L13.2482 11.1641C13.4961 10.823 13.7238 10.4677 13.9302 10.1001C14.2692 9.48769 14.534 8.83711 14.7192 8.16209C14.9092 7.45725 15.0037 6.73009 15.0002 6.00009V2.00009C14.5682 2.00009 14.1489 1.98442 13.7422 1.95309Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/shield.svg
+++ b/src/sql/media/icons/shield.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26991 1.02742C8.02998 0.993516 7.777 0.976562 7.51099 0.976562C6.97897 0.976562 6.49127 1.04567 6.04791 1.1839C5.60456 1.32212 5.1612 1.53467 4.71784 1.82155C4.34229 2.06148 3.96674 2.25708 3.59119 2.40835C3.21564 2.55961 2.83488 2.67697 2.4489 2.76042C2.06292 2.84388 1.6665 2.90125 1.25966 2.93255C0.852811 2.96385 0.432925 2.97949 0 2.97949V6.98536C0 7.74689 0.0951916 8.4693 0.285574 9.15259C0.475954 9.83589 0.739362 10.484 1.07579 11.0968C1.41223 11.7097 1.80994 12.2874 2.26895 12.8299C2.72795 13.3723 3.22607 13.8822 3.76332 14.3594C4.30056 14.8367 4.8678 15.2814 5.46503 15.6934C6.06226 16.1055 6.6634 16.4862 7.26845 16.8357L7.51099 16.9765L7.75353 16.8357C8.35859 16.4862 8.95972 16.1055 9.55695 15.6934C10.1542 15.2814 10.7214 14.8367 11.2587 14.3594C11.7959 13.8822 12.294 13.3723 12.753 12.8299C13.212 12.2874 13.6098 11.7097 13.9462 11.0968C14.2826 10.484 14.546 9.83589 14.7364 9.15259C14.9268 8.4693 15.022 7.74689 15.022 6.98536V2.97949C14.5891 2.97949 14.1692 2.96385 13.7623 2.93255C13.3555 2.90125 12.9591 2.84388 12.5731 2.76042C12.1871 2.67697 11.8063 2.55961 11.4308 2.40835C11.0552 2.25708 10.6797 2.06149 10.3041 1.82155C10.0799 1.68072 9.85817 1.55684 9.6391 1.44991C9.42003 1.34299 9.19705 1.25431 8.97016 1.1839C8.74326 1.11348 8.50985 1.06132 8.26991 1.02742ZM11.7868 3.58976C12.4988 3.7984 13.2433 3.92358 14.0205 3.96531L14.0205 6.98536C14.0205 7.64778 13.9331 8.28413 13.7584 8.8944C13.5837 9.50467 13.345 10.0863 13.0425 10.6391C12.74 11.192 12.3801 11.7149 11.9628 12.2078C11.5455 12.7008 11.097 13.1637 10.6171 13.5966C10.1372 14.0295 9.63259 14.4312 9.10317 14.8015C8.57375 15.1718 8.04302 15.5109 7.51099 15.8186C6.97897 15.5109 6.44824 15.1718 5.91882 14.8015C5.3894 14.4312 4.88476 14.0295 4.40489 13.5966C3.92502 13.1637 3.47645 12.7008 3.05917 12.2078C2.64189 11.7149 2.28199 11.192 1.97946 10.6391C1.67694 10.0863 1.43831 9.50467 1.26357 8.8944C1.08884 8.28413 1.00147 7.64778 1.00147 6.98536V3.96531C1.77865 3.92358 2.52323 3.7984 3.23521 3.58976C3.94719 3.38112 4.63178 3.06556 5.28899 2.64306C5.64368 2.41356 5.99706 2.24535 6.34914 2.13842C6.70122 2.03149 7.0885 1.97803 7.51099 1.97803C7.93348 1.97803 8.32077 2.03149 8.67285 2.13842C9.02493 2.24535 9.3783 2.41356 9.73299 2.64306C10.3902 3.06556 11.0748 3.38112 11.7868 3.58976Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/start-outline.svg
+++ b/src/sql/media/icons/start-outline.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 2.7L12.2 8L3 13.3V2.7ZM2 1V15L14.3 8L2 1Z" fill="#0078D4"/>
+</svg>
--- a/src/sql/media/icons/toolbar-underline.svg
+++ b/src/sql/media/icons/toolbar-underline.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8984 21.1333C15.0599 21.1333 14.3464 21.0215 13.7578 20.7979C13.1693 20.5743 12.6901 20.251 12.3203 19.8281C11.9505 19.4052 11.6771 18.8972 11.5 18.3042C11.3229 17.7111 11.237 17.0427 11.2422 16.299V9H12.7422V16.2042C12.7422 16.734 12.7969 17.2226 12.9062 17.6698C13.0156 18.117 13.2005 18.5035 13.4609 18.8292C13.7214 19.1549 14.0625 19.4125 14.4844 19.6021C14.9062 19.7917 15.4297 19.884 16.0547 19.8792C16.6536 19.8792 17.1562 19.7917 17.5625 19.6167C17.9688 19.4417 18.2995 19.1962 18.5547 18.8802C18.8099 18.5642 18.9896 18.1899 19.0938 17.7573C19.1979 17.3247 19.2526 16.8507 19.2578 16.3354V9H20.7578V16.1094C20.7578 16.8774 20.6693 17.5701 20.4922 18.1875C20.3151 18.8049 20.0312 19.3323 19.6406 19.7698C19.25 20.2073 18.7474 20.5427 18.1328 20.776C17.5182 21.0094 16.7734 21.1285 15.8984 21.1333ZM11 22.0667H21V23H11V22.0667Z" fill="#323130"/>
+</svg>
--- a/src/sql/platform/theme/common/colorRegistry.ts
+++ b/src/sql/platform/theme/common/colorRegistry.ts
@@ -42,19 +42,26 @@ export const gradientTwo = registerColor('gradientTwo', { light: gradientTwoColo
 export const gradientBackground = registerColor('gradientBackground', { light: '#fff', dark: 'transparent', hc: 'transparent' }, nls.localize('gradientBackground', "The background color for the banner image gradient"));

 // --- Notebook Colors
+export const notebookToolbarIcon = registerColor('notebook.notebookToolbarIcon', { light: '#0078D4', dark: '#3AA0F3', hc: '#FFFFFF' }, nls.localize('notebook.notebookToolbarIcon', "Notebook: Main toolbar icons"));
+export const notebookToolbarSelectBorder = registerColor('notebook.notebookToolbarSelectBorder', { light: '#A5A5A5', dark: '#8A8886', hc: '#2B56F2' }, nls.localize('notebook.notebookToolbarSelectBorder', "Notebook: Main toolbar select box border"));
+export const notebookToolbarSelectBackground = registerColor('notebook.notebookToolbarSelectBackground', { light: '#FFFFFF', dark: '#1B1A19', hc: '#000000' }, nls.localize('notebook.notebookToolbarSelectBackground', "Notebook: Main toolbar select box background"));
+export const notebookToolbarLines = registerColor('notebook.notebookToolbarLines', { light: '#D6D6D6', dark: '#323130', hc: '#2B56F2' }, nls.localize('notebook.notebookToolbarLines', "Notebook: Main toolbar bottom border and separator"));
+export const dropdownArrow = registerColor('notebook.dropdownArrow', { light: '#A5A5A5', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.dropdownArrow', "Notebook: Main toolbar dropdown arrow"));
+export const buttonMenuArrow = registerColor('notebook.buttonMenuArrow', { light: '#000000', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.buttonMenuArrow', "Notebook: Main toolbar custom buttonMenu dropdown arrow"));
+
 export const toolbarBackground = registerColor('notebook.toolbarBackground', { light: '#F5F5F5', dark: '#252423', hc: '#000000' }, nls.localize('notebook.toolbarBackground', "Notebook: Markdown toolbar background"));
-export const toolbarIcon = registerColor('notebook.toolbarIcon', { light: '#323130', dark: '#FFFFFe', hc: '#FFFFFe' }, nls.localize('notebook.toolbarIcon', "Notebook: Markdown toolbar icons"));
+export const toolbarIcon = registerColor('notebook.toolbarIcon', { light: '#323130', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.toolbarIcon', "Notebook: Markdown toolbar icons"));
 export const toolbarBottomBorder = registerColor('notebook.toolbarBottomBorder', { light: '#D4D4D4', dark: '#323130', hc: '#E86E58' }, nls.localize('notebook.toolbarBottomBorder', "Notebook: Markdown toolbar bottom border"));
 // Notebook: All cells
-export const cellBorder = registerColor('notebook.cellBorder', { light: '#0078D4', dark: '#0078D4', hc: '#E86E58' }, nls.localize('notebook.cellBorder', "Notebook: Active cell border"));
+export const cellBorder = registerColor('notebook.cellBorder', { light: '#0078D4', dark: '#3AA0F3', hc: '#E86E58' }, nls.localize('notebook.cellBorder', "Notebook: Active cell border"));
 // Notebook: Markdown cell
-export const markdownEditorBackground = registerColor('notebook.markdownEditorBackground', { light: '#FFFFFe', dark: '#1B1A19', hc: '#000000' }, nls.localize('notebook.markdownEditorBackground', "Notebook: Markdown editor background"));
+export const markdownEditorBackground = registerColor('notebook.markdownEditorBackground', { light: '#FFFFFF', dark: '#1B1A19', hc: '#000000' }, nls.localize('notebook.markdownEditorBackground', "Notebook: Markdown editor background"));
 export const splitBorder = registerColor('notebook.splitBorder', { light: '#E6E6E6', dark: '#323130', hc: '#872412' }, nls.localize('notebook.splitBorder', "Notebook: Border between Markdown editor and preview"));

 // Notebook: Code cell
 export const codeEditorBackground = registerColor('notebook.codeEditorBackground', { light: '#F5F5F5', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorBackground', "Notebook: Code editor background"));
-export const codeEditorBackgroundActive = registerColor('notebook.codeEditorBackgroundActive', { light: '#FFFFFe', dark: null, hc: null }, nls.localize('notebook.codeEditorBackgroundActive', "Notebook: Code editor background of active cell"));
-export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber', { light: '#A19F9D', dark: '#A19F9D', hc: '#FFFFFe' }, nls.localize('notebook.codeEditorLineNumber', "Notebook: Code editor line numbers"));
-export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hc: '#FFFFFe' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons"));
+export const codeEditorBackgroundActive = registerColor('notebook.codeEditorBackgroundActive', { light: '#FFFFFF', dark: null, hc: null }, nls.localize('notebook.codeEditorBackgroundActive', "Notebook: Code editor background of active cell"));
+export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber', { light: '#A19F9D', dark: '#A19F9D', hc: '#FFFFFF' }, nls.localize('notebook.codeEditorLineNumber', "Notebook: Code editor line numbers"));
+export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hc: '#FFFFFF' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons"));
 export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background"));
 export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border"));
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
@@ -21,6 +21,7 @@ export class MarkdownToolbarComponent {

 	public buttonBold = localize('buttonBold', "Bold");
 	public buttonItalic = localize('buttonItalic', "Italic");
+	public buttonUnderline = localize('buttonUnderline', "Underline");
 	public buttonHighlight = localize('buttonHighlight', "Highlight");
 	public buttonCode = localize('buttonCode', "Code");
 	public buttonLink = localize('buttonLink', "Link");
@@ -43,6 +44,7 @@ export class MarkdownToolbarComponent {
 	private initActionBar() {
 		let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold', this.buttonBold, this.cellModel, MarkdownButtonType.BOLD);
 		let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic', this.buttonItalic, this.cellModel, MarkdownButtonType.ITALIC);
+		let underlineButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.underlineText', '', 'underline', this.buttonUnderline, this.cellModel, MarkdownButtonType.UNDERLINE);
 		let highlightButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.highlightText', '', 'highlight', this.buttonHighlight, this.cellModel, MarkdownButtonType.HIGHLIGHT);
 		let codeButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.codeText', '', 'code', this.buttonCode, this.cellModel, MarkdownButtonType.CODE);
 		let linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link', this.buttonLink, this.cellModel, MarkdownButtonType.LINK);
@@ -56,6 +58,7 @@ export class MarkdownToolbarComponent {
 		this._actionBar.setContent([
 			{ action: boldButton },
 			{ action: italicButton },
+			{ action: underlineButton },
 			{ action: highlightButton },
 			{ action: codeButton },
 			{ action: linkButton },
--- a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
+++ b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
@@ -119,6 +119,8 @@ export class MarkdownTextTransformer {
 				return '**';
 			case MarkdownButtonType.ITALIC:
 				return '_';
+			case MarkdownButtonType.UNDERLINE:
+				return '<u>';
 			case MarkdownButtonType.CODE:
 				return '```\n';
 			case MarkdownButtonType.LINK:
@@ -142,6 +144,8 @@ export class MarkdownTextTransformer {
 				return '**';
 			case MarkdownButtonType.ITALIC:
 				return '_';
+			case MarkdownButtonType.UNDERLINE:
+				return '</u>';
 			case MarkdownButtonType.CODE:
 				return '\n```';
 			case MarkdownButtonType.LINK:
@@ -370,6 +374,7 @@ export class MarkdownTextTransformer {
 export enum MarkdownButtonType {
 	BOLD,
 	ITALIC,
+	UNDERLINE,
 	CODE,
 	HIGHLIGHT,
 	LINK,
--- a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts
@@ -31,7 +31,8 @@ import * as notebookUtils from 'sql/workbench/services/notebook/browser/models/n
 import { Deferred } from 'sql/base/common/promise';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
-import { KernelsDropdown, AttachToDropdown, AddCellAction, TrustedAction, RunAllCellsAction, ClearAllOutputsAction, CollapseCellsAction } from 'sql/workbench/contrib/notebook/browser/notebookActions';
+import { AddCellAction, KernelsDropdown, AttachToDropdown, TrustedAction, RunAllCellsAction, ClearAllOutputsAction, CollapseCellsAction } from 'sql/workbench/contrib/notebook/browser/notebookActions';
+import { DropdownMenuActionViewItem } from 'sql/base/browser/ui/buttonMenu/buttonMenu';
 import { ISingleNotebookEditOperation } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IConnectionDialogService } from 'sql/workbench/services/connection/common/connectionDialogService';
 import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
@@ -56,6 +57,7 @@ import { NotebookInput } from 'sql/workbench/contrib/notebook/browser/models/not
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';

 export const NOTEBOOK_SELECTOR: string = 'notebook-component';

@@ -83,6 +85,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 	private _scrollTop: number;
 	private _navProvider: INavigationProvider;
 	private navigationResult: nb.NavigationResult;
+	public previewFeaturesEnabled: boolean = false;

 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -103,11 +106,15 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		@Inject(ITextFileService) private textFileService: ITextFileService,
 		@Inject(ILogService) private readonly logService: ILogService,
 		@Inject(ICommandService) private commandService: ICommandService,
-		@Inject(IAdsTelemetryService) private adstelemetryService: IAdsTelemetryService
+		@Inject(IAdsTelemetryService) private adstelemetryService: IAdsTelemetryService,
+		@Inject(IConfigurationService) private _configurationService: IConfigurationService
 	) {
 		super();
 		this.updateProfile();
 		this.isLoading = true;
+		this._register(this._configurationService.onDidChangeConfiguration(e => {
+			this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
+		}));
 	}

 	private updateProfile(): void {
@@ -395,44 +402,114 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 	}

 	protected initActionBar(): void {
-		let kernelContainer = document.createElement('div');
-		let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
-		kernelDropdown.render(kernelContainer);
-		attachSelectBoxStyler(kernelDropdown, this.themeService);
+		this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');

-		let attachToContainer = document.createElement('div');
-		let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
-			this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService);
-		attachToDropdown.render(attachToContainer);
-		attachSelectBoxStyler(attachToDropdown, this.themeService);
+		if (this.previewFeaturesEnabled) {
+			let kernelContainer = document.createElement('li');
+			let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
+			kernelDropdown.render(kernelContainer);
+			attachSelectBoxStyler(kernelDropdown, this.themeService);

-		let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('code', "Code"), 'notebook-button icon-add');
-		addCodeCellButton.cellType = CellTypes.Code;
+			let attachToContainer = document.createElement('li');
+			let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
+				this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService);
+			attachToDropdown.render(attachToContainer);
+			attachSelectBoxStyler(attachToDropdown, this.themeService);

-		let addTextCellButton = new AddCellAction('notebook.AddTextCell', localize('text', "Text"), 'notebook-button icon-add');
-		addTextCellButton.cellType = CellTypes.Markdown;
+			let spacerElement = document.createElement('li');
+			spacerElement.style.marginLeft = 'auto';

-		this._runAllCellsAction = this.instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAll', "Run Cells"), 'notebook-button icon-run-cells');
-		let clearResultsButton = new ClearAllOutputsAction('notebook.ClearAllOutputs', localize('clearResults', "Clear Results"), 'notebook-button icon-clear-results');
+			let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('codePreview', "Code cell"), 'notebook-button masked-pseudo code');
+			addCodeCellButton.cellType = CellTypes.Code;

-		this._trustedAction = this.instantiationService.createInstance(TrustedAction, 'notebook.Trusted');
-		this._trustedAction.enabled = false;
+			let addTextCellButton = new AddCellAction('notebook.AddTextCell', localize('textPreview', "Markdown cell"), 'notebook-button masked-pseudo markdown');
+			addTextCellButton.cellType = CellTypes.Markdown;

-		let collapseCellsAction = this.instantiationService.createInstance(CollapseCellsAction, 'notebook.collapseCells');

-		let taskbar = <HTMLElement>this.toolbar.nativeElement;
-		this._actionBar = new Taskbar(taskbar, { actionViewItemProvider: action => this.actionItemProvider(action as Action) });
-		this._actionBar.context = this;
-		this._actionBar.setContent([
-			{ action: addCodeCellButton },
-			{ action: addTextCellButton },
-			{ element: kernelContainer },
-			{ element: attachToContainer },
-			{ action: this._trustedAction },
-			{ action: this._runAllCellsAction },
-			{ action: clearResultsButton },
-			{ action: collapseCellsAction }
-		]);
+			this._runAllCellsAction = this.instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAllPreview', "Run all"), 'notebook-button masked-pseudo start-outline');
+
+			let collapseCellsAction = this.instantiationService.createInstance(CollapseCellsAction, 'notebook.collapseCells', true);
+
+			let clearResultsButton = new ClearAllOutputsAction('notebook.ClearAllOutputs', true);
+
+			this._trustedAction = this.instantiationService.createInstance(TrustedAction, 'notebook.Trusted', true);
+			this._trustedAction.enabled = false;
+
+			let taskbar = <HTMLElement>this.toolbar.nativeElement;
+			this._actionBar = new Taskbar(taskbar, { actionViewItemProvider: action => this.actionItemProvider(action as Action) });
+			this._actionBar.context = this;
+			taskbar.classList.add('in-preview');
+
+			let buttonDropdownContainer = DOM.$('li.action-item');
+			buttonDropdownContainer.setAttribute('role', 'presentation');
+			let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
+				addCodeCellButton,
+				[addCodeCellButton, addTextCellButton],
+				this.contextMenuService,
+				undefined,
+				this._actionBar.actionRunner,
+				undefined,
+				'codicon notebook-button masked-pseudo masked-pseudo-after add-new dropdown-arrow',
+				localize('addCell', "Cell"),
+				undefined
+			);
+			dropdownMenuActionViewItem.render(buttonDropdownContainer);
+			dropdownMenuActionViewItem.setActionContext(this);
+
+			this._actionBar.setContent([
+				{ element: buttonDropdownContainer },
+				{ action: this._runAllCellsAction },
+				{ element: Taskbar.createTaskbarSeparator() },
+				{ element: attachToContainer },
+				{ element: kernelContainer },
+				{ element: spacerElement },
+				{ action: collapseCellsAction },
+				{ action: clearResultsButton },
+				{ action: this._trustedAction },
+			]);
+		} else {
+			let kernelContainer = document.createElement('div');
+			let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
+			kernelDropdown.render(kernelContainer);
+			attachSelectBoxStyler(kernelDropdown, this.themeService);
+
+			let attachToContainer = document.createElement('div');
+			let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
+				this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService);
+			attachToDropdown.render(attachToContainer);
+			attachSelectBoxStyler(attachToDropdown, this.themeService);
+
+			let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('code', "Code"), 'notebook-button icon-add');
+			addCodeCellButton.cellType = CellTypes.Code;
+
+			let addTextCellButton = new AddCellAction('notebook.AddTextCell', localize('text', "Text"), 'notebook-button icon-add');
+			addTextCellButton.cellType = CellTypes.Markdown;
+
+			this._runAllCellsAction = this.instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAll', "Run Cells"), 'notebook-button icon-run-cells');
+
+			let clearResultsButton = new ClearAllOutputsAction('notebook.ClearAllOutputs', false);
+
+			this._trustedAction = this.instantiationService.createInstance(TrustedAction, 'notebook.Trusted', false);
+			this._trustedAction.enabled = false;
+
+			let collapseCellsAction = this.instantiationService.createInstance(CollapseCellsAction, 'notebook.collapseCells', false);
+
+			let taskbar = <HTMLElement>this.toolbar.nativeElement;
+			this._actionBar = new Taskbar(taskbar, { actionViewItemProvider: action => this.actionItemProvider(action as Action) });
+			this._actionBar.context = this;
+
+			this._actionBar.setContent([
+				{ action: addCodeCellButton },
+				{ action: addTextCellButton },
+				{ element: kernelContainer },
+				{ element: attachToContainer },
+				{ action: this._trustedAction },
+				{ action: this._runAllCellsAction },
+				{ action: clearResultsButton },
+				{ action: collapseCellsAction }
+			]);
+		}
+
 	}

 	protected initNavSection(): void {
@@ -478,7 +555,12 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		// Check extensions to create ActionItem; otherwise, return undefined
 		// This is similar behavior that exists in MenuItemActionItem
 		if (action instanceof MenuItemAction) {
-			return new LabeledMenuItemActionItem(action, this.keybindingService, this.contextMenuService, this.notificationService, 'notebook-button');
+
+			if (action.item.id.includes('jupyter.cmd') && this.previewFeaturesEnabled) {
+				action.tooltip = action.label;
+				action.label = '';
+			}
+			return new LabeledMenuItemActionItem(action, this.keybindingService, this.contextMenuService, this.notificationService, 'notebook-button fixed-width');
 		}
 		return undefined;
 	}
--- a/src/sql/workbench/contrib/notebook/browser/notebook.css
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.css
@@ -6,6 +6,10 @@
 	margin-top: 5px;
 }

+.notebookEditor .taskbarSeparator {
+	margin: 0 16px 0 -8px;
+}
+
 .notebookEditor .editor-toolbar {
 	border-bottom-style: solid;
 	border-width: 0px 0px 1px 0px;
@@ -44,6 +48,52 @@
 	font-size: 13px;
 	height: 21px;
 }
+.notebookEditor .in-preview .actions-container .action-item .notebook-button {
+	display: flex;
+	background-size: 16px;
+}
+
+.notebookEditor
+	.in-preview
+	.actions-container
+	.action-item
+	.notebook-button.masked-pseudo {
+	padding-left: 30px;
+}
+.notebookEditor
+	.in-preview
+	.actions-container
+	.action-item
+	.notebook-button.masked-icon {
+	margin-right: 0;
+	padding-left: 18px;
+	width: 16px;
+}
+.notebookEditor .in-preview .actions-container .action-item:last-child {
+	margin-right: 8px;
+}
+.notebookEditor
+	.in-preview
+	.actions-container
+	.action-item:last-child
+	.notebook-button {
+	margin-right: 0;
+}
+.notebookEditor
+	.in-preview
+	.actions-container
+	.action-item:last-child
+	.notebook-button.fixed-width {
+	margin-left: 8px;
+	margin-right: -28px;
+}
+.notebookEditor
+	.in-preview
+	.actions-container
+	.action-item
+	.notebook-button.fixed-width {
+	width: 34px;
+}

 .notebookEditor .labelOnLeftContainer {
 	min-width: 100px;
@@ -54,68 +104,89 @@
 	vertical-align: bottom;
 }

-.notebookEditor .notebook-button.icon-add {
+.notebookEditor .in-preview .labelOnLeftContainer {
+	margin-right: 14px;
+}
+
+/* non-preview */
+.notebookEditor :not(.in-preview) .notebook-button.icon-add {
 	background-image: url("./media/light/add.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-add,
-.hc-black .notebookEditor .notebook-button.icon-add {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-add,
+.hc-black .notebookEditor :not(.in-preview) .notebook-button.icon-add {
 	background-image: url("./media/dark/add_inverse.svg");
 }

-.notebookEditor .notebook-button.icon-run-cells {
+.notebookEditor :not(.in-preview) .notebook-button.icon-run-cells {
 	background-image: url("./media/light/run_cells.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-run-cells,
-.hc-black .notebookEditor .notebook-button.icon-run-cells {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-run-cells,
+.hc-black .notebookEditor :not(.in-preview) .notebook-button.icon-run-cells {
 	background-image: url("./media/dark/run_cells_inverse.svg");
 }

-.notebookEditor .notebook-button.icon-trusted {
+.notebookEditor :not(.in-preview) .notebook-button.icon-trusted {
 	background-image: url("./media/light/trusted.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-trusted,
-.hc-black .notebookEditor .notebook-button.icon-trusted {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-trusted,
+.hc-black .notebookEditor :not(.in-preview) .notebook-button.icon-trusted {
 	background-image: url("./media/dark/trusted_inverse.svg");
 }
-
-.notebookEditor .notebook-button.icon-notTrusted {
+.notebookEditor :not(.in-preview) .notebook-button.icon-notTrusted {
 	background-image: url("./media/light/nottrusted.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-notTrusted,
-.hc-black .notebookEditor .notebook-button.icon-notTrusted {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-notTrusted,
+.hc-black .notebookEditor :not(.in-preview) .notebook-button.icon-notTrusted {
 	background-image: url("./media/dark/nottrusted_inverse.svg");
 }

-.notebookEditor .notebook-button.icon-show-cells {
+.notebookEditor :not(.in-preview) .notebook-button.icon-show-cells {
 	background-image: url("./media/light/show_code.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-show-cells,
-.hc-black .notebookEditor .notebook-button.icon-show-cells {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-show-cells,
+.hc-black .notebookEditor :not(.in-preview) .notebook-button.icon-show-cells {
 	background-image: url("./media/dark/show_code_inverse.svg");
 }

-.notebookEditor .notebook-button.icon-hide-cells {
+.notebookEditor :not(.in-preview) .notebook-button.icon-hide-cells {
 	background-image: url("./media/light/hide_code.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-hide-cells,
-.hc-black .notebookEditor .notebook-button.icon-hide-cells {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-hide-cells,
+.hc-black .notebookEditor :not(.in-preview) .notebook-button.icon-hide-cells {
 	background-image: url("./media/dark/hide_code_inverse.svg");
 }

-.notebookEditor .notebook-button.icon-clear-results {
+.notebookEditor :not(.in-preview) .notebook-button.icon-clear-results {
 	background-image: url("./media/light/clear_results.svg");
 }

-.vs-dark .notebookEditor .notebook-button.icon-clear-results,
-.hc-black .notebookEditor .notebook-button.icon-clear-results {
+.vs-dark .notebookEditor :not(.in-preview) .notebook-button.icon-clear-results,
+.hc-black
+	.notebookEditor
+	:not(.in-preview)
+	.notebook-button.icon-clear-results {
 	background-image: url("./media/dark/clear_results_inverse.svg");
 }
+/* non-preview */
+
+.notebookEditor .in-preview .carbon-taskbar.monaco-toolbar .monaco-select-box {
+	font-size: inherit;
+	border-radius: 0;
+	padding: 3px 22px 3px 6px;
+}
+.notebookEditor .in-preview .carbon-taskbar .action-item {
+	margin-right: 0;
+}
+.notebookEditor .in-preview .labelOnLeftContainer {
+	display: flex;
+	align-items: center;
+}

 .moreActions .action-label.codicon.toggle-more {
 	height: 20px;
@@ -123,7 +194,7 @@
 }

 .moreActions.actionhidden {
-	visibility: hidden
+	visibility: hidden;
 }
 .moreActions .monaco-action-bar {
 	margin-left: -12px;
@@ -144,12 +215,13 @@
 }

 .monaco-workbench .notebook-action.new-notebook {
-	background: url('./media/light/new_notebook.svg') center center no-repeat;
+	background: url("./media/light/new_notebook.svg") center center no-repeat;
 }

 .vs-dark .monaco-workbench .notebook-action.new-notebook,
 .hc-black .monaco-workbench .notebook-action.new-notebook {
-	background: url('./media/dark/new_notebook_inverse.svg') center center no-repeat;
+	background: url("./media/dark/new_notebook_inverse.svg") center center
+		no-repeat;
 }

 .notebookEditor .book-nav {
@@ -209,7 +281,7 @@
 }

 .notebookEditor .hoverButton:active {
-	transform:scale(1.05);
+	transform: scale(1.05);
 }

 .notebookEditor .hoverButton .addCodeIcon,
--- a/src/sql/workbench/contrib/notebook/browser/notebookActions.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookActions.ts
@@ -31,8 +31,8 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur

 const msgLoading = localize('loading', "Loading kernels...");
 const msgChanging = localize('changing', "Changing kernel...");
-const kernelLabel: string = localize('Kernel', "Kernel: ");
-const attachToLabel: string = localize('AttachTo', "Attach To: ");
+const attachToLabel: string = localize('AttachTo', "Attach to ");
+const kernelLabel: string = localize('Kernel', "Kernel ");
 const msgLoadingContexts = localize('loadingContexts', "Loading contexts...");
 const msgChangeConnection = localize('changeConnection', "Change Connection");
 const msgSelectConnection = localize('selectConnection', "Select Connection");
@@ -64,13 +64,50 @@ export class AddCellAction extends Action {
 	}
 }

-// Action to clear outputs of all code cells.
-export class ClearAllOutputsAction extends Action {
-	constructor(
-		id: string, label: string, cssClass: string
-	) {
-		super(id, label, cssClass);
+export interface ITooltipState {
+	label: string;
+	baseClass: string;
+	iconClass: string;
+	maskedIconClass: string;
+	shouldToggleTooltip?: boolean;
+}
+export abstract class TooltipFromLabelAction extends Action {
+
+	constructor(id: string, protected state: ITooltipState) {
+		super(id, '');
+		this.updateLabelAndIcon();
 	}
+
+	private updateLabelAndIcon() {
+		if (this.state.shouldToggleTooltip) {
+			this.tooltip = this.state.label;
+		} else {
+			this.label = this.state.label;
+		}
+		let classes = this.state.baseClass ? `${this.state.baseClass} ${this.state.iconClass} ` : '';
+		if (this.state.shouldToggleTooltip) {
+			classes += this.state.maskedIconClass;
+		}
+		this.class = classes;
+	}
+}
+// Action to clear outputs of all code cells.
+export class ClearAllOutputsAction extends TooltipFromLabelAction {
+	private static readonly label = localize('clearResults', "Clear Results");
+	private static readonly baseClass = 'notebook-button';
+	private static readonly iconClass = 'icon-clear-results';
+	private static readonly maskedIconClass = 'masked-icon';
+
+	constructor(id: string, toggleTooltip: boolean) {
+		super(id, {
+			label: ClearAllOutputsAction.label,
+			baseClass: ClearAllOutputsAction.baseClass,
+			iconClass: ClearAllOutputsAction.iconClass,
+			maskedIconClass: ClearAllOutputsAction.maskedIconClass,
+			shouldToggleTooltip: toggleTooltip
+		});
+	}
+
 	public run(context: INotebookEditor): Promise<boolean> {
 		return context.clearAllOutputs();
 	}
@@ -83,6 +120,7 @@ export interface IToggleableState {
 	toggleOnLabel: string;
 	toggleOffLabel: string;
 	toggleOffClass: string;
+	maskedIconClass?: string;
 	isOn: boolean;
 }

@@ -99,7 +137,16 @@ export abstract class ToggleableAction extends Action {
 		} else {
 			this.label = this.state.isOn ? this.state.toggleOnLabel : this.state.toggleOffLabel;
 		}
-		let classes = this.state.baseClass ? `${this.state.baseClass} ` : '';
+
+		let classes: string = '';
+
+		if (this.state.shouldToggleTooltip && this.state.maskedIconClass) {
+			//mask
+			classes = this.state.baseClass ? `${this.state.baseClass} ${this.state.maskedIconClass} ` : '';
+		} else {
+			//no mask
+			classes = this.state.baseClass ? `${this.state.baseClass} ` : '';
+		}
 		classes += this.state.isOn ? this.state.toggleOnClass : this.state.toggleOffClass;
 		this.class = classes;
 	}
@@ -115,20 +162,23 @@ export class TrustedAction extends ToggleableAction {
 	private static readonly trustedLabel = localize('trustLabel', "Trusted");
 	private static readonly notTrustedLabel = localize('untrustLabel', "Not Trusted");
 	private static readonly baseClass = 'notebook-button';
+	private static readonly previewTrustedCssClass = 'icon-shield';
 	private static readonly trustedCssClass = 'icon-trusted';
+	private static readonly previewNotTrustedCssClass = 'icon-shield-x';
 	private static readonly notTrustedCssClass = 'icon-notTrusted';
-
-	// Properties
+	private static readonly maskedIconClass = 'masked-icon';

 	constructor(
-		id: string
+		id: string, toggleTooltip: boolean
 	) {
 		super(id, {
 			baseClass: TrustedAction.baseClass,
 			toggleOnLabel: TrustedAction.trustedLabel,
-			toggleOnClass: TrustedAction.trustedCssClass,
+			toggleOnClass: toggleTooltip === true ? TrustedAction.previewTrustedCssClass : TrustedAction.trustedCssClass,
 			toggleOffLabel: TrustedAction.notTrustedLabel,
-			toggleOffClass: TrustedAction.notTrustedCssClass,
+			toggleOffClass: toggleTooltip === true ? TrustedAction.previewNotTrustedCssClass : TrustedAction.notTrustedCssClass,
+			maskedIconClass: TrustedAction.maskedIconClass,
+			shouldToggleTooltip: toggleTooltip,
 			isOn: false
 		});
 	}
@@ -177,16 +227,21 @@ export class CollapseCellsAction extends ToggleableAction {
 	private static readonly collapseCells = localize('collapseAllCells', "Collapse Cells");
 	private static readonly expandCells = localize('expandAllCells', "Expand Cells");
 	private static readonly baseClass = 'notebook-button';
+	private static readonly previewCollapseCssClass = 'icon-collapse-cells';
 	private static readonly collapseCssClass = 'icon-hide-cells';
+	private static readonly previewExpandCssClass = 'icon-expand-cells';
 	private static readonly expandCssClass = 'icon-show-cells';
+	private static readonly maskedIconClass = 'masked-icon';

-	constructor(id: string) {
+	constructor(id: string, toggleTooltip: boolean) {
 		super(id, {
 			baseClass: CollapseCellsAction.baseClass,
 			toggleOnLabel: CollapseCellsAction.expandCells,
-			toggleOnClass: CollapseCellsAction.expandCssClass,
+			toggleOnClass: toggleTooltip === true ? CollapseCellsAction.previewExpandCssClass : CollapseCellsAction.expandCssClass,
 			toggleOffLabel: CollapseCellsAction.collapseCells,
-			toggleOffClass: CollapseCellsAction.collapseCssClass,
+			toggleOffClass: toggleTooltip === true ? CollapseCellsAction.previewCollapseCssClass : CollapseCellsAction.collapseCssClass,
+			maskedIconClass: CollapseCellsAction.maskedIconClass,
+			shouldToggleTooltip: toggleTooltip,
 			isOn: false
 		});
 	}
--- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
@@ -8,7 +8,7 @@ import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/
 import { SIDE_BAR_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme';
 import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground, editorBackground, lighten } from 'vs/platform/theme/common/colorRegistry';
 import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry';
-import { cellBorder, markdownEditorBackground, splitBorder, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder } from 'sql/platform/theme/common/colorRegistry';
+import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, splitBorder, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder } from 'sql/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { BareResultsGridInfo, getBareResultsGridInfoStyles } from 'sql/workbench/contrib/query/browser/queryResultsEditor';
@@ -207,6 +207,25 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 			${getBareResultsGridInfoStyles(rawOptions)}
 		}`);

+		//Notebook toolbar masked icons
+		const notebookToolbarIconColor = theme.getColor(notebookToolbarIcon);
+		if (notebookToolbarIconColor) {
+			collector.addRule(`.notebookEditor .notebook-button.masked-icon { background-color: ${notebookToolbarIconColor};}`);
+			collector.addRule(`.notebookEditor .notebook-button.masked-pseudo:before { background-color: ${notebookToolbarIconColor};}`);
+		}
+		const notebookToolbarLinesColor = theme.getColor(notebookToolbarLines);
+		if (notebookToolbarLinesColor) {
+			collector.addRule(`.notebookEditor .editor-toolbar.actionbar-container { border-bottom-color: ${notebookToolbarLinesColor}!important;}`);
+			collector.addRule(`.notebookEditor .taskbarSeparator { background-color: ${notebookToolbarLinesColor};}`);
+		}
+		const dropdownArrowColor = theme.getColor(dropdownArrow);
+		if (dropdownArrowColor) {
+			collector.addRule(`.monaco-workbench .notebookEditor .select-container:after { color: ${dropdownArrowColor};}`);
+		}
+		const buttonMenuArrowColor = theme.getColor(buttonMenuArrow);
+		if (buttonMenuArrowColor) {
+			collector.addRule(`.notebookEditor .notebook-button.masked-pseudo-after:after { background-color: ${buttonMenuArrowColor};}`);
+		}

 		// Cell border
 		const cellBorderColor = theme.getColor(cellBorder);
--- a/src/sql/workbench/contrib/notebook/test/browser/notebookActions.test.ts
+++ b/src/sql/workbench/contrib/notebook/test/browser/notebookActions.test.ts
@@ -40,7 +40,7 @@ suite('Notebook Actions', function (): void {
 	});

 	test('Clear All Outputs Action', async function (): Promise<void> {
-		let action = new ClearAllOutputsAction('TestId', 'TestLabel', 'TestClass');
+		let action = new ClearAllOutputsAction('TestId', true);

 		// Normal use case
 		let mockNotebookComponent = TypeMoq.Mock.ofType<INotebookEditor>(NotebookComponentStub);
@@ -63,7 +63,7 @@ suite('Notebook Actions', function (): void {
 		let mockNotification = TypeMoq.Mock.ofType<INotificationService>(TestNotificationService);
 		mockNotification.setup(n => n.notify(TypeMoq.It.isAny()));

-		let action = new TrustedAction('TestId');
+		let action = new TrustedAction('TestId', true);
 		assert.strictEqual(action.trusted, false, 'Should not be trusted by default');

 		// Normal use case
@@ -105,7 +105,7 @@ suite('Notebook Actions', function (): void {
 	});

 	test('Collapse Cells Action', async function (): Promise<void> {
-		let action = new CollapseCellsAction('TestId');
+		let action = new CollapseCellsAction('TestId', true);
 		assert.strictEqual(action.isCollapsed, false, 'Should not be collapsed by default');

 		let context = <INotebookEditor>{