Bug 587248 - Part 3: Add RTL support to theme CSS for TabView on Mac; r=dao a=blocking-betaN+
authorEhsan Akhgari <ehsan@mozilla.com>
Mon, 08 Nov 2010 01:38:24 -0500
changeset 57452 52a7905f4cc48c3b6a70319368fb749688101bc4
parent 57451 dbb425ab070e7ea6c4f543f4617338e2a6c860ed
child 57453 a1803da455615c0c730ab0e1c6b8cabbeca3ff9b
push id16934
push usereakhgari@mozilla.com
push dateSat, 13 Nov 2010 22:50:22 +0000
treeherdermozilla-central@674f2ed15cea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, blocking-betaN
bugs587248
milestone2.0b8pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 587248 - Part 3: Add RTL support to theme CSS for TabView on Mac; r=dao a=blocking-betaN+
browser/themes/pinstripe/browser/tabview/tabview.css
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -9,17 +9,20 @@ body {
 #bg {
   background: -moz-linear-gradient(top,#C4C4C4,#9E9E9E);
 }
 
 /* Tabs
 ----------------------------------*/
 
 .tab {
-  padding: 4px 6px 6px 4px;
+  padding-top: 4px;
+  -moz-padding-end: 6px;
+  padding-bottom: 6px;
+  -moz-padding-start: 4px;
   background-color: #D7D7D7;
   border-radius: 0.4em;
   box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.5);
   cursor: pointer;
   margin: 8px;
 }
 
