Bug 1307464 - Use HTMLTooltip in shader editor;r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 26 Jul 2018 17:43:15 +0200
changeset 428680 d7039031e380efda6b3fef5f9e55e41baa424c05
parent 428679 910af1264f68e4d65e8e55d1605ba2e88196bb10
child 428681 16b8136f47f172303132f7b86aa164f987a41ef7
push id66969
push userjdescottes@mozilla.com
push dateFri, 27 Jul 2018 07:39:28 +0000
treeherderautoland@d7039031e380 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1307464
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/shadereditor/shadereditor.js
devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
devtools/client/themes/shadereditor.css
--- a/devtools/client/shadereditor/shadereditor.js
+++ b/devtools/client/shadereditor/shadereditor.js
@@ -4,17 +4,17 @@
 "use strict";
 
 const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
 const {SideMenuWidget} = require("devtools/client/shared/widgets/SideMenuWidget.jsm");
 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");
 const {WidgetMethods, setNamedTimeout} =
   require("devtools/client/shared/widgets/view-helpers");
 
 // The panel's window global is an EventEmitter firing the following events:
 const EVENTS = {
@@ -31,16 +31,17 @@ const EVENTS = {
   // When the UI is reset from tab navigation
   UI_RESET: "ShaderEditor:UIReset",
 
   // When the editor's error markers are all removed
   EDITOR_ERROR_MARKERS_REMOVED: "ShaderEditor:EditorCleaned"
 };
 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
 const SHADERS_AUTOGROW_ITEMS = 4;
 const GUTTER_ERROR_PANEL_OFFSET_X = 7; // px
 const GUTTER_ERROR_PANEL_DELAY = 100; // ms
 const DEFAULT_EDITOR_CONFIG = {
   gutters: ["errors"],
@@ -574,19 +575,31 @@ class ShadersEditorsView {
   /**
    * Event listener for the 'mouseover' event on a marker in the editor gutter.
    */
   _onMarkerMouseOver(line, node, messages) {
     if (node._markerErrorsTooltip) {
       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
     });
   }
 
   /**
    * Removes all the gutter markers and line classes from the editor.
    */
--- a/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
+++ b/devtools/client/shadereditor/test/browser_se_editors-error-tooltip.js
@@ -27,23 +27,21 @@ async function ifWebGLSupported() {
   const editorDocument = vsEditor.container.contentDocument;
   const marker = editorDocument.querySelector(".error");
   const parsed = shadersEditorsView._errors.vs[0].messages;
   shadersEditorsView._onMarkerMouseOver(7, marker, parsed);
 
   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"),
     "The first message was created correctly.");
   ok(messages[1].className.includes("devtools-tooltip-simple-text"),
     "The second message was created correctly.");
   ok(messages[2].className.includes("devtools-tooltip-simple-text"),
     "The third message was created correctly.");
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -79,16 +79,25 @@
   color: var(--theme-body-color-alt);
 }
 
 .editor-label[selected] {
   background-color: var(--theme-selection-background);
   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) {
   #shaders-pane {
     max-height: 60vh;
   }
 
   #editors-splitter {