Backed out changeset d3056dc50fe3 (bug 1707614) for causing devtools failures at browser_rules_colorpicker-release-outside-frame.js . CLOSED TREE

devtools/server/actors/accessibility/audit/contrast.js

@@ -17,6 +17,18 @@ loader.lazyRequireGetter(
   "devtools/shared/layout/utils",
   true
 );
+loader.lazyRequireGetter(
+  this,
+  "addPseudoClassLock",
+  "devtools/server/actors/highlighters/utils/markup",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "removePseudoClassLock",
+  "devtools/server/actors/highlighters/utils/markup",
+  true
+);
 loader.lazyRequireGetter(
   this,
   "getContrastRatioAgainstBackground",
@@ -42,17 +54,13 @@ loader.lazyRequireGetter(
 );
 
 const WORKER_URL = "resource://devtools/server/actors/accessibility/worker.js";
+const HIGHLIGHTED_PSEUDO_CLASS = ":-moz-devtools-highlighted";
 const {
   LARGE_TEXT: { BOLD_LARGE_TEXT_MIN_PIXELS, LARGE_TEXT_MIN_PIXELS },
 } = require("devtools/shared/accessibility");
 
 loader.lazyGetter(this, "worker", () => new DevToolsWorker(WORKER_URL));
 
-const RESET_PROPERTIES = {
-  color: "transparent",
-  "text-shadow": "none",
-};
-
 /**
  * Get canvas rendering context for the current target window bound by the bounds of the
  * accessible objects.
@@ -81,18 +89,9 @@ function getImageCtx(win, bounds, zoom, scale, node) {
   ctx.imageSmoothingEnabled = false;
   ctx.scale(scale, scale);
 
-  const stylePropertiesToRestore = {};
-  const nodeHadStyle = node && node.getAttribute("style") !== null;
-
   // If node is passed, make its color related text properties invisible.
-  if (node && node.style) {
-    for (const property in RESET_PROPERTIES) {
-      stylePropertiesToRestore[property] = {
-        value: node.style.getPropertyValue(property),
-        priority: node.style.getPropertyPriority(property),
-      };
-      node.style.setProperty(property, RESET_PROPERTIES[property], "important");
-    }
+  if (node) {
+    addPseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
   }
 
   ctx.drawWindow(
@@ -107,14 +106,7 @@ function getImageCtx(win, bounds, zoom, scale, node) {
 
   // Restore all inline styling.
   if (node) {
-    if (nodeHadStyle) {
-      for (const property in stylePropertiesToRestore) {
-        const { value, priority } = stylePropertiesToRestore[property];
-        node.style.setProperty(property, value, priority);
-      }
-    } else {
-      node.removeAttribute("style");
-    }
+    removePseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
   }
 
   return ctx;

devtools/server/actors/utils/accessibility.js

@@ -13,13 +13,17 @@ loader.lazyRequireGetter(
   true
 );
 
-// Style used for preventing transitions and applying transparency when
-// calculating colour contrast.
-const BACKGROUND_CALCULATION_STYLE_SHEET = `data:text/css;charset=utf-8,
+// Highlighter style used for preventing transitions and applying transparency
+// when calculating colour contrast.
+const HIGHLIGHTER_STYLES_SHEET = `data:text/css;charset=utf-8,
 * {
   transition: none !important;
 }
-`;
+
+:-moz-devtools-highlighted {
+  color: transparent !important;
+  text-shadow: none !important;
+}`;
 
 /**
  * Helper function that determines if nsIAccessible object is in defunct state.
@@ -59,7 +63,7 @@ function isDefunct(accessible) {
  *         Window where highlighting happens.
  */
 function loadSheetForBackgroundCalculation(win) {
-  loadSheet(win, BACKGROUND_CALCULATION_STYLE_SHEET);
+  loadSheet(win, HIGHLIGHTER_STYLES_SHEET);
 }
 
 /**
@@ -70,7 +74,7 @@ function loadSheetForBackgroundCalculation(win) {
  *         Window where highlighting was happenning.
  */
 function removeSheetForBackgroundCalculation(win) {
-  removeSheet(win, BACKGROUND_CALCULATION_STYLE_SHEET);
+  removeSheet(win, HIGHLIGHTER_STYLES_SHEET);
 }
 
 /**

dom/events/EventStates.h

@@ -274,8 +274,10 @@ class EventStates {
 #define NS_EVENT_STATE_MOZINERT NS_DEFINE_EVENT_STATE_MACRO(43)
 // Topmost Modal <dialog> element in top layer
 #define NS_EVENT_STATE_TOPMOST_MODAL_DIALOG NS_DEFINE_EVENT_STATE_MACRO(44)
+// Devtools highlighter (but it's used for something else atm).
+#define NS_EVENT_STATE_DEVTOOLS_HIGHLIGHTED NS_DEFINE_EVENT_STATE_MACRO(45)
 // Devtools style inspector stuff.
-#define NS_EVENT_STATE_STYLEEDITOR_TRANSITIONING NS_DEFINE_EVENT_STATE_MACRO(45)
+#define NS_EVENT_STATE_STYLEEDITOR_TRANSITIONING NS_DEFINE_EVENT_STATE_MACRO(46)
 /**
  * NOTE: do not go over 63 without updating EventStates::InternalType!
  */

layout/style/test/test_non_content_accessible_pseudos.html

@@ -18,6 +18,7 @@ const NON_CONTENT_ACCESIBLE_PSEUDOS = [
   ":-moz-use-shadow-tree-root",
   ":-moz-table-border-nonzero",
   ":-moz-browser-frame",
+  ":-moz-devtools-highlighted",
   ":-moz-styleeditor-transitioning",
   ":-moz-handler-clicktoplay",
   ":-moz-handler-vulnerable-updatable",

servo/components/style/element_state.rs

@@ -122,9 +122,11 @@ bitflags! {
         const IN_MOZINERT_STATE = 1 << 43;
         /// State for the topmost dialog element in top layer
         const IN_TOPMOST_MODAL_DIALOG_STATE = 1 << 44;
-        /// Used for the devtools style editor.
-        /// Probably should go away, see bug 1707611.
-        const IN_STYLEEDITOR_TRANSITIONING_STATE = 1 << 45;
+        /// Initially used for the devtools highlighter, but now somehow only
+        /// used for the devtools accessibility inspector.
+        const IN_DEVTOOLS_HIGHLIGHTED_STATE = 1 << 45;
+        /// Used for the devtools style editor. Probably should go away.
+        const IN_STYLEEDITOR_TRANSITIONING_STATE = 1 << 46;
     }
 }
 

servo/components/style/gecko/non_ts_pseudo_class_list.rs

@@ -50,6 +50,7 @@ macro_rules! apply_non_ts_list {
                 ("target", Target, IN_TARGET_STATE, _),
                 ("indeterminate", Indeterminate, IN_INDETERMINATE_STATE, _),
                 ("-moz-inert", MozInert, IN_MOZINERT_STATE, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
+                ("-moz-devtools-highlighted", MozDevtoolsHighlighted, IN_DEVTOOLS_HIGHLIGHTED_STATE, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                 ("-moz-styleeditor-transitioning", MozStyleeditorTransitioning, IN_STYLEEDITOR_TRANSITIONING_STATE, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                 ("fullscreen", Fullscreen, IN_FULLSCREEN_STATE, _),
                 ("-moz-modal-dialog", MozModalDialog, IN_MODAL_DIALOG_STATE, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),

servo/components/style/gecko/wrapper.rs

@@ -2074,6 +2074,7 @@ impl<'le> ::selectors::Element for GeckoElement<'le> {
             NonTSPseudoClass::FocusWithin |
             NonTSPseudoClass::FocusVisible |
             NonTSPseudoClass::MozDragOver |
+            NonTSPseudoClass::MozDevtoolsHighlighted |
             NonTSPseudoClass::MozStyleeditorTransitioning |
             NonTSPseudoClass::MozMathIncrementScriptLevel |
             NonTSPseudoClass::InRange |