@@ -28,31 +31,50 @@ body {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
 .thumb {
   box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
   background-color: white;  
 }
 
+html[dir=rtl] .thumb {
+  box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
 .favicon {
   background-color: #D7D7D7;
-  border-bottom-right-radius: 0.4em;
   box-shadow:
     0 -1px 0 rgba(225, 225, 225, 0.8) inset,
     -1px 0 0 rgba(225, 225, 225, 0.8) inset;
-  padding: 4px 6px 6px 4px;
+  padding-top: 4px;
+  -moz-padding-end: 6px;
+  padding-bottom: 6px;
+  -moz-padding-start: 4px;
   top: 4px;
   left: 4px;
-  border-right: 1px solid rgba(0, 0, 0, 0.3);
+  -moz-border-end: 1px solid rgba(0, 0, 0, 0.3);
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   height: 16px;
   width: 16px;
 }
 
+html[dir=ltr] .favicon {
+  border-bottom-right-radius: 0.4em;
+}
+
+html[dir=rtl] .favicon {
+  border-bottom-left-radius: 0.4em;
+  box-shadow:
+    0 -1px 0 rgba(225, 225, 225, 0.8) inset,
+    1px 0 0 rgba(225, 225, 225, 0.8) inset;
+  left: auto;
+  right: 2px;
+}
+
 .favicon img {
   border: none;
   width: 16px;
   height: 16px;
 }
 
 .close {
   top: 6px;
@@ -61,28 +83,39 @@ body {
   height: 16px;
   background: url(chrome://global/skin/icons/closetab.png) no-repeat;
   -moz-transition-property: opacity;
   -moz-transition-duration: 0.5s;
   -moz-transition-timing-function: ease-out;
   opacity: 0.2;
 }
 
+html[dir=rtl] .close {
+  right: auto;
+  left: 6px;
+}
+
 .expander {
   bottom: 8px;
   right: 6px;
   width: 16px;
   height: 16px;
   background: url(chrome://global/skin/icons/resizer.png) no-repeat;
   -moz-transition-property: opacity;
   -moz-transition-duration: 0.5s;
   -moz-transition-timing-function: ease-out;
   opacity: 0.2;
 }
 
+html[dir=rtl] .expander {
+  right: auto;
+  left: 6px;
+  -moz-transform: scaleX(-1);
+}
+
 .close:hover,
 .expander:hover {
   -moz-transition-property: opacity;
   -moz-transition-duration: 0.5s;
   -moz-transition-timing-function: ease-out;
   opacity: 1.0;
 }
 
@@ -105,22 +138,30 @@ body {
 .stacked {
   padding: 0;
 }
 
 .stacked .thumb {
   box-shadow: rgba(0,0,0,.2) 1px 1px 4px;
 }
 
+html[dir=rtl] .stacked .thumb {
+  box-shadow: rgba(0,0,0,.2) -1px 1px 4px;
+}
+
 .stack-trayed .tab-title {
   text-shadow: rgba(0,0,0,1) 1px 1px 1.5px;
   color: #EEE;
   font-size: 11px;
 }
 
+html[dir=rtl] .stack-trayed .tab-title {
+  text-shadow: rgba(0,0,0,1) -1px 1px 1.5px;
+}
+
 .stack-trayed .thumb {
   box-shadow: none !important;
 }
 
 .tab.focus {
   box-shadow: 0 0 5.5px -moz-mac-menuselect/*#0060D6*/;
   border: 1px solid rgba(255, 255, 255, 0.6);
 }
@@ -166,37 +207,45 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .groupItem.activeGroupItem {
   box-shadow:
     rgba(0,0,0,0.6) 1px 1px 5.5px;
 }
 
+html[dir=rtl] .groupItem.activeGroupItem {
+  box-shadow:
+    rgba(0,0,0,0.6) -1px 1px 5.5px;
+}
+
 .phantom {
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);
   border-radius: 0.4em;
-  /*
-  border: 1px solid rgba(230,230,230,1);
-  background-color: rgba(248,248,248,1);
-  box-shadow:
-    rgba(0,0,0, .3) 2px 2px 5.5px,
-    inset rgba(255, 255, 255, 0.6) 0 0 0 2px; */
+}
+
+html[dir=rtl] .overlay {
+  box-shadow: -3px 3px 5.5px rgba(0,0,0,.5);
 }
 
 .appTabTray {
   top: 34px;
   right: 1px;
 }
 
+html[dir=rtl] .appTabTray {
+  right: auto;
+  left: 1px;
+}
+
 .appTabIcon {
   width: 16px;
   height: 16px;
   cursor: pointer;
 }
 
 .undo {
   background-color: #A0A0A0;
@@ -217,16 +266,21 @@ body {
 }
 
 .undo .close {
   top: 4px;
   left: 4px;
   opacity: 0.5;
 }
 
+html[dir=rtl] .undo .close {
+  left: auto;
+  right: 4px;
+}
+
 .undo .close:hover{
   opacity: 1.0;
 }
 
 /* InfoItems
 ----------------------------------*/
 
 .info-item {
@@ -234,31 +288,41 @@ body {
   border: 1px solid rgba(230,230,230,1);
   background-color: rgba(248,248,248,1);
   border-radius: 0.4em;
   box-shadow:
     inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
     rgba(0,0,0, .2) 1px 1px 3px;
 }
 
+html[dir=rtl] .info-item {
+  box-shadow:
+    inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
+    rgba(0,0,0, .2) -1px 1px 3px;
+}
+
 .intro {
   margin: 10px;
 }
 
 /* Trenches
 ----------------------------------*/
 
 .guideTrench {
   opacity: 0.9;
   border: 1px dashed  rgba(0,0,0,.12);
   border-bottom: none;
-  border-right: none;
+  -moz-border-end: none;
   box-shadow: 1px 1px 0 rgba(255,255,255,.15);
 }
 
+html[dir=rtl] .guideTrench {
+  box-shadow: -1px 1px 0 rgba(255,255,255,.15);
+}
+
 .visibleTrench {
   opacity: 0.05;
 }
 
 .activeVisibleTrench {
   opacity: 0;
 }
 
@@ -284,42 +348,62 @@ body {
   height: 15px;
   bottom: 10px;
   left: 10px;
   cursor: pointer;
   opacity: .3;
   background-image: url(chrome://browser/skin/tabview/new-tab.png);
 }
 
+html[dir=rtl] .newTabButton {
+  left: auto;
+  right: 10px;
+}
+
 .newTabButton:hover {
   opacity: 1;
 }
 
 .active {
   box-shadow: 5px 5px 3px rgba(0,0,0,.5);
 }
 
+html[dir=rtl] .active {
+  box-shadow: -5px 5px 3px rgba(0,0,0,.5);
+}
+
 .acceptsDrop {
   box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6);
 }
 
+html[dir=rtl] .acceptsDrop {
+  box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6);
+}
+
 .titlebar {
   font-size: 12px;
   line-height: 18px;
   height: 18px;
 }
 
 input.name {
   background: transparent;
   border: 1px solid transparent;
   color: #999;
-  margin: 3px 0px 0px 3px;
+  margin-top: 3px;
+  -moz-margin-end: 0;
+  margin-bottom: 0;
+  -moz-margin-begin: 3px;
   padding: 1px;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);
-  padding-left: 20px;
+  -moz-padding-start: 20px;
+}
+
+html[dir=rtl] input.name {
+  background-position: right top;
 }
 
 .title-container:hover input.name {
   border: 1px solid #ddd;
 }
 
 .title-container:hover input.name-locked {
   border: 1px solid transparent !important;
@@ -340,24 +424,32 @@ input.defaultName {
   color: #CCC;
 }
 
 .title-container {
   cursor: text;
 }
 
 .title-shield {
-  margin: 3px 0px 0px 3px;
+  margin-top: 3px;
+  -moz-margin-end: 0;
+  margin-bottom: 0;
+  -moz-margin-begin: 3px;
   padding: 1px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
 }
 
+html[dir=rtl] .title-shield {
+  left: auto;
+  right: 0;
+}
+
 .transparentBorder {
   border: 1px solid transparent !important;
 }
 
 .stackExpander {
   opacity: .4;
   cursor: pointer;
   background-image: url(chrome://browser/skin/tabview/stack-expander.png);
@@ -375,43 +467,61 @@ input.defaultName {
   background-image: url(chrome://global/skin/icons/resizer.png);
   width: 16px;
   height: 16px;
   bottom: 0px;
   right: 0px;
   opacity: .2;
 }
 
+html[dir=rtl] .resizer {
+  right: auto;
+  left: 0;
+  -moz-transform: scaleX(-1);
+}
+
 .iq-resizable-handle {
   font-size: 0.1px;
 }
 
 .iq-resizable-se {
   cursor: se-resize;
   width: 12px;
   height: 12px;
   right: 1px;
   bottom: 1px;
 }
 
+html[dir=rtl] .iq-resizable-se {
+  cursor: sw-resize;
+  right: auto;
+  left: 1px;
+}
+
 /* Exit button
 +----------------------------------*/
 #exit-button {
   cursor: default;
   top: 0;
   right: 0;
   width: 28px;
   height: 27px;
   background: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 20, 20, 0) no-repeat scroll 4px 4px #b7b7b7;
   border-bottom: 1px solid #909090;
-  border-left: 1px solid #B7B7B7;
+  -moz-border-start: 1px solid #B7B7B7;
   border-top: 1px solid #CFCFCF;
   border-radius: 3px 0 0 3px;
 }
 
+html[dir=rtl] #exit-button {
+  right: auto;
+  left: 0;
+  border-radius: 0 3px 3px 0;
+}
+
 /* Search
 ----------------------------------*/
 
 #search {
   background-color: rgba(0,0,0,.42);
   width: 100%;
   height: 100%;  
 }
@@ -419,32 +529,42 @@ input.defaultName {
 #searchbox {
   width: 270px;
   height: 30px;
   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 13px rgba(0,0,0,.8);
   color: white;
   border: none;
   background-color: #272727;
   border-radius: 0.4em;
-  padding-left: 5px; padding-right: 5px;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 5px;
   font-size: 14px;  
 }
 
 #actions {
   width: 30px;
   height: 30px;
   background-color: #666;
   border: none;
-  border-bottom-left-radius: 0.4em;
-  border-top-left-radius: 0.4em;    
   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.8), inset 6px 6px 13px rgba(0,0,0,.56);
   opacity: .64;
   text-align: center;
 }
 
+html[dir=ltr] #actions {
+  border-bottom-left-radius: 0.4em;
+  border-top-left-radius: 0.4em;    
+}
+
+html[dir=rtl] #actions {
+  border-bottom-right-radius: 0.4em;
+  border-top-right-radius: 0.4em;    
+  box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.8), inset -6px 6px 13px rgba(0,0,0,.56);
+}
+
 #actions #searchbutton {
   background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
   border: none;
   width: 20px;
   height: 20px;
   margin-top:5px;
   opacity: .8;  
 }
