Bug 705276 - Split style inspector CSS between content & document CSS; r=prouget

browser/devtools/styleinspector/csshtmltree.xul

@@ -39,6 +39,7 @@
    - ***** END LICENSE BLOCK ***** -->
 
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/styleinspector.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/csshtmltree.css" type="text/css"?>
 
 <!DOCTYPE window [

browser/devtools/styleinspector/styleinspector.css

@@ -35,12 +35,39 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+#root {
+  display: -moz-box;
+}
+
+.helplink {
+  display: block;
+}
+
+.expander,
+.property-name,
+.ruleview-propertyname,
+.ruleview-warning,
+.ruleview-expander {
+  display: inline-block;
+}
+
+#propertyContainer {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+  overflow-y: auto;
+  -moz-user-select: text;
+}
+
 .ruleview {
   overflow: auto;
   -moz-user-select: text;
 }
 
-.ruleview-computedlist:not(.styleinspector-open) {
+.property-view-hidden,
+.property-content-hidden,
+.ruleview-computedlist:not(.styleinspector-open),
+.ruleview-warning[hidden] {
   display: none;
 }
 

browser/themes/gnomestripe/devtools/csshtmltree.css

@@ -45,11 +45,6 @@
   color: -moz-FieldText;
 }
 
-#root {
-  display: -moz-box;
-}
-
-
 .property-header {
   padding: 5px 0;
   white-space: nowrap;
@@ -73,7 +68,6 @@
 }
 
 .helplink {
-  display: block;
   height: 14px;
   width: 0;
   overflow: hidden;
@@ -97,7 +91,6 @@
   padding-top: 12px;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
-  display: inline-block;
   vertical-align: middle;
 }
 
@@ -117,7 +110,6 @@
 .property-name {
   font-size: 12px;
   color: -moz-FieldText;
-  display: inline-block;
 }
 .property-value {
   padding: 0;
@@ -127,11 +119,6 @@
   width: 100%;
 }
 
-.property-view-hidden,
-.property-content-hidden {
-  display: none;
-}
-
 .rule-link {
   text-align: end;
   -moz-padding-start: 10px;
@@ -157,12 +144,7 @@
 }
 
 #propertyContainer {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-flex: 1;
-  overflow-y: auto;
   border-collapse: collapse;
-  -moz-user-select: text;
 }
 
 .darkrow {
@@ -218,17 +200,12 @@
 
 .ruleview-warning {
   background: url("chrome://browser/skin/devtools/alerticon-warning.png");
-  display: inline-block;
   -moz-margin-start: 5px;
   vertical-align: middle;
   width: 13px;
   height: 12px;
 }
 
-.ruleview-warning[hidden] {
-  display: none;
-}
-
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
@@ -252,7 +229,6 @@
 }
 
 .ruleview-expander {
-  display: inline-block;
   width: 8px;
   height: 8px;
   background: url("chrome://browser/skin/devtools/arrows.png") 24px 0;
@@ -271,7 +247,6 @@
 }
 
 .ruleview-propertyname {
-  display: inline-block;
   padding: 1px 0;
   cursor: text;
   color: #0060C0;

browser/themes/pinstripe/devtools/csshtmltree.css

@@ -45,11 +45,6 @@
   color: -moz-FieldText;
 }
 
-#root {
-  display: -moz-box;
-}
-
-
 .property-header {
   padding: 5px 0;
   white-space: nowrap;
@@ -73,7 +68,6 @@
 }
 
 .helplink {
-  display: block;
   height: 14px;
   width: 0;
   overflow: hidden;
@@ -99,7 +93,6 @@
   padding-top: 12px;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
-  display: inline-block;
   vertical-align: middle;
 }
 
@@ -119,7 +112,6 @@
 .property-name {
   font-size: 12px;
   color: -moz-FieldText;
-  display: inline-block;
 }
 .property-value {
   padding: 0;
@@ -129,11 +121,6 @@
   width: 100%;
 }
 
-.property-view-hidden,
-.property-content-hidden {
-  display: none;
-}
-
 .rule-link {
   text-align: end;
   -moz-padding-start: 10px;
@@ -159,12 +146,7 @@
 }
 
 #propertyContainer {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-flex: 1;
-  overflow-y: auto;
   border-collapse: collapse;
-  -moz-user-select: text;
 }
 
 .darkrow {
@@ -220,17 +202,12 @@
 
 .ruleview-warning {
   background: url("chrome://browser/skin/devtools/alerticon-warning.png");
-  display: inline-block;
   -moz-margin-start: 5px;
   vertical-align: middle;
   width: 13px;
   height: 12px;
 }
 
-.ruleview-warning[hidden] {
-  display: none;
-}
-
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
@@ -254,7 +231,6 @@
 }
 
 .ruleview-expander {
-  display: inline-block;
   width: 8px;
   height: 8px;
   background: url("chrome://browser/skin/devtools/arrows.png") 24px 0;
@@ -273,7 +249,6 @@
 }
 
 .ruleview-propertyname {
-  display: inline-block;
   padding: 1px 0;
   cursor: text;
   color: #0060C0;

browser/themes/winstripe/devtools/csshtmltree.css

@@ -45,10 +45,6 @@
   color: -moz-FieldText;
 }
 
-#root {
-  display: -moz-box;
-}
-
 .property-header {
   padding: 5px 0;
   white-space: nowrap;
@@ -72,7 +68,6 @@
 }
 
 .helplink {
-  display: block;
   height: 14px;
   width: 0;
   overflow: hidden;
@@ -97,7 +92,6 @@
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
   background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
-  display: inline-block;
   vertical-align: middle;
 }
 
@@ -117,7 +111,6 @@
 .property-name {
   font-size: 12px;
   color: -moz-FieldText;
-  display: inline-block;
 }
 .property-value {
   padding: 0;
@@ -127,11 +120,6 @@
   width: 100%;
 }
 
-.property-view-hidden,
-.property-content-hidden {
-  display: none;
-}
-
 .rule-link {
   text-align: end;
   -moz-padding-start: 10px;
@@ -157,12 +145,7 @@
 }
 
 #propertyContainer {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-flex: 1;
-  overflow-y: auto;
   border-collapse: collapse;
-  -moz-user-select: text;
 }
 
 .darkrow {
@@ -218,17 +201,12 @@
 
 .ruleview-warning {
   background: url("chrome://browser/skin/devtools/alerticon-warning.png");
-  display: inline-block;
   -moz-margin-start: 5px;
   vertical-align: middle;
   width: 13px;
   height: 12px;
 }
 
-.ruleview-warning[hidden] {
-  display: none;
-}
-
 .ruleview-ruleopen {
   -moz-padding-end: 5px;
 }
@@ -252,7 +230,6 @@
 }
 
 .ruleview-expander {
-  display: inline-block;
   width: 8px;
   height: 8px;
   background: url("chrome://browser/skin/devtools/arrows.png") 24px 0;
@@ -271,7 +248,6 @@
 }
 
 .ruleview-propertyname {
-  display: inline-block;
   padding: 1px 0;
   cursor: text;
   color: #0060C0;