ace: minor fixes for ace editor

public/app/core/components/code_editor/code_editor.ts

@@ -99,7 +99,7 @@ function link(scope, elem, attrs) {
   // disable depreacation warning
   codeEditor.$blockScrolling = Infinity;
   // Padding hacks
-  codeEditor.renderer.setScrollMargin(10, 11);
+  codeEditor.renderer.setScrollMargin(15, 15);
   codeEditor.renderer.setPadding(10);
 
   setThemeMode(theme);
@@ -133,6 +133,10 @@ function link(scope, elem, attrs) {
     scope.onChange();
   });
 
+  scope.$on("$destroy", () => {
+    codeEditor.destroy();
+  });
+
   // Keybindings
   codeEditor.commands.addCommand({
     name: 'executeQuery',
@@ -155,7 +159,10 @@ function link(scope, elem, attrs) {
         enableSnippets: true
       });
 
+      console.log('getting completer', lang);
       if (scope.getCompleter()) {
+        // make copy of array as ace seems to share completers array between instances
+        codeEditor.completers = codeEditor.completers.slice();
         codeEditor.completers.push(scope.getCompleter());
       }
     });
@@ -176,6 +183,8 @@ function link(scope, elem, attrs) {
       setModuleUrl("theme", fixedTheme);
       themeModule = `ace/theme/${fixedTheme}`;
       codeEditor.setTheme(themeModule);
+
+      elem.addClass("gf-code-editor--theme-loaded");
     });
   }
 

public/app/core/components/code_editor/theme-grafana-dark.js

@@ -49,7 +49,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
   .gf-code-dark .ace_keyword,\
   .gf-code-dark .ace_meta.ace_tag,\
   .gf-code-dark .ace_storage {\
-  color: #fae400\
+  color: #66d9ef\
   }\
   .gf-code-dark .ace_punctuation,\
   .gf-code-dark .ace_punctuation.ace_tag {\
@@ -71,7 +71,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
   }\
   .gf-code-dark .ace_support.ace_constant,\
   .gf-code-dark .ace_support.ace_function {\
-  color: #66d9ef\
+  color: #59e6e3\
   }\
   .gf-code-dark .ace_fold {\
   background-color: #a6e22e;\

public/sass/components/_code_editor.scss

@@ -3,6 +3,7 @@
   min-width: 20rem;
   flex-grow: 1;
   margin-right: 0.25rem;
+  visibility: hidden;
 
   &.ace_editor {
     @include font-family-monospace();
@@ -12,6 +13,10 @@
     @include border-radius($input-border-radius-sm);
     border: $input-btn-border-width solid $input-border-color;
   }
+
+  &--theme-loaded {
+    visibility: visible;
+  }
 }
 
 .ace_editor.ace_autocomplete {
@@ -46,24 +51,21 @@
   }
 }
 
-$doc-font-size: 0.8rem;
-$doc-text-padding: $doc-font-size * 0.5;
+$doc-font-size: $font-size-sm;
 
 .ace_tooltip.ace_doc-tooltip {
   @include font-family-monospace();
   font-size: $doc-font-size;
 
-  background-color: $dropdownBackground;
+  background-color: $popover-help-bg;
+  color: $popover-help-color;
   background-image: none;
-  color: $dropdownLinkColor;
   border: 1px solid $dropdownBorder;
-  padding-top: $doc-text-padding;
-  padding-bottom: 0px;
+  padding: 0.5rem 1rem;
 
   hr {
-    background-color: $dropdownDividerBottom;
-    margin-top: $doc-text-padding;
-    margin-bottom: $doc-text-padding;
+    background-color: $popover-help-color;
+    margin: 0.5rem 0rem;
   }
 
   code {
@@ -71,3 +73,7 @@ $doc-text-padding: $doc-font-size * 0.5;
     margin: 0px;
   }
 }
+
+.ace_tooltip {
+  border-radius: 3px;
+}