Add query plan theme support (#2991) (#3031)

Add monaco-editor and monaco-editor-hover to output otherwise backgrounds collide.
microsoft · Oct 31, 2018 · c072ba9 · c072ba9
1 parent 807fb2e
commit c072ba9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/sql/parts/grid/load/css/qp.css b/src/sql/parts/grid/load/css/qp.css
@@ -1,8 +1,7 @@
 div.qp-node {
-    background-color: #FFFFCC;
     margin: 2px;
     padding: 2px;
-    border: 1px solid black;
+    border: 1px solid;
 }
 div.qp-statement-header {
      margin: 2px;
@@ -33,8 +32,7 @@ div[class|='qp-icon'] {
 .qp-tt {
     top: 4em;
     left: 2em;
-    border: 1px solid black;
-    background-color: #FFFFEE;
+    border: 1px solid;
     padding: 2px;
     width: 30em;
 }
@@ -56,7 +54,7 @@ div[class|='qp-icon'] {
 .qp-tt td,
 .qp-tt th {
     font-size: 11px;
-    border-bottom: solid 1px Black;
+    border-bottom: solid 1px;
     padding: 1px;
 }
 
@@ -204,8 +202,6 @@ div.qp-node:hover .qp-tt {
 .qp-root {
 	display: table;
     position: relative;
-    background-color: #fff;
-    color: #000;
 }
 
     .qp-root svg {

diff --git a/src/sql/parts/queryPlan/queryPlan.ts b/src/sql/parts/queryPlan/queryPlan.ts
@@ -93,6 +93,10 @@ export class QueryPlan {
 		QP.showPlan(this.container, this._xml, {
 			jsTooltips: false
 		});
+		this.container.querySelectorAll('div.qp-tt').forEach(toolTip=>{
+			toolTip.classList.add('monaco-editor');
+			toolTip.classList.add('monaco-editor-hover');
+		});
 	}
 
 	public get xml(): string {