10712, 10677 - Fixed focus indicators for both main toolbar and cell … (#10756)

* 10712, 10677 - Fixed focus indicators for both main toolbar and cell toolbar.

* Removed duplicated line

src/sql/base/browser/ui/buttonMenu/buttonMenu.css

@@ -8,6 +8,6 @@
 	padding: 0;
 }
 .button-menu.masked-pseudo-after.dropdown-arrow:after {
-	right: -2px;
+	right: 0;
 	width: 20px;
 }

src/sql/media/icons/common-icons.css

@@ -310,8 +310,10 @@
 
 /* Icons as masked elements for easy theme switching.
 Includes non-masked style declarations. */
-.masked-icon {
-	display: inline-block;
+.masked-icon:before {
+	content: "";
+	display: block;
+	position: absolute;
 	height: 20px;
 	width: 20px;
 	-webkit-mask-position: center;
@@ -378,7 +380,7 @@ Includes non-masked style declarations. */
 .codicon:not(.masked-icon).icon-expand-cells {
 	background-image: url("action-expand.svg");
 }
-.codicon.masked-icon.icon-expand-cells {
+.codicon.masked-icon.icon-expand-cells:before {
 	background-image: none;
 	-webkit-mask-image: url("action-expand.svg");
 	mask-image: url("action-expand.svg");
@@ -387,7 +389,7 @@ Includes non-masked style declarations. */
 .codicon:not(.masked-icon).icon-collapse-cells {
 	background-image: url("action-collapse.svg");
 }
-.codicon.masked-icon.icon-collapse-cells {
+.codicon.masked-icon.icon-collapse-cells:before {
 	-webkit-mask-image: url("action-collapse.svg");
 	mask-image: url("action-collapse.svg");
 }
@@ -395,7 +397,7 @@ Includes non-masked style declarations. */
 .codicon:not(.masked-icon).icon-clear-results {
 	background-image: url("clear.svg");
 }
-.codicon.masked-icon.icon-clear-results {
+.codicon.masked-icon.icon-clear-results:before {
 	-webkit-mask-image: url("clear.svg");
 	mask-image: url("clear.svg");
 }
@@ -403,7 +405,7 @@ Includes non-masked style declarations. */
 .codicon:not(.masked-icon).icon-shield {
 	background-image: url("shield.svg");
 }
-.codicon.masked-icon.icon-shield {
+.codicon.masked-icon.icon-shield:before {
 	-webkit-mask-image: url("shield.svg");
 	mask-image: url("shield.svg");
 }
@@ -411,7 +413,7 @@ Includes non-masked style declarations. */
 .codicon:not(.masked-icon).icon-shield-x {
 	background-image: url("shield-x.svg");
 }
-.codicon.masked-icon.icon-shield-x {
+.codicon.masked-icon.icon-shield-x:before {
 	-webkit-mask-image: url("shield-x.svg");
 	mask-image: url("shield-x.svg");
 }
@@ -419,7 +421,7 @@ Includes non-masked style declarations. */
 .codicon:not(.masked-icon).packages {
 	background-image: url("packages.svg");
 }
-.codicon.masked-icon.packages {
+.codicon.masked-icon.packages:before {
 	background-image: none;
 	-webkit-mask-image: url("packages.svg");
 	mask-image: url("packages.svg");
@@ -504,17 +506,17 @@ Includes non-masked style declarations. */
 	mask-image: url("markdown.svg");
 }
 
-.codicon.masked-icon.new {
+.codicon.masked-icon.new:before {
 	background-image: none;
 	-webkit-mask-image: url('new.svg');
 	mask-image: url('new.svg');
 }
-.codicon.masked-icon.close {
+.codicon.masked-icon.close:before {
 	background-image: none;
 	-webkit-mask-image: url('close-blue.svg');
 	mask-image: url('close-blue.svg');
 }
-.codicon.masked-icon.edit {
+.codicon.masked-icon.edit:before {
 	background-image: none;
 	-webkit-mask-image: url('edit.svg');
 	mask-image: url('edit.svg');
@@ -530,12 +532,12 @@ Includes non-masked style declarations. */
 	-webkit-mask-image: url('down-arrow-blue.svg');
 	mask-image: url('down-arrow-blue.svg');
 }
-.codicon.masked-icon.delete {
+.codicon.masked-icon.delete:before {
 	background-image: none;
 	-webkit-mask-image: url('garbage-can-blue.svg');
 	mask-image: url('garbage-can-blue.svg');
 }
-.codicon.masked-icon.more {
+.codicon.masked-icon.more:before {
 	background-image: none;
 	-webkit-mask-image: url('ellipsis-blue.svg');
 	mask-image: url('ellipsis-blue.svg');
@@ -546,7 +548,6 @@ Includes non-masked style declarations. */
 }
 
 .book.codicon {
-
 	-webkit-mask-image: url("book_image.svg");
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position: 50% 50%;

src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component.ts

@@ -56,6 +56,9 @@ export class CellToolbarComponent {
 		this._actionBar = new Taskbar(taskbar);
 		this._actionBar.context = context;
 
+		let addCellsButton = new AddCellAction('notebook.AddCodeCell', localize('codeCellsPreview', "Add cell"), 'notebook-button masked-pseudo code');
+		addCellsButton.cellType = CellTypes.Code;
+
 		let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('codePreview', "Code cell"), 'notebook-button masked-pseudo code');
 		addCodeCellButton.cellType = CellTypes.Code;
 
@@ -74,14 +77,14 @@ export class CellToolbarComponent {
 		let buttonDropdownContainer = DOM.$('li.action-item');
 		buttonDropdownContainer.setAttribute('role', 'presentation');
 		let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
-			addCodeCellButton,
+			addCellsButton,
 			[addCodeCellButton, addTextCellButton],
 			this.contextMenuService,
 			undefined,
 			this._actionBar.actionRunner,
 			undefined,
 			'codicon masked-icon new',
-			localize('addCell', "Cell"),
+			'',
 			undefined
 		);
 		dropdownMenuActionViewItem.render(buttonDropdownContainer);

src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css

@@ -39,6 +39,15 @@ cell-toolbar-component .monaco-action-bar .action-label {
 }
 cell-toolbar-component ul.actions-container li a.masked-icon {
 	display: flex;
+}
+cell-toolbar-component ul.actions-container li a.masked-icon,
+cell-toolbar-component ul.actions-container li a.masked-icon:before {
 	height: 24px;
 	width: 29px;
 }
+cell-toolbar-component .codicon.masked-icon,
+.vs cell-toolbar-component .codicon.masked-icon,
+.vs-dark cell-toolbar-component .codicon.masked-icon,
+.hc-black cell-toolbar-component .codicon.masked-icon {
+	background-image: none;
+}

src/sql/workbench/contrib/notebook/browser/notebook.css

@@ -37,21 +37,23 @@
 	min-height: 21px;
 }
 
-.notebookEditor .actions-container .action-item .notebook-button {
+.notebookEditor .editor-toolbar .actions-container .action-item .notebook-button {
 	display: inline-block;
-	width: 100%;
-	padding: 0px;
 	text-align: center;
 	cursor: pointer;
-	padding-left: 18px;
+	padding: 0 18px;
 	background-size: 13px;
-	margin-right: 20px;
 	font-size: 13px;
 	height: 21px;
 }
-.notebookEditor .in-preview .actions-container .action-item .notebook-button {
+.notebookEditor .editor-toolbar .actions-container .action-item .notebook-button.masked-icon {
+	padding: 0;
+	width: 28px;
+}
+
+.notebookEditor .in-preview .actions-container .action-item .notebook-button,
+.notebookEditor .in-preview .actions-container .action-item .notebook-button:before {
 	display: flex;
-	background-size: 16px;
 	height: 100%;
 }
 
@@ -66,7 +68,7 @@
 	.in-preview
 	.actions-container
 	.action-item
-	.notebook-button.masked-icon {
+	.notebook-button.masked-icon:before {
 	margin-right: 0;
 	padding-left: 18px;
 	width: 16px;
@@ -175,6 +177,10 @@
 	.notebook-button.icon-clear-results {
 	background-image: url("./media/dark/clear_results_inverse.svg");
 }
+
+.notebookEditor .in-preview .notebook-button.masked-icon {
+	background-image: none;
+}
 /* non-preview */
 
 .notebookEditor .in-preview .carbon-taskbar.monaco-toolbar .monaco-select-box {

src/sql/workbench/contrib/notebook/browser/notebookStyles.ts

@@ -150,7 +150,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		//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-icon:before { background-color: ${notebookToolbarIconColor};}`);
 			collector.addRule(`.notebookEditor .notebook-button.masked-pseudo:before { background-color: ${notebookToolbarIconColor};}`);
 		}
 		const notebookToolbarLinesColor = theme.getColor(notebookToolbarLines);
@@ -172,7 +172,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		if (cellBorderColor) {
 			collector.addRule(`.notebookEditor .notebook-cell.active { border-color: ${cellBorderColor};}`);
 			collector.addRule(`.notebookEditor .notebook-cell.active cell-toolbar-component { border-color: ${cellBorderColor};}`);
-			collector.addRule(`.notebookEditor .notebook-cell.active cell-toolbar-component .codicon { background-color: ${cellBorderColor};}`);
+			collector.addRule(`.notebookEditor .notebook-cell.active cell-toolbar-component .codicon:before { background-color: ${cellBorderColor};}`);
 		}
 		// Cell toolbar background
 		const notebookToolbarSelectBackgroundColor = theme.getColor(notebookToolbarSelectBackground);