Bug 949462 - Use the theme-twisty class for devtools variables view twisties. r=bgrins

browser/devtools/shared/widgets/VariablesView.jsm

@@ -1797,7 +1797,7 @@ Scope.prototype = {
     element.className = aTargetClassName;
 
     let arrow = this._arrow = document.createElement("hbox");
-    arrow.className = "arrow";
+    arrow.className = "arrow theme-twisty";
 
     let name = this._name = document.createElement("label");
     name.className = "plain name";

browser/themes/shared/devtools/dark-theme.css

@@ -282,6 +282,10 @@ div.CodeMirror span.eval-text {
   background-position: -42px -14px;
 }
 
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
 .theme-checkbox {
   display: inline-block;
   border: 0;

browser/themes/shared/devtools/light-theme.css

@@ -282,6 +282,10 @@ div.CodeMirror span.eval-text {
   background-position: -14px -14px;
 }
 
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
 /* Use white twisty when next to a selected item in markup view */
 .theme-selected ~ .theme-twisty {
   background-position: -28px -14px;

browser/themes/shared/devtools/widgets.inc.css

@@ -630,8 +630,12 @@
   color: inherit !important;
 }
 
-.variable-or-property > .title > .arrow {
-  -moz-margin-start: 3px;
+.variables-view-container .theme-twisty {
+  margin: 2px;
+}
+
+.variable-or-property > .title > .theme-twisty {
+  -moz-margin-start: 5px;
 }
 
 .variable-or-property:not([untitled]) > .variables-view-element-details {
@@ -892,22 +896,6 @@
   margin: 0;
 }
 
-/* Expand/collapse arrow */
-
-.arrow {
-  -moz-appearance: treetwisty;
-  width: 20px;
-  height: 20px;
-}
-
-.arrow[open] {
-  -moz-appearance: treetwistyopen;
-}
-
-.arrow[invisible] {
-  visibility: hidden;
-}
-
 /* Canvas graphs */
 
 .graph-widget-canvas {

browser/themes/windows/devtools/widgets.css

@@ -6,14 +6,4 @@
 
 .breadcrumbs-widget-item:-moz-focusring > .button-box {
   border-width: 0;
-}
-
-.arrow {
-  -moz-appearance: none;
-  background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
-}
-
-.arrow[open] {
-  -moz-appearance: none;
-  background-image: url("chrome://global/skin/tree/twisty-open.png");
-}
+}