Tooltip (#5088)

* add right aligned mode for autocomplete popup

* fix tooltip style

Author: nightwing

src/autocomplete/popup.js

@@ -340,7 +340,7 @@ dom.importCssString(`
 }
 .ace_completion-meta {
     opacity: 0.5;
-    margin: 0.9em;
+    margin: 0 0.9em;
 }
 .ace_completion-message {
     color: blue;
@@ -367,7 +367,18 @@ dom.importCssString(`
     line-height: 1.4;
     background: #25282c;
     color: #c1c1c1;
-}`, "autocompletion.css", false);
+}
+.ace_autocomplete_right .ace_text-layer  {
+    width: calc(100% - 8px);
+}
+.ace_autocomplete_right .ace_line {
+    display: flex;
+}
+.ace_autocomplete_right .ace_completion-meta {
+    flex: 1;
+    text-align: right;
+}
+`, "autocompletion.css", false);
 
 exports.AcePopup = AcePopup;
 exports.$singleLineEditor = $singleLineEditor;

src/css/editor.css.js

@@ -399,8 +399,7 @@ module.exports = `
 }
 
 .ace_tooltip {
-    background-color: #FFF;
-    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
+    background-color: #f5f5f5;
     border: 1px solid gray;
     border-radius: 1px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -420,6 +419,10 @@ module.exports = `
     pointer-events: none;
 }
 
+.ace_tooltip:focus {
+    outline: 1px solid black;
+}
+
 .ace_folding-enabled > .ace_gutter-cell {
     padding-right: 13px;
 }

src/ext/prompt.js

@@ -72,6 +72,7 @@ function prompt(editor, message, options, callback) {
     if (options.getCompletions) {
         var popup = new AcePopup();
         popup.renderer.setStyle("ace_autocomplete_inline");
+        popup.renderer.setStyle("ace_autocomplete_right");
         popup.container.style.display = "block";
         popup.container.style.maxWidth = "600px";
         popup.container.style.width = "100%";
@@ -470,7 +471,7 @@ prompt.modes = function(editor, callback) {
 };
 
 dom.importCssString(`.ace_prompt_container {
-    max-width: 600px;
+    max-width: 603px;
     width: 100%;
     margin: 20px auto;
     padding: 3px;