Bug 1288375 - add theme classList to tooltip container draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 21 Jul 2016 16:12:27 +0200
changeset 390610 1a4217310f5cebbfd1c80dee7a970f67f7e4d192
parent 390601 17409ee90c864e7e982a43e2026e6814a0797e4d
child 526034 822cf8ef966ac21a4982999c0f648c4d45a80e3d
push id23711
push userjdescottes@mozilla.com
push dateThu, 21 Jul 2016 14:20:31 +0000
bugs1288375
milestone50.0a1
Bug 1288375 - add theme classList to tooltip container MozReview-Commit-ID: AA74HqUemJG
devtools/client/shared/theme.js
devtools/client/shared/widgets/HTMLTooltip.js
--- a/devtools/client/shared/theme.js
+++ b/devtools/client/shared/theme.js
@@ -68,16 +68,20 @@ function getThemeFile(name) {
 /**
  * Returns the string value of the current theme,
  * like "dark" or "light".
  */
 const getTheme = exports.getTheme = () => {
   return Services.prefs.getCharPref("devtools.theme");
 };
 
+exports.getThemeDef = () => {
+  return gDevTools.getThemeDefinition(getTheme());
+};
+
 /**
  * Returns a color indicated by `type` (like "toolbar-background", or
  * "highlight-red"), with the ability to specify a theme, or use whatever the
  * current theme is if left unset. If theme not found, falls back to "light"
  * theme. Returns null if the type cannot be found for the theme given.
  */
 /* eslint-disable no-unused-vars */
 const getColor = exports.getColor = (type, theme) => {
--- a/devtools/client/shared/widgets/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/HTMLTooltip.js
@@ -4,16 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const EventEmitter = require("devtools/shared/event-emitter");
 const {TooltipToggle} = require("devtools/client/shared/widgets/tooltip/TooltipToggle");
 const {listenOnce} = require("devtools/shared/async-utils");
+const {getThemeDef} = require("devtools/client/shared/theme");
 const {Task} = require("devtools/shared/task");
 
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 
 const POSITION = {
   TOP: "top",
   BOTTOM: "bottom",
@@ -332,27 +333,20 @@ HTMLTooltip.prototype = {
 
     let themeHeight = EXTRA_HEIGHT[this.type] + 2 * EXTRA_BORDER[this.type];
     let preferredHeight = this.preferredHeight + themeHeight;
 
     let {top, height, computedPosition} =
       calculateVerticalPosition(anchorRect, viewportRect, preferredHeight, position, y);
 
     this._position = computedPosition;
+
     // Apply height before measuring the content width (if width="auto").
-    let isTop = computedPosition === POSITION.TOP;
-    this.container.classList.toggle("tooltip-top", isTop);
-    this.container.classList.toggle("tooltip-bottom", !isTop);
-
-    // If the preferred height is set to Infinity, the tooltip container should grow based
-    // on its content's height and use as much height as possible.
-    this.container.classList.toggle("tooltip-flexible-height",
-      this.preferredHeight === Infinity);
-
     this.container.style.height = height + "px";
+    this.container.className = this._getContainerClassName();
 
     let preferredWidth;
     if (this.preferredWidth === "auto") {
       preferredWidth = this._measureContainerWidth();
     } else {
       let themeWidth = 2 * EXTRA_BORDER[this.type];
       preferredWidth = this.preferredWidth + themeWidth;
     }
@@ -385,16 +379,32 @@ HTMLTooltip.prototype = {
       this._maybeFocusTooltip();
       // Updated the top window reference each time in case the host changes.
       this.topWindow = this._getTopWindow();
       this.topWindow.addEventListener("click", this._onClick, true);
       this.emit("shown");
     }, 0);
   }),
 
+  _getContainerClassName: function () {
+    let classes = ["tooltip-container"];
+    classes = classes.concat(getThemeDef().classList);
+
+    let isTop = this._computedPosition === POSITION.TOP;
+    classes.push(isTop ? "tooltip-bottom" : "tooltip-top");
+
+    // If the preferred height is set to Infinity, the tooltip container should grow based
+    // on its content's height and use as much height as possible.
+    if (this.preferredHeight === Infinity) {
+      classes.push("tooltip-flexible-height");
+    }
+
+    return classes.join(" ");
+  },
+
   /**
    * Calculate the rect of the viewport that limits the tooltip dimensions. When using a
    * XUL panel wrapper, the viewport will be able to use the whole screen (excluding space
    * reserved by the OS for toolbars etc.). Otherwise, the viewport is limited to the
    * tooltip's document.
    *
    * @return {Object} DOMRect-like object with the Number properties: top, right, bottom,
    *         left, width, height