Extract text area related CSS to textAreaHandler.css

src/vs/editor/browser/controller/textAreaHandler.css

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-editor .inputarea {
+	/*Chrome cannot handle typing in a 0x0 textarea*/
+	width: 1px;
+	height: 1px;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	outline: none !important;
+	resize: none;
+	border: none;
+	overflow: hidden;
+}
+/*.monaco-editor .inputarea {
+	position: fixed !important;
+	width: 800px !important;
+	height: 500px !important;
+	top: initial !important;
+	left: initial !important;
+	bottom: 0 !important;
+	right: 0 !important;
+}*/
+.monaco-editor.ff .inputarea,
+.monaco-editor.ie .inputarea {
+	width: 0;
+	height: 0;
+}
+.monaco-editor .ime-input.inputarea {
+	z-index: 10;
+}
+.monaco-editor .ime-input.inputarea {
+	background: rgba(255, 255, 255, 0.85);
+}
+.monaco-editor.vs-dark .ime-input.inputarea {
+	background: rgba(0, 0, 0, 0.65);
+}

src/vs/editor/browser/controller/textAreaHandler.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
+import 'vs/css!./textAreaHandler';
 import * as browser from 'vs/base/browser/browser';
 import * as dom from 'vs/base/browser/dom';
 import { TextAreaInput, ITextAreaInputHost, IPasteData, ICompositionData } from 'vs/editor/browser/controller/textAreaInput';
@@ -24,7 +25,6 @@ import { Margin } from "vs/editor/browser/viewParts/margin/margin";
 import { LineNumbersOverlay } from "vs/editor/browser/viewParts/lineNumbers/lineNumbers";
 
 export interface ITextAreaHandlerHelper {
-	viewDomNode: FastDomNode<HTMLElement>;
 	visibleRangeForPositionRelativeToEditor(lineNumber: number, column: number): HorizontalRange;
 	getVerticalOffsetForLineNumber(lineNumber: number): number;
 }
@@ -228,7 +228,7 @@ export class TextAreaHandler extends ViewEventHandler {
 
 			// Show the textarea
 			this.textArea.setHeight(this._context.configuration.editor.lineHeight);
-			this._viewHelper.viewDomNode.addClassName('ime-input');
+			this.textArea.setClassName('inputarea ime-input');
 
 			this._viewController.compositionStart('keyboard');
 		}));
@@ -261,7 +261,7 @@ export class TextAreaHandler extends ViewEventHandler {
 			this.textArea.unsetWidth();
 			this.textArea.setLeft(0);
 			this.textArea.setTop(0);
-			this._viewHelper.viewDomNode.removeClassName('ime-input');
+			this.textArea.setClassName('inputarea');
 
 			this._visiblePosition = null;
 

src/vs/editor/browser/view/viewImpl.ts

@@ -83,7 +83,7 @@ export class View extends ViewEventHandler {
 	private readonly _textAreaHandler: TextAreaHandler;
 	private readonly pointerHandler: PointerHandler;
 
-	private outgoingEvents: ViewOutgoingEvents;
+	private readonly outgoingEvents: ViewOutgoingEvents;
 
 	// Dom nodes
 	private linesContent: FastDomNode<HTMLElement>;
@@ -302,7 +302,6 @@ export class View extends ViewEventHandler {
 
 	private createTextAreaHandlerHelper(): ITextAreaHandlerHelper {
 		return {
-			viewDomNode: this.domNode,
 			visibleRangeForPositionRelativeToEditor: (lineNumber: number, column: number) => {
 				this._flushAccumulatedAndRenderNow();
 				let visibleRanges = this.viewLines.visibleRangesForRange2(new Range(lineNumber, column, lineNumber, column));

src/vs/editor/browser/widget/media/editor.css

@@ -15,7 +15,7 @@
 	color: inherit;
 }
 
-/* -------------------- Editor, inputarea and background -------------------- */
+/* -------------------- Editor -------------------- */
 
 .monaco-editor {
 	position: relative;
@@ -29,40 +29,8 @@
 	-webkit-font-feature-settings: "liga" on, "calt" on;
 	font-feature-settings: "liga" on, "calt" on;
 }
-.monaco-editor .inputarea {
-	/*Chrome cannot handle typing in a 0x0 textarea*/
-	width: 1px;
-	height: 1px;
-	min-width: 0;
-	min-height: 0;
-	margin: 0;
-	padding: 0;
-	position: absolute;
-	outline: none !important;
-	resize: none;
-	border: none;
-	overflow: hidden;
-}
-/*.monaco-editor .inputarea {
-	position: fixed !important;
-	width: 800px !important;
-	height: 200px !important;
-	top: initial !important;
-	left: initial !important;
-	bottom: 0 !important;
-	right: 0 !important;
-}*/
-.monaco-editor.ff .inputarea,
-.monaco-editor.ie .inputarea {
-	width: 0;
-	height: 0;
-}
-.monaco-editor.ime-input .inputarea {
-	z-index: 10;
-}
 
-.monaco-editor,
-.monaco-editor .inputarea {
+.monaco-editor {
 	color: #333;
 	/*
 	 * WORKAROUND:
@@ -71,22 +39,14 @@
 	 */
 	background: #fffffe;
 }
-.monaco-editor.ime-input .inputarea {
-	background: rgba(255, 255, 255, 0.85);
-}
 
 .monaco-editor.vs-dark,
-.monaco-editor.vs-dark .inputarea,
 .monaco-editor.vs-dark .zone-widget .monaco-editor {
 	color: #BBB;
 	background: #1E1E1E;
 }
-.monaco-editor.vs-dark.ime-input .inputarea {
-	background: rgba(0, 0, 0, 0.65);
-}
 
 .monaco-editor.hc-black,
-.monaco-editor.hc-black .inputarea,
 .monaco-editor.hc-black .zone-widget .monaco-editor {
 	color: #fff;
 	background: #000;

src/vs/editor/common/view/editorColorRegistry.ts

@@ -25,7 +25,7 @@ registerThemingParticipant((theme, collector) => {
 
 	let background = theme.getColor(editorBackground);
 	if (background) {
-		collector.addRule(`.monaco-editor.${theme.selector} .monaco-editor-background { background-color: ${background}; }`);
+		collector.addRule(`.monaco-editor.${theme.selector} .monaco-editor-background, .monaco-editor.${theme.selector} .inputarea { background-color: ${background}; }`);
 	}
 	let foreground = theme.getColor(editorForeground);
 	if (foreground) {