Merge mozilla-central to autoland. a=merge CLOSED TREE
authorNarcis Beleuzu <nbeleuzu@mozilla.com>
Sun, 26 Aug 2018 12:36:16 +0300
changeset 481744 19f413e960af58785a5213d2b46a02d1c4bca51f
parent 481743 78ced2d7b8df4d9e014d9eb07019dd0ecccd409d (current diff)
parent 481727 88cfe9dfcb973c643cb2a2ce3a15262d3454c57c (diff)
child 481745 a8962140e7d1568e68b63c948736f51650f5d4d2
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersmerge
milestone63.0a1
Merge mozilla-central to autoland. a=merge CLOSED TREE
--- 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;
 }