Bug 1399314 - Introdue CssLogic.getCSSStyleRules to get style rules for ::before and ::after pseudo elements handy. r=bgrins

For pseudo elements, inIDOMUtils.getCSSStyleRules needs to take the parent
element of the pseudo element and pseudo name. This new function wraps
inIDOMUtils.getCSSStyleRules so that we can get style rules for pseudo elements
handy.

MozReview-Commit-ID: LRQBdiizoL7

devtools/client/shared/test/test-actor.js

@@ -14,7 +14,10 @@ const {
 } = require("devtools/shared/layout/utils");
 const defer = require("devtools/shared/defer");
 const {Task} = require("devtools/shared/task");
-const {isContentStylesheet} = require("devtools/shared/inspector/css-logic");
+const {
+  isContentStylesheet,
+  getCSSStyleRules
+} = require("devtools/shared/inspector/css-logic");
 const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 const loader = Cc["@mozilla.org/moz/jssubscript-loader;1"]
                  .getService(Ci.mozIJSSubScriptLoader);
@@ -777,7 +780,7 @@ var TestActor = exports.TestActor = protocol.ActorClassWithSpec(testSpec, {
    */
   getStyleSheetsInfoForNode: function (selector) {
     let node = this._querySelector(selector);
-    let domRules = DOMUtils.getCSSStyleRules(node);
+    let domRules = getCSSStyleRules(node);
 
     let sheets = [];
 

devtools/server/actors/highlighters/geometry-editor.js

@@ -5,9 +5,10 @@
 "use strict";
 
 const { AutoRefreshHighlighter } = require("./auto-refresh");
-const { CanvasFrameAnonymousContentHelper, getCSSStyleRules, getComputedStyle,
+const { CanvasFrameAnonymousContentHelper, getComputedStyle,
         createSVGNode, createNode } = require("./utils/markup");
 const { setIgnoreLayoutChanges, getAdjustedQuads } = require("devtools/shared/layout/utils");
+const { getCSSStyleRules } = require("devtools/shared/inspector/css-logic");
 
 const GEOMETRY_LABEL_SIZE = 6;
 

devtools/server/actors/highlighters/shapes.js

@@ -4,7 +4,7 @@
 
 "use strict";
 
-const { CanvasFrameAnonymousContentHelper, getCSSStyleRules,
+const { CanvasFrameAnonymousContentHelper,
         createSVGNode, createNode, getComputedStyle } = require("./utils/markup");
 const { setIgnoreLayoutChanges, getCurrentZoom,
         getAdjustedQuads } = require("devtools/shared/layout/utils");
@@ -17,6 +17,7 @@ const {
   clickedOnPoint
 } = require("devtools/server/actors/utils/shapes-geometry-utils");
 const EventEmitter = require("devtools/shared/old-event-emitter");
+const { getCSSStyleRules } = require("devtools/shared/inspector/css-logic");
 
 const BASE_MARKER_SIZE = 5;
 // the width of the area around highlighter lines that can be clicked, in px

devtools/server/actors/highlighters/utils/markup.js

@@ -30,9 +30,6 @@ exports.addPseudoClassLock = (...args) =>
 exports.removePseudoClassLock = (...args) =>
   lazyContainer.DOMUtils.removePseudoClassLock(...args);
 
-exports.getCSSStyleRules = (...args) =>
-  lazyContainer.DOMUtils.getCSSStyleRules(...args);
-
 const SVG_NS = "http://www.w3.org/2000/svg";
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

devtools/server/css-logic.js

@@ -34,6 +34,7 @@ const DevToolsUtils = require("devtools/shared/DevToolsUtils");
 const nodeConstants = require("devtools/shared/dom-node-constants");
 const {
   getBindingElementAndPseudo,
+  getCSSStyleRules,
   l10n,
   isContentStylesheet,
   shortSource,
@@ -544,11 +545,7 @@ CssLogic.prototype = {
                    STATUS.MATCHED : STATUS.PARENT_MATCH;
 
       try {
-        // Handle finding rules on pseudo by reading style rules
+        domRules = getCSSStyleRules(element);
-        // on the parent node with proper pseudo arg to getCSSStyleRules.
-        let {bindingElement, pseudo} =
-            CssLogic.getBindingElementAndPseudo(element);
-        domRules = domUtils.getCSSStyleRules(bindingElement, pseudo);
       } catch (ex) {
         console.log("CL__buildMatchedRules error: " + ex);
         continue;

devtools/shared/inspector/css-logic.js

@@ -8,6 +8,7 @@
 
 const { getRootBindingParent } = require("devtools/shared/layout/utils");
 const { getTabPrefs } = require("devtools/shared/indentation");
+const { Ci, Cc } = require("chrome");
 
 const MAX_DATA_URL_LENGTH = 40;
 
@@ -498,3 +499,16 @@ function getBindingElementAndPseudo(node) {
   };
 }
 exports.getBindingElementAndPseudo = getBindingElementAndPseudo;
+
+/**
+ * Returns css style rules for a given a node.
+ * This function can handle ::before or ::after pseudo element as well as
+ * normal element.
+ */
+function getCSSStyleRules(node) {
+  const DOMUtils =
+    Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+  let { bindingElement, pseudo } = getBindingElementAndPseudo(node);
+  return DOMUtils.getCSSStyleRules(bindingElement, pseudo);
+}
+exports.getCSSStyleRules = getCSSStyleRules;