Split Quick Links section (fixes #22097)

src/vs/platform/telemetry/common/telemetry.ts

@@ -25,7 +25,7 @@ export interface ITelemetryExperiments {
 	showNewUserWatermark: boolean;
 	openUntitledFile: boolean;
 	enableWelcomePage: boolean;
-	reorderQuickLinks: boolean;
+	mergeQuickLinks: boolean;
 }
 
 export interface ITelemetryService {

src/vs/platform/telemetry/common/telemetryUtils.ts

@@ -23,7 +23,7 @@ export const defaultExperiments: ITelemetryExperiments = {
 	showNewUserWatermark: false,
 	openUntitledFile: true,
 	enableWelcomePage: true,
-	reorderQuickLinks: false,
+	mergeQuickLinks: false,
 };
 
 export const NullTelemetryService = {
@@ -57,7 +57,7 @@ export function loadExperiments(accessor: ServicesAccessor): ITelemetryExperimen
 		showNewUserWatermark,
 		openUntitledFile,
 		enableWelcomePage,
-		reorderQuickLinks,
+		mergeQuickLinks,
 	} = splitExperimentsRandomness();
 
 	const newUserDuration = 24 * 60 * 60 * 1000;
@@ -72,7 +72,7 @@ export function loadExperiments(accessor: ServicesAccessor): ITelemetryExperimen
 		showNewUserWatermark,
 		openUntitledFile,
 		enableWelcomePage,
-		reorderQuickLinks,
+		mergeQuickLinks,
 	});
 }
 
@@ -95,13 +95,13 @@ function splitExperimentsRandomness(): ITelemetryExperiments {
 	const random1 = getExperimentsRandomness();
 	const [random2, showNewUserWatermark] = splitRandom(random1);
 	const [random3, openUntitledFile] = splitRandom(random2);
-	const [random4, reorderQuickLinks] = splitRandom(random3);
+	const [random4, mergeQuickLinks] = splitRandom(random3);
 	const [, enableWelcomePage] = splitRandom(random4);
 	return {
 		showNewUserWatermark,
 		openUntitledFile,
 		enableWelcomePage,
-		reorderQuickLinks,
+		mergeQuickLinks,
 	};
 }
 

src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts

@@ -40,6 +40,7 @@ export default () => `
 					<ul>
 						<li><a href="command:workbench.action.openDocumentationUrl">${escape(localize('welcomePage.productDocumentation', "Product documentation"))}</a></li>
 						<li><a href="command:workbench.action.openIntroductoryVideosUrl">${escape(localize('welcomePage.introductoryVideos', "Introductory videos"))}</a></li>
+						<li class="keybindingsReferenceLink"><a href="command:workbench.action.keybindingsReference">${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</a></li>
 						<li><a href="https://github.com/Microsoft/vscode">${escape(localize('welcomePage.gitHubRepository', "GitHub repository"))}</a></li>
 						<li><a href="http://stackoverflow.com/questions/tagged/vscode?sort=votes&pageSize=50">${escape(localize('welcomePage.stackOverflow', "Stack Overflow"))}</a></li>
 					</ul>
@@ -47,21 +48,33 @@ export default () => `
 				<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label></p>
 			</div>
 			<div class="commands">
