Bug 1307464 - Use HTMLTooltip in shader editor;r=nchevobbe

Migrate the ShaderEditor to use the HTMLTooltip instead of the
old XUL-only Tooltip. The HTMLTooltip doesn't provide a builtin
setTextContent API, so the shadereditor is now creating the
markup for the tooltip and setting it as the content.

The styles have been ported to shadereditor.css and now rely on
theme variables.

This will allow us to move all the old tooltip code to the old
debugger folder, which will be the last consumer of the widget.

MozReview-Commit-ID: HVyxtf0xM4x

--HG--
extra : rebase_source : cdb7d6eabe77816f7f6d93299f7a8440ec4ce9a4

devtools/client/shadereditor/shadereditor.js

@@ -9,7 +9,7 @@ const promise = require("promise");
 const defer = require("devtools/shared/defer");
 const {Task} = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
-const Tooltip = require("devtools/client/shared/widgets/tooltip/Tooltip");
+const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 const Editor = require("devtools/client/sourceeditor/editor");
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const {extend} = require("devtools/shared/extend");
@@ -36,6 +36,7 @@ const EVENTS = {
 };
 exports.EVENTS = EVENTS;
 
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const STRINGS_URI = "devtools/client/locales/shadereditor.properties";
 const HIGHLIGHT_TINT = [1, 0, 0.25, 1]; // rgba
 const TYPING_MAX_DELAY = 500; // ms
@@ -579,9 +580,21 @@ class ShadersEditorsView {
       return;
     }
 
-    const tooltip = node._markerErrorsTooltip = new Tooltip(document);
-    tooltip.defaultOffsetX = GUTTER_ERROR_PANEL_OFFSET_X;
-    tooltip.setTextContent({ messages: messages });
+    const tooltip = node._markerErrorsTooltip = new HTMLTooltip(document, {
+      type: "arrow",
+      useXulWrapper: true
+    });
+
+    const div = document.createElementNS(XHTML_NS, "div");
+    div.className = "devtools-shader-tooltip-container";
+    for (const message of messages) {
+      const messageDiv = document.createElementNS(XHTML_NS, "div");
+      messageDiv.className = "devtools-tooltip-simple-text";
+      messageDiv.textContent = message;
+      div.appendChild(messageDiv);
+    }
+    tooltip.setContent(div);
+
     tooltip.startTogglingOnHover(node, () => true, {
       toggleDelay: GUTTER_ERROR_PANEL_DELAY
     });

devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js

@@ -32,13 +32,11 @@ async function ifWebGLSupported() {
   const tooltip = marker._markerErrorsTooltip;
   ok(tooltip, "A tooltip was created successfully.");
 
-  const content = tooltip.content;
-  ok(tooltip.content,
-    "Some tooltip's content was set.");
-  ok(tooltip.content.className.includes("devtools-tooltip-simple-text-container"),
-    "The tooltip's content container was created correctly.");
+  const containerClass = ".devtools-shader-tooltip-container";
+  const container = tooltip.panel.querySelector(containerClass);
+  ok(container, "The tooltip's content container was created correctly.");
 
-  const messages = content.childNodes;
+  const messages = container.childNodes;
   is(messages.length, 3,
     "There are three messages displayed in the tooltip.");
   ok(messages[0].className.includes("devtools-tooltip-simple-text"),

devtools/client/themes/shadereditor.css

@@ -84,6 +84,15 @@
   color: var(--theme-selection-color);
 }
 
+.devtools-shader-tooltip-container .devtools-tooltip-simple-text {
+  color: var(--theme-content-color1);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-shader-tooltip-container .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
 /* Responsive sidebar */
 
 @media (max-width: 700px) {