938097 - Image preview tooltip should hide on scroll

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Patrick Brosset <:pbro>]

STR:

- Open http://www.mozilla.org/en-US/firefox/new/
- Open the inspector
- Inspect the firefox logo top left
- Hover over the <img> tag's src attribute in the markup view to show the tooltip
- Scroll with the mouse wheel

=> Actual: The tooltip remains visible and at the same position
=> Expected: The tooltip should hide

Comment 1

[Patrick Brosset <:pbro>]

This is a follow-up of bug 931845

Comment 2

[Patrick Brosset <:pbro>]

The code is the easy part here:

- in Tooltip.js/startTogglingOnHover function:

    this._onDocScroll = this._onDocScroll.bind(this);
    this.doc.addEventListener("scroll", this._onDocScroll, false);

- in Tooltip.js/stopTogglingOnHover function:

    this.doc.removeEventListener("scroll", this._onDocScroll, false);

- In Tooltip.js/Tooltip class, add function:

    _onDocScroll: function() {
      this.hide();
    },

However, the test is the hard part here. The test code below works fine on 90% of platforms, but seems to intermittently fail on Linux and Windows during debug build tests:

function testScrollingHidesTooltip() {
  let panel = ruleView.tooltip.panel;

  let {valueSpan} = getRuleViewProperty("background-image");
  let uriSpan = valueSpan.querySelector(".theme-link");
  assertTooltipShownOn(ruleView.tooltip, uriSpan, () => {
    // The tooltip is shown now
    // Scroll and verify that it hides
    ruleView.doc.defaultView.addEventListener("scroll", function onDocScroll() {
      ruleView.doc.defaultView.removeEventListener("scroll", onDocScroll, false);
      info("Detected scroll event");

      // That executeSoon is required to let the panel react to the scroll and
      // hide itself before we test if it's hidden or not
      executeSoon(() => {
        ok(panel.hidden, "Scrolling down closed the tooltip");
        inspector.selection.setNode(contentDoc.querySelector(".test-element"));
        inspector.once("inspector-updated", testDivRuleView);
      });
    }, false);

    executeSoon(function() {
      info("Simulating a scroll event now");
      EventUtils.synthesizeWheel(uriSpan, 10, 10,
        {deltaY: 50, deltaMode: WheelEvent.DOM_DELTA_PIXEL},
        ruleView.doc.defaultView);
    });
  });
}

Comment 3

[Brian Grinstead [:bgrins]]

In the case of the colorpicker (or any tooltip that stays opened until dismissed), I think it should reposition on scroll rather than hiding.  Would you like me to file a different bug for this or is it related enough to do it here?

Comment 4

[Patrick Brosset <:pbro>]

> In the case of the colorpicker (or any tooltip that stays opened until
> dismissed), I think it should reposition on scroll rather than hiding.

You're right!
 
> Would you like me to file a different bug for this or is it related enough
> to do it here?

No let's keep it in this bug.

Comment 5

[Ada [:adalucinet]]

This issue is also reproducible for Rules and Computed views, across platforms [1].

[1] Windows 10 64-bit, Ubuntu 16.04 64-bit and Mac OS X 10.11.1