Bug 1485243 - Add highlights to the source link, selector and computed properties when filtering styles. r=bgrins
authorGabriel Luong <gabriel.luong@gmail.com>
Sat, 25 Aug 2018 21:25:02 -0400
changeset 491160 88cfe9dfcb973c643cb2a2ce3a15262d3454c57c
parent 491159 4ac24eebd69c1cfb79e889bdac3785870bbceeab
child 491161 ec811f425e83e884a7aad60cf30b7e178518a88a
child 491166 19f413e960af58785a5213d2b46a02d1c4bca51f
child 491169 251cbf54ce917e617da41f22df75d2bf63d3fa24
push id1815
push userffxbld-merge
push dateMon, 15 Oct 2018 10:40:45 +0000
treeherdermozilla-release@18d4c09e9378 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1485243
milestone63.0a1
first release with
nightly linux32
88cfe9dfcb97 / 63.0a1 / 20180826100553 / files
nightly linux64
88cfe9dfcb97 / 63.0a1 / 20180826100553 / files
nightly mac
88cfe9dfcb97 / 63.0a1 / 20180826100553 / files
nightly win32
88cfe9dfcb97 / 63.0a1 / 20180826100553 / files
nightly win64
88cfe9dfcb97 / 63.0a1 / 20180826100553 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1485243 - Add highlights to the source link, selector and computed properties when filtering styles. r=bgrins
devtools/client/inspector/rules/views/text-property-editor.js
devtools/client/themes/rules.css
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -701,41 +701,48 @@ TextPropertyEditor.prototype = {
     const li = createChild(parentEl, "li", {
       class: className
     });
 
     if (computed.overridden) {
       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(
       computed.name, computed.value, {
         colorSwatchClass: "ruleview-swatch ruleview-colorswatch",
         urlClass: "theme-link",
         baseURI: this.sheetHref,
         fontFamilyClass: "ruleview-font-family"
       }
     );
 
     // 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;
   },
 
   /**
    * Handles clicks on the disabled property.
    */
   _onEnableClicked: function(event) {
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -149,16 +149,20 @@
   display: block;
 }
 
 .ruleview-namecontainer {
   cursor: text;
   margin-left: -25px;
 }
 
+.ruleview-computed > .ruleview-namecontainer {
+  margin: 0;
+}
+
 .ruleview-propertyvaluecontainer {
   cursor: text;
   padding-right: 5px;
 }
 
 .ruleview-propertyvaluecontainer a {
   color: var(--theme-highlight-purple);
   cursor: pointer;
@@ -518,18 +522,21 @@
 .ruleview-propertycontainer  > * {
   vertical-align: middle;
 }
 
 .ruleview-property[dirty] {
   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);
 }
 
 .ruleview-namecontainer > .ruleview-propertyname,
 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
   border-bottom: 1px dashed transparent;
 }