Bug 1507941 - Style CodeMirror folding buttons with the theme-twisty arrow; r=pbro
authorFlorens Verschelde <florens@fvsch.com>
Mon, 19 Nov 2018 10:27:22 +0000
changeset 488774 2666875fcf32354c20da8e00fab923f301879a14
parent 488773 87de7318ad049959fe38070b3057bce3430dfa83
child 488775 3ebe77971c61f5d535272ebfde2616d8b01ac696
push id131
push usersfraser@mozilla.com
push dateTue, 20 Nov 2018 10:19:35 +0000
reviewerspbro
bugs1507941
milestone65.0a1
Bug 1507941 - Style CodeMirror folding buttons with the theme-twisty arrow; r=pbro Differential Revision: https://phabricator.services.mozilla.com/D12185
devtools/client/sourceeditor/codemirror/mozilla.css
--- a/devtools/client/sourceeditor/codemirror/mozilla.css
+++ b/devtools/client/sourceeditor/codemirror/mozilla.css
@@ -147,41 +147,47 @@
 .CodeMirror-dialog,
 .CodeMirror-dialog input {
   font: message-box;
 }
 
 /* Fold addon */
 
 .CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  display: inline-block;
   font-family: sans-serif;
-  line-height: .3;
+  line-height: 10px;
+  margin: 0 1px;
+  padding: 0 2px;
+  border-radius: 3px;
+  border: solid 1px var(--theme-splitter-color);
+  color: var(--theme-body-color);
+  background-color: var(--theme-sidebar-background);
   cursor: pointer;
 }
 
 .CodeMirror-foldgutter {
   width: 16px; /* Same as breakpoints gutter above */
 }
 
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
-  color: #555;
+  height: 14px;
+  background-image: url("chrome://devtools/skin/images/arrow.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--theme-content-color3);
+  /* make the icons smaller than regular twistys (10->8px) */
+  background-size: 8px;
   cursor: pointer;
 }
 
-.CodeMirror-foldgutter-open:after {
-  font-size: 120%;
-  content: "\25BE";
-}
-
-.CodeMirror-foldgutter-folded:after {
-  font-size: 120%;
-  content: "\25B8";
+.CodeMirror-foldgutter-folded {
+  transform: rotate(-90deg);
 }
 
 .CodeMirror-hints {
   position: absolute;
   z-index: 10;
   overflow: hidden;
   list-style: none;
   margin: 0;