Backed out changeset a9fb635e2d2f (bug 1403334) for failing devtools' devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js. r=backout

devtools/client/inspector/rules/rules.js

@@ -1002,7 +1002,7 @@ CssRuleView.prototype = {
     header.textContent = label;
 
     let twisty = this.styleDocument.createElementNS(HTML_NS, "span");
-    twisty.className = "theme-twisty";
+    twisty.className = "ruleview-expander theme-twisty";
     twisty.setAttribute("open", "true");
 
     header.insertBefore(twisty, header.firstChild);

devtools/client/themes/rules.css

@@ -246,6 +246,11 @@
   min-height: 0;
 }
 
+:root[platform="win"] .ruleview-header,
+:root[platform="linux"] .ruleview-header {
+  margin-top: 4px;
+}
+
 .ruleview-expandable-header {
   cursor: pointer;
 }
@@ -254,6 +259,7 @@
   background-color: var(--theme-toolbar-background-hover);
 }
 
+
 .ruleview-rule-pseudo-element {
   padding-left:20px;
   border-left: solid 10px;
@@ -378,10 +384,8 @@
 }
 
 .ruleview-expander {
-  position: relative;
-  float: left;
-  left: -38px;
-  top: 1px;
+  vertical-align: middle;
+  display: inline-block;
 }
 
 .ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
@@ -390,18 +394,8 @@
 }
 
 .ruleview-newproperty {
-  margin-inline-start: -10px;
-}
-
-.ruleview-enableproperty {
-  position: relative;
-  float: left;
-  left: -38px;
-  top: 1px;
-}
-
-.ruleview-namecontainer {
-  margin-left: -38px;
+  /* (enable checkbox width: 12px) + (expander width: 15px) */
+  margin-inline-start: 27px;
 }
 
 .ruleview-namecontainer,
@@ -416,6 +410,10 @@
   padding: 0;
 }
 
+.ruleview-computed {
+  margin-inline-start: 35px;
+}
+
 .ruleview-overridden-items {
   margin: 0px 0px 0px 5px;
   list-style: none;
@@ -540,7 +538,6 @@
 }
 
 .ruleview-property {
-  padding-left: 38px;
   border-left: 3px solid transparent;
   clear: right;
 }