# HG changeset patch
# User Gabriel Luong <gabriel.luong@gmail.com>
# Date 1517411215 18000
# Node ID a7139f85d42e7b751fd5231d5d0052be9d13c506
# Parent  1562c525ec7d7e5be0c84da1d420dcc4a322dae1
Bug 1434514 - Move the rule property expander next to the property value. r=pbro

diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
--- a/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
@@ -27,19 +27,19 @@ function* testExpandersShown(inspector, 
   let rule = getRuleViewRuleEditor(view, 1).rule;
 
   info("Check that the correct rules are visible");
   is(rule.selectorText, "#testid", "Second rule is #testid.");
   is(rule.textProps[0].name, "margin", "First property is margin.");
   is(rule.textProps[1].name, "top", "Second property is top.");
 
   info("Check that the expanders are shown correctly");
-  is(rule.textProps[0].editor.expander.style.visibility, "visible",
-      "margin expander is visible.");
-  is(rule.textProps[1].editor.expander.style.visibility, "hidden",
+  is(rule.textProps[0].editor.expander.style.display, "inline-block",
+      "margin expander is displayed.");
+  is(rule.textProps[1].editor.expander.style.display, "none",
       "top expander is hidden.");
   ok(!rule.textProps[0].editor.expander.hasAttribute("open"),
       "margin computed list is closed.");
   ok(!rule.textProps[1].editor.expander.hasAttribute("open"),
       "top computed list is closed.");
   ok(!rule.textProps[0].editor.computed.hasChildNodes(),
       "margin computed list is empty before opening.");
   ok(!rule.textProps[1].editor.computed.hasChildNodes(),
diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -130,35 +130,35 @@ TextPropertyEditor.prototype = {
     });
 
     // The enable checkbox will disable or enable the rule.
     this.enable = createChild(this.container, "div", {
       class: "ruleview-enableproperty theme-checkbox",
       tabindex: "-1"
     });
 
-    // Click to expand the computed properties of the text property.
-    this.expander = createChild(this.container, "span", {
-      class: "ruleview-expander theme-twisty"
-    });
-    this.expander.addEventListener("click", this._onExpandClicked, true);
-
     this.nameContainer = createChild(this.container, "span", {
       class: "ruleview-namecontainer"
     });
 
     // Property name, editable when focused.  Property name
     // is committed when the editor is unfocused.
     this.nameSpan = createChild(this.nameContainer, "span", {
       class: "ruleview-propertyname theme-fg-color5",
       tabindex: this.ruleEditor.isEditable ? "0" : "-1",
     });
 
     appendText(this.nameContainer, ": ");
 
+    // Click to expand the computed properties of the text property.
+    this.expander = createChild(this.container, "span", {
+      class: "ruleview-expander theme-twisty"
+    });
+    this.expander.addEventListener("click", this._onExpandClicked, true);
+
     // Create a span that will hold the property and semicolon.
     // Use this span to create a slightly larger click target
     // for the value.
     this.valueContainer = createChild(this.container, "span", {
       class: "ruleview-propertyvaluecontainer"
     });
 
     // Property value, editable when focused.  Changes to the
@@ -549,16 +549,17 @@ TextPropertyEditor.prototype = {
     // Update the rule property highlight.
     this.ruleView._updatePropertyHighlight(this);
   },
 
   _onStartEditing: function () {
     this.element.classList.remove("ruleview-overridden");
     this.filterProperty.hidden = true;
     this.enable.style.visibility = "hidden";
+    this.expander.style.display = "none";
   },
 
   /**
    * Update the visibility of the enable checkbox, the warning indicator and
    * the filter property, as well as the overridden state of the property.
    */
   updatePropertyState: function () {
     if (this.prop.enabled) {
@@ -570,16 +571,19 @@ TextPropertyEditor.prototype = {
     }
 
     this.warning.hidden = this.editing || this.isValid();
     this.filterProperty.hidden = this.editing ||
                                  !this.isValid() ||
                                  !this.prop.overridden ||
                                  this.ruleEditor.rule.isUnmatched;
 
+    let showExpander = this.prop.computed.some(c => c.name !== this.prop.name);
+    this.expander.style.display = showExpander ? "inline-block" : "none";
+
     if (!this.editing &&
         (this.prop.overridden || !this.prop.enabled ||
          !this.prop.isKnownProperty())) {
       this.element.classList.add("ruleview-overridden");
     } else {
       this.element.classList.remove("ruleview-overridden");
     }
   },
@@ -587,17 +591,17 @@ TextPropertyEditor.prototype = {
   /**
    * Update the indicator for computed styles. The computed styles themselves
    * are populated on demand, when they become visible.
    */
   _updateComputed: function () {
     this.computed.innerHTML = "";
 
     let showExpander = this.prop.computed.some(c => c.name !== this.prop.name);
-    this.expander.style.visibility = showExpander ? "visible" : "hidden";
+    this.expander.style.display = !this.editing && showExpander ? "inline-block" : "none";
 
     this._populatedComputed = false;
     if (this.expander.hasAttribute("open")) {
       this._populateComputed();
     }
   },
 
   /**
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -154,16 +154,17 @@
 }
 
 .ruleview-expandable-container {
   display: block;
 }
 
 .ruleview-namecontainer {
   cursor: text;
+  padding-left: 3px;
 }
 
 .ruleview-propertyvaluecontainer {
   cursor: text;
   padding-right: 5px;
 }
 
 .ruleview-propertyvaluecontainer a {
@@ -384,17 +385,20 @@
 }
 
 .ruleview-rule:not(:hover) .ruleview-enableproperty {
   visibility: hidden;
 }
 
 .ruleview-expander {
   vertical-align: middle;
-  display: inline-block;
+}
+
+.ruleview-propertycontainer .ruleview-expander {
+  margin-left: -6px;
 }
 
 .ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
   /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
   transform: none;
 }
 
 .ruleview-newproperty {
@@ -410,21 +414,21 @@
 }
 
 .ruleview-computedlist {
   list-style: none;
   padding: 0;
 }
 
 .ruleview-computed {
-  margin-inline-start: 35px;
+  margin-inline-start: 26px;
 }
 
 .ruleview-overridden-items {
-  margin: 0px 0px 0px 5px;
+  margin: 0px 0px 0px 2px;
   list-style: none;
   line-height: 1.5em;
 }
 
 .ruleview-overridden-item {
   position: relative;
 }