Bug 1472931 - Drop the autofocus feature of HTMLTooltip. r=birtles
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Mon, 27 Aug 2018 01:35:55 +0000
changeset 491181 ba46bf160bdf92993de91398bfd9012771395125
parent 491180 7141688c4ecae34b67865d7c125d63a3c751bdd9
child 491192 c6a80a1c10a1c72f525ecc1bd94b72b5a66d9887
push id1815
push userffxbld-merge
push dateMon, 15 Oct 2018 10:40:45 +0000
treeherdermozilla-release@18d4c09e9378 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1472931
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 1472931 - Drop the autofocus feature of HTMLTooltip. r=birtles This feature is no longer used. So this patch will remove this feature. Differential Revision: https://phabricator.services.mozilla.com/D4052
devtools/client/shared/test/browser_html_tooltip-03.js
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
--- a/devtools/client/shared/test/browser_html_tooltip-03.js
+++ b/devtools/client/shared/test/browser_html_tooltip-03.js
@@ -1,16 +1,16 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 /* import-globals-from helper_html_tooltip.js */
 
 "use strict";
 
 /**
- * Test the HTMLTooltip autofocus configuration option.
+ * This is the sanity test for the HTMLTooltip focus
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip-03.xul";
 
 const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 loadHelperScript("helper_html_tooltip.js");
 
@@ -25,81 +25,31 @@ add_task(async function() {
   await runTests(doc);
 
   info("Run tests for a Tooltip with a XUL panel");
   useXulWrapper = true;
   await runTests(doc);
 });
 
 async function runTests(doc) {
-  await testNoAutoFocus(doc);
-  await testAutoFocus(doc);
-  await testAutoFocusPreservesFocusChange(doc);
-}
-
-async function testNoAutoFocus(doc) {
   await focusNode(doc, "#box4-input");
   ok(doc.activeElement.closest("#box4-input"), "Focus is in the #box4-input");
 
-  info("Test a tooltip without autofocus will not take focus");
-  const tooltip = await createTooltip(doc, false);
+  info("Test a tooltip will not take focus");
+  const tooltip = await createTooltip(doc);
 
   await showTooltip(tooltip, doc.getElementById("box1"));
   ok(doc.activeElement.closest("#box4-input"), "Focus is still in the #box4-input");
 
   await hideTooltip(tooltip);
   await blurNode(doc, "#box4-input");
 
   tooltip.destroy();
 }
 
-async function testAutoFocus(doc) {
-  await focusNode(doc, "#box4-input");
-  ok(doc.activeElement.closest("#box4-input"), "Focus is in the #box4-input");
-
-  info("Test autofocus tooltip takes focus when displayed, " +
-    "and restores the focus when hidden");
-  const tooltip = await createTooltip(doc, true);
-
-  await showTooltip(tooltip, doc.getElementById("box1"));
-  ok(doc.activeElement.closest(".tooltip-content"), "Focus is in the tooltip");
-
-  await hideTooltip(tooltip);
-  ok(doc.activeElement.closest("#box4-input"), "Focus is in the #box4-input");
-
-  info("Blur the textbox before moving to the next test to reset the state.");
-  await blurNode(doc, "#box4-input");
-
-  tooltip.destroy();
-}
-
-async function testAutoFocusPreservesFocusChange(doc) {
-  await focusNode(doc, "#box4-input");
-  ok(doc.activeElement.closest("#box4-input"), "Focus is still in the #box3-input");
-
-  info("Test autofocus tooltip takes focus when displayed, " +
-    "but does not try to restore the active element if it is not focused when hidden");
-  const tooltip = await createTooltip(doc, true);
-
-  await showTooltip(tooltip, doc.getElementById("box1"));
-  ok(doc.activeElement.closest(".tooltip-content"), "Focus is in the tooltip");
-
-  info("Move the focus to #box3-input while the tooltip is displayed");
-  await focusNode(doc, "#box3-input");
-  ok(doc.activeElement.closest("#box3-input"), "Focus moved to the #box3-input");
-
-  await hideTooltip(tooltip);
-  ok(doc.activeElement.closest("#box3-input"), "Focus is still in the #box3-input");
-
-  info("Blur the textbox before moving to the next test to reset the state.");
-  await blurNode(doc, "#box3-input");
-
-  tooltip.destroy();
-}
-
 /**
  * Fpcus the node corresponding to the provided selector in the provided document. Returns
  * a promise that will resolve when receiving the focus event on the node.
  */
 function focusNode(doc, selector) {
   const node = doc.querySelector(selector);
   const onFocus = once(node, "focus");
   node.focus();
@@ -113,26 +63,25 @@ function focusNode(doc, selector) {
 function blurNode(doc, selector) {
   const node = doc.querySelector(selector);
   const onBlur = once(node, "blur");
   node.blur();
   return onBlur;
 }
 
 /**
- * Create an HTMLTooltip instance with the provided autofocus setting.
+ * Create an HTMLTooltip instance.
  *
  * @param {Document} doc
  *        Document in which the tooltip should be created
- * @param {Boolean} autofocus
  * @return {Promise} promise that will resolve the HTMLTooltip instance created when the
  *         tooltip content will be ready.
  */
-function createTooltip(doc, autofocus) {
-  const tooltip = new HTMLTooltip(doc, {autofocus, useXulWrapper});
+function createTooltip(doc) {
+  const tooltip = new HTMLTooltip(doc, {useXulWrapper});
   const div = doc.createElementNS(HTML_NS, "div");
   div.classList.add("tooltip-content");
   div.style.height = "50px";
 
   const input = doc.createElementNS(HTML_NS, "input");
   input.setAttribute("type", "text");
   div.appendChild(input);
 
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -289,40 +289,36 @@ const getRelativeRect = function(node, r
  *        - {String} id
  *          The ID to assign to the tooltip container elment.
  *        - {String} className
  *          A string separated list of classes to add to the tooltip container
  *          element.
  *        - {String} type
  *          Display type of the tooltip. Possible values: "normal", "arrow", and
  *          "doorhanger".
- *        - {Boolean} autofocus
- *          Defaults to false. Should the tooltip be focused when opening it.
  *        - {Boolean} consumeOutsideClicks
  *          Defaults to true. The tooltip is closed when clicking outside.
  *          Should this event be stopped and consumed or not.
  *        - {Boolean} useXulWrapper
  *          Defaults to false. If the tooltip is hosted in a XUL document, use a XUL panel
  *          in order to use all the screen viewport available.
  */
 function HTMLTooltip(toolboxDoc, {
     id = "",
     className = "",
     type = "normal",
-    autofocus = false,
     consumeOutsideClicks = true,
     useXulWrapper = false,
   } = {}) {
   EventEmitter.decorate(this);
 
   this.doc = toolboxDoc;
   this.id = id;
   this.className = className;
   this.type = type;
-  this.autofocus = autofocus;
   this.consumeOutsideClicks = consumeOutsideClicks;
   this.useXulWrapper = this._isXUL() && useXulWrapper;
   this.preferredWidth = "auto";
   this.preferredHeight = "auto";
 
   // The top window is used to attach click event listeners to close the tooltip if the
   // user clicks on the content page.
   this.topWindow = this._getTopWindow();
@@ -446,19 +442,16 @@ HTMLTooltip.prototype = {
 
     this.container.classList.add("tooltip-visible");
 
     // Keep a pointer on the focused element to refocus it when hiding the tooltip.
     this._focusedElement = this.doc.activeElement;
 
     this.doc.defaultView.clearTimeout(this.attachEventsTimer);
     this.attachEventsTimer = this.doc.defaultView.setTimeout(() => {
-      if (this.autofocus) {
-        this.focus();
-      }
       // Update the top window reference each time in case the host changes.
       this.topWindow = this._getTopWindow();
       this.topWindow.addEventListener("click", this._onClick, true);
       this.topWindow.addEventListener("mouseup", this._onMouseup, true);
       this.emit("shown");
     }, 0);
   },