Improve smiley face proportions.

- Add def keyword to Painless spec.
- Temporarily fix broken highlighting.
- Add small padding to main controls.

x-pack/legacy/plugins/painless_lab/public/components/main.tsx

@@ -65,15 +65,15 @@ const submit = async (code, context, contextSetup, executeCode, setResponse, set
 
 const debouncedSubmit = debounce(submit, 800);
 
-// Render a heart as an example.
+// Render a smiley face as an example.
 const exampleScript = `
 boolean isInCircle(def posX, def posY, def circleX, def circleY, def radius) {
   double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow(circleY - posY, 2));
   return distanceFromCircleCenter <= radius;
 }
 
-boolean isOnCircle(def posX, def posY, def circleX, def circleY, def radius, def thickness) {
-  double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow(circleY - posY, 2));
+boolean isOnCircle(def posX, def posY, def circleX, def circleY, def radius, def thickness, def squashY) {
+  double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow((circleY - posY) / squashY, 2));
   return (
     distanceFromCircleCenter >= radius - thickness
     && distanceFromCircleCenter <= radius + thickness
@@ -83,23 +83,34 @@ boolean isOnCircle(def posX, def posY, def circleX, def circleY, def radius, def
 def result = '';
 int charCount = 0;
 
+// Canvas dimensions
 int width = 31;
-int height = 25;
-
-int eyePositionX = 8;
-int eyePositionY = 6;
-int eyeSize = 3;
-int mouthSize = 11;
+int height = 31;
+double halfWidth = Math.floor(width * 0.5);
+double halfHeight = Math.floor(height * 0.5);
+
+// Style constants
+double strokeWidth = 0.6;
+
+// Smiley face configuration
+int headSize = 13;
+double headSquashY = 0.78;
+int eyePositionX = 10;
+int eyePositionY = 12;
+int eyeSize = 1;
+int mouthSize = 15;
 int mouthPositionX = width / 2;
-int mouthPositionY = 9;
+int mouthPositionY = 5;
+int mouthOffsetY = 11;
 
 for (int y = 0; y < height; y++) {
   for (int x = 0; x < width; x++) {
+    boolean isHead = isOnCircle(x, y, halfWidth, halfHeight, headSize, strokeWidth, headSquashY);
     boolean isLeftEye = isInCircle(x, y, eyePositionX, eyePositionY, eyeSize);
     boolean isRightEye = isInCircle(x, y, width - eyePositionX - 1, eyePositionY, eyeSize);
-    boolean isMouth = isOnCircle(x, y, mouthPositionX, mouthPositionY, mouthSize, 1) && y > mouthPositionY + 3;
+    boolean isMouth = isOnCircle(x, y, mouthPositionX, mouthPositionY, mouthSize, strokeWidth, 1) && y > mouthPositionY + mouthOffsetY;
 
-    if (isLeftEye || isRightEye || isMouth) {
+    if (isLeftEye || isRightEye || isMouth || isHead) {
       result += "*";
     } else {
       result += ".";

x-pack/legacy/plugins/painless_lab/public/components/main_controls.tsx

@@ -87,7 +87,7 @@ export function MainControls({
     <>
       <div className="painlessLabBottomBarPlaceholder" />
 
-      <EuiBottomBar paddingSize="none">
+      <EuiBottomBar paddingSize="s">
         <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s" justifyContent="flexStart">

x-pack/legacy/plugins/painless_lab/public/index.scss

@@ -6,7 +6,7 @@
  *    behind the bottom bar.
  */
 .painlessLabBottomBarPlaceholder {
-  height: $euiSize * 2; /* [1] */
+  height: $euiSize * 3; /* [1] */
 }
 
 .painlessLabRightPane {

x-pack/legacy/plugins/painless_lab/public/register_painless.ts

@@ -52,7 +52,18 @@ function getPainlessLanguage() {
       'this',
       'instanceof',
     ],
-    primitives: ['void', 'boolean', 'byte', 'short', 'char', 'int', 'long', 'float', 'double'],
+    primitives: [
+      'void',
+      'boolean',
+      'byte',
+      'short',
+      'char',
+      'int',
+      'long',
+      'float',
+      'double',
+      'def',
+    ],
     constants: ['true', 'false'],
     operators: [
       '=',
@@ -177,6 +188,8 @@ function getPainlessLanguage() {
 }
 
 export function registerPainless() {
-  monaco.languages.register({ id: LANGUAGE_ID });
-  monaco.languages.setMonarchTokensProvider(LANGUAGE_ID, getPainlessLanguage());
+  // TODO: Referring to `window.monaco` is a temporary fix for the imported `monaco`  module not
+  // being the same one in use by the editor.
+  window.monaco.languages.register({ id: LANGUAGE_ID });
+  window.monaco.languages.setMonarchTokensProvider(LANGUAGE_ID, getPainlessLanguage());
 }