@@ -461,41 +581,46 @@ input.defaultName {
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 30px;
   background-color: rgba(0,0,0,.3);
   box-shadow: 0 -1px 0 rgba(255,255,255,.1), inset 0 2px 5px rgba(0,0,0,.3);
 }
 
+html[dir=rtl] #otherresults {
+  left: auto;
+  right: 0px;
+}
+
 #otherresults .label {
   color: #999;
   line-height: 30px;
-  margin-left: 5px;
-  margin-right: 5px;
+  -moz-margin-start: 5px;
+  -moz-margin-end: 5px;
 }
 
 .inlineMatch {
   background-color: #EBEBEB;
   border-radius: 0.4em;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
-  padding-left: 3px;
-  padding-right: 3px;
+  -moz-padding-start: 3px;
+  -moz-padding-end: 3px;
   height: 20px;
-  margin-right: 5px;
+  -moz-margin-end: 5px;
   cursor: pointer;
 }
 
 .inlineMatch:hover {
   opacity: 1.0;
 }
 
 .inlineMatch > img {
-  margin-right: 5px;
+  -moz-margin-end: 5px;
   position: relative;
   top: 2px;
 }
 
 .inlineMatch > span {
   max-width:200px;
   height: 15px;
 }
@@ -504,41 +629,46 @@ input.defaultName {
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 30px;
   background-color: rgba(0,0,0,.3);
   box-shadow: 0 -1px 0 rgba(255,255,255,.1), inset 0 2px 5px rgba(0,0,0,.3);
 }
 
+html[dir=rtl] #otherresults {
+  left: auto;
+  right: 0;
+}
+
 #otherresults .label {
   color: #999;
   line-height:30px;
-  margin-left:5px;
-  margin-right: 5px;
+  -moz-margin-start: 5px;
+  -moz-margin-end: 5px;
 }
 
 .inlineMatch {
   background-color: #EBEBEB;
   border-radius: 0.4em;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
-  padding-left: 3px;
-  padding-right: 3px;
+  -moz-padding-start: 3px;
+  -moz-padding-end: 3px;
   height: 20px;
-  margin-right: 5px;
+  -moz-margin-end: 5px;
   cursor: pointer;
 }
 
 .inlineMatch:hover {
   opacity: 1.0;
 }
 
 .inlineMatch > img {
-  margin-right: 5px;
+  -moz-margin-end: 5px;
   position: relative;
   top: 2px;
 }
 
 .inlineMatch > span {
   max-width: 200px;
   height: 15px;
 }