Trusted/Not-trusted functionality implementation (#3211)

* 3194: Hookup trusted/not-trusted functionality and css changes

* 3194: Trusted implementation changes

* 3194: Code review changes

* 3225: No border in between code-cell and output

src/sql/parts/notebook/cellViews/codeCell.component.html

@@ -8,7 +8,7 @@
 	<div class="notebook-code" style="flex: 0 0 auto;">
 		<code-component [cellModel]="cellModel" [model]="model"></code-component>
 	</div>
-	<div class="notebook-output" style="flex: 0 0 auto;">
+	<div #codeCellOutput class="notebook-output" style="flex: 0 0 auto;">
 		<output-area-component *ngIf="cellModel.outputs && cellModel.outputs.length > 0" [cellModel]="cellModel">
 		</output-area-component>
 	</div>

src/sql/parts/notebook/cellViews/codeCell.component.ts

@@ -22,8 +22,8 @@ export const CODE_SELECTOR: string = 'code-cell-component';
 	templateUrl: decodeURI(require.toUrl('./codeCell.component.html'))
 })
 export class CodeCellComponent extends CellView implements OnInit {
+	@ViewChild('codeCellOutput', { read: ElementRef }) private outputPreview: ElementRef;
 	private _model: NotebookModel;
-
 	@Input() cellModel: ICellModel;
 	@Input() set model(value: NotebookModel) {
 		this._model = value;
@@ -47,6 +47,8 @@ export class CodeCellComponent extends CellView implements OnInit {
 	}
 
 	private updateTheme(theme: IColorTheme): void {
+		let outputElement = <HTMLElement>this.outputPreview.nativeElement;
+		outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 	}
 
 	get model(): NotebookModel {

src/sql/parts/notebook/cellViews/codeCell.css

@@ -10,4 +10,5 @@ code-cell-component {
 code-cell-component .notebook-output {
 	border-top-width: 1px;
 	border-top-style: solid;
-}
+	user-select: initial;
+}

src/sql/parts/notebook/cellViews/output.component.ts

@@ -22,7 +22,8 @@ export const OUTPUT_SELECTOR: string = 'output-component';
 export class OutputComponent extends AngularDisposable implements OnInit {
 	@ViewChild('output', { read: ElementRef }) private outputElement: ElementRef;
 	@Input() cellOutput: nb.ICellOutput;
-	@Input() trustedMode: boolean;
+	private _trusted: boolean;
+	private _initialized: boolean = false;
 	private readonly _minimumHeight = 30;
 	registry: RenderMimeRegistry;
 
@@ -35,6 +36,11 @@ export class OutputComponent extends AngularDisposable implements OnInit {
 	}
 
 	ngOnInit() {
+		this.renderOutput();
+		this._initialized = true;
+	}
+
+	private renderOutput() {
 		let node = this.outputElement.nativeElement;
 		let output = this.cellOutput;
 		let options = outputProcessor.getBundleOptions({ value: output, trusted: this.trustedMode });
@@ -45,6 +51,18 @@ export class OutputComponent extends AngularDisposable implements OnInit {
 	public layout(): void {
 	}
 
+	get trustedMode(): boolean {
+		return this._trusted;
+	}
+
+	@Input()
+	set trustedMode(value: boolean) {
+		this._trusted = value;
+		if (this._initialized) {
+			this.renderOutput();
+		}
+	}
+
 	protected createRenderedMimetype(options: MimeModel.IOptions, node: HTMLElement): void {
 		let mimeType = this.registry.preferredMimeType(
 			options.data,

src/sql/parts/notebook/cellViews/outputArea.component.html

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
-	<div class="notebook-output" style="flex: 0 0 auto;">
+	<div style="flex: 0 0 auto;">
 		<output-component *ngFor="let output of cellModel.outputs" [cellOutput]="output" [trustedMode] = "cellModel.trustedMode" >
 		</output-component>
 	</div>

src/sql/parts/notebook/cellViews/textCell.component.ts

@@ -83,6 +83,9 @@ export class TextCellComponent extends CellView implements OnInit {
 		this.updatePreview();
 		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
 		this.updateTheme(this.themeService.getColorTheme());
+		this.cellModel.onOutputsChanged(e => {
+			this.updatePreview();
+		});
 	}
 
 	// Todo: implement layout