Bug 1501622 - Cleanup CSS variable preview tooltip content when hovering new variable. r=pbro, a=RyanVM
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 24 Oct 2018 12:50:42 +0000
changeset 500850 2f826495a5ecca19b042ff704e97ee814dd81402
parent 500849 b2d0036536466f8bb4e7c32be967fe2c428924f4
child 500851 0203e34e995060ce1fb3abbe5c5b6f8b2fc76ba7
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro, RyanVM
bugs1501622
milestone64.0
Bug 1501622 - Cleanup CSS variable preview tooltip content when hovering new variable. r=pbro, a=RyanVM Differential Revision: https://phabricator.services.mozilla.com/D9648
devtools/client/inspector/rules/test/browser_rules_variables_01.js
devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
--- a/devtools/client/inspector/rules/test/browser_rules_variables_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
@@ -21,21 +21,30 @@ add_task(async function() {
   const setColor = unsetColor.previousElementSibling;
   is(unsetColor.textContent, " red", "red is unmatched in color");
   is(setColor.textContent, "--color", "--color is not set correctly");
   is(setColor.dataset.variable, "--color = chartreuse",
                                 "--color's dataset.variable is not set correctly");
   let previewTooltip = await assertShowPreviewTooltip(view, setColor);
   await assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
 
+  ok(previewTooltip.panel.textContent.includes("--color = chartreuse"),
+    "CSS variable preview tooltip shows the expected CSS variable");
+
   const unsetVar = getRuleViewProperty(view, "div", "background-color").valueSpan
     .querySelector(".ruleview-unmatched-variable");
   const setVar = unsetVar.nextElementSibling;
   const setVarName = setVar.firstElementChild.firstElementChild;
   is(unsetVar.textContent, "--not-set",
      "--not-set is unmatched in background-color");
   is(setVar.textContent, " var(--bg)", "var(--bg) parsed incorrectly");
   is(setVarName.textContent, "--bg", "--bg is not set correctly");
   is(setVarName.dataset.variable, "--bg = seagreen",
                                   "--bg's dataset.variable is not set correctly");
   previewTooltip = await assertShowPreviewTooltip(view, setVarName);
+
+  ok(!previewTooltip.panel.textContent.includes("--color = chartreuse"),
+    "CSS variable preview tooltip no longer shows the previous CSS variable");
+  ok(previewTooltip.panel.textContent.includes("--bg = seagreen"),
+    "CSS variable preview tooltip shows the new CSS variable");
+
   await assertTooltipHiddenOnMouseOut(previewTooltip, setVarName);
 });
--- a/devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
@@ -18,12 +18,13 @@ const XHTML_NS = "http://www.w3.org/1999
  *         Text to display in tooltip.
  */
 function setVariableTooltip(tooltip, doc, text) {
   // Create tooltip content
   const div = doc.createElementNS(XHTML_NS, "div");
   div.classList.add("devtools-monospace", "devtools-tooltip-css-variable");
   div.textContent = text;
 
+  tooltip.panel.innerHTML = "";
   tooltip.panel.appendChild(div);
 }
 
 module.exports.setVariableTooltip = setVariableTooltip;