Getting started content (#114305)

* Codespaces, setup and beginner journeys for getting started.

* Added missing alt texts and shortened some texts.

* Fixing wording for terminal in Codespaces.

* Fixed action for opening settings

* Replacing unoptimized PNGs with optimized jpgs (70% compression)

* Add some minor css tweaks

Co-authored-by: Jackson Kearl <jakearl@microsoft.com>

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css

@@ -39,6 +39,7 @@
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .category-title {
 	margin-bottom: 4px;
+	font-weight: 600;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .category-description-container {
@@ -77,6 +78,7 @@
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .getting-started-category {
 	width: 330px;
 	min-height: 80px;
+	font-size: 13px;
 	margin: 12px;
 	text-align: left;
 	display: flex;
@@ -134,11 +136,13 @@
 	width: 100%;
 	overflow: hidden;
 	transition: max-height .1s linear;
-	max-height: 150px; /* taller than we need, to allow for animating */
+	max-height: 150px;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) {
 	max-height: 54px;
+	background: none;
+	opacity: 0.8;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail #getting-started-detail-columns #getting-started-detail-left > div {
@@ -149,17 +153,14 @@
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) .actions,
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) button,
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) a {
-	visibility: hidden;
+	display: none;
 }
 
-.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .task-title {
-	font-size: 14pt;
-}
 
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .task-description {
-	margin-top: 4px;
-	font-size: 13px;
+	padding-top: 8px;
+	font-size: 12px;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .actions {
@@ -179,13 +180,14 @@
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .codicon {
 	margin-right: 8px;
-	font-size: 20px;
+	font-size: 13px;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task-action {
 	padding: 6px 12px;
-	font-size: 11pt;
+	font-size: 13px;
 	min-width: 100px;
+	margin-bottom: 0;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail #getting-started-detail-left {
@@ -212,7 +214,7 @@
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail #getting-started-detail-right {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: center;
 	width: 66%;
 	min-height: 300px;
@@ -227,11 +229,6 @@
 	text-align: left;
 	padding: 16px;
 }
-
-.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer button {
-	margin-bottom: 12px;
-}
-
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer button:hover {
 	cursor: pointer;
 }
@@ -275,12 +272,13 @@
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide h2 {
 	font-weight: normal;
+	line-height: 26px;
 	margin: 0 0 4px 0;
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide h3 {
-	font-size: 18px;
-	font-weight: bold;
+	font-size: 13px;
+	font-weight: 700;
 	margin: 0;
 }
 

src/vs/workbench/services/gettingStarted/common/gettingStartedContent.ts

@@ -9,12 +9,9 @@ import { ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 
 
+const setupIcon = registerIcon('getting-started-setup', Codicon.heart, localize('getting-started-setup-icon', "Icon used for the setup category of getting started"));
 const beginnerIcon = registerIcon('getting-started-beginner', Codicon.lightbulb, localize('getting-started-beginner-icon', "Icon used for the beginner category of getting started"));
-const intermediateIcon = registerIcon('getting-started-intermediate', Codicon.heart, localize('getting-started-intermediate-icon', "Icon used for the intermediate category of getting started"));
-const advancedIcon = registerIcon('getting-started-advanced', Codicon.tools, localize('getting-started-advanced-icon', "Icon used for the advanced category of getting started"));
-
-const openFolderIcon = registerIcon('getting-started-open-folder', Codicon.folderOpened, localize('getting-started-open-folder-icon', "Icon used for the open folder entry in getting started"));
-const interactivePlaygroundIcon = registerIcon('getting-started-interactive-playground', Codicon.library, localize('getting-started-interactive-playground-icon', "Icon used for the interactive playground entry of getting started"));
+const codespacesIcon = registerIcon('getting-started-codespaces', Codicon.github, localize('getting-started-codespaces-icon', "Icon used for the codespaces category of getting started"));
 
 
 type GettingStartedItem = {
@@ -42,141 +39,195 @@ type GettingStartedContent = GettingStartedCategory[];
 
 export const content: GettingStartedContent = [
 	{
-		id: 'Beginner',
-		title: localize('gettingStarted.beginner.title', "Get Started"),
-		icon: beginnerIcon,
-		description: localize('gettingStarted.beginner.description', "Get to know your new editor"),
+		id: 'Codespaces',
+		title: localize('gettingStarted.codespaces.title', "Primer on GitHub Codespaces"),
+		icon: codespacesIcon,
+		when: 'remoteConnectionState == connected',
+		description: localize('gettingStarted.codespaces.description', "Get up and running with your instant code environment."),
+		content: {
+			type: 'items',
+			items: [
+				{
+					id: 'runProjectTask',
+					title: localize('gettingStarted.runProject.title', "Build & run your project"),
+					description: localize('gettingStarted.runProject.description', "Build, run & debug your application in your codespace instead of locally."),
+					button: {
+						title: localize('gettingStarted.runProject.button', "Run Project"),
+						command: 'workbench.action.debug.start'
+					},
+					doneOn: { commandExecuted: 'workbench.action.debug.start' },
+					media: { type: 'image', altText: 'Node.js project running debug mode and paused.', path: 'runProject.jpg' },
+				},
+				{
+					id: 'forwardPortsTask',
+					title: localize('gettingStarted.forwardPorts.title', "Forward Ports to the Web"),
+					description: localize('gettingStarted.forwardPorts.description', "Test and debug your application in your browser by forwarding TCP ports running within your codespace."),
+					button: {
+						title: localize('gettingStarted.forwardPorts.button', "Open Ports"),
+						command: '~remote.forwardedPorts.focus'
+					},
+					doneOn: { commandExecuted: '~remote.forwardedPorts.focus' },
+					media: { type: 'image', altText: 'Ports panel.', path: 'forwardPorts.jpg' },
+				},
+				{
+					id: 'pullRequests',
+					title: localize('gettingStarted.pullRequests.title', "Pull Requests at Your Fingertips"),
+					description: localize('gettingStarted.pullRequests.description', "View Pull Requests. Check out branches. Add comments. Merge and delete branches from the Codespace."),
+					button: {
+						title: localize('gettingStarted.pullRequests.button', "Open GitHub Pull Request"),
+						command: 'workbench.view.extension.github-pull-requests'
+					},
+					doneOn: { commandExecuted: 'workbench.view.extension.github-pull-requests' },
+					media: { type: 'image', altText: 'Preview for reviewing a pull request.', path: 'pullRequests.jpg' },
+				},
+				{
+					id: 'remoteTerminal',
+					title: localize('gettingStarted.remoteTerminal.title', "Run Tasks in the Integrated Terminal"),
+					description: localize('gettingStarted.remoteTerminal.description', "Access your full development environment in the cloud and perform quick command-line tasks."),
+					button: {
+						title: localize('gettingStarted.remoteTerminal.button', "Focus Terminal"),
+						command: 'terminal.focus'
+					},
+					doneOn: { commandExecuted: 'terminal.focus' },
+					media: { type: 'image', altText: 'Remote terminal showing npm commands.', path: 'remoteTerminal.jpg' },
+				},
+				{
+					id: 'openVSC',
+					title: localize('gettingStarted.openVSC.title', "Open in Visual Studio Code"),
+					description: localize('gettingStarted.openVSC.description', "You can develop in your codespace directly in VS Code Code by connecting the GitHub Codespaces extension with your account on GitHub."),
+					button: {
+						title: localize('gettingStarted.openVSC.button', "Open in VS Code"),
+						command: 'github.codespaces.openInStable'
+					},
+					doneOn: { commandExecuted: 'github.codespaces.openInStable' },
+					media: { type: 'image', altText: 'Preview of the Open in VS Code command.', path: 'openVSC.jpg' },
+				}
+			]
+		}
+	},
+
+	{
+		id: 'Setup',
+		title: localize('gettingStarted.setup.title', "Quick Setup"),
+		description: localize('gettingStarted.setup.description', "Extend and customize VS Code to fit your needs."),
+		icon: setupIcon,
+		when: 'emptyWorkspaceSupport',
 		content: {
 			type: 'items',
 			items: [
 				{
 					id: 'pickColorTheme',
-					description: localize('pickColorTask.description', "Modify the colors in the user interface to suit your preferences and work environment."),
-					title: localize('pickColorTask.title', "Color Theme"),
-					button: { title: localize('pickColorTask.button', "Find a Theme"), command: 'workbench.action.selectTheme' },
+					title: localize('gettingStarted.pickColor.title', "Customize the Look With Themes"),
+					description: localize('gettingStarted.pickColor.description', "Adapt VS Code to your taste with themes, customizing interface and language syntax colors."),
+					button: { title: localize('gettingStarted.pickColor.button', "Browse Color Themes"), command: 'workbench.action.selectTheme' },
 					doneOn: { eventFired: 'themeSelected' },
-					media: { type: 'image', altText: 'ColorTheme', path: 'ColorTheme.jpg', }
+					media: { type: 'image', altText: 'Color theme preview for dark and light theme.', path: 'colorTheme.jpg', }
 				},
-
-				{
-					id: 'findKeybindingsExtensions',
-					description: localize('findKeybindingsTask.description', "Find keyboard shortcuts for Vim, Sublime, Atom and others."),
-					title: localize('findKeybindingsTask.title', "Configure Keybindings"),
-					button: {
-						title: localize('findKeybindingsTask.button', "Search for Keymaps"),
-						command: 'workbench.extensions.action.showRecommendedKeymapExtensions'
-					},
-					doneOn: { commandExecuted: 'workbench.extensions.action.showRecommendedKeymapExtensions' },
-					media: { type: 'image', altText: 'Extensions', path: 'Extensions.jpg', }
-				},
-
 				{
 					id: 'findLanguageExtensions',
-					description: localize('findLanguageExtsTask.description', "Get support for your languages like JavaScript, Python, Java, Azure, Docker, and more."),
-					title: localize('findLanguageExtsTask.title', "Languages & Tools"),
+					title: localize('gettingStarted.findLanguageExts.title', "Add More Language & Tools Support"),
+					description: localize('gettingStarted.findLanguageExts.description', "Install extensions with one click to support additional languages like Python, Java, Azure, Docker, and more."),
 					button: {
-						title: localize('findLanguageExtsTask.button', "Install Language Support"),
+						title: localize('gettingStarted.findLanguageExts.button', "Browse Language Extensions"),
 						command: 'workbench.extensions.action.showLanguageExtensions',
 					},
 					doneOn: { commandExecuted: 'workbench.extensions.action.showLanguageExtensions' },
-					media: { type: 'image', altText: 'Languages', path: 'Languages.jpg', }
+					media: { type: 'image', altText: 'Language extensions', path: 'languageExtensions.jpg', }
+				},
+				{
+					id: 'githubLogin',
+					title: localize('gettingStarted.githubLogin.title', "Use GitHub in VS Code"),
+					description: localize('gettingStarted.githubLogin.description', "Integrated GitHub makes it easier for you to manage projects from inside your code editor, including authentication, publishing repos, and viewing your repo timeline."),
+					when: '!githubBrowser:hasProviders',
+					button: {
+						title: localize('gettingStarted.githubLogin.button', "Sign in to GitHub"),
+						command: 'githubsignIn',
+					},
+					doneOn: { commandExecuted: 'workbench.extensions.action.showLanguageExtensions' },
+					media: { type: 'image', altText: 'Commiting a change via Git in VS Code.', path: 'github.jpg', }
 				},
-
 				{
 					id: 'pickAFolderTask-Mac',
-					description: localize('gettingStartedOpenFolder.description', "Open a project folder to get started!"),
-					title: localize('gettingStartedOpenFolder.title', "Open Folder"),
-					when: 'isMac',
+					title: localize('gettingStarted.setup.OpenFolder.title', "Open Your Project"),
+					description: localize('gettingStarted.setup.OpenFolder.description', "Open a project folder to get started!"),
+					when: '!emptyWorkspaceSupport && isMac',
 					button: {
-						title: localize('gettingStartedOpenFolder.button', "Pick a Folder"),
+						title: localize('gettingStarted.setup.OpenFolder.button', "Pick a Folder"),
 						command: 'workbench.action.files.openFileFolder'
 					},
 					doneOn: { commandExecuted: 'workbench.action.files.openFileFolder' },
-					media: { type: 'image', altText: 'OpenFolder', path: 'OpenFolder.jpg' }
+					media: { type: 'image', altText: 'Explorer view showing buttons for opening folder and cloning repository.', path: 'openFolder.jpg' }
 				},
-
 				{
 					id: 'pickAFolderTask-Other',
-					description: localize('gettingStartedOpenFolder.description', "Open a project folder to get started!"),
-					title: localize('gettingStartedOpenFolder.title', "Open Folder"),
-					when: '!isMac',
+					title: localize('gettingStarted.setup.OpenFolder.title', "Open Your Project"),
+					description: localize('gettingStarted.setup.OpenFolder.description', "Open a project folder to get started!"),
+					when: '!emptyWorkspaceSupport && !isMac',
 					button: {
-						title: localize('gettingStartedOpenFolder.button', "Pick a Folder"),
+						title: localize('gettingStarted.setup.OpenFolder.button', "Pick a Folder"),
 						command: 'workbench.action.files.openFolder'
 					},
 					doneOn: { commandExecuted: 'workbench.action.files.openFolder' },
-					media: { type: 'image', altText: 'OpenFolder', path: 'OpenFolder.jpg' }
+					media: { type: 'image', altText: 'Explorer view showing buttons for opening folder and cloning repository.', path: 'openFolder.jpg' }
 				}
 			]
 		}
 	},
 
 	{
-		id: 'Intermediate',
-		title: localize('gettingStarted.intermediate.title', "Essentials"),
-		icon: intermediateIcon,
-		description: localize('gettingStarted.intermediate.description', "Must know features you'll love"),
+		id: 'Beginner',
+		title: localize('gettingStarted.beginner.title', "Learn the Fundamentals"),
+		icon: beginnerIcon,
+		description: localize('gettingStarted.beginner.description', "Get up and running with must-have shortcuts & features."),
 		content: {
 			type: 'items',
 			items: [
 				{
 					id: 'commandPaletteTask',
-					description: localize('commandPaletteTask.description', "The easiest way to find everything VS Code can do. If you\'re ever looking for a feature, check here first!"),
-					title: localize('commandPaletteTask.title', "Command Palette"),
+					title: localize('gettingStarted.commandPalette.title', "Find and Run Commands"),
+					description: localize('gettingStarted.commandPalette.description', "The easiest way to find everything VS Code can do. If you\'re ever looking for a feature or a shortcut, check here first!"),
 					button: {
-						title: localize('commandPaletteTask.button', "View All Commands"),
+						title: localize('gettingStarted.commandPalette.button', "Open Command Palette"),
 						command: 'workbench.action.showCommands'
 					},
 					doneOn: { commandExecuted: 'workbench.action.showCommands' },
-					media: { type: 'image', altText: 'gif of a custom tree hover', path: 'CommandPalette.jpg' },
+					media: { type: 'image', altText: 'Command Palette overlay for searching and executing commands.', path: 'commandPalette.jpg' },
+				},
+				{
+					id: 'terminal',
+					title: localize('gettingStarted.terminal.title', "Run Command-Line Tasks"),
+					description: localize('gettingStarted.terminal.description', "Quickly run shell commands and monitor build output, right next to your code."),
+					button: {
+						title: localize('gettingStarted.terminal.button', "Open Terminal"),
+						command: 'workbench.action.terminal.toggleTerminal'
+					},
+					doneOn: { commandExecuted: 'workbench.action.terminal.toggleTerminal' },
+					media: { type: 'image', altText: 'Integrated terminal running a few npm commands', path: 'terminal.jpg' },
+				},
+				{
+					id: 'extensions',
+					title: localize('gettingStarted.extensions.title', "Supercharge VS Code With Extensions"),
+					description: localize('gettingStarted.extensions.description', "Extensions let you add languages, debuggers, and new features to support your development workflow."),
+					button: {
+						title: localize('gettingStarted.extensions.button', "Browse Recommended Extensions"),
+						command: 'workbench.extensions.action.showRecommendedExtensions'
+					},
+					doneOn: { commandExecuted: 'workbench.extensions.action.showRecommendedExtensions' },
+					media: { type: 'image', altText: 'VS Code extension marketplace with featured language extensions', path: 'extensions.jpg' },
+				},
+				{
+					id: 'settings',
+					title: localize('gettingStarted.settings.title', "Everything is a Setting"),
+					description: localize('gettingStarted.settings.description', "Optimize every part of VS Code's look & feel to your liking. Enable Settings Sync to use your personal tweaks across machines."),
+					button: {
+						title: localize('gettingStarted.settings.button', "Tweak Some Settings"),
+						command: 'workbench.action.openSettings'
+					},
+					doneOn: { commandExecuted: 'workbench.action.openSettings' },
+					media: { type: 'image', altText: 'VS Code Settings', path: 'settings.jpg' },
 				}
 			]
 		}
-	},
-
-	{
-		id: 'Advanced',
-		title: localize('gettingStarted.advanced.title', "Tips & Tricks"),
-		icon: advancedIcon,
-		description: localize('gettingStarted.advanced.description', "Favorites from VS Code experts"),
-		content: {
-			type: 'items',
-			items: []
-		}
-	},
-
-	{
-		id: 'OpenFolder-Mac',
-		title: localize('gettingStarted.openFolder.title', "Open Folder"),
-		icon: openFolderIcon,
-		when: 'isMac',
-		description: localize('gettingStarted.openFolder.description', "Open a project and start working"),
-		content: {
-			type: 'command',
-			command: 'workbench.action.files.openFileFolder'
-		}
-	},
-
-	{
-		id: 'OpenFolder-Other',
-		title: localize('gettingStarted.openFolder.title', "Open Folder"),
-		icon: openFolderIcon,
-		description: localize('gettingStarted.openFolder.description', "Open a project and start working"),
-		when: '!isMac',
-		content: {
-			type: 'command',
-			command: 'workbench.action.files.openFolder'
-		}
-	},
-
-	{
-		id: 'InteractivePlayground',
-		title: localize('gettingStarted.playground.title', "Interactive Playground"),
-		icon: interactivePlaygroundIcon,
-		description: localize('gettingStarted.interactivePlayground.description', "Learn essential editor features"),
-		content: {
-			type: 'command',
-			command: 'workbench.action.showInteractivePlayground'
-		}
 	}
+
 ];