Move action bar to title bar (#49340)

src/vs/workbench/browser/parts/quickinput/quickInput.css

@@ -12,10 +12,28 @@
 	margin-left: -300px;
 }
 
+.quick-input-titlebar {
+	display: flex;
+}
+
 .quick-input-title {
+	flex: 1;
 	padding: 3px 11px;
 }
 
+.quick-input-action-bar {
+	display: flex;
+	margin-right: 6px;
+}
+
+.quick-input-action-bar .action-label.icon {
+	margin: 0 0 0 5px;
+	width: 16px;
+	height: 100%;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
 .quick-input-header {
 	display: flex;
 	padding: 6px 6px 4px 6px;
@@ -60,18 +78,6 @@
 	line-height: initial;
 }
 
-.quick-input-action-bar {
-	display: flex;
-}
-
-.quick-input-action-bar .action-label.icon {
-	margin: 0 0 0 5px;
-	width: 16px;
-	height: 100%;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
 .quick-input-message {
 	margin: 0px 11px;
 }

src/vs/workbench/browser/parts/quickinput/quickInput.ts

@@ -632,6 +632,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 	private static readonly MAX_WIDTH = 600; // Max total width of quick open widget
 
 	private layoutDimensions: dom.Dimension;
+	private titleBar: HTMLElement;
 	private filterContainer: HTMLElement;
 	private countContainer: HTMLElement;
 	private okContainer: HTMLElement;
@@ -690,7 +691,13 @@ export class QuickInputService extends Component implements IQuickInputService {
 		container.tabIndex = -1;
 		container.style.display = 'none';
 
-		const title = dom.append(container, $('.quick-input-title'));
+		this.titleBar = dom.append(container, $('.quick-input-titlebar'));
+
+		const title = dom.append(this.titleBar, $('.quick-input-title'));
+
+		const actionBar = new ActionBar(this.titleBar);
+		actionBar.domNode.classList.add('quick-input-action-bar');
+		this.toUnbind.push(actionBar);
 
 		const headerContainer = dom.append(container, $('.quick-input-header'));
 
@@ -723,10 +730,6 @@ export class QuickInputService extends Component implements IQuickInputService {
 			this.onDidAcceptEmitter.fire();
 		}));
 
-		const actionBar = new ActionBar(headerContainer);
-		actionBar.domNode.classList.add('quick-input-action-bar');
-		this.toUnbind.push(actionBar);
-
 		const message = dom.append(container, $('.quick-input-message'));
 
 		const progressBar = new ProgressBar(container);
@@ -1061,7 +1064,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 		if (this.ui) {
 			// TODO
 			const titleColor = { dark: 'rgba(255, 255, 255, 0.105)', light: 'rgba(0,0,0,.06)', hc: 'black' }[theme.type];
-			this.ui.title.style.backgroundColor = titleColor ? titleColor.toString() : undefined;
+			this.titleBar.style.backgroundColor = titleColor ? titleColor.toString() : undefined;
 			this.ui.inputBox.style(theme);
 			const sideBarBackground = theme.getColor(SIDE_BAR_BACKGROUND);
 			this.ui.container.style.backgroundColor = sideBarBackground ? sideBarBackground.toString() : undefined;