Commit d70c24af authored by Nicolas Chevobbe's avatar Nicolas Chevobbe
Browse files

Bug 1732906 - [devtools] Refactor eyedropper show/hide methods. r=ochameau. 

With EFT, tests using the eyedropper were failing because of the isXul check
done when the eyedropper gets hidden: the document.documentElement property
was null at this point and the isXul method was throwing.
This patch replace the isXul check with a check on the presence of an abortController
property, which we do now set in the `show` method.

Differential Revision: https://phabricator.services.mozilla.com/D126808
parent 807a90b0

devtools/server/actors/highlighters/eye-dropper.js

+19 −22
Original line number Diff line number Diff line
@@ -50,6 +50,7 @@ const CLOSE_DELAY = 750; 
 * showing a magnified circle and color preview while the user hover the page.

 */

class EyeDropper {

  #pageEventListenersAbortController;

  constructor(highlighterEnv) {

    EventEmitter.decorate(this);
@@ -160,11 +161,15 @@ class EyeDropper { 


    // Start listening for user events.

    const { pageListenerTarget } = this.highlighterEnv;

    pageListenerTarget.addEventListener("mousemove", this);

    pageListenerTarget.addEventListener("click", this, true);

    pageListenerTarget.addEventListener("keydown", this);

    pageListenerTarget.addEventListener("DOMMouseScroll", this);

    pageListenerTarget.addEventListener("FullZoomChange", this);

    this.#pageEventListenersAbortController = new AbortController();

    const config = {

      signal: this.#pageEventListenersAbortController.signal,

    };

    pageListenerTarget.addEventListener("mousemove", this, config);

    pageListenerTarget.addEventListener("click", this, true, config);

    pageListenerTarget.addEventListener("keydown", this, config);

    pageListenerTarget.addEventListener("DOMMouseScroll", this, config);

    pageListenerTarget.addEventListener("FullZoomChange", this, config);



    // Show the eye-dropper.

    this.getElement("root").removeAttribute("hidden");
@@ -196,29 +201,21 @@ class EyeDropper { 
   * Hide the eye-dropper highlighter.

   */

  hide() {

    if (this.highlighterEnv.isXUL) {

      return;

    }



    this.pageImage = null;



    const { pageListenerTarget } = this.highlighterEnv;



    if (pageListenerTarget) {

      pageListenerTarget.removeEventListener("mousemove", this);

      pageListenerTarget.removeEventListener("click", this, true);

      pageListenerTarget.removeEventListener("keydown", this);

      pageListenerTarget.removeEventListener("DOMMouseScroll", this);

      pageListenerTarget.removeEventListener("FullZoomChange", this);

    }

    if (this.#pageEventListenersAbortController) {

      this.#pageEventListenersAbortController.abort();

      this.#pageEventListenersAbortController = null;



    this.getElement("root").setAttribute("hidden", "true");

    this.getElement("root").removeAttribute("drawn");

      const rootElement = this.getElement("root");

      rootElement.setAttribute("hidden", "true");

      rootElement.removeAttribute("drawn");



      this.emit("hidden");



      this.win.document.setSuppressedEventListener(null);

    }

  }



  /**

   * Create an image bitmap from the page screenshot, draw the eyedropper and set the