Bug 1538306 - ensure highlighter bounds overlay does not interfere with the accessible audit. r=pbro

Differential Revision: https://phabricator.services.mozilla.com/D24546

--HG--
extra : moz-landing-system : lando

devtools/server/actors/accessibility/accessible.js

@@ -389,13 +389,13 @@ const AccessibleActor = ActorClassWithSpec(accessibleSpec, {
 
     const { DOMNode: rawNode } = this.rawAccessible;
     const win = rawNode.ownerGlobal;
-    this.walker.loadTransitionDisablingStyleSheet(win);
+    this.walker.clearStyles(win);
     const contrastRatio = await getContrastRatioFor(rawNode.parentNode, {
       bounds: this.bounds,
       win,
     });
 
-    this.walker.removeTransitionDisablingStyleSheet(win);
+    this.walker.restoreStyles(win);
 
     return contrastRatio;
   },

devtools/server/actors/accessibility/walker.js

@@ -477,12 +477,14 @@ const AccessibleWalkerActor = ActorClassWithSpec(accessibleWalkerSpec, {
   },
 
   /**
-   * Load accessibility highlighter style sheet used for preventing transitions and
-   * applying transparency when calculating colour contrast.
+   * Ensure that nothing interferes with the audit for an accessible object
+   * (CSS, overlays) by load accessibility highlighter style sheet used for
+   * preventing transitions and applying transparency when calculating colour
+   * contrast as well as temporarily hiding accessible highlighter overlay.
    * @param  {Object} win
    *         Window where highlighting happens.
    */
-  loadTransitionDisablingStyleSheet(win) {
+  clearStyles(win) {
     if (this._sheetLoaded) {
       return;
     }
@@ -493,23 +495,45 @@ const AccessibleWalkerActor = ActorClassWithSpec(accessibleWalkerSpec, {
     // taking a snapshot for contrast measurement).
     loadSheet(win, HIGHLIGHTER_STYLES_SHEET);
     this._sheetLoaded = true;
+    this.hideHighlighter();
   },
 
   /**
-   * Unload accessibility highlighter style sheet used for preventing transitions and
-   * applying transparency when calculating colour contrast.
+   * Restore CSS and overlays that could've interfered with the audit for an
+   * accessible object by unloading accessibility highlighter style sheet used
+   * for preventing transitions and applying transparency when calculating
+   * colour contrast and potentially restoring accessible highlighter overlay.
    * @param  {Object} win
    *         Window where highlighting was happenning.
    */
-  removeTransitionDisablingStyleSheet(win) {
+  restoreStyles(win) {
     if (!this._sheetLoaded) {
       return;
     }
 
+    this.showHighlighter();
     removeSheet(win, HIGHLIGHTER_STYLES_SHEET);
     this._sheetLoaded = false;
   },
 
+  hideHighlighter() {
+    // TODO: Fix this workaround that temporarily removes higlighter bounds
+    // overlay that can interfere with the contrast ratio calculation.
+    if (this._highlighter) {
+      const highlighter = this._highlighter.instance;
+      highlighter.hideAccessibleBounds();
+    }
+  },
+
+  showHighlighter() {
+    // TODO: Fix this workaround that temporarily removes higlighter bounds
+    // overlay that can interfere with the contrast ratio calculation.
+    if (this._highlighter) {
+      const highlighter = this._highlighter.instance;
+      highlighter.showAccessibleBounds();
+    }
+  },
+
   /**
    * Public method used to show an accessible object highlighter on the client
    * side.

devtools/server/actors/highlighters.js

@@ -509,6 +509,13 @@ exports.CustomHighlighterActor = protocol.ActorClassWithSpec(customHighlighterSp
 
   release: function() {},
 
+  /**
+   * Get current instance of the highlighter object.
+   */
+  get instance() {
+    return this._highlighter;
+  },
+
   /**
    * Show the highlighter.
    * This calls through to the highlighter instance's |show(node, options)|

devtools/server/actors/highlighters/accessible.js

@@ -232,18 +232,53 @@ class AccessibleHighlighter extends AutoRefreshHighlighter {
                            this.highlighterEnv.window.document.documentElement);
   }
 
+  /**
+   * Public API method to temporarily hide accessible bounds for things like
+   * color contrast calculation.
+   */
+  hideAccessibleBounds() {
+    if (this.getElement("elements").hasAttribute("hidden")) {
+      return;
+    }
+
+    this._hideAccessibleBounds();
+    this._shouldRestoreBoundsVisibility = true;
+  }
+
+  /**
+   * Public API method to show accessible bounds in case they were temporarily
+   * hidden.
+   */
+  showAccessibleBounds() {
+    if (this._shouldRestoreBoundsVisibility) {
+      this._showAccessibleBounds();
+    }
+  }
+
   /**
    * Hide the accessible bounds container.
    */
   _hideAccessibleBounds() {
+    this._shouldRestoreBoundsVisibility = null;
+    setIgnoreLayoutChanges(true);
     this.getElement("elements").setAttribute("hidden", "true");
+    setIgnoreLayoutChanges(false,
+      this.highlighterEnv.window.document.documentElement);
   }
 
   /**
    * Show the accessible bounds container.
    */
   _showAccessibleBounds() {
+    this._shouldRestoreBoundsVisibility = null;
+    if (!this.currentNode || !this.highlighterEnv.window) {
+      return;
+    }
+
+    setIgnoreLayoutChanges(true);
     this.getElement("elements").removeAttribute("hidden");
+    setIgnoreLayoutChanges(false,
+      this.highlighterEnv.window.document.documentElement);
   }
 
   /**

devtools/server/actors/highlighters/xul-accessible.js

@@ -337,11 +337,39 @@ class XULWindowAccessibleHighlighter {
     return isNodeValid(node) || isNodeValid(node, TEXT_NODE);
   }
 
+  /**
+   * Public API method to temporarily hide accessible bounds for things like
+   * color contrast calculation.
+   */
+  hideAccessibleBounds() {
+    if (this.container.hasAttribute("hidden")) {
+      return;
+    }
+
+    this._hideAccessibleBounds();
+    this._shouldRestoreBoundsVisibility = true;
+  }
+
+  /**
+   * Public API method to show accessible bounds in case they were temporarily
+   * hidden.
+   */
+  showAccessibleBounds() {
+    if (this._shouldRestoreBoundsVisibility) {
+      this._showAccessibleBounds();
+    }
+  }
+
   /**
    * Show accessible bounds highlighter.
    */
   _showAccessibleBounds() {
+    this._shouldRestoreBoundsVisibility = null;
     if (this.container) {
+      if (!this.currentNode || !this.highlighterEnv.window) {
+        return;
+      }
+
       this.container.removeAttribute("hidden");
     }
   }
@@ -350,6 +378,7 @@ class XULWindowAccessibleHighlighter {
    * Hide accessible bounds highlighter.
    */
   _hideAccessibleBounds() {
+    this._shouldRestoreBoundsVisibility = null;
     if (this.container) {
       this.container.setAttribute("hidden", "true");
     }