Bug 1390758 - Add missing top border for "This Element" section header in the rules view. r=bgrins

devtools/client/inspector/inspector.xhtml

@@ -129,7 +129,7 @@
         <div id="computed-container">
           <div id="computed-container-focusable" tabindex="-1">
             <div id="boxmodel-wrapper"></div>
-            <div id="computed-property-container" class="theme-separator devtools-monospace" tabindex="0" dir="ltr"></div>
+            <div id="computed-property-container" class="devtools-monospace" tabindex="0" dir="ltr"></div>
             <div id="computed-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>
         </div>

devtools/client/inspector/rules/views/rule-editor.js

@@ -97,7 +97,7 @@ RuleEditor.prototype = {
 
   _create: function () {
     this.element = this.doc.createElement("div");
-    this.element.className = "ruleview-rule theme-separator devtools-monospace";
+    this.element.className = "ruleview-rule devtools-monospace";
     this.element.setAttribute("uneditable", !this.isEditable);
     this.element.setAttribute("unmatched", this.rule.isUnmatched);
     this.element._ruleEditor = this;

devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js

@@ -116,8 +116,7 @@ function* assertPseudoAddedToNode(inspector, testActor, ruleview, selector) {
   ok(hasLock, "pseudo-class lock has been applied");
 
   info("Check that the ruleview contains the pseudo-class rule");
-  let rules = ruleview.element.querySelectorAll(
-    ".ruleview-rule.theme-separator");
+  let rules = ruleview.element.querySelectorAll(".ruleview-rule");
   is(rules.length, 3,
      "rule view is showing 3 rules for pseudo-class locked div");
   is(rules[1]._ruleEditor.rule.selectorText, "div:hover",
@@ -147,8 +146,7 @@ function* assertPseudoRemovedFromNode(testActor, selector) {
 
 function* assertPseudoRemovedFromView(inspector, testActor, ruleview, selector) {
   info("Check that the ruleview no longer contains the pseudo-class rule");
-  let rules = ruleview.element.querySelectorAll(
-    ".ruleview-rule.theme-separator");
+  let rules = ruleview.element.querySelectorAll(".ruleview-rule");
   is(rules.length, 2, "rule view is showing 2 rules after removing lock");
 
   yield showPickerOn(selector, inspector);

devtools/client/themes/dark-theme.css

@@ -75,10 +75,6 @@ body {
   border-color: var(--theme-splitter-color);
 }
 
-.theme-separator {
-  border-color: var(--theme-splitter-color);
-}
-
 .theme-fg-color1,
 .cm-s-mozilla .cm-number,
 .variable-or-property .token-number,

devtools/client/themes/light-theme.css

@@ -73,10 +73,6 @@ body {
   border-color: var(--theme-splitter-color);
 }
 
-.theme-separator { /* grey */
-  border-color: #cddae5;
-}
-
 .cm-s-mozilla .cm-unused-line {
   text-decoration: line-through;
   text-decoration-color: var(--theme-highlight-bluegrey);

devtools/client/themes/rules.css

@@ -146,10 +146,6 @@
   pointer-events: none;
 }
 
-.ruleview-expandable-container[hidden] {
-  display: none;
-}
-
 .ruleview-expandable-container {
   display: block;
 }
@@ -168,6 +164,7 @@
 }
 
 .ruleview-computedlist,
+.ruleview-expandable-container[hidden],
 .ruleview-overridden-items[hidden],
 .ruleview-overridden-rule-filter[hidden],
 .ruleview-warning[hidden],
@@ -222,17 +219,13 @@
 }
 
 .ruleview-header {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-top-style: solid;
-  border-bottom-style: solid;
+  border-bottom: 1px solid var(--theme-splitter-color);
   padding: 1px 4px;
   -moz-user-select: none;
   word-wrap: break-word;
   vertical-align: middle;
   min-height: 1.5em;
   line-height: 1.5em;
-  margin-top: -1px;
 }
 
 .theme-firebug .theme-gutter.ruleview-header {
@@ -262,9 +255,14 @@
 }
 
 .ruleview-rule {
+  border-bottom: 1px solid var(--theme-splitter-color);
   padding: 2px 4px;
 }
 
+#ruleview-container-focusable > .ruleview-rule:last-child {
+  border-bottom: none;
+}
+
 /**
  * Display rules that don't match the current selected element and uneditable
  * user agent styles differently
@@ -327,13 +325,8 @@
   color: #CCCCCC;
 }
 
-.ruleview-rule + .ruleview-rule {
-  border-top-width: 1px;
-  border-top-style: dotted;
-}
-
 .theme-firebug .ruleview-rule + .ruleview-rule {
-  border-top: none;
+  border-bottom: none;
 }
 
 .ruleview-warning {