From e126996d9b0a3d7653de205898517f4f5b632e7f Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Sat, 25 Aug 2018 21:25:02 -0400
Subject: [PATCH] Bug 1485243 - Add highlights to the source link, selector and
 computed properties when filtering styles. r=bgrins

---
 .../rules/views/text-property-editor.js         | 17 ++++++++++++-----
 devtools/client/themes/rules.css                |  9 ++++++++-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js
index 5bdff74c053b..761b6805cb3b 100644
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -706,11 +706,15 @@ TextPropertyEditor.prototype = {
       li.classList.add("ruleview-overridden");
     }
 
-    createChild(li, "span", {
+    const nameContainer = createChild(li, "span", {
+      class: "ruleview-namecontainer"
+    });
+
+    createChild(nameContainer, "span", {
       class: "ruleview-propertyname theme-fg-color5",
       textContent: computed.name
     });
-    appendText(li, ": ");
+    appendText(nameContainer, ": ");
 
     const outputParser = this.ruleView._outputParser;
     const frag = outputParser.parseCssProperty(
@@ -725,12 +729,15 @@ TextPropertyEditor.prototype = {
     // Store the computed property value that was parsed for output
     computed.parsedValue = frag.textContent;
 
-    createChild(li, "span", {
+    const propertyContainer = createChild(li, "span", {
+      class: "ruleview-propertyvaluecontainer"
+    });
+
+    createChild(propertyContainer, "span", {
       class: "ruleview-propertyvalue theme-fg-color1",
       child: frag
     });
-
-    appendText(li, ";");
+    appendText(propertyContainer, ";");
 
     return li;
   },
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
index 0958bd895a88..8ae4e4cf7f03 100644
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -154,6 +154,10 @@
   margin-left: -25px;
 }
 
+.ruleview-computed > .ruleview-namecontainer {
+  margin: 0;
+}
+
 .ruleview-propertyvaluecontainer {
   cursor: text;
   padding-right: 5px;
@@ -523,8 +527,11 @@
   border-left-color: var(--theme-highlight-green);
 }
 
+.ruleview-highlight > .ruleview-expander,
 .ruleview-highlight > .ruleview-namecontainer,
-.ruleview-highlight > .ruleview-propertyvaluecontainer {
+.ruleview-highlight > .ruleview-propertyvaluecontainer,
+.ruleview-highlight > .ruleview-rule-source-label,
+.ruleview-highlight > .ruleview-selector {
   background-color: var(--rule-highlight-background-color);
 }