Bug 975804 - DevTools themes - Use border-image instead of background-image for separators and borders on sidebar tabs. r=bgrins
authorAlbert Juhé Lluveras <aljullu@gmail.com>
Tue, 26 Aug 2014 13:31:00 -0400
changeset 201763 1a58ce6615fbef032c2802afa007c77291c3233b
parent 201762 d12b4ff6d1260d827f30c922e38d29109a17ae8e
child 201764 5e7b290f78832f899595cb0264bb0c98a35e5fd9
push id8389
push userryanvm@gmail.com
push dateWed, 27 Aug 2014 13:10:07 +0000
treeherderfx-team@f71f3d5f8345 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs975804
milestone34.0a1
Bug 975804 - DevTools themes - Use border-image instead of background-image for separators and borders on sidebar tabs. r=bgrins
browser/themes/shared/devtools/toolbars.inc.css
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@@ -375,97 +375,94 @@
   /* We want to match the height of a toolbar with a toolbarbutton
    * First, we need to replicated the padding of toolbar (4px),
    * then we need to take the border of the buttons into account (1px).
    */
   padding: 0 3px;
   margin: 0;
   min-width: 78px;
   text-align: center;
+  background-color: transparent;
   color: inherit;
   -moz-box-flex: 1;
   border-width: 0;
+  -moz-border-start-width: 1px;
+  border-style: solid;
   border-radius: 0;
   position: static;
-  -moz-margin-start: -1px;
   text-shadow: none;
 }
 
-.devtools-sidebar-tabs > tabs > tab {
-  background-size: calc(100% - 1px) 100%, 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 1px, 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
-  background-size: calc(100% - 2px) 100%, 1px 100%;
-}
-
-.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
-  background-position: calc(100% - 1px), 100%;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-color: transparent;
+.devtools-sidebar-tabs > tabs > tab:first-child {
+  -moz-border-start-width: 0;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparatorDark@;
+  border-image: @smallSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparatorDark@;
+  background: hsla(206,37%,4%,.2);
+  border-image: @smallSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparatorDark@;
+  background: hsla(206,37%,4%,.4);
+  border-image: @smallSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparatorDark@;
+  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparatorDark@;
+  background: hsla(206,37%,4%,.2);
+  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparatorDark@;
+  background: hsla(206,37%,4%,.4);
+  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected],
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
   color: #f5f7fa;
-  background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparatorDark@;
+  background: #1d4f73;
+  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparatorLight@;
+  border-image: @smallSeparatorLight@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(#ddd, #ddd), @smallSeparatorLight@;
+  background: #ddd;
+  border-image: @smallSeparatorLight@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(#ddd, #ddd), @smallSeparatorLight@;
+  background: #ddd;
+  border-image: @smallSeparatorLight@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparatorLight@;
+  border-image: @solidSeparatorLight@;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
-  background-image: linear-gradient(#ddd, #ddd), @solidSeparatorLight@;
+  background: #ddd;
+  border-image: @solidSeparatorLight@;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected],
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
   color: #f5f7fa;
-  background-image: linear-gradient(#4c9ed9, #4c9ed9), @solidSeparatorLight@;
+  background: #4c9ed9;
+  border-image: @solidSeparatorLight@;
 }
 
 /* Toolbox - moved from toolbox.css.
  * Rules that apply to the global toolbox like command buttons,
  * devtools tabs, docking buttons, etc. */
 
 #toolbox-controls > toolbarbutton,
 #toolbox-dock-buttons > toolbarbutton {