--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -299,16 +299,17 @@ CssComputedView.prototype = {
   },
 
   /**
    * Get the type of a given node in the computed-view
    *
    * @param {DOMNode} node
    *        The node which we want information about
    * @return {Object} The type information object contains the following props:
+   * - view {String} Always "computed" to indicate the computed view.
    * - type {String} One of the VIEW_NODE_XXX_TYPE const in
    *   client/inspector/shared/node-types
    * - value {Object} Depends on the type of the node
    * returns null if the node isn't anything we care about
    */
   getNodeInfo: function (node) {
     if (!node) {
       return null;
@@ -382,17 +383,21 @@ CssComputedView.prototype = {
       type = VIEW_NODE_VALUE_TYPE;
     } else if (isHref) {
       type = VIEW_NODE_IMAGE_URL_TYPE;
       value.url = node.href;
     } else {
       return null;
     }
 
-    return {type, value};
+    return {
+      view: "computed",
+      type,
+      value,
+    };
   },
 
   _createPropertyViews: function () {
     if (this._createViewsPromise) {
       return this._createViewsPromise;
     }
 
     this.refreshSourceFilter();

--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -285,16 +285,17 @@ CssRuleView.prototype = {
   }),
 
   /**
    * Get the type of a given node in the rule-view
    *
    * @param {DOMNode} node
    *        The node which we want information about
    * @return {Object} The type information object contains the following props:
+   * - view {String} Always "rule" to indicate the rule view.
    * - type {String} One of the VIEW_NODE_XXX_TYPE const in
    *   client/inspector/shared/node-types
    * - value {Object} Depends on the type of the node
    * returns null of the node isn't anything we care about
    */
   getNodeInfo: function (node) {
     if (!node) {
       return null;
@@ -378,17 +379,21 @@ CssRuleView.prototype = {
                classes.contains("ruleview-rule-source-label")) {
       type = VIEW_NODE_LOCATION_TYPE;
       let rule = this._getRuleEditorForNode(node).rule;
       value = (rule.sheet && rule.sheet.href) ? rule.sheet.href : rule.title;
     } else {
       return null;
     }
 
-    return {type, value};
+    return {
+      view: "rule",
+      type,
+      value,
+    };
   },
 
   /**
    * Retrieve the RuleEditor instance that should be stored on
    * the offset parent of the node
    */
   _getRuleEditorForNode: function (node) {
     if (!node.offsetParent) {

--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -67,18 +67,24 @@ class HighlightersOverlay {
 
     // Add inspector events, not specific to a given view.
     this.inspector.on("markupmutation", this.onMarkupMutation);
     this.inspector.target.on("will-navigate", this.onWillNavigate);
 
     EventEmitter.decorate(this);
   }
 
-  get isRuleView() {
-    return this.inspector.sidebar.getCurrentTabID() == "ruleview";
+  /**
+   * Returns whether `node` is somewhere inside the DOM of the rule view.
+   *
+   * @param {DOMNode} node
+   * @return {Boolean}
+   */
+  isRuleView(node) {
+    return !!node.closest("#ruleview-panel");
   }
 
   /**
    * Add the highlighters overlay to the view. This will start tracking mouse events
    * and display highlighters when needed.
    *
    * @param  {CssRuleView|CssComputedView|LayoutView} view
    *         Either the rule-view or computed-view panel to add the highlighters overlay.
@@ -675,83 +681,91 @@ class HighlightersOverlay {
   /**
    * Is the current hovered node a css transform property value in the
    * computed-view.
    *
    * @param  {Object} nodeInfo
    * @return {Boolean}
    */
   _isComputedViewTransform(nodeInfo) {
-    let isTransform = nodeInfo.type === VIEW_NODE_VALUE_TYPE &&
-                      nodeInfo.value.property === "transform";
-    return !this.isRuleView && isTransform;
+    if (nodeInfo.view != "computed") {
+      return false;
+    }
+    return nodeInfo.type === VIEW_NODE_VALUE_TYPE &&
+           nodeInfo.value.property === "transform";
   }
 
   /**
    * Is the current clicked node a flex display property value in the
    * rule-view.
    *
    * @param  {DOMNode} node
    * @return {Boolean}
    */
   _isRuleViewDisplayFlex(node) {
-    return this.isRuleView && node.classList.contains("ruleview-flex");
+    return this.isRuleView(node) && node.classList.contains("ruleview-flex");
   }
 
   /**
    * Is the current clicked node a grid display property value in the
    * rule-view.
    *
    * @param  {DOMNode} node
    * @return {Boolean}
    */
   _isRuleViewDisplayGrid(node) {
-    return this.isRuleView && node.classList.contains("ruleview-grid");
+    return this.isRuleView(node) && node.classList.contains("ruleview-grid");
   }
 
   /**
    * Does the current clicked node have the shapes highlighter toggle in the
    * rule-view.
    *
    * @param  {DOMNode} node
    * @return {Boolean}
    */
   _isRuleViewShape(node) {
-    return this.isRuleView && node.classList.contains("ruleview-shape");
+    return this.isRuleView(node) && node.classList.contains("ruleview-shape");
   }
 
   /**
    * Is the current hovered node a css transform property value in the rule-view.
    *
    * @param  {Object} nodeInfo
    * @return {Boolean}
    */
   _isRuleViewTransform(nodeInfo) {
+    if (nodeInfo.view != "rule") {
+      return false;
+    }
     let isTransform = nodeInfo.type === VIEW_NODE_VALUE_TYPE &&
                       nodeInfo.value.property === "transform";
     let isEnabled = nodeInfo.value.enabled &&
                     !nodeInfo.value.overridden &&
                     !nodeInfo.value.pseudoElement;
-    return this.isRuleView && isTransform && isEnabled;
+    return isTransform && isEnabled;
   }
 
   /**
    * Is the current hovered node a highlightable shape point in the rule-view.
    *
    * @param  {Object} nodeInfo
    * @return {Boolean}
    */
   isRuleViewShapePoint(nodeInfo) {
+    if (nodeInfo.view != "rule") {
+      return false;
+    }
     let isShape = nodeInfo.type === VIEW_NODE_SHAPE_POINT_TYPE &&
                   (nodeInfo.value.property === "clip-path" ||
                   nodeInfo.value.property === "shape-outside");
     let isEnabled = nodeInfo.value.enabled &&
                     !nodeInfo.value.overridden &&
                     !nodeInfo.value.pseudoElement;
-    return this.isRuleView && isShape && isEnabled && nodeInfo.value.toggleActive &&
+    return isShape && isEnabled && nodeInfo.value.toggleActive &&
            !this.state.shapes.options.transformMode;
   }
 
   onClick(event) {
     if (this._isRuleViewDisplayGrid(event.target)) {
       event.stopPropagation();
 
       let { store } = this.inspector;
@@ -783,17 +797,17 @@ class HighlightersOverlay {
       return;
     }
 
     // Only one highlighter can be displayed at a time, hide the currently shown.
     this._hideHoveredHighlighter();
 
     this._lastHovered = event.target;
 
-    let view = this.isRuleView ?
+    let view = this.isRuleView(this._lastHovered) ?
       this.inspector.getPanel("ruleview").view :
       this.inspector.getPanel("computedview").computedView;
     let nodeInfo = view.getNodeInfo(event.target);
     if (!nodeInfo) {
       return;
     }
 
     if (this.isRuleViewShapePoint(nodeInfo)) {
@@ -826,17 +840,17 @@ class HighlightersOverlay {
   onMouseOut(event) {
     // Only hide the highlighter if the mouse leaves the currently hovered node.
     if (!this._lastHovered ||
         (event && this._lastHovered.contains(event.relatedTarget))) {
       return;
     }
 
     // Otherwise, hide the highlighter.
-    let view = this.isRuleView ?
+    let view = this.isRuleView(this._lastHovered) ?
       this.inspector.getPanel("ruleview").view :
       this.inspector.getPanel("computedview").computedView;
     let nodeInfo = view.getNodeInfo(this._lastHovered);
     if (nodeInfo && this.isRuleViewShapePoint(nodeInfo)) {
       this.hoverPointShapesHighlighter(this.inspector.selection.nodeFront, null);
       this.emit("hover-shape-point", null);
     }
     this._lastHovered = null;