CHE-3218: improves the documentation popup for LSP code completion (eclipse-che#3224)

Signed-off-by: Kaloyan Raev <kaloyan.r@zend.com>

Author: kaloyan-raev

plugins/plugin-languageserver/che-plugin-languageserver-ide/src/main/java/org/eclipse/che/plugin/languageserver/ide/editor/codeassist/CompletionItemBasedCompletionProposal.java

@@ -13,9 +13,10 @@
 import io.typefox.lsapi.ServerCapabilities;
 
 import com.google.gwt.dom.client.Style;
+import com.google.gwt.dom.client.Style.Overflow;
 import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
 import com.google.gwt.user.client.rpc.AsyncCallback;
-import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.Widget;
 
 import org.eclipse.che.api.languageserver.shared.lsapi.CompletionItemDTO;
@@ -37,6 +38,8 @@
 
 import java.util.List;
 
+import static org.eclipse.che.ide.api.theme.Style.theme;
+
 /**
  * @author Anatolii Bazko
  * @author Kaloyan Raev
@@ -99,12 +102,15 @@ private Widget createAdditionalInfoWidget() {
             documentation = "No documentation found.";
         }
 
-        Label label = new Label(documentation);
-        label.setWordWrap(true);
-        label.getElement().getStyle().setFontSize(13, Style.Unit.PX);
-        label.getElement().getStyle().setMarginLeft(4, Style.Unit.PX);
-        label.setSize("100%", "100%");
-        return label;
+        HTML widget = new HTML(documentation);
+        widget.setWordWrap(true);
+        widget.getElement().getStyle().setColor(theme.completionPopupItemTextColor());
+        widget.getElement().getStyle().setFontSize(13, Style.Unit.PX);
+        widget.getElement().getStyle().setMarginLeft(4, Style.Unit.PX);
+        widget.getElement().getStyle().setOverflow(Overflow.AUTO);
+        widget.getElement().getStyle().setProperty("userSelect", "text");
+        widget.setHeight("100%");
+        return widget;
     }
 
     @Override

plugins/plugin-orion/che-plugin-orion-editor/src/main/java/org/eclipse/che/ide/editor/orion/client/ContentAssistWidget.java

@@ -126,7 +126,9 @@ public void handleEvent(final Event evt) {
                     final EventTarget target = mouseEvent.getTarget();
                     if (target instanceof Element) {
                         final Element elementTarget = (Element)target;
-                        if (elementTarget.equals(docPopup.getElement()) && docPopup.isVisible()) {
+                        if (docPopup.isVisible() && 
+                            (elementTarget.equals(docPopup.getElement()) || 
+                             elementTarget.getParentElement().equals(docPopup.getElement()))) {
                             return;
                         }
 
@@ -219,16 +221,11 @@ public void onSuccess(Widget info) {
                         if (info != null) {
                             docPopup.clear();
                             docPopup.add(info);
+                            docPopup.getElement().getStyle().setOpacity(1);
 
-                            if (docPopup.isAttached()) {
-                                return;
+                            if (!docPopup.isAttached()) {
+                                RootPanel.get().add(docPopup);
                             }
-
-                            docPopup.getElement().getStyle()
-                                    .setLeft(popupElement.getOffsetLeft() + popupElement.getOffsetWidth() + 3, Style.Unit.PX);
-                            docPopup.getElement().getStyle().setTop(popupElement.getOffsetTop(), Style.Unit.PX);
-                            RootPanel.get().add(docPopup);
-                            docPopup.getElement().getStyle().setOpacity(1);
                         } else {
                             docPopup.getElement().getStyle().setOpacity(0);
                         }
@@ -412,7 +409,6 @@ private void select(Element element) {
         selectedElement = element;
         selectedElement.setAttribute("selected", "true");
 
-        docPopup.clear();
         showDocTimer.cancel();
         showDocTimer.schedule(docPopup.isAttached() ? 100 : 1500);
 
@@ -521,7 +517,7 @@ public void show(final List<CompletionProposal> proposals) {
             this.popupElement.getStyle().setProperty("maxWidth", viewportWidth + caretLocation.getX() + "px");
         }
 
-        /* Don't attach handlers twice. Visible popup must already their attached. */
+        /* Don't attach handlers twice. Visible popup must already have their attached. */
         if (!visible) {
             addPopupEventListeners();
         }
@@ -530,16 +526,11 @@ public void show(final List<CompletionProposal> proposals) {
         visible = true;
         focused = false;
 
-        if (docPopup.isAttached()) {
-            docPopup.getElement().getStyle().setOpacity(0);
-            new Timer() {
-                @Override
-                public void run() {
-                    docPopup.removeFromParent();
-                    showDocTimer.schedule(1500);
-                }
-            }.schedule(250);
-        }
+        /* Update documentation popup position */
+        docPopup.getElement().getStyle()
+                .setLeft(popupElement.getOffsetLeft() + popupElement.getOffsetWidth() + 3, Style.Unit.PX);
+        docPopup.getElement().getStyle()
+                .setTop(popupElement.getOffsetTop(), Style.Unit.PX);
 
         /* Select first row. */
         selectFirst();