diff --git a/extensions/theme-carbon/themes/dark_carbon.json b/extensions/theme-carbon/themes/dark_carbon.json
index 719d4cd9b4..d75a5e0b85 100644
--- a/extensions/theme-carbon/themes/dark_carbon.json
+++ b/extensions/theme-carbon/themes/dark_carbon.json
@@ -14,16 +14,19 @@
"textLinkActiveForeground": "#30b4ff",
//Button control
- "button.background": "#0E639C",
+ "button.background": "#0078D4",
"button.foreground": "#ffffff",
- "button.hoverBackground": "#0078d7",
+ "button.hoverBackground": "#106EBE",
// TODO add support for these
- // "button.secondaryBackground": "#c8c8c8",
- // "button.secondaryHoverBackground": "#a6a6a6",
- // "button.secondaryForeground": "#333333",
- // "button.disabledBackground": "#444444" ,
- // "button.disabledForeground": "#888888" ,
+ "button.secondaryBackground": "#1B1A19",
+ "button.secondaryHoverBackground": "#1B1A19",
+ "button.secondaryForeground": "#ffffff",
+ "button.secondaryHoverForeground": "#0078D4",
+
+ "button.disabledBackground": "#252423",
+ "button.disabledForeground": "#797775",
+
//Checkbox
"checkbox.disabled.foreground": "#888888",
diff --git a/extensions/theme-carbon/themes/light_carbon.json b/extensions/theme-carbon/themes/light_carbon.json
index 596f5b1529..424aef61dd 100644
--- a/extensions/theme-carbon/themes/light_carbon.json
+++ b/extensions/theme-carbon/themes/light_carbon.json
@@ -19,11 +19,14 @@
"button.hoverBackground": "#0078d7",
// TODO add support for these
- // "button.secondaryBackground": "#c8c8c8",
- // "button.secondaryHoverBackground": "#a6a6a6",
- // "button.secondaryForeground": "#333333",
- // "button.disabledBackground": "#eaeaea",
- // "button.disabledForeground": "#888888",
+ "button.secondaryBackground": "#ffffff",
+ "button.secondaryHoverBackground": "#ffffff",
+ "button.secondaryForeground": "#323130",
+ "button.secondaryHoverForeground": "#0078D4",
+
+ "button.disabledBackground": "#F3F2F1",
+ "button.disabledForeground": "#A19F9D",
+
//Checkbox
"checkbox.disabled.foreground": "#888888",
diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts
new file mode 100644
index 0000000000..f6814a52f0
--- /dev/null
+++ b/src/sql/platform/theme/common/colorRegistry.ts
@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { Color, RGBA } from 'vs/base/common/color';
+import * as nls from 'vs/nls';
+
+// -- Welcome Page Colors
+export const tileBoxShadowColor = new Color(new RGBA(0, 1, 4, 0.13));
+export const textShadow = new Color(new RGBA(0, 0, 0, 0.25));
+export const dropdownBoxShadow = new Color(new RGBA(0, 0, 0, 0.25));
+export const extensionPackGradientOne = new Color(new RGBA(50, 49, 48, 0.55));
+export const extensionPackGradientTwo = new Color(new RGBA(50, 49, 48, 0));
+export const gradientOneColorOne = new Color(new RGBA(0, 0, 0, .2));
+export const gradientTwoColorOne = new Color(new RGBA(156, 48, 48, 0));
+export const gradientTwoColorTwo = new Color(new RGBA(255, 255, 255, 0.1));
+
+// -- Tiles
+export const tileBorder = registerColor('tileBorder', { light: '#fff', dark: '#8A8886', hc: '#2B56F2' }, nls.localize('tileBorder', "The border color of tiles"));
+export const tileBoxShadow = registerColor('tileBoxShadow', { light: tileBoxShadowColor, dark: tileBoxShadowColor, hc: tileBoxShadowColor }, nls.localize('tileBoxShadow', "The tile box shadow color"));
+
+// -- Buttons
+export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { light: '#8A8886', dark: '#FFF', hc: '#264BD3' }, nls.localize('button.secondaryBorder', "The border color for secondary button"));
+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 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"));
+
+// -- Shadows
+export const hoverShadow = registerColor('buttonDropdownBoxShadow', { light: dropdownBoxShadow, dark: dropdownBoxShadow, hc: dropdownBoxShadow }, nls.localize('buttonDropdownBoxShadow', "The button dropdown box shadow color"));
+export const extensionPackHeaderShadow = registerColor('extensionPackHeaderShadow', { light: textShadow, dark: textShadow, hc: textShadow }, nls.localize('extensionPackHeaderShadow', "The extension pack header text shadowcolor"));
+
+// -- Gradients
+export const extensionPackGradientColorOneColor = registerColor('extensionPackGradientColorOne', { light: extensionPackGradientOne, dark: extensionPackGradientOne, hc: extensionPackGradientOne }, nls.localize('extensionPackGradientColorOne', "The top color for the extension pack gradient"));
+export const extensionPackGradientColorTwoColor = registerColor('extensionPackGradientColorTwo', { light: extensionPackGradientTwo, dark: extensionPackGradientTwo, hc: extensionPackGradientTwo }, nls.localize('extensionPackGradientColorTwo', "The bottom color for the extension pack gradient"));
+export const gradientOne = registerColor('gradientOne', { light: '#f0f0f0', dark: gradientOneColorOne, hc: gradientOneColorOne }, nls.localize('gradientOne', "The top color for the banner image gradient"));
+export const gradientTwo = registerColor('gradientTwo', { light: gradientTwoColorOne, dark: gradientTwoColorTwo, hc: gradientTwoColorTwo }, nls.localize('gradientTwo', "The bottom color for the banner image gradient"));
+export const gradientBackground = registerColor('gradientBackground', { light: '#fff', dark: 'transparent', hc: 'transparent' }, nls.localize('gradientBackground', "The background color for the banner image gradient"));
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/arrowRightIcon.svg b/src/sql/workbench/contrib/welcome/media/arrowRightIcon.svg
new file mode 100644
index 0000000000..cf0bde4757
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/arrowRightIcon.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/closeIcon.svg b/src/sql/workbench/contrib/welcome/media/closeIcon.svg
new file mode 100644
index 0000000000..b9d175fa99
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/closeIcon.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/code-icon.svg b/src/sql/workbench/contrib/welcome/media/code-icon.svg
new file mode 100644
index 0000000000..8d01905cfa
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/code-icon.svg
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/createConnectionIcon.svg b/src/sql/workbench/contrib/welcome/media/createConnectionIcon.svg
new file mode 100644
index 0000000000..6338cf4eff
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/createConnectionIcon.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/dataStudioIcon.svg b/src/sql/workbench/contrib/welcome/media/dataStudioIcon.svg
new file mode 100644
index 0000000000..1ee0330ada
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/dataStudioIcon.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/databaseIcon.svg b/src/sql/workbench/contrib/welcome/media/databaseIcon.svg
new file mode 100644
index 0000000000..618e4475ad
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/databaseIcon.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/db_admin.png b/src/sql/workbench/contrib/welcome/media/db_admin.png
new file mode 100644
index 0000000000..020930795f
Binary files /dev/null and b/src/sql/workbench/contrib/welcome/media/db_admin.png differ
diff --git a/src/sql/workbench/contrib/welcome/media/defaultExtensionIcon.svg b/src/sql/workbench/contrib/welcome/media/defaultExtensionIcon.svg
new file mode 100644
index 0000000000..2cd0a3ebfa
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/defaultExtensionIcon.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ads_sql_extensions
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/extension_pack_img.png b/src/sql/workbench/contrib/welcome/media/extension_pack_img.png
new file mode 100644
index 0000000000..971e461121
Binary files /dev/null and b/src/sql/workbench/contrib/welcome/media/extension_pack_img.png differ
diff --git a/src/sql/workbench/contrib/welcome/media/homeBanner_icon.svg b/src/sql/workbench/contrib/welcome/media/homeBanner_icon.svg
new file mode 100644
index 0000000000..01044b8da7
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/homeBanner_icon.svg
@@ -0,0 +1,385 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/homeBanner_icon_dark.svg b/src/sql/workbench/contrib/welcome/media/homeBanner_icon_dark.svg
new file mode 100644
index 0000000000..5787edae16
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/homeBanner_icon_dark.svg
@@ -0,0 +1,383 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/icon_file_csv.svg b/src/sql/workbench/contrib/welcome/media/icon_file_csv.svg
new file mode 100644
index 0000000000..0b86ccaa3a
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/icon_file_csv.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/icon_file_document.svg b/src/sql/workbench/contrib/welcome/media/icon_file_document.svg
new file mode 100644
index 0000000000..eb65ff962a
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/icon_file_document.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/icon_file_ipynb.svg b/src/sql/workbench/contrib/welcome/media/icon_file_ipynb.svg
new file mode 100644
index 0000000000..2fde006556
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/icon_file_ipynb.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/icon_file_sql.svg b/src/sql/workbench/contrib/welcome/media/icon_file_sql.svg
new file mode 100644
index 0000000000..676a97a1e6
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/icon_file_sql.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/info.svg b/src/sql/workbench/contrib/welcome/media/info.svg
new file mode 100644
index 0000000000..f9f25138ff
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/info.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/link_icon.svg b/src/sql/workbench/contrib/welcome/media/link_icon.svg
new file mode 100644
index 0000000000..63f69fc22e
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/link_icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/microsoftSqlServerIcon.svg b/src/sql/workbench/contrib/welcome/media/microsoftSqlServerIcon.svg
new file mode 100644
index 0000000000..4c6f69a2f0
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/microsoftSqlServerIcon.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/notebookIcon.svg b/src/sql/workbench/contrib/welcome/media/notebookIcon.svg
new file mode 100644
index 0000000000..15b775660b
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/notebookIcon.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/serverIcon.svg b/src/sql/workbench/contrib/welcome/media/serverIcon.svg
new file mode 100644
index 0000000000..f1daee0e8c
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/media/serverIcon.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/sql/workbench/contrib/welcome/media/video_introduction.png b/src/sql/workbench/contrib/welcome/media/video_introduction.png
new file mode 100644
index 0000000000..61576fa180
Binary files /dev/null and b/src/sql/workbench/contrib/welcome/media/video_introduction.png differ
diff --git a/src/sql/workbench/contrib/welcome/media/video_overview.png b/src/sql/workbench/contrib/welcome/media/video_overview.png
new file mode 100644
index 0000000000..9c5ebf3df8
Binary files /dev/null and b/src/sql/workbench/contrib/welcome/media/video_overview.png differ
diff --git a/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts b/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
index 6d7293a1ef..581a6f7a25 100644
--- a/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
+++ b/src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
@@ -9,67 +9,203 @@ import { localize } from 'vs/nls';
export default () => `
-
-
${escape(localize('welcomePage.azdata', "Azure Data Studio"))}
-
-
-
-
-
-
${escape(localize('welcomePage.start', "Start"))}
-
+
+
+
-
-
${escape(localize('welcomePage.deploy', "Deploy"))}
-
-
+
+
+
x
+
+
${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}
+
-
-
${escape(localize('welcomePage.recent', "Recent"))}
-
-
${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}
+
-
-
${escape(localize('welcomePage.help', "Help"))}
-
-
-
${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}
-
-
-
${escape(localize('welcomePage.customize', "Customize"))}
-
-
${escape(localize('welcomePage.extensions', "Extensions"))} ${escape(localize('welcomePage.extensionDescription', "Download extensions that you need, including the SQL Server Admin pack and more"))}
-
${escape(localize('welcomePage.keyboardShortcut', "Keyboard Shortcuts"))} ${escape(localize('welcomePage.keyboardShortcutDescription', "Find your favorite commands and customize them"))}
-
${escape(localize('welcomePage.colorTheme', "Color theme"))} ${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}
+
+
+
${escape(localize('welcomePage.resources', "Resources"))}
+
+
+
${escape(localize('welcomePage.history', "History"))}
+
+
+
+
+
No recent folders
+
+
+
+
+
+ ${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}
+
+
+
+
+
${escape(localize('welcomePage.usefuLinks', "Useful Links"))}
+
+
+ ${escape(localize('welcomePage.gettingStartedBody',
+ "Discover the capabilities offered by Aure Data Studio and learn how to make the most of them."))}
+
+
+
${escape(localize('welcomePage.documentationBody',
+ "Visit the documentation center for quickstarts, how-to guides, and references for PowerShell, APIs, etc."))}
+
+
+
+
-
-
${escape(localize('welcomePage.learn', "Learn"))}
-
-
${escape(localize('welcomePage.showCommands', "Find and run all commands"))} ${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the Command Palette ({0})"))
- .replace('{0}', ' ')}
-
${escape(localize('welcomePage.azdataBlog', "Discover what's new in the latest release"))} ${escape(localize('welcomePage.azdataBlogDescription', "New monthly blog posts each month showcasing our new features"))}
-
${escape(localize('welcomePage.followTwitter', "Follow us on Twitter"))} ${escape(localize('welcomePage.followTwitterDescription', "Keep up to date with how the community is using Azure Data Studio and to talk directly with the engineers."))}
+
+
diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
new file mode 100644
index 0000000000..caa35f55b5
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
@@ -0,0 +1,1233 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.ads_homepage .ads_grid {
+ display: grid;
+ grid-gap: 16px;
+ grid-row-gap: 16px;
+}
+
+.ads_homepage .ads_grid.grip_gap_50 {
+ grid-gap: 50px;
+}
+
+.ads_homepage {
+ font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
+}
+
+.ads_homepage h1, .ads_homepage h2, .ads_homepage h3, .ads_homepage h4, .ads_homepage h5, .ads_homepage p {
+ margin: 0;
+}
+
+.ads_homepage h1 {
+ font-size: 3em;
+ font-weight: normal;
+}
+
+.ads_homepage h2 {
+ font-size: 1.5em;
+ font-weight: 600;
+}
+
+.ads_homepage h3 {
+ font-size: 1.16em;
+ font-weight: 600;
+}
+
+.ads_homepage h4 {
+ font-weight: 600;
+}
+
+.ads_homepage p {
+ font-size: 1em;
+}
+
+.ads_homepage a {
+ text-decoration: none;
+}
+
+.ads_homepage .content:not(.extensions) {
+ margin: 8px 0;
+}
+
+.ads_homepage .flex {
+ display: flex;
+}
+
+.ads_homepage .flex.flex_d_column {
+ flex-direction: column;
+}
+
+.ads_homepage .flex.flex_d_row {
+ flex-direction: row;
+}
+
+.ads_homepage .flex.flex_wrap {
+ flex-wrap: wrap;
+}
+
+.ads_homepage .flex.flex_j_center {
+ justify-content: center;
+}
+
+.ads_homepage .flex.flex_j_evenly {
+ justify-content: space-evenly;
+}
+
+.ads_homepage .flex.flex_j_end {
+ justify-content: flex-end;
+}
+
+.ads_homepage .flex.flex_a_center {
+ align-items: center;
+}
+
+.ads_homepage .flex.flex_a_start {
+ align-items: flex-start;
+}
+
+.ads_homepage .flex.flex_j_between {
+ justify-content: space-between;
+}
+
+.ads_homepage .a_self_end {
+ align-self: flex-end;
+}
+
+.ads_homepage .btn_container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+@media only screen and (min-width: 480px) {
+ .ads_homepage .btn_container {
+ flex-direction: row;
+ justify-content: flex-start;
+ }
+}
+
+.ads_homepage .btn {
+ box-sizing: border-box;
+ width: 100%;
+ height: 34px;
+ padding-top: 1px;
+ font-size: 1.08em;
+ line-height: 29px;
+ border-radius: 2px;
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ text-align: center;
+ text-decoration: none;
+ margin: 10px 0;
+}
+
+.ads_homepage .btn span {
+ display: block;
+}
+
+@media only screen and (max-width: 389px) {
+ .ads_homepage .btn {
+ line-height: 27px;
+ }
+}
+
+@media only screen and (min-width: 480px) {
+ .ads_homepage .btn {
+ margin: 0 8px 0 0;
+ width: 77px;
+ height: 25px;
+ line-height: 18px;
+ }
+ .mac .ads_homepage .dropdown.btn {
+ line-height: 1.6em;
+ }
+}
+
+.ads_homepage .btn_primary {
+ border: 1px solid;
+}
+
+.ads_homepage .btn_primary:hover {
+ cursor: pointer;
+}
+
+.ads_homepage .btn_secondary:hover {
+ cursor: pointer;
+}
+
+.ads_homepage .btn_secondary {
+ line-height: 1.6em;
+}
+
+.ads_homepage #dropdown_btn:focus {
+ outline: 1px solid;
+}
+
+.ads_homepage .dropdown-content {
+ z-index: 9;
+ position: absolute;
+ display: none;
+ box-sizing: border-box;
+ list-style: none;
+ padding: 8px 0px 8px 0;
+ margin: 0;
+ width: 16em;
+ position: absolute;
+}
+
+.ads_homepage .dropdown-content li a {
+ font-size: 1.1em;
+}
+
+.ads_homepage .dropdown-content li a {
+ display: block;
+ width: 69%;
+ height: 100%;
+ padding: 5px 20px;
+}
+
+.dropdown-content.show {
+ position: absolute;
+ display: block;
+}
+
+.ads_homepage .btn.dropdown ul li:hover>ul, .ads_homepage .btn.dropdown ul li ul:hover {
+ z-index: 9;
+}
+
+.ads_homepage .btn.dropdown ul li ul li a {
+ width: 78%;
+ padding: 1em 1em 1em 1.5em;
+ clear: both;
+ font-size: 1.16em;
+ text-align: left;
+ border: 1px solid;
+}
+
+.ads_homepage .dropdown_nav {
+ position: relative;
+}
+
+.ads_homepage .btn.dropdown ul li ul a {
+ text-decoration: none;
+}
+
+.ads_homepage .dropdown-content li a {
+ width: 86%;
+ padding: 6px 0 6px 28px;
+ display: block;
+}
+
+.ads_homepage .btn:disabled {
+ width: auto;
+ height: 24px;
+ padding: 4px 16px;
+ border: 0 !important;
+}
+
+.ads_homepage .btn:disabled:hover {
+ cursor: default;
+}
+
+.ads_homepage .preview_link {
+ padding: 4px;
+}
+
+.ads_homepage .preview_link i {
+ margin-right: 4px;
+}
+
+.ads_homepage .preview_text {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ position: relative;
+ top: 25px;
+ margin-right: 15px;
+}
+
+.ads_homepage #tool_tip_container_wide {
+ display: none;
+}
+
+.ads_homepage #tool_tip_container_narrow {
+ display: block;
+ bottom: 13px;
+ position: relative;
+ cursor: pointer;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .preview_text {
+ margin-right: 0;
+ }
+ .ads_homepage #tool_tip_container_wide {
+ display: block;
+ }
+ .ads_homepage #tool_tip_container_narrow {
+ display: none;
+ }
+}
+
+.ads_homepage .tool_tip .tool_tip_text {
+ max-width: 400px;
+ visibility: hidden;
+ padding: 10px 15px;
+ z-index: 1;
+ top: 150%;
+ right: -72px;
+ text-align: center;
+ border-radius: 6px;
+ position: absolute;
+ box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.14);
+ border-radius: 2px;
+}
+
+.ads_homepage .tool_tip {
+ position: relative;
+}
+
+.ads_homepage .tool_tip .tool_tip_text:after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 83%;
+ z-index: 9;
+ margin-left: -10px;
+ border-width: 5px;
+ border-style: solid;
+}
+
+.ads_homepage #tool_tip_container_wide .tool_tip_text.show {
+ visibility: visible;
+}
+
+.ads_homepage .tool_tip .tool_tip_text h3 {
+ margin-bottom: 10px;
+}
+
+.ads_homepage .modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ padding-top: 100px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+}
+
+.ads_homepage .modal.show {
+ display: block;
+}
+
+.ads_homepage .modal_content {
+ margin: auto;
+ padding: 20px;
+ width: 80%;
+ max-width: 372px;
+ height: 116px;
+ background: #FFFFFF;
+ border-radius: 2px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ border: 1px solid;
+}
+
+.ads_homepage .modal_content h3 {
+ margin-bottom: 8px;
+}
+
+.ads_homepage .close_icon {
+ position: absolute;
+ right: 13px;
+ top: 4px;
+ font-size: 1.33em;
+}
+
+.ads_homepage .close_icon:hover, .ads_homepage .close_icon:focus {
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ads_homepage .preview_text p {
+ position: relative;
+ display: inline-block;
+ font-size: 1.08em;
+ bottom: 2px;
+}
+
+.ads_homepage .icon_info {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ margin-left: 6px;
+ -webkit-mask: url('../../media/info.svg') no-repeat;
+ -webkit-mask-size: 12px 12px;
+ mask: url('../../media/info.svg') no-repeat;
+ mask-size: 12px 12px;
+}
+
+.ads_homepage .icon_arrow_down {
+ position: relative;
+ height: 20px;
+ width: 18px;
+ display: inline-block;
+}
+
+.ads_homepage .icon_arrow_down:before {
+ position: absolute;
+ font: normal normal normal 16px/1 codicon;
+ text-decoration: none;
+ text-rendering: auto;
+ text-align: center;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ width: 11px;
+ height: 6px;
+ content: "\eab6";
+ transform: rotate(90deg);
+ bottom: 10px;
+ margin: auto;
+}
+
+.mac .ads_homepage .icon_arrow_down:before {
+ position: absolute;
+ bottom: 8px;
+}
+
+.ads_homepage .icon_arrow_right {
+ position: relative;
+ height: 16px;
+ width: 16px;
+ display: inline-block;
+}
+
+.ads_homepage .icon_arrow_right:before {
+ position: absolute;
+ font: normal normal normal 14px/1 codicon;
+ text-decoration: none;
+ text-rendering: auto;
+ text-align: center;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ width: 11px;
+ height: 6px;
+ content: "\ea9c";
+ top: 1px;
+ bottom: 5px;
+ margin: auto;
+ left: 5px;
+}
+
+.ads_homepage .icon_link {
+ display: inline-block;
+ width: 11px;
+ height: 11px;
+ margin-left: 4px;
+ -webkit-mask: url('../../media/link_icon.svg') no-repeat;
+ -webkit-mask-size: 11px 11px;
+ mask: url('../../media/link_icon.svg') no-repeat;
+ mask-size: 11px 11px;
+ height: 11px;
+ width: 11px;
+}
+
+.ads_homepage .icon_arrow_down_dark {
+ position: relative;
+ height: 20px;
+ width: 22px;
+ display: inline-block;
+}
+
+.ads_homepage .icon_arrow_down_dark:before {
+ position: absolute;
+ font: normal normal normal 14px/1 codicon;
+ text-decoration: none;
+ text-rendering: auto;
+ text-align: center;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ width: 11px;
+ height: 6px;
+ content: "\eab6";
+ transform: rotate(90deg);
+ top: 14px;
+ bottom: 5px;
+ margin: auto;
+ left: 8px;
+}
+
+.ads_homepage .dropdown_navigation {
+ position: relative;
+}
+
+.ads_homepage .dropdown_text {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+}
+
+.ads_homepage .showOnStartup {
+ margin-top: 10px;
+}
+
+.ads_homepage .showOnStartup input {
+ width: 15px;
+ height: 15px;
+}
+
+.ads_homepage .link {
+ text-decoration: none;
+}
+
+.ads_homepage .link_learn_more {
+ line-height: 27px;
+}
+
+.ads_homepage .link:hover {
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .extension_pack_container {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media only screen and (min-width: 1365px) {
+ .ads_homepage .extension_pack_container {
+ grid-template-columns: repeat(8, 1fr)
+ }
+}
+
+.ads_homepage .extension_pack {
+ grid-column: 1 / span 2;
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .extension_pack {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media only screen and (min-width: 1365px) {
+ .ads_homepage .extension_pack {
+ grid-column: 1 / span 4;
+ grid-row: 1 / span 4;
+ }
+}
+
+.ads_homepage .tile:not(.extension):not(.extension_pack) {
+ border: 1px solid;
+ border-radius: 4px;
+}
+
+.ads_homepage .tile.extension_pack {
+ border: 1px solid;
+ border-radius: 4px;
+}
+
+.ads_homepage .extension_list {
+ grid-column: 1 / span 2;
+}
+
+@media only screen and (min-width: 1365px) {
+ .ads_homepage .extension_list {
+ grid-column: 5 / span 4;
+ grid-row: 1 / span 4;
+ }
+}
+
+.ads_homepage .extension_pack_extension_list_header, .ads_homepage .extension_header {
+ font-weight: 600;
+ font-size: 1.33em;
+}
+
+.ads_homepage .tile {
+ transition: all 0.5s ease;
+ border-radius: 4px;
+}
+
+.ads_homepage .tile:hover:not(.no_hover) {
+ cursor: pointer;
+}
+
+.ads_homepage .link:active {
+ text-decoration: underline;
+}
+
+.ads_homepage .content {
+ padding: 25px 2% 0;
+}
+
+@media only screen and (min-width: 480px) {
+ .ads_homepage .content {
+ padding: 25px 4% 0;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .content {
+ padding: 25px 6% 0;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .content {
+ padding: 25px 8% 0;
+ }
+}
+
+.ads_homepage .text_container {
+ padding: 15px 15px;
+}
+
+.ads_homepage .gradient {
+ background-size: cover;
+}
+
+@media only screen and (min-width: 480px) {
+ s .ads_homepage .gradient {
+ padding: 25px 4% 0;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .gradient {
+ padding: 25px 6% 0;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .gradient {
+ padding: 0 8% 0;
+ }
+}
+
+.ads_homepage_section h2 {
+ margin-bottom: 16px;
+}
+
+.ads_homepage_section.hero {
+ background-size: 1128px 467px;
+ background-repeat: no-repeat;
+ background-image: url('../../media/homeBanner_icon.svg');
+ background-repeat: no-repeat;
+ background-position: 5px 0;
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.vs-dark .ads_homepage_section.hero, .hc-black .ads_homepage_section.hero {
+ background-size: 1128px 467px;
+ background-repeat: no-repeat;
+ background-image: url('../../media/homeBanner_icon_dark.svg');
+ background-repeat: no-repeat;
+ background-position: 5px 0;
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage_section.hero {
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-image: url('../../media/homeBanner_icon.svg');
+ background-position: 300px -54px;
+ }
+}
+
+@media only screen and (min-width: 1365px) {
+ .ads_homepage_section.hero {
+ background-size: 597px;
+ background-repeat: no-repeat;
+ background-image: url('../../media/homeBanner_icon.svg');
+ background-position: 94% -54px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .vs-dark .ads_homepage_section.hero, .hc-black .ads_homepage_section.hero {
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-image: url('../../media/homeBanner_icon_dark.svg');
+ background-position: 300px 0px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .vs-dark .ads_homepage_section.hero, .hc-black .ads_homepage_section.hero {
+ background-size: 597px;
+ background-repeat: no-repeat;
+ background-image: url('../../media/homeBanner_icon_dark.svg');
+ background-position: 94% 0px;
+ }
+}
+
+.ads_homepage .resources_container {
+ grid-column: 1 / span 1;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .resources_container {
+ grid-column: 1 / span 7;
+ }
+}
+
+.ads_homepage .resources_container .tabs {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.ads_homepage .resources_container .input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ads_homepage .resources_container .label {
+ width: 100%;
+ padding: 10px;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 1.16em;
+ transition: background 0.1s, color 0.1s;
+}
+
+.ads_homepage .getting_started_container {
+ grid-column: 1 / span 1;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .getting_started_container {
+ grid-column: 9 / span 6;
+ }
+}
+
+.ads_homepage .header {
+ padding: 0 10px 20px;
+}
+
+.ads_homepage .header_top_nav {
+ margin: 0 0 30px;
+ padding-top: 30px;
+}
+
+@media only screen and (min-width: 1365px) {
+ .ads_homepage .header_top_nav {
+ margin-bottom: 117px;
+ padding-top: 69px;
+ }
+}
+
+.ads_homepage .header_top_nav h1 {
+ margin: 0 0 20px;
+}
+
+.ads_homepage .header_top_nav .icon {
+ width: 92px;
+ height: 92px;
+ background-image: url('../../media/dataStudioIcon.svg');
+ background-size: 92px;
+ margin-right: 20px;
+}
+
+.ads_homepage .header_bottom_nav {
+ margin-top: 35px;
+}
+
+.ads_homepage .header_bottom_nav_tiles {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+@media only screen and (min-width: 1365px) {
+ .ads_homepage .header_bottom_nav_tiles {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .header_bottom_nav {
+ margin-top: 112px;
+ }
+}
+
+.ads_homepage .header_bottom_nav_tile {
+ position: relative;
+ height: 160px;
+ padding: 10px 20px 10px 10px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ border: 1px solid;
+ border-radius: 4px;
+ transition: all 0.5s ease;
+ margin: 0;
+}
+
+.vs-dark .ads_homepage .header_bottom_nav_tile, .hc-black .ads_homepage .header_bottom_nav_tile {
+ border: 1px solid;
+ border-radius: 4px;
+}
+
+@media only screen and (max-width: 389px) {
+ .ads_homepage .header_bottom_nav_tile {
+ height: 185px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .header_bottom_nav_tile {
+ height: 100px;
+ padding-left: 25%;
+ text-align: left;
+ justify-content: center;
+ align-items: baseline;
+ }
+}
+
+.ads_homepage .header_bottom_nav_tile h3 {
+ margin: 16px 0 4px;
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .header_bottom_nav_tile h3 {
+ margin: 0;
+ }
+}
+
+.ads_homepage a.link_show_all {
+ font-size: 1.16em;
+ padding-top: 7px;
+}
+
+.monaco-workbench .part.editor>.content .ads_homepage a.header_bottom_nav_tile_link {
+ text-decoration: none;
+}
+
+.ads_homepage .header_bottom_nav_tile .icon {
+ width: 42px;
+ height: 42px;
+ position: absolute;
+ right: 0;
+ bottom: 20px;
+ left: 0px;
+ margin: auto;
+}
+
+@media only screen and (min-width: 640px) {
+ .ads_homepage .header_bottom_nav_tile .icon {
+ position: absolute;
+ right: 75%;
+ bottom: 0;
+ top: 0;
+ }
+}
+
+.ads_homepage .header_bottom_nav_tile .icon.connection {
+ background-image: url('../../media/createConnectionIcon.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+.ads_homepage .header_bottom_nav_tile .icon.query {
+ background-image: url('../../media/databaseIcon.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+.ads_homepage .header_bottom_nav_tile .icon.notebook {
+ background-image: url('../../media/notebookIcon.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+.ads_homepage .header_bottom_nav_tile .icon.server {
+ background-image: url('../../media/serverIcon.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+.ads_homepage .middle_section {
+ grid-template-columns: 1fr;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ads_homepage .middle_section {
+ grid-template-columns: repeat(12, 1fr);
+ }
+}
+
+.ads_homepage .resources_container .input:focus+.label {
+ z-index: 1;
+}
+
+.ads_homepage .resources_container .input:checked+.label {
+ border-bottom: 3px solid;
+}
+
+.vs-dark .ads_homepage .resources_container .input:checked+.label, .hc-black .ads_homepage .resources_container .input:checked+.label {
+ border-bottom: 3px solid;
+}
+
+.ads_homepage .resources_container .label {
+ font-weight: 600;
+}
+
+@media (min-width: 600px) {
+ .ads_homepage .resources_container .label {
+ width: auto;
+ }
+}
+
+.ads_homepage .resources_container .panel {
+ display: none;
+ padding: 20px 20px 20px 0;
+}
+
+@media (min-width: 600px) {
+ .ads_homepage .resources_container .panel {
+ order: 99;
+ }
+}
+
+.ads_homepage .resources_container .input:checked+.label+.panel {
+ display: block;
+ width: 100%;
+}
+
+.ads_homepage .ads_homepage_section .history .list, .ads_homepage .ads_homepage_section .pinned .list {
+ list-style-type: none;
+ padding: 0;
+ margin-top: 0;
+}
+
+.ads_homepage .ads_homepage_section .history .list_header, .ads_homepage .ads_homepage_section .pinned .list_header {
+ padding: 0 0 2px 11px;
+}
+
+.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent), .ads_homepage .ads_homepage_section .history .list_header_container, .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent), .ads_homepage .ads_homepage_section .pinned .list_header_container {
+ height: 33px;
+ list-style: none;
+ border-bottom: 1px solid;
+ text-align: left;
+ font-size: 1em;
+ display: flex;
+ position: relative;
+ justify-content: flex-end;
+ align-items: center;
+ text-decoration: none;
+}
+
+.ads_homepage .ads_homepage_section .history .list_header_container .list_header_last_opened {
+ margin-left: auto;
+}
+
+.ads_homepage .ads_homepage_section .history .detail {
+ margin-left: auto;
+}
+
+.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) a, .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) a {
+ padding: 0 0 2px 11px;
+}
+
+.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i, .ads_homepage .ads_homepage_section .pinned .list li i, .ads_homepage .icon_document {
+ -webkit-mask: url('../../media/icon_file_document.svg') no-repeat;
+ -webkit-mask-size: 13px 16px;
+ mask: url('../../media/icon_file_document.svg') no-repeat;
+ mask-size: 13px 16px;
+ height: 16px;
+ width: 16px;
+}
+
+.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i[title$='.ipynb'], .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) i[title$='.ipynb'] {
+ -webkit-mask: url('../../media/icon_file_ipynb.svg') no-repeat;
+ -webkit-mask-size: 13px 16px;
+ mask: url('../../media/icon_file_ipynb.svg') no-repeat;
+ mask-size: 13px 16px;
+ height: 16px;
+ width: 16px;
+}
+
+.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i[title$='.sql'], .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) i[title$='.sql'] {
+ -webkit-mask: url('../../media/icon_file_sql.svg') no-repeat;
+ -webkit-mask-size: 13px 16px;
+ mask: url('../../media/icon_file_sql.svg') no-repeat;
+ mask-size: 13px 16px;
+ height: 16px;
+ width: 16px;
+}
+
+.ads_homepage .ads_homepage_section .history .list li:not(.moreRecent) i[title$='.csv'], .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent) a[title$='.csv'] {
+ -webkit-mask: url('../../media/icon_file_csv.svg') no-repeat;
+ -webkit-mask-size: 13px 16px;
+ mask: url('../../media/icon_file_csv.svg') no-repeat;
+ mask-size: 13px 16px;
+ height: 16px;
+ width: 16px;
+}
+
+.ads_homepage .ads_homepage_section .history .moreRecent_list {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.ads_homepage .ads_homepage_section .history .moreRecent_list li.moreRecent {
+ display: flex;
+ align-items: center;
+ margin-top: 10px;
+}
+
+.ads_homepage .ads_homepage_section .history .moreRecent_list li.moreRecent a {
+ text-decoration: none;
+}
+
+.ads_homepage .ads_homepage_section .links .link_header {
+ font-size: 1.16em;
+ margin-bottom: 4px;
+}
+
+.ads_homepage .ads_homepage_section .links p {
+ margin-bottom: 16px;
+}
+
+.ads_homepage .ads_homepage_section .links .videos_container {
+ margin-bottom: 20px;
+ display: flex;
+ flex-direction: column;
+}
+
+.ads_homepage .ads_homepage_section .links .videos_container_video {
+ margin-right: 16px;
+}
+
+.ads_homepage .ads_homepage_section .links .videos_container .video {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.ads_homepage .ads_homepage_section .links .videos_container .video img {
+ max-width: 100%;
+}
+
+.ads_homepage .extensions .row {
+ padding-bottom: 35px;
+}
+
+.ads_homepage .extension {
+ display: flex;
+ height: 100%;
+ justify-content: flex-start;
+ margin-bottom: 5px;
+ background: transparent;
+}
+
+.ads_homepage .extension .extension_inner {
+ padding: 15px;
+}
+
+.ads_homepage .extension_pack_header {
+ font-weight: 600;
+ font-size: 2.33em;
+ z-index: 9;
+ margin-bottom: 10px;
+}
+
+.ads_homepage .extension_pack_body {
+ line-height: 1.5em;
+ font-size: 1.33em;
+ z-index: 9;
+}
+
+@media only screen and (min-width: 700px) {
+ .ads_homepage .extension_pack_body {
+ font-size: 1.5em;
+ line-height: 1.2em;
+ }
+}
+
+.ads_homepage .extension_pack {
+ grid-gap: 0;
+}
+
+.ads_homepage .extension_pack_btn_container {
+ padding: 17px 0 23px;
+ width: 100%;
+}
+
+.ads_homepage .extension_pack_description {
+ background: url('../../media/extension_pack_img.png');
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ background-size: cover;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding: 39px 20px 20px;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+
+.ads_homepage .extension_pack {
+ border-radius: 5px;
+}
+
+.ads_homepage .extension_pack_description:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+
+.ads_homepage .extension_pack_description_grid_container {
+ height: 100%;
+}
+
+.ads_homepage .extension_pack_description .text_container {
+ text-align: center;
+ padding: 20px;
+}
+
+.ads_homepage .extension_pack .text_container .icon {
+ margin-bottom: 10px;
+}
+
+.ads_homepage .extension_pack .text_container h2 {
+ margin-bottom: 10px;
+}
+
+.ads_homepage .extension .img_container {
+ margin-right: 22px;
+}
+
+.ads_homepage .extension .icon, .ads_homepage .extensions .img_container .icon {
+ width: 50px;
+ margin: auto;
+}
+
+.ads_homepage .extension_pack .extension_pack_extensions {
+ padding: 0 25px 0 35px;
+ background: transparent;
+}
+
+.ads_homepage .extension_pack .extension_pack_extensions .btn_secondary {
+ line-height: 1.25em;
+}
+
+.ads_homepage .extension_pack .extension_pack_extension_container {
+ padding: 8px 0;
+}
+
+.ads_homepage .extension_pack .extension_pack_extension_container:first-of-type {
+ padding: 24px 0 8px;
+}
+
+.ads_homepage .extension_pack .extension_pack_extension_container .description h4 {
+ font-size: 1.33em;
+}
+
+.ads_homepage .extension_pack .extension_pack_extension_container .icon {
+ width: 36px;
+ height: 36px;
+ margin-right: 14px;
+}
+
+.monaco-workbench .part.editor>.content .ads_homepage .extensions .extensions_tile_link {
+ text-decoration: none;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .ads_homepage a {
+ text-decoration: none;
+ font-weight: normal;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage.emptyRecent .splash .recent .list {
+ display: none;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .splash .recent .none {
+ display: none;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage.emptyRecent .splash .recent .none {
+ margin-top: 15px;
+ display: block;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .enabledExtension {
+ display: none;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .extensionPack {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .installExtension.installed {
+ display: initial;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .commands .item button .enabledExtension {
+ display: none;
+}
+
+.file-icons-enabled .show-file-icons .az_data_welcome_page-name-file-icon.file-icon::before {
+ /* {{SQL CARBON EDIT}} We use azdata welcome page */
+ content: ' ';
+ background-image: url('../../media/code-icon.svg');
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .mac_only, .monaco-workbench .part.editor>.content .welcomePage .windows_only, .monaco-workbench .part.editor>.content .welcomePage .linux_only {
+ display: none;
+}
+
+.monaco-workbench.mac .part.editor>.content .welcomePage .mac_only {
+ display: block;
+}
+
+.monaco-workbench.windows .part.editor>.content .welcomePage .windows_only {
+ display: block;
+}
+
+.monaco-workbench.linux .part.editor>.content .welcomePage .linux_only {
+ display: block;
+}
+
+.monaco-workbench.mac .part.editor>.content .welcomePage li.mac-only {
+ display: list-item;
+}
+
+.monaco-workbench.windows .part.editor>.content .welcomePage li.windows_only {
+ display: list-item;
+}
+
+.monaco-workbench.linux .part.editor>.content .welcomePage li.linux_only {
+ display: list-item;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .installExtension.installed {
+ display: none;
+}
+
+.monaco-workbench .part.editor>.content .welcomePage .enabledExtension.installed {
+ display: inline;
+}
diff --git a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
new file mode 100644
index 0000000000..eb04393d87
--- /dev/null
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
@@ -0,0 +1,1005 @@
+/*---------------------------------------------------------------------------------------------
+ * 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!./welcomePage';
+import 'sql/workbench/contrib/welcome/page/browser/az_data_welcome_page';
+import { URI } from 'vs/base/common/uri';
+import * as strings from 'vs/base/common/strings';
+import { ICommandService } from 'vs/platform/commands/common/commands';
+import * as arrays from 'vs/base/common/arrays';
+import { WalkThroughInput } from 'vs/workbench/contrib/welcome/walkThrough/browser/walkThroughInput';
+import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
+import { onUnexpectedError, isPromiseCanceledError } from 'vs/base/common/errors';
+import { IWindowOpenable } from 'vs/platform/windows/common/windows';
+import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace';
+import { IConfigurationService, ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
+import { localize } from 'vs/nls';
+import { Action, WorkbenchActionExecutedEvent, WorkbenchActionExecutedClassification } from 'vs/base/common/actions';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { Schemas } from 'vs/base/common/network';
+import { IBackupFileService } from 'vs/workbench/services/backup/common/backup';
+import { getInstalledExtensions, IExtensionStatus, onExtensionChanged, isKeymapExtension } from 'vs/workbench/contrib/extensions/common/extensionsUtils';
+import { IExtensionManagementService, IExtensionGalleryService, ILocalExtension } from 'vs/platform/extensionManagement/common/extensionManagement';
+import { IWorkbenchExtensionEnablementService, EnablementState, IExtensionTipsService } from 'vs/workbench/services/extensionManagement/common/extensionManagement';
+import { ILifecycleService, StartupKind } from 'vs/platform/lifecycle/common/lifecycle';
+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 { registerColor, foreground, textLinkActiveForeground, focusBorder, descriptionForeground, activeContrastBorder, buttonBackground, buttonForeground, menuBorder, menuForeground, menuSelectionForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground } 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';
+import { TimeoutTimer } from 'vs/base/common/async';
+import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
+import { ILabelService } from 'vs/platform/label/common/label';
+import { IFileService } from 'vs/platform/files/common/files';
+import { ExtensionType } from 'vs/platform/extensions/common/extensions';
+import { IRecentlyOpened, isRecentWorkspace, IRecentWorkspace, IRecentFolder, isRecentFolder, IWorkspacesService } from 'vs/platform/workspaces/common/workspaces';
+import { CancellationToken } from 'vs/base/common/cancellation';
+import { IHostService } from 'vs/workbench/services/host/browser/host';
+import { IProductService } from 'vs/platform/product/common/productService';
+import { KeyCode } from 'vs/base/common/keyCodes';
+import { joinPath } from 'vs/base/common/resources';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+
+const configurationKey = 'workbench.startupEditor';
+const oldConfigurationKey = 'workbench.welcome.enabled';
+const telemetryFrom = 'welcomePage';
+
+export class WelcomePageContribution implements IWorkbenchContribution {
+ constructor(
+ @IInstantiationService private readonly instantiationService: IInstantiationService,
+ @IConfigurationService private readonly configurationService: IConfigurationService,
+ @IEditorService private readonly editorService: IEditorService,
+ @IBackupFileService private readonly backupFileService: IBackupFileService,
+ @IFileService private readonly fileService: IFileService,
+ @IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
+ @ILifecycleService private readonly lifecycleService: ILifecycleService,
+ @ICommandService private readonly commandService: ICommandService,
+ ) {
+ this.enableWelcomePage().catch(onUnexpectedError);
+ }
+ private async enableWelcomePage(): Promise
{
+ const enabled = isWelcomePageEnabled(this.configurationService, this.contextService);
+ if (enabled && this.lifecycleService.startupKind !== StartupKind.ReloadedWindow) {
+ const hasBackups: boolean = await this.backupFileService.hasBackups();
+ const activeEditor = this.editorService.activeEditor;
+ if (!activeEditor && !hasBackups) {
+ const openWithReadme = this.configurationService.getValue(configurationKey) === 'readme';
+ if (openWithReadme) {
+ let readmes = await Promise.all(this.contextService.getWorkspace().folders.map(async folder => {
+ const folderUri = folder.uri;
+ try {
+ const folder = await this.fileService.resolve(folderUri);
+ const files = folder.children ? folder.children.map(child => child.name) : [];
+ const file = arrays.find(files.sort(), file => strings.startsWith(file.toLowerCase(), 'readme'));
+ if (file) {
+ return joinPath(folderUri, file);
+ }
+ } catch (err) {
+ onUnexpectedError(err);
+ }
+ return undefined;
+ }));
+ arrays.coalesceInPlace(readmes);
+ if (!this.editorService.activeEditor) {
+ if (readmes.length) {
+ const isMarkDown = (readme: URI) => strings.endsWith(readme.path.toLowerCase(), '.md');
+ await Promise.all([
+ this.commandService.executeCommand('markdown.showPreview', null, readmes.filter(isMarkDown), { locked: true }),
+ this.editorService.openEditors(readmes.filter(readme => !isMarkDown(readme))
+ .map(readme => ({ resource: readme }))),
+ ]);
+ } else {
+ await this.instantiationService.createInstance(WelcomePage).openEditor();
+ }
+ }
+ } else {
+ await this.instantiationService.createInstance(WelcomePage).openEditor();
+ }
+ }
+ }
+ }
+}
+
+function isWelcomePageEnabled(configurationService: IConfigurationService, contextService: IWorkspaceContextService) {
+ const startupEditor = configurationService.inspect(configurationKey);
+ if (!startupEditor.userValue && !startupEditor.workspaceValue) {
+ const welcomeEnabled = configurationService.inspect(oldConfigurationKey);
+ if (welcomeEnabled.value !== undefined && welcomeEnabled.value !== null) {
+ return welcomeEnabled.value;
+ }
+ }
+ return startupEditor.value === 'welcomePage' || startupEditor.value === 'readme' || startupEditor.value === 'welcomePageInEmptyWorkbench' && contextService.getWorkbenchState() === WorkbenchState.EMPTY;
+}
+
+export class WelcomePageAction extends Action {
+
+ public static readonly ID = 'workbench.action.showWelcomePage';
+ public static readonly LABEL = localize('welcomePage', "Welcome");
+
+ constructor(
+ id: string,
+ label: string,
+ @IInstantiationService private readonly instantiationService: IInstantiationService
+ ) {
+ super(id, label);
+ }
+
+ public run(): Promise {
+ return this.instantiationService.createInstance(WelcomePage)
+ .openEditor()
+ .then(() => undefined);
+ }
+}
+
+interface ExtensionSuggestion {
+ name: string;
+ title?: string;
+ description?: string;
+ id: string;
+ isKeymap?: boolean;
+ isCommand?: boolean;
+ isExtensionPack?: boolean;
+ icon?: string;
+ link?: string;
+}
+
+
+interface ExtensionPackExtensions {
+ name: string;
+ icon: string;
+ link: string;
+}
+
+const extensionPacks: ExtensionSuggestion[] = [
+ {
+ name: localize('welcomePage.adminPack', "SQL Admin Pack"),
+ title: localize('welcomePage.showAdminPack', "SQL Admin Pack"),
+ description: localize('welcomePage.adminPackDescription', "Admin Pack for SQL Server is a collection of popular database administration extensions to help you manage SQL Server"),
+ id: 'microsoft.admin-pack',
+ isExtensionPack: true
+ },
+];
+
+const extensionPackExtensions: ExtensionPackExtensions[] = [
+ { name: 'SQL Server Agent', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.agent"}` },
+ { name: 'SQL Server Profiler', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.profiler"}` },
+ { name: 'SQL Server Import', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.import"}` },
+ { name: 'SQL Server Dacpac', icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.dacpac"}` }
+];
+
+const extensions: ExtensionSuggestion[] = [
+ { name: localize('welcomePage.powershell', "Powershell"), id: 'microsoft.powershell', description: localize('welcomePage.powershellDescription', "Write and execute PowerShell scripts using Azure Data Studio's rich query editor"), icon: 'https://raw.githubusercontent.com/PowerShell/vscode-powershell/master/images/PowerShell_icon.png', link: `command:azdata.extension.open?{"id":"microsoft.powershell"}` },
+ { name: localize('welcomePage.dataVirtualization', "Data Virtualization"), id: 'microsoft.datavirtualization', description: localize('welcomePage.dataVirtualizationDescription', "Virtualize data with SQL Server 2019 and create external tables using interactive wizards"), icon: require.toUrl('./../../media/defaultExtensionIcon.svg'), link: `command:azdata.extension.open?{"id":"microsoft.datavirtualization"}` },
+ { name: localize('welcomePage.PostgreSQL', "PostgreSQL"), id: 'microsoft.azuredatastudio-postgresql', description: localize('welcomePage.PostgreSQLDescription', "Connect, query, and manage Postgres databases with Azure Data Studio"), icon: 'https://raw.githubusercontent.com/Microsoft/azuredatastudio-postgresql/master/images/extension-icon.png', link: `command:azdata.extension.open?{"id":"microsoft.azuredatastudio-postgresql"}` },
+];
+
+const extensionPackStrings = {
+ installEvent: 'installExtension',
+ installedEvent: 'installedExtension',
+ detailsEvent: 'detailsExtension',
+ alreadyInstalled: (extensionName: string) => { return localize('welcomePage.extensionPackAlreadyInstalled', "Support for {0} is already installed.", extensionName); },
+ reloadAfterInstall: (extensionName: string) => { return localize('welcomePage.willReloadAfterInstallingExtensionPack', "The window will reload after installing additional support for {0}.", extensionName); },
+ installing: (extensionName: string) => { return localize('welcomePage.installingExtensionPack', "Installing additional support for {0}...", extensionName); },
+ extensionNotFound: (extensionName: string, extensionId: string) => { return localize('welcomePage.extensionPackNotFound', "Support for {0} with id {1} could not be found.", extensionName, extensionId); },
+};
+
+const welcomeInputTypeId = 'workbench.editors.welcomePageInput';
+class WelcomePage extends Disposable {
+ readonly editorInput: WalkThroughInput;
+ constructor(
+ @IEditorService private readonly editorService: IEditorService,
+ @IInstantiationService private readonly instantiationService: IInstantiationService,
+ @IWorkspacesService private readonly workspacesService: IWorkspacesService,
+ @IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
+ @IConfigurationService private readonly configurationService: IConfigurationService,
+ @ILabelService private readonly labelService: ILabelService,
+ @INotificationService private readonly notificationService: INotificationService,
+ @IWorkbenchExtensionEnablementService private readonly extensionEnablementService: IWorkbenchExtensionEnablementService,
+ @IExtensionGalleryService private readonly extensionGalleryService: IExtensionGalleryService,
+ @IExtensionManagementService private readonly extensionManagementService: IExtensionManagementService,
+ @IExtensionTipsService private readonly tipsService: IExtensionTipsService,
+ @IExtensionsWorkbenchService private readonly extensionsWorkbenchService: IExtensionsWorkbenchService,
+ @ILifecycleService lifecycleService: ILifecycleService,
+ @ITelemetryService private readonly telemetryService: ITelemetryService,
+ @IHostService private readonly hostService: IHostService,
+ @IFileService fileService: IFileService,
+ @IProductService private readonly productService: IProductService,
+ ) {
+ super();
+ this._register(lifecycleService.onShutdown(() => this.dispose()));
+ const recentlyOpened = this.workspacesService.getRecentlyOpened();
+ const installedExtensions = this.instantiationService.invokeFunction(getInstalledExtensions);
+ const resource = URI.parse(require.toUrl('./az_data_welcome_page'))
+ .with({
+ scheme: Schemas.walkThrough,
+ query: JSON.stringify({ moduleId: 'sql/workbench/contrib/welcome/page/browser/az_data_welcome_page' })
+ });
+ this.editorInput = this.instantiationService.createInstance(WalkThroughInput, {
+ typeId: welcomeInputTypeId,
+ name: localize('welcome.title', "Welcome"),
+ resource,
+ telemetryFrom,
+ onReady: (container: HTMLElement) => this.onReady(container, recentlyOpened, installedExtensions, fileService)
+ });
+ }
+ public openEditor() {
+ return this.editorService.openEditor(this.editorInput, { pinned: false });
+ }
+ private onReady(container: HTMLElement, recentlyOpened: Promise, installedExtensions: Promise, fileService: IFileService): void {
+ const enabled = isWelcomePageEnabled(this.configurationService, this.contextService);
+ const showOnStartup = container.querySelector('#showOnStartup');
+ if (enabled) {
+ showOnStartup.setAttribute('checked', 'checked');
+ }
+ showOnStartup.addEventListener('click', e => {
+ this.configurationService.updateValue(configurationKey, showOnStartup.checked ? 'welcomePage' : 'newUntitledFile', ConfigurationTarget.USER);
+ });
+ const prodName = container.querySelector('.welcomePage .title .caption') as HTMLElement;
+ if (prodName) {
+ prodName.innerHTML = this.productService.nameLong;
+ }
+ recentlyOpened.then(async ({ workspaces }) => {
+ // Filter out the current workspace
+ workspaces = workspaces.filter(recent => !this.contextService.isCurrentWorkspace(isRecentWorkspace(recent) ? recent.workspace : recent.folderUri));
+ if (!workspaces.length) {
+ const recent = container.querySelector('.welcomePage') as HTMLElement;
+ recent.classList.add('emptyRecent');
+ return;
+ }
+ const ul = container.querySelector('.recent ul');
+ if (!ul) {
+ return;
+ }
+ const workspacesToShow = workspaces.slice(0, 5);
+ const updateEntries = async () => {
+ while (ul.firstChild) {
+ ul.removeChild(ul.firstChild);
+ }
+ await this.mapListEntries(workspacesToShow, fileService);
+ };
+ await updateEntries();
+ this._register(this.labelService.onDidChangeFormatters(updateEntries));
+ }).then(undefined, onUnexpectedError);
+ this.addExtensionList(container, '.extension_list');
+ this.addExtensionPack(container, '.extensionPack');
+ this.updateInstalledExtensions(container, installedExtensions);
+ this._register(this.instantiationService.invokeFunction(onExtensionChanged)(ids => {
+ for (const id of ids) {
+ if (container.querySelector(`.installExtension[data-extension="${id.id}"], .enabledExtension[data-extension="${id.id}"]`)) {
+ const installedExtensions = this.instantiationService.invokeFunction(getInstalledExtensions);
+ this.updateInstalledExtensions(container, installedExtensions);
+ break;
+ }
+ }
+ }));
+ this.addVideoImageSource();
+ this.createDropDown();
+ this.createWidePreviewToolTip();
+ this.createPreviewModal();
+ }
+
+ private addVideoImageSource() {
+ const videoIntroduction = document.querySelector('#video_introduction') as HTMLImageElement;
+ const videoOverview = document.querySelector('#video_overview') as HTMLImageElement;
+
+ videoIntroduction.src = require.toUrl('./../../media/video_introduction.png');
+ videoOverview.src = require.toUrl('./../../media/video_overview.png');
+ }
+
+ private createWidePreviewToolTip() {
+ const previewLink = document.querySelector('#preview_link_wide');
+ const tooltip = document.querySelector('#tooltip_text_wide');
+ const previewModalBody = document.querySelector('.preview_tooltip_body') as HTMLElement;
+ const previewModalHeader = document.querySelector('.preview_tooltip_header') as HTMLElement;
+
+ previewLink.addEventListener('mouseover', () => {
+ tooltip.setAttribute('aria-hidden', 'true');
+ tooltip.classList.toggle('show');
+ });
+ previewLink.addEventListener('mouseout', () => {
+ tooltip.setAttribute('aria-hidden', 'false');
+ tooltip.classList.remove('show');
+ });
+
+ previewLink.addEventListener('keydown', (e: KeyboardEvent) => {
+ let event = new StandardKeyboardEvent(e);
+
+ if (event.equals(KeyCode.Escape)) {
+ if (tooltip.classList.contains('show')) {
+ tooltip.setAttribute('aria-hidden', 'true');
+ tooltip.classList.remove('show');
+ }
+ }
+ else if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+ tooltip.setAttribute('aria-hidden', 'false');
+ tooltip.classList.toggle('show');
+ previewModalHeader.focus();
+ }
+ });
+
+ tooltip.addEventListener('keydown', (e: KeyboardEvent) => {
+ let event = new StandardKeyboardEvent(e);
+
+ if (event.equals(KeyCode.Escape)) {
+ if (tooltip.classList.contains('show')) {
+ tooltip.setAttribute('aria-hidden', 'true');
+ tooltip.classList.remove('show');
+ }
+ }
+ else if (event.equals(KeyCode.Tab)) {
+ e.preventDefault();
+ if (e.target === previewModalBody) {
+ previewModalHeader.focus();
+ } else {
+ previewModalBody.focus();
+ }
+ }
+ });
+
+ window.addEventListener('click', (event) => {
+ const target = event.target as HTMLTextAreaElement;
+ if (!target.matches('.tooltip')) {
+ if (tooltip.classList.contains('show')) {
+ tooltip.classList.remove('show');
+ }
+ }
+ });
+ }
+
+ private createDropDown() {
+ const dropdownBtn = document.querySelector('#dropdown_btn');
+ const dropdown = document.querySelector('#dropdown') as HTMLInputElement;
+
+ dropdownBtn.addEventListener('click', () => {
+ dropdown.classList.toggle('show');
+ });
+
+ dropdownBtn.addEventListener('keydown', (e: KeyboardEvent) => {
+ let event = new StandardKeyboardEvent(e);
+ if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+ const dropdownFirstElement = document.querySelector('#dropdown').firstElementChild.children[0] as HTMLInputElement;
+ dropdown.classList.toggle('show');
+ dropdownFirstElement.focus();
+ }
+ });
+
+ dropdown.addEventListener('keydown', (e: KeyboardEvent) => {
+ let event = new StandardKeyboardEvent(e);
+ if (event.equals(KeyCode.Escape)) {
+ if (dropdown.classList.contains('show')) {
+ dropdown.classList.remove('show');
+ const currentSelection = document.querySelector('.move:focus') as HTMLInputElement;
+ currentSelection.blur();
+ }
+ }
+ });
+
+ const body = document.querySelector('body');
+
+ if (body.classList.contains('windows') || body.classList.contains('linux')) {
+ const macOnly = document.querySelector('#dropdown_mac_only');
+ macOnly.remove();
+ } else if (body.classList.contains('mac')) {
+ const windowsLinuxOnly = document.querySelector('#dropdown_windows_linux_only');
+ windowsLinuxOnly.remove();
+ }
+
+ window.addEventListener('click', (event) => {
+ const target = event.target as HTMLTextAreaElement;
+ if (!target.matches('.dropdown')) {
+ if (dropdown.classList.contains('show')) {
+ dropdown.classList.remove('show');
+ }
+ }
+ });
+
+ dropdown.addEventListener('keydown', function (e: KeyboardEvent) {
+ const dropdownLastElement = document.querySelector('#dropdown').lastElementChild.children[0] as HTMLInputElement;
+ const dropdownFirstElement = document.querySelector('#dropdown').firstElementChild.children[0] as HTMLInputElement;
+ let event = new StandardKeyboardEvent(e);
+ if (event.equals(KeyCode.Tab)) {
+ e.preventDefault();
+ return;
+ }
+ else if (event.equals(KeyCode.UpArrow) || event.equals(KeyCode.LeftArrow)) {
+ if (e.target === dropdownFirstElement) {
+ dropdownLastElement.focus();
+ } else {
+ const movePrev = document.querySelector('.move:focus').parentElement.previousElementSibling.children[0] as HTMLElement;
+ movePrev.focus();
+ }
+ }
+ else if (event.equals(KeyCode.DownArrow) || event.equals(KeyCode.RightArrow)) {
+ if (e.target === dropdownLastElement) {
+ dropdownFirstElement.focus();
+ } else {
+ const moveNext = document.querySelector('.move:focus').parentElement.nextElementSibling.children[0] as HTMLElement;
+ moveNext.focus();
+ }
+ }
+ });
+ }
+
+ private createPreviewModal() {
+ const modal = document.querySelector('#preview_modal') as HTMLElement;
+ const btn = document.querySelector('#tool_tip_container_narrow') as HTMLElement;
+ const span = document.querySelector('.close_icon') as HTMLElement;
+ const previewModalHeader = document.querySelector('.preview_modal_header') as HTMLElement;
+
+
+
+ btn.addEventListener('click', function () {
+ modal.classList.toggle('show');
+ });
+
+ span.addEventListener('click', function () {
+ modal.classList.remove('show');
+ });
+
+ window.addEventListener('click', (e: MouseEvent) => {
+ if (e.target === modal && modal.classList.contains('show')) {
+ modal.classList.remove('show');
+ }
+ });
+
+ btn.addEventListener('keydown', (e: KeyboardEvent) => {
+ let event = new StandardKeyboardEvent(e);
+
+ if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+ modal.classList.toggle('show');
+ modal.setAttribute('aria-hidden', 'false');
+ previewModalHeader.focus();
+ }
+ if (event.equals(KeyCode.Escape)) {
+ if (modal.classList.contains('show')) {
+ modal.setAttribute('aria-hidden', 'true');
+ modal.classList.remove('show');
+ }
+ }
+ });
+
+ window.addEventListener('keydown', (e: KeyboardEvent) => {
+ let event = new StandardKeyboardEvent(e);
+ const target = e.target as HTMLTextAreaElement;
+ if (!target.matches('.modal') && event.equals(KeyCode.Escape)) {
+ if (modal.classList.contains('show')) {
+ modal.setAttribute('aria-hidden', 'true');
+ modal.classList.remove('show');
+ }
+ }
+ });
+
+ modal.addEventListener('keydown', function (e: KeyboardEvent) {
+ const previewModalBody = document.querySelector('.preview_modal_body') as HTMLElement;
+ const previewModalHeader = document.querySelector('.preview_modal_header') as HTMLElement;
+ let event = new StandardKeyboardEvent(e);
+
+ if (event.equals(KeyCode.Tab)) {
+ e.preventDefault();
+ if (e.target === previewModalBody) {
+ previewModalHeader.focus();
+
+ } else {
+ previewModalBody.focus();
+ }
+ }
+ });
+ }
+
+ private async createListEntries(fileService: IFileService, fullPath: URI, windowOpenable: IWindowOpenable, relativePath: string): Promise {
+ let result: HTMLElement[] = [];
+ const value = await fileService.resolve(fullPath);
+ let date = new Date(value.mtime);
+ let mtime: Date = date;
+ const options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+ const lastOpened: string = mtime.toLocaleDateString(undefined, options);
+ const { name, parentPath } = splitName(relativePath);
+ const li = document.createElement('li');
+ const icon = document.createElement('i');
+ const a = document.createElement('a');
+ const span = document.createElement('span');
+ const ul = document.querySelector('.recent ul');
+
+ icon.title = relativePath;
+ a.innerText = name;
+ a.title = relativePath;
+ a.setAttribute('aria-label', localize('welcomePage.openFolderWithPath', "Open folder {0} with path {1}", name, parentPath));
+ a.href = 'javascript:void(0)';
+ a.addEventListener('click', e => {
+ this.telemetryService.publicLog2('workbenchActionExecuted', {
+ id: 'openRecentFolder',
+ from: telemetryFrom
+ });
+ this.hostService.openWindow([windowOpenable], { forceNewWindow: e.ctrlKey || e.metaKey });
+ e.preventDefault();
+ e.stopPropagation();
+ });
+ icon.classList.add('themed_icon');
+ li.appendChild(icon);
+ li.appendChild(a);
+ span.classList.add('path');
+ span.classList.add('detail');
+ span.innerText = lastOpened;
+ span.title = relativePath;
+ li.appendChild(span);
+ ul.appendChild(li);
+ result.push(li);
+ return result;
+ }
+
+ private async mapListEntries(recents: (IRecentWorkspace | IRecentFolder)[], fileService: IFileService): Promise {
+ const result: HTMLElement[] = [];
+ for (let i = 0; i < recents.length; i++) {
+ const recent = recents[i];
+ let relativePath: string;
+ let fullPath: URI;
+ let windowOpenable: IWindowOpenable;
+ if (isRecentFolder(recent)) {
+ windowOpenable = { folderUri: recent.folderUri };
+ relativePath = recent.label || this.labelService.getWorkspaceLabel(recent.folderUri, { verbose: true });
+ fullPath = recent.folderUri;
+ } else {
+ relativePath = recent.label || this.labelService.getWorkspaceLabel(recent.workspace, { verbose: true });
+ windowOpenable = { workspaceUri: recent.workspace.configPath };
+ }
+ const elements = await this.createListEntries(fileService, fullPath, windowOpenable, relativePath);
+ result.push(...elements);
+ }
+ return result;
+ }
+
+ private addExtensionList(container: HTMLElement, listSelector: string) {
+ const list = container.querySelector(listSelector);
+ if (list) {
+ extensions.forEach((extension, i) => {
+ const flexDivContainerClasses = ['flex', 'flex_a_center', 'extension_inner'];
+ const outerAnchorContainerElm = document.createElement('a');
+ const flexDivContainerElm = document.createElement('div');
+ const descriptionContainerElm = document.createElement('div');
+ const imgContainerElm = document.createElement('div');
+ const iconElm = document.createElement('img');
+ const pElm = document.createElement('p');
+ const bodyElm = document.createElement('p');
+
+ outerAnchorContainerElm.classList.add('extension');
+ outerAnchorContainerElm.classList.add('tile');
+ outerAnchorContainerElm.href = extension.link;
+ flexDivContainerElm.classList.add(...flexDivContainerClasses);
+ descriptionContainerElm.classList.add('description');
+ imgContainerElm.classList.add('img_container');
+ iconElm.classList.add('icon');
+ pElm.classList.add('extension_header');
+
+ iconElm.src = extension.icon;
+
+ imgContainerElm.appendChild(iconElm);
+ flexDivContainerElm.appendChild(imgContainerElm);
+ flexDivContainerElm.appendChild(descriptionContainerElm);
+ descriptionContainerElm.appendChild(pElm);
+ descriptionContainerElm.appendChild(bodyElm);
+ outerAnchorContainerElm.appendChild(flexDivContainerElm);
+ pElm.innerText = extension.name;
+ bodyElm.innerText = extension.description;
+ list.appendChild(outerAnchorContainerElm);
+ });
+ }
+ }
+
+ private addExtensionPack(container: HTMLElement, anchorSelector: string) {
+ const btnContainer = container.querySelector(anchorSelector);
+ if (btnContainer) {
+ extensionPacks.forEach((extension, i) => {
+ const a = document.createElement('a');
+ const classes = ['btn', 'btn_secondary', 'a_self_end', 'flex', 'flex_a_center', 'flex_j_center'];
+ const btn = document.createElement('button');
+ const description = document.querySelector('.extension_pack_body');
+ const header = document.querySelector('.extension_pack_header');
+
+ a.classList.add(...classes);
+ a.innerText = localize('welcomePage.install', "Install");
+ a.title = extension.title || (extension.isKeymap ? localize('welcomePage.installKeymap', "Install {0} keymap", extension.name) : localize('welcomePage.installExtensionPack', "Install additional support for {0}", extension.name));
+ a.classList.add('installExtension');
+ a.setAttribute('data-extension', extension.id);
+ a.href = 'javascript:void(0)';
+ a.addEventListener('click', e => {
+ this.installExtension(extension);
+ e.preventDefault();
+ e.stopPropagation();
+ });
+ btnContainer.appendChild(a);
+ btn.innerText = localize('welcomePage.installed', "Installed");
+ btn.title = extension.isKeymap ? localize('welcomePage.installedKeymap', "{0} keymap is already installed", extension.name) : localize('welcomePage.installedExtensionPack', "{0} support is already installed", extension.name);
+ btn.classList.add('enabledExtension');
+ btn.classList.add(...classes);
+ btn.setAttribute('disabled', 'true');
+ btn.setAttribute('data-extension', extension.id);
+ btnContainer.appendChild(btn);
+
+ description.innerHTML = extension.description;
+ header.innerHTML = extension.name;
+
+ const extensionListContainer = document.querySelector('.extension_pack_extension_list');
+ extensionPackExtensions.forEach((j) => {
+ const outerContainerElem = document.createElement('div');
+ const flexContainerElem = document.createElement('div');
+ const iconContainerElem = document.createElement('img');
+ const descriptionContainerElem = document.createElement('div');
+ const pElem = document.createElement('p');
+ const anchorElem = document.createElement('a');
+
+ const outerContainerClasses = ['extension_pack_extension_container', 'flex', 'flex_j_center'];
+ const flexContainerClasses = ['flex', 'flex_a_center'];
+
+ anchorElem.href = j.link;
+
+ outerContainerElem.classList.add(...outerContainerClasses);
+ flexContainerElem.classList.add(...flexContainerClasses);
+ iconContainerElem.classList.add('icon');
+ pElem.classList.add('extension_pack_extension_list_header');
+ descriptionContainerElem.classList.add('description');
+
+ outerContainerElem.appendChild(flexContainerElem);
+ flexContainerElem.appendChild(iconContainerElem);
+ flexContainerElem.appendChild(descriptionContainerElem);
+ descriptionContainerElem.appendChild(anchorElem);
+ anchorElem.appendChild(pElem);
+
+ pElem.innerText = j.name;
+ iconContainerElem.src = j.icon;
+
+ extensionListContainer.appendChild(outerContainerElem);
+ });
+ });
+ }
+ }
+
+ private installExtension(extensionSuggestion: ExtensionSuggestion): void {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageInstall-1" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.installEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ });
+ this.instantiationService.invokeFunction(getInstalledExtensions).then(extensions => {
+ const installedExtension = arrays.first(extensions, extension => areSameExtensions(extension.identifier, { id: extensionSuggestion.id }));
+ if (installedExtension && installedExtension.globallyEnabled) {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageInstalled-1" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "outcome": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.installedEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ outcome: 'already_enabled',
+ });
+ this.notificationService.info(extensionPackStrings.alreadyInstalled(extensionSuggestion.name));
+ return;
+ }
+ const foundAndInstalled = installedExtension ? Promise.resolve(installedExtension.local) : this.extensionGalleryService.query({ names: [extensionSuggestion.id], source: telemetryFrom }, CancellationToken.None)
+ .then((result): null | Promise => {
+ const [extension] = result.firstPage;
+ if (!extension) {
+ return null;
+ }
+ return this.extensionManagementService.installFromGallery(extension)
+ .then(() => this.extensionManagementService.getInstalled(ExtensionType.User))
+ .then(installed => {
+ const local = installed.filter(i => areSameExtensions(extension.identifier, i.identifier))[0];
+ // TODO: Do this as part of the install to avoid multiple events.
+ return this.extensionEnablementService.setEnablement([local], EnablementState.DisabledGlobally).then(() => local);
+ });
+ });
+
+ this.notificationService.prompt(
+ Severity.Info,
+ extensionPackStrings.reloadAfterInstall(extensionSuggestion.name),
+ [{
+ label: localize('ok', "OK"),
+ run: () => {
+ const messageDelay = new TimeoutTimer();
+ messageDelay.cancelAndSet(() => {
+ this.notificationService.info(extensionPackStrings.reloadAfterInstall(extensionSuggestion.name));
+ }, 300);
+ const extensionsToDisable = extensions.filter(extension => isKeymapExtension(this.tipsService, extension) && extension.globallyEnabled).map(extension => extension.local);
+ extensionsToDisable.length ? this.extensionEnablementService.setEnablement(extensionsToDisable, EnablementState.DisabledGlobally) : Promise.resolve()
+ .then(() => {
+ return foundAndInstalled.then(foundExtension => {
+ messageDelay.cancel();
+ if (foundExtension) {
+ return this.extensionEnablementService.setEnablement([foundExtension], EnablementState.EnabledGlobally)
+ .then(() => {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageInstalled-2" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "outcome": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.installedEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ outcome: installedExtension ? 'enabled' : 'installed',
+ });
+ return this.hostService.reload();
+ });
+ } else {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageInstalled-3" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "outcome": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.installedEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ outcome: 'not_found',
+ });
+ this.notificationService.info(extensionPackStrings.extensionNotFound(extensionSuggestion.name, extensionSuggestion.id));
+ return undefined;
+ }
+ });
+ }).then(undefined, err => {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageInstalled-4" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "outcome": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.installedEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ outcome: isPromiseCanceledError(err) ? 'canceled' : 'error',
+ });
+ this.notificationService.error(err);
+ });
+ }
+ }, {
+ label: localize('details', "Details"),
+ run: () => {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageDetails-1" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.detailsEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ });
+ this.extensionsWorkbenchService.queryGallery({ names: [extensionSuggestion.id] }, CancellationToken.None)
+ .then(result => this.extensionsWorkbenchService.open(result.firstPage[0]))
+ .then(undefined, onUnexpectedError);
+ }
+ }]
+ );
+ }).then(undefined, err => {
+ /* __GDPR__FRAGMENT__
+ "WelcomePageInstalled-6" : {
+ "from" : { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "extensionId": { "classification": "SystemMetaData", "purpose": "FeatureInsight" },
+ "outcome": { "classification": "SystemMetaData", "purpose": "FeatureInsight" }
+ }
+ */
+ this.telemetryService.publicLog(extensionPackStrings.installedEvent, {
+ from: telemetryFrom,
+ extensionId: extensionSuggestion.id,
+ outcome: isPromiseCanceledError(err) ? 'canceled' : 'error',
+ });
+ this.notificationService.error(err);
+ });
+ }
+
+ private updateInstalledExtensions(container: HTMLElement, installedExtensions: Promise) {
+ installedExtensions.then(extensions => {
+ const elements = container.querySelectorAll('.installExtension, .enabledExtension');
+ for (let i = 0; i < elements.length; i++) {
+ elements[i].classList.remove('installed');
+ }
+ extensions.filter(ext => ext.globallyEnabled)
+ .map(ext => ext.identifier.id)
+ .forEach(id => {
+ const install = container.querySelectorAll(`.installExtension[data-extension="${id}"]`);
+ for (let i = 0; i < install.length; i++) {
+ install[i].classList.add('installed');
+ }
+ const enabled = container.querySelectorAll(`.enabledExtension[data-extension="${id}"]`);
+ for (let i = 0; i < enabled.length; i++) {
+ enabled[i].classList.add('installed');
+ }
+ });
+ }).then(undefined, onUnexpectedError);
+ }
+}
+
+export class WelcomeInputFactory implements IEditorInputFactory {
+
+ static readonly ID = welcomeInputTypeId;
+
+ public canSerialize(editorInput: EditorInput): boolean {
+ return true;
+ }
+
+ public serialize(editorInput: EditorInput): string {
+ return '{}';
+ }
+
+ public deserialize(instantiationService: IInstantiationService, serializedEditorInput: string): WalkThroughInput {
+ return instantiationService.createInstance(WelcomePage)
+ .editorInput;
+ }
+}
+
+// theming
+export const welcomePageBackground = registerColor('welcomePage.background', { light: null, dark: null, hc: null }, localize('welcomePage.background', 'Background color for the Welcome page.'));
+
+
+registerThemingParticipant((theme, collector) => {
+
+ const backgroundColor = theme.getColor(welcomePageBackground);
+ if (backgroundColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer { background-color: ${backgroundColor}; }`);
+ }
+ const tileBackgroundColor = theme.getColor(inputBackground);
+ if (tileBackgroundColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tile:not(.extension):not(.extension_pack) { background-color: ${tileBackgroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tool_tip .tool_tip_text { background-color: ${tileBackgroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .modal_content { background-color: ${tileBackgroundColor}; }`);
+ }
+ const tileBorderColor = theme.getColor(tileBorder);
+ if (tileBorderColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .tile:not(.extension):not(.extension_pack) { border-color: ${tileBorderColor}; }`);
+ 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}; }`);
+ }
+ 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) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_primary { color: ${buttonForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .icon_arrow_down:before { color: ${buttonForegroundColor};}`);
+ 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 buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
+ if (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};}`);
+ }
+ const buttonSecondaryBorderColor = theme.getColor(buttonSecondaryBorder);
+ if (buttonSecondaryBorderColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary { border: 1px solid ${buttonSecondaryBorderColor};}`);
+ }
+ const buttonSecondaryColor = theme.getColor(buttonSecondary);
+ if (buttonSecondaryColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary { color: ${buttonSecondaryColor};}`);
+ }
+ const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverColor);
+ if (buttonSecondaryColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn_secondary:hover { color: ${buttonSecondaryHover}; border: 1px solid ${buttonSecondaryHover};}`);
+ }
+ const selectBackgroundColor = theme.getColor(selectBackground);
+ if (selectBackgroundColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content { background: ${selectBackgroundColor};}`);
+ }
+ const menuForegroundColor = theme.getColor(menuForeground);
+ if (menuForegroundColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content a { color: ${menuForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .icon_arrow_down_dark:before { color: ${menuForegroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .moreRecent_list li.moreRecent a { color: ${menuForegroundColor};}`);
+ }
+ const hoverShadowColor = theme.getColor(hoverShadow);
+ if (hoverShadowColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .tile:hover:not(.no_hover) { box-shadow: 0px 3px 8px ${hoverShadowColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .dropdown-content { box-shadow: 0px 4px 4px ${hoverShadowColor};}`);
+ }
+ const menuBorderColor = theme.getColor(menuBorder);
+ 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) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .tile.extension_pack { border-color: ${editorWidgetBorderColor};}`);
+ }
+ const extensionPackHeaderTextShadow = theme.getColor(extensionPackHeaderShadow);
+ if (extensionPackHeaderTextShadow) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .extension_pack_header { text-shadow: 0px 4px 4px ${extensionPackHeaderTextShadow};}`);
+ }
+ const extensionPackGradientColorOne = theme.getColor(extensionPackGradientColorOneColor);
+ const extensionPackGradientColorTwo = theme.getColor(extensionPackGradientColorTwoColor);
+ if (extensionPackGradientColorOne && extensionPackGradientColorTwo) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .extension_pack_description:before { background-image: linear-gradient(0.49deg, ${extensionPackGradientColorOne} 82.75%, ${extensionPackGradientColorTwo});}`);
+ }
+ const selectBorderColor = theme.getColor(selectBorder);
+ if (selectBorderColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .list li:not(.moreRecent), .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .list_header_container, .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .pinned .list li:not(.moreRecent), .monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .pinned .list_header_container { border-color: ${selectBorderColor};}`);
+ }
+ const descriptionColor = theme.getColor(descriptionForeground);
+ if (descriptionColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .detail { color: ${descriptionColor}; }`);
+ }
+ const disabledButtonColor = theme.getColor(disabledButton);
+ if (disabledButtonColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn:disabled { color: ${disabledButtonColor}; }`);
+ }
+ const disabledButtonBackgroundColor = theme.getColor(disabledButtonBackground);
+ if (disabledButtonColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn:disabled { background: ${disabledButtonBackgroundColor}; }`);
+ }
+ const foregroundColor = theme.getColor(foreground);
+ if (foregroundColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage h1, h2, h3, h4, h5, h6, h7, p { color: ${foregroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .resources .label { color: ${foregroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .ads_homepage_section .history .list li a { color: ${foregroundColor};}`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .resources .label { color: ${foregroundColor}; }`);
+ }
+
+ const link = theme.getColor(textLinkForeground);
+ if (link) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a { color: ${link}; }`);
+ }
+ const activeLink = theme.getColor(textLinkActiveForeground);
+ if (activeLink) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a:hover, .monaco-workbench .part.editor > .content .welcomePage a:active { color: ${activeLink}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .themed_icon_alt { background-color: ${activeLink}; }`);
+ }
+ const focusColor = theme.getColor(focusBorder);
+ if (focusColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage a:focus { outline-color: ${focusColor}; }`);
+ }
+ const activeBorder = theme.getColor(activeContrastBorder);
+ if (activeBorder) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .commands .item button:hover { outline-color: ${activeBorder}; }`);
+ }
+ const focusBorderColor = theme.getColor(focusBorder);
+ if (focusBorderColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage #dropdown_btn:focus { outline-color: ${focusBorderColor}; }`);
+ }
+ const iconForegroundColor = theme.getColor(iconForeground);
+ if (iconForegroundColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .entity { color: ${iconForegroundColor}; }`);
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .ads_homepage .themed_icon { background-color: ${iconForegroundColor}; }`);
+ }
+ const gradientOneColor = theme.getColor(gradientOne);
+ const gradientTwoColor = theme.getColor(gradientTwo);
+ const gradientBackgroundColor = theme.getColor(gradientBackground);
+ if (gradientTwoColor && gradientOneColor) {
+ collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .ads_homepage .gradient { background-image: linear-gradient(0deg, ${gradientOneColor} 0%, ${gradientTwoColor} 100%); background-color: ${gradientBackgroundColor}}`);
+ }
+});
diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts
index 3077246299..66813e7b11 100644
--- a/src/vs/platform/theme/common/colorRegistry.ts
+++ b/src/vs/platform/theme/common/colorRegistry.ts
@@ -227,7 +227,7 @@ export const simpleCheckboxForeground = registerColor('checkbox.foreground', { d
export const simpleCheckboxBorder = registerColor('checkbox.border', { dark: selectBorder, light: selectBorder, hc: selectBorder }, nls.localize('checkbox.border', "Border color of checkbox widget."));
export const buttonForeground = registerColor('button.foreground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('buttonForeground', "Button foreground color."));
-export const buttonBackground = registerColor('button.background', { dark: '#0E639C', light: '#007ACC', hc: null }, nls.localize('buttonBackground', "Button background color."));
+export const buttonBackground = registerColor('button.background', { dark: '#0078D4', light: '#007ACC', hc: '#0078D4' }, nls.localize('buttonBackground', "Button background color."));
export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering."));
export const badgeBackground = registerColor('badge.background', { dark: '#4D4D4D', light: '#C4C4C4', hc: Color.black }, nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count."));
diff --git a/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts b/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts
index 10d152bfdd..fcd8bbd8fd 100644
--- a/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts
+++ b/src/vs/workbench/contrib/welcome/page/browser/welcomePage.contribution.ts
@@ -6,7 +6,7 @@
import { localize } from 'vs/nls';
import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions';
import { Registry } from 'vs/platform/registry/common/platform';
-import { WelcomePageContribution, WelcomePageAction, WelcomeInputFactory } from 'vs/workbench/contrib/welcome/page/browser/welcomePage';
+import { WelcomePageContribution, WelcomePageAction, WelcomeInputFactory } from 'sql/workbench/contrib/welcome/page/browser/welcomePage'; // {{SQL CARBON EDIT}} use our welcome page
import { IWorkbenchActionRegistry, Extensions as ActionExtensions } from 'vs/workbench/common/actions';
import { SyncActionDescriptor, MenuRegistry, MenuId } from 'vs/platform/actions/common/actions';
import { IConfigurationRegistry, Extensions as ConfigurationExtensions, ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry';