--- a/devtools/client/shared/test/test-actor.js
+++ b/devtools/client/shared/test/test-actor.js
@@ -9,17 +9,20 @@
 // A helper actor for inspector and markupview tests.
 
 const { Cc, Ci, Cu } = require("chrome");
 const {
   getRect, getElementFromPoint, getAdjustedQuads, getWindowDimensions
 } = 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);
 
 // Set up a dummy environment so that EventUtils works. We need to be careful to
 // pass a window object into each EventUtils method we call rather than having
 // it rely on the |window| global.
 let EventUtils = {};
@@ -772,17 +775,17 @@ var TestActor = exports.TestActor = prot
    * @param {String} selector The CSS selector to get the node (can be an array
    * of selectors to get elements in an iframe).
    * @return {Array} A list of stylesheet objects, each having the following properties:
    * - {String} href.
    * - {Boolean} isContentSheet.
    */
   getStyleSheetsInfoForNode: function (selector) {
     let node = this._querySelector(selector);
-    let domRules = DOMUtils.getCSSStyleRules(node);
+    let domRules = getCSSStyleRules(node);
 
     let sheets = [];
 
     for (let i = 0, n = domRules.Count(); i < n; i++) {
       let sheet = domRules.GetElementAt(i).parentStyleSheet;
       sheets.push({
         href: sheet.href,
         isContentSheet: isContentStylesheet(sheet)

--- a/devtools/server/actors/highlighters/geometry-editor.js
+++ b/devtools/server/actors/highlighters/geometry-editor.js
@@ -1,18 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "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;
 
 // List of all DOM Events subscribed directly to the document from the
 // Geometry Editor highlighter
 const DOM_EVENTS = ["mousemove", "mouseup", "pagehide"];
 
 const _dragging = Symbol("geometry/dragging");

--- a/devtools/server/actors/highlighters/shapes.js
+++ b/devtools/server/actors/highlighters/shapes.js
@@ -1,27 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { CanvasFrameAnonymousContentHelper, getCSSStyleRules,
+const { CanvasFrameAnonymousContentHelper,
         createSVGNode, createNode, getComputedStyle } = require("./utils/markup");
 const { setIgnoreLayoutChanges, getCurrentZoom,
         getAdjustedQuads } = require("devtools/shared/layout/utils");
 const { AutoRefreshHighlighter } = require("./auto-refresh");
 const {
   getDistance,
   clickedOnEllipseEdge,
   distanceToLine,
   projection,
   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
 const LINE_CLICK_WIDTH = 5;
 const DOM_EVENTS = ["mousedown", "mousemove", "mouseup", "dblclick"];
 const _dragging = Symbol("shapes/dragging");
 
 /**

--- a/devtools/server/actors/highlighters/utils/markup.js
+++ b/devtools/server/actors/highlighters/utils/markup.js
@@ -25,19 +25,16 @@ exports.hasPseudoClassLock = (...args) =
   lazyContainer.DOMUtils.hasPseudoClassLock(...args);
 
 exports.addPseudoClassLock = (...args) =>
   lazyContainer.DOMUtils.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";
 const STYLESHEET_URI = "resource://devtools/server/actors/" +
                        "highlighters.css";
 
 const _tokens = Symbol("classList/tokens");
 

--- a/devtools/server/css-logic.js
+++ b/devtools/server/css-logic.js
@@ -29,16 +29,17 @@
 
 "use strict";
 
 const { Cc, Ci, Cu } = require("chrome");
 const DevToolsUtils = require("devtools/shared/DevToolsUtils");
 const nodeConstants = require("devtools/shared/dom-node-constants");
 const {
   getBindingElementAndPseudo,
+  getCSSStyleRules,
   l10n,
   isContentStylesheet,
   shortSource,
   FILTER,
   STATUS
 } = require("devtools/shared/inspector/css-logic");
 
 /**
@@ -539,21 +540,17 @@ CssLogic.prototype = {
       return;
     }
 
     do {
       let status = this.viewedElement === element ?
                    STATUS.MATCHED : STATUS.PARENT_MATCH;
 
       try {
-        // Handle finding rules on pseudo by reading style rules
-        // on the parent node with proper pseudo arg to getCSSStyleRules.
-        let {bindingElement, pseudo} =
-            CssLogic.getBindingElementAndPseudo(element);
-        domRules = domUtils.getCSSStyleRules(bindingElement, pseudo);
+        domRules = getCSSStyleRules(element);
       } catch (ex) {
         console.log("CL__buildMatchedRules error: " + ex);
         continue;
       }
 
       // getCSSStyleRules can return null with a shadow DOM element.
       let numDomRules = domRules ? domRules.Count() : 0;
       for (let i = 0; i < numDomRules; i++) {

--- a/devtools/shared/inspector/css-logic.js
+++ b/devtools/shared/inspector/css-logic.js
@@ -3,16 +3,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { getRootBindingParent } = require("devtools/shared/layout/utils");
 const { getTabPrefs } = require("devtools/shared/indentation");
+const { Ci, Cc } = require("chrome");
 
 const MAX_DATA_URL_LENGTH = 40;
 
 /*
  * About the objects defined in this file:
  * - CssLogic contains style information about a view context. It provides
  *   access to 2 sets of objects: Css[Sheet|Rule|Selector] provide access to
  *   information that does not change when the selected element changes while
@@ -493,8 +494,21 @@ function getBindingElementAndPseudo(node
     pseudo = ":after";
   }
   return {
     bindingElement: bindingElement,
     pseudo: pseudo
   };
 }
 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;