Bug 1267401 - part1: Rename HTMLTooltip properties for backward comp with Tooltip;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 23 May 2016 22:49:21 +0200
changeset 370500 3860dcef5daac2d4b2c4475043e85b7548b255a9
parent 370499 2dc0440c0d6a3741a9d7791f9c0a180f78a91747
child 370501 a4c0546f2b55db1306e0cac5526feb64102cdbf7
push id19081
push userjdescottes@mozilla.com
push dateTue, 24 May 2016 21:46:00 +0000
reviewersbgrins
bugs1267401
milestone49.0a1
Bug 1267401 - part1: Rename HTMLTooltip properties for backward comp with Tooltip;r=bgrins Rename document -> doc for consistency and parent to panel for test compatibility. MozReview-Commit-ID: KHT7plLtNQc
devtools/client/shared/test/helper_html_tooltip.js
devtools/client/shared/widgets/HTMLTooltip.js
--- a/devtools/client/shared/test/helper_html_tooltip.js
+++ b/devtools/client/shared/test/helper_html_tooltip.js
@@ -47,20 +47,20 @@ function* hideTooltip(tooltip) {
 /**
  * Forces the reflow of an HTMLTooltip document and waits for the next repaint.
  *
  * @param {HTMLTooltip} the tooltip to reflow
  * @return {Promise} a promise that will resolve after the reflow and repaint
  *         have been executed.
  */
 function waitForReflow(tooltip) {
-  let {document} = tooltip;
+  let {doc} = tooltip;
   return new Promise(resolve => {
-    document.documentElement.offsetWidth;
-    document.defaultView.requestAnimationFrame(resolve);
+    doc.documentElement.offsetWidth;
+    doc.defaultView.requestAnimationFrame(resolve);
   });
 }
 
 /**
  * Test helper designed to check that a tooltip is displayed at the expected
  * position relative to an anchor, given a set of expectations.
  *
  * @param {HTMLTooltip} tooltip
--- a/devtools/client/shared/widgets/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/HTMLTooltip.js
@@ -26,23 +26,23 @@ const IFRAME_CONTAINER_ID = "tooltip-ifr
  *        - {Boolean} consumeOutsideClicks
  *          Defaults to true. The tooltip is closed when clicking outside.
  *          Should this event be stopped and consumed or not.
  */
 function HTMLTooltip(toolbox,
   {type = "normal", autofocus = true, consumeOutsideClicks = true} = {}) {
   EventEmitter.decorate(this);
 
-  this.document = toolbox.doc;
+  this.doc = toolbox.doc;
   this.type = type;
   this.autofocus = autofocus;
   this.consumeOutsideClicks = consumeOutsideClicks;
 
   // Use the topmost window to listen for click events to close the tooltip
-  this.topWindow = this.document.defaultView.top;
+  this.topWindow = this.doc.defaultView.top;
 
   this._onClick = this._onClick.bind(this);
 
   this.container = this._createContainer();
 
   // Promise that will resolve when the container can be filled with content.
   this.containerReady = new Promise(resolve => {
     if (this._isXUL()) {
@@ -64,25 +64,16 @@ function HTMLTooltip(toolbox,
 module.exports.HTMLTooltip = HTMLTooltip;
 
 HTMLTooltip.prototype = {
   position: {
     TOP: "top",
     BOTTOM: "bottom",
   },
 
-  get parent() {
-    if (this._isXUL()) {
-      // In XUL context, we are wrapping the HTML content in an iframe.
-      let win = this.container.contentWindow.wrappedJSObject;
-      return win.document.getElementById(IFRAME_CONTAINER_ID);
-    }
-    return this.container;
-  },
-
   /**
    * Set the tooltip content element. The preferred width/height should also be
    * specified here.
    *
    * @param {Element} content
    *        The tooltip content, should be a HTML element.
    * @param {Number} width
    *        Preferred width for the tooltip container
@@ -91,18 +82,18 @@ HTMLTooltip.prototype = {
    * @return {Promise} a promise that will resolve when the content has been
    *         added in the tooltip container.
    */
   setContent: function (content, width, height) {
     this.preferredWidth = width;
     this.preferredHeight = height;
 
     return this.containerReady.then(() => {
-      this.parent.innerHTML = "";
-      this.parent.appendChild(content);
+      this.panel.innerHTML = "";
+      this.panel.appendChild(content);
     });
   },
 
   /**
    * Show the tooltip next to the provided anchor element. A preferred position
    * can be set. The event "shown" will be fired after the tooltip is displayed.
    *
    * @param {Element} anchor
@@ -128,64 +119,73 @@ HTMLTooltip.prototype = {
       this.container.style.top = top + "px";
       this.container.style.left = left + "px";
       this.container.style.display = "block";
 
       if (this.autofocus) {
         this.container.focus();
       }
 
-      this.attachEventsTimer = this.document.defaultView.setTimeout(() => {
+      this.attachEventsTimer = this.doc.defaultView.setTimeout(() => {
         this.topWindow.addEventListener("click", this._onClick, true);
         this.emit("shown");
       }, 0);
     });
   },
 
   /**
    * Hide the current tooltip. The event "hidden" will be fired when the tooltip
    * is hidden.
    */
   hide: function () {
-    this.document.defaultView.clearTimeout(this.attachEventsTimer);
+    this.doc.defaultView.clearTimeout(this.attachEventsTimer);
 
     if (this.isVisible()) {
       this.topWindow.removeEventListener("click", this._onClick, true);
       this.container.style.display = "none";
       this.emit("hidden");
     }
   },
 
+  get panel() {
+    if (this._isXUL()) {
+      // In XUL context, we are wrapping the HTML content in an iframe.
+      let win = this.container.contentWindow.wrappedJSObject;
+      return win.document.getElementById(IFRAME_CONTAINER_ID);
+    }
+    return this.container;
+  },
+
   /**
    * Check if the tooltip is currently displayed.
    * @return {Boolean} true if the tooltip is visible
    */
   isVisible: function () {
-    let win = this.document.defaultView;
+    let win = this.doc.defaultView;
     return win.getComputedStyle(this.container).display != "none";
   },
 
   /**
    * Destroy the tooltip instance. Hide the tooltip if displayed, remove the
    * tooltip container from the document.
    */
   destroy: function () {
     this.hide();
     this.container.remove();
   },
 
   _createContainer: function () {
     let container;
     if (this._isXUL()) {
-      container = this.document.createElementNS(XHTML_NS, "iframe");
+      container = this.doc.createElementNS(XHTML_NS, "iframe");
       container.classList.add("devtools-tooltip-iframe");
-      this.document.querySelector("window").appendChild(container);
+      this.doc.querySelector("window").appendChild(container);
     } else {
-      container = this.document.createElementNS(XHTML_NS, "div");
-      this.document.body.appendChild(container);
+      container = this.doc.createElementNS(XHTML_NS, "div");
+      this.doc.body.appendChild(container);
     }
 
     container.classList.add("theme-body");
     container.classList.add("devtools-htmltooltip-container");
 
     return container;
   },
 
@@ -197,23 +197,23 @@ HTMLTooltip.prototype = {
     this.hide();
     if (this.consumeOutsideClicks) {
       e.preventDefault();
       e.stopPropagation();
     }
   },
 
   _isInTooltipContainer: function (node) {
-    let contentWindow = this.parent.ownerDocument.defaultView;
+    let contentWindow = this.panel.ownerDocument.defaultView;
     let win = node.ownerDocument.defaultView;
 
     if (win === contentWindow) {
       // If node is in the same window as the tooltip, check if the tooltip
       // parent contains node.
-      return this.parent.contains(node);
+      return this.panel.contains(node);
     }
 
     // Otherwise check if the node window is in the tooltip window.
     while (win.parent && win.parent != win) {
       win = win.parent;
       if (win === contentWindow) {
         return true;
       }
@@ -221,20 +221,20 @@ HTMLTooltip.prototype = {
     return false;
   },
 
   _findBestPosition: function (anchor, position) {
     let top, left;
     let {TOP, BOTTOM} = this.position;
 
     let {left: anchorLeft, top: anchorTop, height: anchorHeight}
-      = this._getRelativeRect(anchor, this.document);
+      = this._getRelativeRect(anchor, this.doc);
 
     let {bottom: docBottom, right: docRight} =
-      this.document.documentElement.getBoundingClientRect();
+      this.doc.documentElement.getBoundingClientRect();
 
     let height = this.preferredHeight;
     // Check if the popup can fit above the anchor.
     let availableTop = anchorTop;
     let fitsAbove = availableTop >= height;
     // Check if the popup can fit below the anchor.
     let availableBelow = docBottom - (anchorTop + anchorHeight);
     let fitsBelow = availableBelow >= height;
@@ -285,11 +285,11 @@ HTMLTooltip.prototype = {
     // Compute right and bottom coordinates using the rest of the data.
     let right = left + width;
     let bottom = top + height;
 
     return {top, right, bottom, left, width, height};
   },
 
   _isXUL: function () {
-    return this.document.documentElement.namespaceURI === XUL_NS;
+    return this.doc.documentElement.namespaceURI === XUL_NS;
   },
 };