Bug 741576 - Style tweaks for Computed view. r=paul

browser/devtools/styleinspector/CssHtmlTree.jsm

@@ -562,7 +562,7 @@ CssHtmlTree.prototype = {
 
     // Tidy up block headings by moving CSS property names and their values onto
     // the same line and inserting a colon between them.
-    text = text.replace(/(.+)\r?\n\s+/g, "$1: ");
+    text = text.replace(/\t(.+)\t\t(.+)/g, "$1: $2");
 
     // Remove any MDN link titles
     text = text.replace(CssHtmlTree.HELP_LINK_TITLE, "");
@@ -866,9 +866,9 @@ PropertyView.prototype = {
     this.element = doc.createElementNS(HTML_NS, "tr");
     this.element.setAttribute("class", this.propertyHeaderClassName);
 
-    this.propertyHeader = doc.createElementNS(HTML_NS, "td");
+    this.expanderContainer = doc.createElementNS(HTML_NS, "td");
-    this.element.appendChild(this.propertyHeader);
+    this.element.appendChild(this.expanderContainer);
-    this.propertyHeader.setAttribute("class", "property-header");
+    this.expanderContainer.setAttribute("class", "expander-container");
 
     this.matchedExpander = doc.createElementNS(HTML_NS, "div");
     this.matchedExpander.setAttribute("class", "match expander");
@@ -885,10 +885,10 @@ PropertyView.prototype = {
         this.matchedExpanderClick(aEvent);
       }
     }.bind(this), false);
-    this.propertyHeader.appendChild(this.matchedExpander);
+    this.expanderContainer.appendChild(this.matchedExpander);
 
-    this.nameNode = doc.createElementNS(HTML_NS, "div");
+    this.nameNode = doc.createElementNS(HTML_NS, "td");
-    this.propertyHeader.appendChild(this.nameNode);
+    this.element.appendChild(this.nameNode);
     this.nameNode.setAttribute("class", "property-name");
     this.nameNode.textContent = this.name;
     this.nameNode.addEventListener("click", function(aEvent) {

browser/devtools/styleinspector/test/browser_computedview_bug_703643_context_menu_copy.js

@@ -112,10 +112,10 @@ function checkCopySelection()
 
   let range = document.createRange();
   range.setStart(props[0], 0);
-  range.setEnd(props[3], 3);
+  range.setEnd(props[3], 4);
   contentWindow.getSelection().addRange(range);
 
-  info("Checking that cssHtmlTree.siBoundCopyPropertyValue() " +
+  info("Checking that cssHtmlTree.siBoundCopy() " +
        " returns the correct clipboard value");
 
   let expectedPattern = "color: rgb\\(255, 255, 0\\)[\\r\\n]+" +

browser/themes/gnomestripe/devtools/csshtmltree.css

@@ -8,12 +8,6 @@
   color: -moz-FieldText;
 }
 
-.property-header {
-  padding: 5px 0;
-  white-space: nowrap;
-  vertical-align: text-top;
-}
-
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 .link,
@@ -53,7 +47,6 @@
   -moz-appearance: treetwisty;
   padding-top: 12px;
   -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
   vertical-align: middle;
 }
 
@@ -70,15 +63,19 @@
   visibility: visible;
 }
 
+.expander-container {
+  vertical-align: text-top;
+}
+
 .property-name {
-  font-size: 12px;
+  padding: 2px 0;
   color: -moz-FieldText;
 }
+
 .property-value {
   padding: 0;
-  font-size: 10px;
+  -moz-padding-end: 6px;
   color: grey;
-  vertical-align: text-top;
   width: 100%;
 }
 

browser/themes/pinstripe/devtools/csshtmltree.css

@@ -8,12 +8,6 @@
   color: -moz-FieldText;
 }
 
-.property-header {
-  padding: 5px 0;
-  white-space: nowrap;
-  vertical-align: text-top;
-}
-
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 .link,
@@ -55,7 +49,6 @@
   height: 12px;
   padding-top: 12px;
   -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
   vertical-align: middle;
 }
 
@@ -72,15 +65,19 @@
   visibility: visible;
 }
 
+.expander-container {
+  vertical-align: text-top;
+}
+
 .property-name {
-  font-size: 12px;
+  padding: 2px 0;
   color: -moz-FieldText;
 }
+
 .property-value {
   padding: 0;
-  font-size: 10px;
+  -moz-padding-end: 6px;
   color: grey;
-  vertical-align: text-top;
   width: 100%;
 }
 

browser/themes/winstripe/devtools/csshtmltree.css

@@ -8,12 +8,6 @@
   color: -moz-FieldText;
 }
 
-.property-header {
-  padding: 5px 0;
-  white-space: nowrap;
-  vertical-align: text-top;
-}
-
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 .link,
@@ -71,15 +65,19 @@
   visibility: visible;
 }
 
+.expander-container {
+  vertical-align: text-top;
+}
+
 .property-name {
-  font-size: 12px;
+  padding: 2px 0;
   color: -moz-FieldText;
 }
+
 .property-value {
   padding: 0;
-  font-size: 10px;
+  -moz-padding-end: 6px;
   color: grey;
-  vertical-align: text-top;
   width: 100%;
 }