From fab4185c1f3915d40039a4e5e9e81693468d5cbb Mon Sep 17 00:00:00 2001
From: Anthony Dresser <andresse@microsoft.com>
Date: Fri, 9 Mar 2018 14:54:13 -0800
Subject: [PATCH] Change visibility type for panel hiding (#864)

* change visibility method for panels

* make the new visibility type opt in
---
 src/sql/base/browser/ui/panel/media/panel.css               | 6 +++++-
 src/sql/base/browser/ui/panel/tab.component.ts              | 3 ++-
 src/sql/parts/dashboard/common/dashboardPage.component.html | 2 +-
 .../dashboard/containers/dashboardNavSection.component.html | 2 +-
 .../parts/dashboard/contents/webviewContent.component.ts    | 2 +-
 .../dashboard/widgets/webview/webviewWidget.component.ts    | 2 +-
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css
index e3f4fd9051..053dd183ff 100644
--- a/src/sql/base/browser/ui/panel/media/panel.css
+++ b/src/sql/base/browser/ui/panel/media/panel.css
@@ -109,4 +109,8 @@ panel {
 .tabbedPanel > .title > .monaco-scrollable-element {
 	flex: 0 1 auto;
 	width: inherit;
-}
\ No newline at end of file
+}
+
+.visibility.hidden {
+	visibility: hidden;
+}
diff --git a/src/sql/base/browser/ui/panel/tab.component.ts b/src/sql/base/browser/ui/panel/tab.component.ts
index 2da6c112d2..4610c9da00 100644
--- a/src/sql/base/browser/ui/panel/tab.component.ts
+++ b/src/sql/base/browser/ui/panel/tab.component.ts
@@ -13,7 +13,7 @@ export abstract class TabChild {
 @Component({
 	selector: 'tab',
 	template: `
-		<div *ngIf="active" class="fullsize">
+		<div class="visibility" [class.hidden]="!active && visibilityType == 'visibility'" *ngIf="visibilityType == 'visibility' || active" class="fullsize">
 			<ng-content class="body fullsize"></ng-content>
 		</div>
 	`
@@ -25,6 +25,7 @@ export class TabComponent implements OnDestroy {
 	@Input() public actions: Array<Action>;
 	public _active = false;
 	@Input() public identifier: string;
+	@Input() private visibilityType: 'if' | 'visibility' = 'if';
 
 	public set active(val: boolean) {
 		this._active = val;
diff --git a/src/sql/parts/dashboard/common/dashboardPage.component.html b/src/sql/parts/dashboard/common/dashboardPage.component.html
index b883819988..7ccbdc7244 100644
--- a/src/sql/parts/dashboard/common/dashboardPage.component.html
+++ b/src/sql/parts/dashboard/common/dashboardPage.component.html
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <panel class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
-	<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
+	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
 		<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget" [tab]="tab">
 		</dashboard-home-container>
 		<ng-template #not_home>
diff --git a/src/sql/parts/dashboard/containers/dashboardNavSection.component.html b/src/sql/parts/dashboard/containers/dashboardNavSection.component.html
index 3a887ba105..24fa90e766 100644
--- a/src/sql/parts/dashboard/containers/dashboardNavSection.component.html
+++ b/src/sql/parts/dashboard/containers/dashboardNavSection.component.html
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel" (onTabChange)="handleTabChange($event)">
-	<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
+	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
 		<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
 		</dashboard-webview-container>
 		<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
diff --git a/src/sql/parts/dashboard/contents/webviewContent.component.ts b/src/sql/parts/dashboard/contents/webviewContent.component.ts
index 86051bb8d9..76d7e3fe5d 100644
--- a/src/sql/parts/dashboard/contents/webviewContent.component.ts
+++ b/src/sql/parts/dashboard/contents/webviewContent.component.ts
@@ -48,7 +48,7 @@ export class WebviewContent implements OnInit, IDashboardWebview {
 	}
 
 	public layout(): void {
-		this._createWebview();
+		this._webview.layout();
 	}
 
 	public get id(): string {
diff --git a/src/sql/parts/dashboard/widgets/webview/webviewWidget.component.ts b/src/sql/parts/dashboard/widgets/webview/webviewWidget.component.ts
index 82c65a37ba..c909e93fd6 100644
--- a/src/sql/parts/dashboard/widgets/webview/webviewWidget.component.ts
+++ b/src/sql/parts/dashboard/widgets/webview/webviewWidget.component.ts
@@ -80,7 +80,7 @@ export class WebviewWidget extends DashboardWidget implements IDashboardWidget,
 	}
 
 	public layout(): void {
-		this._createWebview();
+		this._webview.layout();
 	}
 
 	public sendMessage(message: string): void {