Bug 402137 - Interactive tooltips with preview options (add title cal…

…lback and create DOM elements instead of html text)
lshanmug · Aug 1, 2013 · 134a952 · 134a952
1 parent a69883d
commit 134a952
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/bundles/org.eclipse.orion.client.editor/web/orion/editor/editor.js b/bundles/org.eclipse.orion.client.editor/web/orion/editor/editor.js
@@ -506,7 +506,7 @@ define("orion/editor/editor", ['i18n!orion/editor/nls/messages', 'orion/keyBindi
 
 			// Set up keybindings
 			if (this._keyBindingFactory) {
-				if (typeof this._keyBindingFactory === "function") {
+				if (typeof this._keyBindingFactory === "function") { //$NON-NLS-0$
 					this._keyBindingFactory(this, this.getKeyModes(), this._undoStack, this._contentAssist);
 				} else {
 					this._keyBindingFactory.createKeyBindings(editor, this._undoStack, this._contentAssist);
@@ -677,10 +677,8 @@ define("orion/editor/editor", ['i18n!orion/editor/nls/messages', 'orion/keyBindi
 				for (var i = 0; i < problems.length; i++) {
 					var problem = problems[i];
 					if (problem) {
-						// escaping voodoo... we need to construct HTML that contains valid JavaScript.
-						var escapedDescription = problem.description.replace(/'/g, "&#39;").replace(/"/g, '&#34;'); //$NON-NLS-1$ //$NON-NLS-0$
 						var start, end;
-						if (typeof problem.line === "number") {
+						if (typeof problem.line === "number") { //$NON-NLS-0$
 							// line/column
 							var lineIndex = problem.line - 1;
 							var lineStart = model.getLineStart(lineIndex);
@@ -693,7 +691,7 @@ define("orion/editor/editor", ['i18n!orion/editor/nls/messages', 'orion/keyBindi
 						}
 						var severity = problem.severity;
 						var type = severity === "error" ? mAnnotations.AnnotationType.ANNOTATION_ERROR : mAnnotations.AnnotationType.ANNOTATION_WARNING; //$NON-NLS-0$
-						annotation = mAnnotations.AnnotationType.createAnnotation(type, start, end, escapedDescription);
+						annotation = mAnnotations.AnnotationType.createAnnotation(type, start, end, problem.description);
 						add.push(annotation);
 					}
 				}

diff --git a/bundles/org.eclipse.orion.client.editor/web/orion/editor/tooltip.css b/bundles/org.eclipse.orion.client.editor/web/orion/editor/tooltip.css
@@ -21,11 +21,16 @@
 	overflow: hidden;
 	white-space: pre;
 }
+
 .textviewTooltip em {
 	font-style: normal;
 	font-weight: bold;
 }
 
+.textviewTooltip span {
+	vertical-align: baseline;
+}
+
 .tooltip .annotationLine.currentLine {
 	background-color: transparent;
 }
diff --git a/bundles/org.eclipse.orion.client.editor/web/orion/editor/tooltip.js b/bundles/org.eclipse.orion.client.editor/web/orion/editor/tooltip.js
@@ -242,6 +242,7 @@ define("orion/editor/tooltip", [ //$NON-NLS-0$
 			if (annotations.length === 0) {
 				return null;
 			}
+			var document = this._tooltipDiv.ownerDocument;
 			var model = this._view.getModel(), annotation;
 			var baseModel = model.getBaseModel ? model.getBaseModel() : model;
 			function getText(start, end) {
@@ -252,15 +253,22 @@ define("orion/editor/tooltip", [ //$NON-NLS-0$
 			function getAnnotationHTML(annotation) {
 				var title = annotation.title;
 				if (title === "") { return null; }
-				var result = "<div>"; //$NON-NLS-0$
+				var result = util.createElement(document, "div"); //$NON-NLS-0$
 				if (annotation.html) {
-					result += annotation.html + "&nbsp;"; //$NON-NLS-0$
+					result.innerHTML = annotation.html + "&nbsp;"; //$NON-NLS-0$
 				}
 				if (!title) {
 					title = getText(annotation.start, annotation.end);
 				}
-				title = title.replace(/</g, "&lt;").replace(/>/g, "&gt;"); //$NON-NLS-1$ //$NON-NLS-0$
-				result += "<span style='vertical-align:middle;'>" + title + "</span></div>"; //$NON-NLS-1$ //$NON-NLS-0$
+				if (typeof title === "function") { //$NON-NLS-0$
+					title = title();
+				}
+				if (typeof title === "string") { //$NON-NLS-0$
+					var span = util.createElement(document, "span"); //$NON-NLS-0$
+					span.appendChild(document.createTextNode(title));
+					title = span;
+				}
+				result.appendChild(title);
 				return result;
 			}
 			if (annotations.length === 1) {
@@ -280,12 +288,15 @@ define("orion/editor/tooltip", [ //$NON-NLS-0$
 					return newModel;
 				}
 			} else {
-				var tooltipHTML = "<div><em>" + messages.multipleAnnotations + "</em></div>"; //$NON-NLS-1$ //$NON-NLS-0$
+				var tooltipHTML = util.createElement(document, "div"); //$NON-NLS-0$
+				var em = util.createElement(document, "em"); //$NON-NLS-0$
+				em.appendChild(document.createTextNode(messages.multipleAnnotations));
+				tooltipHTML.appendChild(em);
 				for (var i = 0; i < annotations.length; i++) {
 					annotation = annotations[i];
 					var html = getAnnotationHTML(annotation);
 					if (html) {
-						tooltipHTML += html;
+						tooltipHTML.appendChild(html);
 					}
 				}
 				return tooltipHTML;