Fix model view editor where switching between different type of editors remove the dom (#1546)

* fix model view editor where switching between different type of editors destroy the dom

* address comments

src/sql/parts/modelComponents/modelEditor/modelViewEditor.css

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.model-view-container {
+	height: 100%;
+	width : 100%;
+}

src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts

@@ -2,6 +2,8 @@
  *  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!./modelViewEditor';
+
 import { Builder, $ } from 'vs/base/browser/builder';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
@@ -10,6 +12,7 @@ import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { Dimension } from 'vs/workbench/services/part/common/partService';
 import { EditorOptions } from 'vs/workbench/common/editor';
 import * as DOM from 'vs/base/browser/dom';
+import { Position } from 'vs/platform/editor/common/editor';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 
 import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput';
@@ -40,25 +43,32 @@ export class ModelViewEditor extends BaseEditor {
 	public focus(): void {
 	}
 
-	async setInput(input: ModelViewInput, options?: EditorOptions): TPromise<void, any> {
-		if (this.input && this.input.matches(input)) {
-			return TPromise.as(undefined);
-		}
+	public clearInput() {
+		this.hideOrRemoveModelViewContainer();
+		super.clearInput();
+	}
 
-		const parentElement = this.getContainer().getHTMLElement();
+	private hideOrRemoveModelViewContainer() {
 		if (this.input instanceof ModelViewInput) {
 			if (this.input.container) {
 				if (this.input.options && this.input.options.retainContextWhenHidden) {
 					this.input.container.style.visibility = 'hidden';
 				} else {
-					parentElement.removeChild(this.input.container);
+					this.input.removeModelViewContainer();
+					this.input.container.style.visibility = 'hidden';
 				}
 			}
 		}
+	}
 
-		if (!parentElement.contains(input.container)) {
-			parentElement.appendChild(input.container);
+	async setInput(input: ModelViewInput, options?: EditorOptions): TPromise<void, any> {
+		if (this.input && this.input.matches(input)) {
+			return TPromise.as(undefined);
 		}
+
+		this.hideOrRemoveModelViewContainer();
+
+		input.appendModelViewContainer();
 		input.container.style.visibility = 'visible';
 
 		await super.setInput(input, options);

src/sql/parts/modelComponents/modelEditor/modelViewInput.ts

@@ -8,6 +8,7 @@ import { IEditorModel } from 'vs/platform/editor/common/editor';
 import { EditorInput } from 'vs/workbench/common/editor';
 import * as DOM from 'vs/base/browser/dom';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
 
 import { DialogPane } from 'sql/platform/dialog/dialogPane';
 
@@ -16,13 +17,19 @@ export class ModelViewInput extends EditorInput {
 
 	public static ID: string = 'workbench.editorinputs.ModelViewEditorInput';
 	private _container: HTMLElement;
+	private _dialogPaneContainer: HTMLElement;
 	private _dialogPane: DialogPane;
 
 	constructor(private _title: string, private _modelViewId: string,
 		private _options: sqlops.ModelViewEditorOptions,
 		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IPartService private readonly _partService: IPartService
 	) {
 		super();
+		this._container = document.createElement('div');
+		this._container.id = `modelView-${_modelViewId}`;
+		this._partService.getContainer(Parts.EDITOR_PART).appendChild(this._container);
+
 	}
 
 	public get title(): string {
@@ -46,14 +53,30 @@ export class ModelViewInput extends EditorInput {
 	}
 
 	public get container(): HTMLElement {
-		if (!this._container && !this._dialogPane) {
-			this._container = DOM.$('div.model-view-container');
-			this._dialogPane = new DialogPane(this.title, this.modelViewId, () => undefined, this._instantiationService);
-			this._dialogPane.createBody(this._container);
-		}
 		return this._container;
 	}
 
+	public appendModelViewContainer(): void {
+		if (!this._dialogPane) {
+			this.createDialogPane();
+		}
+		if (!this._container.contains(this._dialogPaneContainer)) {
+			this._container.appendChild(this._dialogPaneContainer);
+		}
+	}
+
+	public removeModelViewContainer(): void {
+		if (this._dialogPaneContainer) {
+			this._container.removeChild(this._dialogPaneContainer);
+		}
+	}
+
+	private createDialogPane(): void {
+		this._dialogPaneContainer = DOM.$('div.model-view-container');
+		this._dialogPane = new DialogPane(this.title, this.modelViewId, () => undefined, this._instantiationService);
+		this._dialogPane.createBody(this._dialogPaneContainer);
+	}
+
 	public get dialogPane(): DialogPane {
 		return this._dialogPane;
 	}