fixes the contrast ratio for hoverable list items in the welcome page new button dropdown (#11106)

* fixes button alignment and missing icons issues with ads welcome page

* removes dead code, registers new Button

* creates one button component and adds proper attributes depending on platform

* Add CodeQL Analysis workflow (#10195)

* Add CodeQL Analysis workflow

* Fix path

* adds return types to functions

* fixes show all extensions command

* updates dropdown color themes

* adjusts colors from color registry

Co-authored-by: Justin Hutchings <jhutchings1@users.noreply.github.com>

src/sql/platform/theme/common/colorRegistry.ts

@@ -26,6 +26,7 @@ export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { l
 export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { light: null, dark: null, hc: null }, nls.localize('button.secondaryBackground', "The background color for the secondary button"));
 export const buttonSecondary = registerColor('button.secondaryForeground', { light: '#323130', dark: '#fff', hc: '#fff' }, nls.localize('button.secondaryForeground', "The font color for secondary button"));
 export const buttonSecondaryHoverColor = registerColor('button.secondaryHoverForeground', { light: '#0078D4', dark: '#3794ff', hc: '#3794ff' }, nls.localize('button.secondaryHoverForeground', "The hover color for secondary buttons"));
+export const buttonSecondaryHoverBorder = registerColor('button.buttonSecondaryHoverBorder', { light: '#0078D4', dark: '#3794ff', hc: '#3794ff' }, nls.localize('button.buttonSecondaryHoverBorder', "The hover border color for secondary buttons"));
 export const buttonDropdownBackgroundHover = registerColor('buttonDropdownBackgroundHover', { light: '#3062d6', dark: '#3062d6', hc: '#3062d6' }, nls.localize('buttonDropdownBackgroundHover', "The button dropdown background hover color"));
 export const disabledButton = registerColor('button.disabledForeground', { light: '#A19F9D', dark: '#797775', hc: '#797775' }, nls.localize('button.disabledForeground', "The color for a secondary disabled button"));
 export const disabledButtonBackground = registerColor('button.disabledBackground', { light: '#F3F2F1', dark: '#252423', hc: '#252423' }, nls.localize('button.disabledBackground', "The background color for secondary disabled button"));

src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts

@@ -165,6 +165,7 @@ export default () => `
 				<div class="flex flex-j-between">
 					<h2>Extend your data studio</h2>
 					<a class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
+					<a class="link-show-all flex" href="command:workbench.view.extensions">${escape(localize('welcomePage.showAll', "Show All"))} <span class="icon-arrow-right"></span></a>
 				</div>
 				<div class="row ads-grid grip-gap-50">
 					<div

src/sql/workbench/contrib/welcome/page/browser/welcomePage.css

@@ -162,8 +162,8 @@
 	line-height: 1.6em
 }
 
-.ads-homepage .btn-primary {
+.btn-primary .monaco-button, .btn-secondary .monaco-button {
-	border: 1px solid
+	height: 28px;
 }
 
 .ads-homepage .btn-primary:hover {
@@ -402,28 +402,13 @@
 	mask-size: 12px 12px
 }
 
-.ads-homepage .icon-arrow-down {
+.ads_homepage .codicon-chevron-right {
-	position: relative;
+	transform: rotate(90deg);
-	height: 20px;
-	width: 18px;
-	display: inline-block
 }
 
-.ads-homepage .icon-arrow-down:before {
+.ads_homepage .monaco-text-button {
-	position: absolute;
+	min-width: 77px;
-	font: normal normal normal 16px/1 codicon;
+	margin: 10px 0;
-	text-decoration: none;
-	text-rendering: auto;
-	text-align: center;
-	-webkit-font-smoothing: antialiased;
-	display: inline-block;
-	width: 11px;
-	height: 6px;
-	content: "";
-	transform: rotate(90deg);
-	top: -1px;
-	bottom: 5px;
-	margin: auto
 }
 
 .ads-homepage .codicon-chevron-right {

src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts

@@ -29,8 +29,8 @@ import { ILifecycleService, StartupKind } from 'vs/platform/lifecycle/common/lif
 import { Disposable } from 'vs/base/common/lifecycle';
 import { splitName } from 'vs/base/common/labels';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { buttonSecondaryBackground, buttonSecondaryBorder, buttonSecondary, buttonSecondaryHoverColor, tileBorder, disabledButton, disabledButtonBackground, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, buttonDropdownBackgroundHover, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
+import { buttonSecondaryBackground, buttonSecondaryBorder, buttonSecondary, buttonSecondaryHoverColor, tileBorder, disabledButton, disabledButtonBackground, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
-import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonBackground, buttonForeground, menuBorder, menuForeground, menuSelectionForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonForeground, menuBorder, menuForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder, listFocusBackground, listFocusForeground } from 'vs/platform/theme/common/colorRegistry';
 import { IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions';
 import { IEditorInputFactory, EditorInput } from 'vs/workbench/common/editor';
 import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
@@ -67,8 +67,7 @@ export class WelcomePageContribution implements IWorkbenchContribution {
 		@IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
 		@ILifecycleService private readonly lifecycleService: ILifecycleService,
 		@ICommandService private readonly commandService: ICommandService,
-		@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService,
+		@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService) {
-	) {
 		this.enableWelcomePage().catch(onUnexpectedError);
 	}
 	private async enableWelcomePage(): Promise<void> {
@@ -229,8 +228,7 @@ class WelcomePage extends Disposable {
 		@IFileService fileService: IFileService,
 		@IProductService private readonly productService: IProductService,
 		@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService,
-		@ICommandService private readonly commandService: ICommandService,
+		@ICommandService private readonly commandService: ICommandService) {
-	) {
 		super();
 		this._register(lifecycleService.onShutdown(() => this.dispose()));
 		const recentlyOpened = this.workspacesService.getRecentlyOpened();
@@ -382,7 +380,7 @@ class WelcomePage extends Disposable {
 		nav.appendChild(dropdownUl);
 		dropdownButtonContainer.appendChild(nav);
 		const fileBtnWindowsClasses = ['windows-only', 'linux-only', 'btn-secondary'];
-		const fileBtnMacClasses = ['mac-only', 'btn-secondary'];
+		const fileBtnMacClasses = ['mac-only'];
 
 		const fileBtnContainer = container.querySelector('#open-file-btn-container') as HTMLElement;
 		const openFileText = openFileCopy;
@@ -430,9 +428,12 @@ class WelcomePage extends Disposable {
 		p.appendChild(b);
 		p.innerText = localize('WelcomePage.TakeATour', "Would you like to take a quick tour of Azure Data Studio?");
 		b.innerText = localize('WelcomePage.welcome', "Welcome!");
+
+
 		containerLeft.appendChild(icon);
 		containerLeft.appendChild(p);
 		containerRight.appendChild(removeTourBtn);
+
 		guidedTourNotificationContainer.appendChild(containerLeft);
 		guidedTourNotificationContainer.appendChild(containerRight);
 
@@ -651,7 +652,6 @@ class WelcomePage extends Disposable {
 		const icon = document.createElement('i');
 		const a = document.createElement('a');
 		const span = document.createElement('span');
-		const ul = container.querySelector('.list');
 		icon.title = relativePath;
 		a.innerText = name;
 		a.title = relativePath;
@@ -668,6 +668,7 @@ class WelcomePage extends Disposable {
 			e.stopPropagation();
 		});
 		icon.classList.add('themed-icon');
+
 		li.appendChild(icon);
 		li.appendChild(a);
 		span.classList.add('path');
@@ -675,6 +676,7 @@ class WelcomePage extends Disposable {
 		span.innerText = lastOpened;
 		span.title = relativePath;
 		li.appendChild(span);
+		const ul = container.querySelector('.list');
 		ul.appendChild(li);
 		result.push(li);
 		return result;
@@ -743,7 +745,7 @@ class WelcomePage extends Disposable {
 				const installText = localize('welcomePage.install', "Install");
 				let dropdownBtn = this._register(new Button(btnContainer));
 				dropdownBtn.label = installText;
-				const classes = ['btn', 'btn-secondary'];
+				const classes = ['btn'];
 				const getDropdownBtn = container.querySelector('.extensionPack .monaco-button:first-of-type') as HTMLAnchorElement;
 				getDropdownBtn.id = 'dropdown-btn';
 				getDropdownBtn.classList.add(...classes);
@@ -1020,16 +1022,12 @@ registerThemingParticipant((theme, collector) => {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text:after { border-color: transparent transparent ${tileBorderColor}; transparent }`);
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool-tip .tool-tip-text { border: 1px solid ${tileBorderColor};  }`);
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal-content { border: 1px solid ${tileBorderColor};  }`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .dropdown-content{ border: 1px solid ${tileBorderColor};  }`);
 	}
 	const tileBoxShadowColor = theme.getColor(tileBoxShadow);
 	if (tileBoxShadowColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .tile:not(.extension):not(.extension-pack) { box-shadow: 0px 1px 4px ${tileBoxShadowColor}; }`);
 	}
