More Kibana plugin LESS 2 SASS (elastic#23413) (elastic#23591)

This PR removes the LESS files for dev_tools, context, console, and inspector_views and replaces them with Sass.

src/core_plugins/console/index.js

@@ -137,6 +137,7 @@ export default function (kibana) {
       apps: apps,
       hacks: ['plugins/console/hacks/register'],
       devTools: ['plugins/console/console'],
+      styleSheetPaths: `${__dirname}/public/index.scss`,
 
       injectDefaultVars(server) {
         return {

src/core_plugins/console/public/_ace_overrides.scss

@@ -0,0 +1,66 @@
+.conApp,
+.conHelp__example,
+.conHistory__viewer {
+
+  .ace-tm {
+    .ace_gutter {
+      background-color: $euiColorEmptyShade;
+      color: $euiColorMediumShade;
+    }
+
+    .ace_gutter-active-line,
+    .ace_marker-layer .ace_active-line {
+      background-color: transparentize($euiColorLightShade, .3);
+    }
+  }
+
+  .ace_snippet-marker {
+    width: 100%;
+    background-color: tintOrShade($euiColorLightShade, 50%, 0);
+    border: none;
+  }
+
+  .ace_search {
+    z-index: $euiZLevel1 + 1;
+  }
+
+  .ace_layer.ace_marker-layer {
+    overflow: visible;
+  }
+
+  .ace_scroller {
+    border-left: $euiBorderThin;
+  }
+
+  // SASSTODO: Coloring uses EUI code block variables.
+  // However, the naming does not currently line up (selector to variable).
+  // This is so that there is no drastic visual difference for the user.
+  // Eventually, we can update this to match all other editors.
+
+  .ace_warning {
+    color: $euiColorDanger;
+  }
+
+  .ace_method {
+    color: $euiCodeBlockStringColor;
+  }
+
+  .ace_url,
+  .ace_start_triple_quote,
+  .ace_end_triple_quote {
+    color: $euiCodeBlockNumberColor;
+  }
+
+  .ace_variable {
+    color: $euiCodeBlockTypeColor;
+  }
+
+  .ace_string,
+  .ace_multi_string {
+    color: $euiCodeBlockRegexpColor;
+  }
+
+  .ace_multi_string {
+    font-style: italic;
+  }
+}

src/core_plugins/console/public/_app.scss

@@ -0,0 +1,64 @@
+.conApp {
+  display: flex;
+  flex: 1 1 auto;
+  position: relative;
+  padding: $euiSizeS;
+  background-color: $euiColorLightestShade;
+  // Make sure the editor actions don't create scrollbars on this container
+  // SASSTODO: Uncomment when tooltips are EUI-ified (inside portals)
+  // overflow: hidden;
+}
+
+.conApp__editor {
+  // Default size of left side is half the large breakpoint
+  // but this is inline overridden by the resizer
+  width: map-get($euiBreakpoints, "l") / 2;
+  display: flex;
+  flex: 0 0 auto;
+  position: relative;
+}
+
+.conApp__output {
+  display: flex;
+  flex: 1 1 1px;
+}
+
+.conApp__editorContent,
+.conApp__outputContent {
+  flex: 1 1 1px;
+}
+
+.conApp__editorActions {
+  position: absolute;
+  z-index: $euiZLevel1;
+  top: 0;
+  // Adjust for possible scrollbars
+  right: $euiSize;
+  line-height: 1;
+}
+
+.conApp__editorActionButton {
+  padding: 0 $euiSizeXS;
+  appearance: none;
+  border: none;
+  background: none;
+}
+
+.conApp__editorActionButton--success {
+  color: $euiColorSuccess;
+}
+
+.conApp__resizer {
+  @include kibana-resizer;
+}
+
+// SASSTODO: This component seems to not be used anymore?
+// Possibly replaced by the Ace version
+.conApp__autoComplete {
+  position: absolute;
+  left: -1000px;
+  visibility: hidden;
+  /* by pass any other element in ace and resize bar, but not modal popups  */
+  z-index: $euiZLevel1 + 2;
+  margin-top: 22px;
+}

src/core_plugins/console/public/console.js

@@ -27,7 +27,6 @@ require('ui/modules').get('kibana', ['sense.ui.bootstrap']);
 require('ui/tooltip');
 require('ui/autoload/styles');
 
-require('./css/sense.less');
 require('./src/controllers/sense_controller');
 require('./src/directives/sense_history');
 require('./src/directives/sense_settings');