Have notebook grids respond to theme change events (#4624)

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

@@ -13,6 +13,7 @@ import { MimeModel } from 'sql/parts/notebook/outputs/common/mimemodel';
 import * as outputProcessor from 'sql/parts/notebook/outputs/common/outputProcessor';
 import { RenderMimeRegistry } from 'sql/parts/notebook/outputs/registry';
 import 'vs/css!sql/parts/notebook/outputs/style/index';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 export const OUTPUT_SELECTOR: string = 'output-component';
 
@@ -31,7 +32,8 @@ export class OutputComponent extends AngularDisposable implements OnInit {
 
 
 	constructor(
-		@Inject(INotebookService) private _notebookService: INotebookService
+		@Inject(INotebookService) private _notebookService: INotebookService,
+		@Inject(IThemeService) private _themeService: IThemeService
 	) {
 		super();
 		this.registry = _notebookService.getMimeRegistry();
@@ -49,6 +51,7 @@ export class OutputComponent extends AngularDisposable implements OnInit {
 		let node = this.outputElement.nativeElement;
 		let output = this.cellOutput;
 		let options = outputProcessor.getBundleOptions({ value: output, trusted: this.trustedMode });
+		options.themeService = this._themeService;
 		// TODO handle safe/unsafe mapping
 		this.createRenderedMimetype(options, node);
 	}

src/sql/parts/notebook/outputs/common/mimemodel.ts

@@ -4,6 +4,7 @@
 |----------------------------------------------------------------------------*/
 import { IRenderMime } from './renderMimeInterfaces';
 import { ReadonlyJSONObject } from '../../models/jsonext';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * The default mime model implementation.
@@ -17,6 +18,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		this._data = options.data || {};
 		this._metadata = options.metadata || {};
 		this._callback = options.callback;
+		this._themeService = options.themeService;
 	}
 
 	/**
@@ -38,6 +40,10 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		return this._metadata;
 	}
 
+	get themeService(): IThemeService {
+	 	return this._themeService;
+	}
+
 	/**
 	 * Set the data associated with the model.
 	 *
@@ -54,6 +60,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 	private _callback: (options: IRenderMime.ISetDataOptions) => void;
 	private _data: ReadonlyJSONObject;
 	private _metadata: ReadonlyJSONObject;
+	private _themeService: IThemeService;
 }
 
 /**
@@ -83,5 +90,10 @@ export namespace MimeModel {
 		 * The initial mime metadata.
 		 */
 		metadata?: ReadonlyJSONObject;
+
+		/**
+		 * Theme service used to react to theme change events
+		 */
+		themeService?: IThemeService;
 	}
 }

src/sql/parts/notebook/outputs/common/renderMimeInterfaces.ts

@@ -4,6 +4,7 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 import { ReadonlyJSONObject } from '../../models/jsonext';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * A namespace for rendermime associated interfaces.
@@ -37,6 +38,11 @@ export namespace IRenderMime {
 		 * containing the new data.
 		 */
 		setData(options: ISetDataOptions): void;
+
+		/**
+		 * Theme service used to react to theme change events
+		 */
+		readonly themeService: IThemeService;
 	}
 
 	/**

src/sql/parts/notebook/outputs/tableRenderers.ts

@@ -9,6 +9,8 @@ import { textFormatter } from 'sql/parts/grid/services/sharedServices';
 import { RowNumberColumn } from 'sql/base/browser/ui/table/plugins/rowNumberColumn.plugin';
 import { escape } from 'sql/base/common/strings';
 import { IDataResource } from 'sql/workbench/services/notebook/sql/sqlSessionManager';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * Render DataResource as a grid into a host node.
@@ -64,6 +66,7 @@ export function renderDataResource(
 	// Set the height dynamically if the grid's height is < 500px high; otherwise, set height to 500px
 	tableContainer.style.height = rowsHeight >= 500 ? '500px' : rowsHeight.toString() + 'px';
 
+	attachTableStyler(detailTable, options.themeService);
 	host.appendChild(tableContainer);
 	detailTable.resizeCanvas();
 
@@ -116,5 +119,10 @@ export namespace renderDataResource {
 		 * The DataResource source to render.
 		 */
 		source: string;
+
+		/**
+		 * Theme service used to react to theme change events
+		 */
+		themeService?: IThemeService;
 	}
 }

src/sql/parts/notebook/outputs/widgets.ts

@@ -8,6 +8,7 @@ import * as renderers from './renderers';
 import { IRenderMime } from './common/renderMimeInterfaces';
 import { ReadonlyJSONObject } from '../models/jsonext';
 import * as tableRenderers from 'sql/parts/notebook/outputs/tableRenderers';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
  * A common base class for mime renderers.
@@ -372,7 +373,8 @@ export class RenderedDataResource extends RenderedCommon {
 	render(model: IRenderMime.IMimeModel): Promise<void> {
 		return tableRenderers.renderDataResource({
 			host: this.node,
-			source: JSON.stringify(model.data[this.mimeType])
+			source: JSON.stringify(model.data[this.mimeType]),
+			themeService: model.themeService
 		});
 	}
 }