-	const buttonPrimaryBackgroundColor = theme.getColor(buttonBackground);
-	if (buttonPrimaryBackgroundColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { background-color: ${buttonPrimaryBackgroundColor};}`);
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { border-color: ${buttonPrimaryBackgroundColor};}`);
-	}
 
 	const buttonForegroundColor = theme.getColor(buttonForeground);
 	if (buttonForegroundColor) {
@@ -1038,25 +1036,33 @@ registerThemingParticipant((theme, collector) => {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-body { color: ${buttonForegroundColor};}`);
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .extension-pack-header { color: ${buttonForegroundColor};}`);
 	}
+	const listFocusForegroundColor = theme.getColor(listFocusForeground);
+	if (listFocusForegroundColor) {
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover { color: ${buttonForegroundColor};}`);
+	}
+	const listFocusBackgroundColor = theme.getColor(listFocusBackground);
+	if (listFocusBackgroundColor) {
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { background: ${listFocusBackgroundColor};}`);
+	}
 	const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
 	if (buttonHoverBackgroundColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor};}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor}}`);
 	}
 	const buttonSecondaryBackgroundColor = theme.getColor(buttonSecondaryBackground);
 	if (buttonSecondaryBackgroundColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { background-color: ${buttonSecondaryBackgroundColor} !important;}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { background-color: ${buttonSecondaryBackgroundColor}}`);
 	}
 	const buttonSecondaryBorderColor = theme.getColor(buttonSecondaryBorder);
 	if (buttonSecondaryBorderColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { border: 1px solid ${buttonSecondaryBorderColor};}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary .monaco-button{ border: 1px solid ${buttonSecondaryBorderColor}}`);
 	}
 	const buttonSecondaryColor = theme.getColor(buttonSecondary);
 	if (buttonSecondaryColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor} !important;}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor} !important}`);
 	}
 	const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverColor);
 	if (buttonSecondaryColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover { color: ${buttonSecondaryHover}; border: 1px solid ${buttonSecondaryHover};}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover:not(.disabled) { color: ${buttonSecondaryHover};}`);
 	}
 	const selectBackgroundColor = theme.getColor(selectBackground);
 	if (selectBackgroundColor) {
@@ -1077,15 +1083,6 @@ registerThemingParticipant((theme, collector) => {
 	if (menuBorderColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a { border-color: ${menuBorderColor};}`);
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .ads-homepage .dropdown-content { border-color: ${menuBorderColor};}`);
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary { border-color: ${menuBorderColor};}`);
-	}
-	const buttonDropdownBackgroundHoverColor = theme.getColor(buttonDropdownBackgroundHover);
-	if (buttonDropdownBackgroundHoverColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { background: ${buttonDropdownBackgroundHoverColor};}`);
-	}
-	const buttonDropdownHoverColor = theme.getColor(menuSelectionForeground);
-	if (buttonDropdownHoverColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:hover, .monaco-workbench .part.editor > .content .welcomePageContainer .ads-homepage .dropdown-content a:focus { color: ${buttonDropdownHoverColor};}`);
 	}
 	const editorWidgetBorderColor = theme.getColor(editorWidgetBorder);
 	if (editorWidgetBorderColor) {
@@ -1126,7 +1123,6 @@ registerThemingParticipant((theme, collector) => {
 	const link = theme.getColor(textLinkForeground);
 	if (link) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a.ads-welcome-page-link { color: ${link}; }`);
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn-primary .monaco-button { border: 1px solid ${link}; }`);
 	}
 	const activeLink = theme.getColor(textLinkActiveForeground);
 	if (activeLink) {