-				<h2>${escape(localize('welcomePage.quickLinks', "Quick links"))}</h2>
-				<ul>
-					<li class="showInteractivePlayground"><button data-href="command:workbench.action.showInteractivePlayground"><h3>${escape(localize('welcomePage.interactivePlayground', "Interactive playground"))}</h3> <span>${escape(localize('welcomePage.interactivePlaygroundDescription', "Try essential editor features out in a short walkthrough"))}</span></button></li>
-					<li class="showInterfaceOverview"><button data-href="command:workbench.action.showInterfaceOverview"><h3>${escape(localize('welcomePage.interfaceOverview', "Interface overview"))}</h3> <span>${escape(localize('welcomePage.interfaceOverviewDescription', "Get a visual overlay highlighting the major components of the UI"))}</span></button></li>
-					<li class="selectTheme"><button data-href="command:workbench.action.selectTheme"><h3>${escape(localize('welcomePage.colorTheme', "Color theme"))}</h3> <span>${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}</span></button></li>
-					<li class="keybindingsReference"><button data-href="command:workbench.action.keybindingsReference"><h3>${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</h3> <span>${escape(localize('welcomePage.keybindingsReferenceDescription', "A printable PDF with the most common keyboard shortcuts"))}</span></button></li>
-					<li class="showCommands"><button data-href="command:workbench.action.showCommands"><h3>${escape(localize('welcomePage.showCommands', "Find and run all commands"))}</h3> <span>${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the control panel ({0})")).replace('{0}', '<span class="shortcut" data-command="workbench.action.showCommands"></span>')}</span></button></li>
-					<li class="openGlobalSettings"><button data-href="command:workbench.action.openGlobalSettings"><h3>${escape(localize('welcomePage.configureSettings', "Configure settings"))}</h3> <span>${escape(localize('welcomePage.configureSettingsDescription', "Unlock the full power of VS Code by tweaking the settings"))}</span></button></li>
-					<li class="showRecommendedKeymapExtensions"><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>${escape(localize('welcomePage.installKeymapDescription', "Install keyboard shortcuts"))}</h3> <span>${escape(localize('welcomePage.installKeymap', "Install the keyboard shortcuts of {0}, {1}, {2} and {3}"))
+				<div class="section customize">
+					<h2>${escape(localize('welcomePage.customize', "Customize"))}</h2>
+					<ul>
+						<li class="showRecommendedKeymapExtensions"><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>${escape(localize('welcomePage.installKeymapDescription', "Install keyboard shortcuts"))}</h3> <span>${escape(localize('welcomePage.installKeymap', "Install the keyboard shortcuts of {0}, {1}, {2} and {3}"))
 		.replace('{0}', `<a class="installKeymap" data-keymap-name="${escape(localize('welcomePage.vim', "Vim"))}" data-keymap="vscodevim.vim" href="javascript:void(0)">${escape(localize('welcomePage.vim', "Vim"))}</a><span class="currentKeymap" data-keymap="vscodevim.vim">${escape(localize('welcomePage.vimCurrent', "Vim (current)"))}</span>`)
 		.replace('{1}', `<a class="installKeymap" data-keymap-name="${escape(localize('welcomePage.sublime', "Sublime"))}" data-keymap="ms-vscode.sublime-keybindings" href="javascript:void(0)">${escape(localize('welcomePage.sublime', "Sublime"))}</a><span class="currentKeymap" data-keymap="ms-vscode.sublime-keybindings">${escape(localize('welcomePage.sublimeCurrent', "Sublime (current)"))}</span>`)
 		.replace('{2}', `<a class="installKeymap" data-keymap-name="${escape(localize('welcomePage.atom', "Atom"))}" data-keymap="ms-vscode.atom-keybindings" href="javascript:void(0)">${escape(localize('welcomePage.atom', "Atom"))}</a><span class="currentKeymap" data-keymap="ms-vscode.atom-keybindings">${escape(localize('welcomePage.atomCurrent', "Atom (current)"))}</span>`)
 		.replace('{3}', `<a href="command:workbench.extensions.action.showRecommendedKeymapExtensions">${escape(localize('welcomePage.others', "others"))}</a>`)}
-					</span></button></li>
-				</ul>
+						</span></button></li>
+						<li class="selectTheme"><button data-href="command:workbench.action.selectTheme"><h3>${escape(localize('welcomePage.colorTheme', "Color theme"))}</h3> <span>${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}</span></button></li>
+						<li class="openGlobalSettings"><button data-href="command:workbench.action.openGlobalSettings"><h3>${escape(localize('welcomePage.configureSettings', "Configure settings"))}</h3> <span>${escape(localize('welcomePage.configureSettingsDescription', "Unlock the full power of VS Code by tweaking the settings"))}</span></button></li>
+					</ul>
+				</div>
+				<div class="section learn">
+					<h2>${escape(localize('welcomePage.learn', "Learn"))}</h2>
+					<ul>
+						<li class="showCommands"><button data-href="command:workbench.action.showCommands"><h3>${escape(localize('welcomePage.showCommands', "Find and run all commands"))}</h3> <span>${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the control panel ({0})")).replace('{0}', '<span class="shortcut" data-command="workbench.action.showCommands"></span>')}</span></button></li>
+						<li class="showInterfaceOverview"><button data-href="command:workbench.action.showInterfaceOverview"><h3>${escape(localize('welcomePage.interfaceOverview', "Interface overview"))}</h3> <span>${escape(localize('welcomePage.interfaceOverviewDescription', "Get a visual overlay highlighting the major components of the UI"))}</span></button></li>
+						<li class="showInteractivePlayground"><button data-href="command:workbench.action.showInteractivePlayground"><h3>${escape(localize('welcomePage.interactivePlayground', "Interactive playground"))}</h3> <span>${escape(localize('welcomePage.interactivePlaygroundDescription', "Try essential editor features out in a short walkthrough"))}</span></button></li>
+					</ul>
+				</div>
+				<div class="section quickLinks">
+					<h2>${escape(localize('welcomePage.quickLinks', "Quick links"))}</h2>
+					<ul>
+						<li class="keybindingsReference"><button data-href="command:workbench.action.keybindingsReference"><h3>${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</h3> <span>${escape(localize('welcomePage.keybindingsReferenceDescription', "A printable PDF with the most common keyboard shortcuts"))}</span></button></li>
+					</ul>
+				</div>
 			</div>
 		</div>
 	</div>

src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts

@@ -195,13 +195,22 @@ class WelcomePage {
 			});
 		}).then(null, onUnexpectedError);
 
-		if (this.telemetryService.getExperiments().reorderQuickLinks) {
+		const customize = container.querySelector('.commands .section.customize');
+		const learn = container.querySelector('.commands .section.learn');
+		const quickLinks = container.querySelector('.commands .section.quickLinks');
+		if (this.telemetryService.getExperiments().mergeQuickLinks) {
+			const ul = quickLinks.querySelector('ul');
 			reorderedQuickLinks.forEach(clazz => {
 				const link = container.querySelector(`.commands .${clazz}`);
 				if (link) {
-					link.parentElement.appendChild(link);
+					ul.appendChild(link);
 				}
 			});
+			customize.remove();
+			learn.remove();
+			container.querySelector('.keybindingsReferenceLink').remove();
+		} else {
+			quickLinks.remove();
 		}
 
 		container.addEventListener('click', event => {