Bug 587248 - Part 4: Add RTL support to theme CSS for TabView on Windows; r=dao a=blocking-betaN+
authorEhsan Akhgari <ehsan@mozilla.com>
Mon, 08 Nov 2010 01:38:24 -0500
changeset 57453 a1803da455615c0c730ab0e1c6b8cabbeca3ff9b
parent 57452 52a7905f4cc48c3b6a70319368fb749688101bc4
child 57454 51bcf78f8c5901eefe001f41921c976f3bc05502
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 4: Add RTL support to theme CSS for TabView on Windows; r=dao a=blocking-betaN+
browser/themes/winstripe/browser/tabview/tabview.css
--- a/browser/themes/winstripe/browser/tabview/tabview.css
+++ b/browser/themes/winstripe/browser/tabview/tabview.css
@@ -9,51 +9,79 @@ body {
   background: url("chrome://browser/skin/tabview/grain.png") repeat scroll center top,
               -moz-linear-gradient(center top , #CCD9EA, #C7D5E7) repeat scroll 0 0 transparent;
 }
 
 /* Tabs
 ----------------------------------*/
 
 .tab {
-  padding: 4px 6px 6px 4px;
+  padding-top: 4px;
+  -moz-padding-end: 6px;
+  padding-bottom: 6px;
+  -moz-padding-start: 4px;
   background-color: #E0EAF5;
   border-radius: 0.4em;
   box-shadow:
     0 1px 0 #FFFFFF inset,
     0 -1px 1px rgba(255, 255, 255, 0.8) inset,
     1px 0 1px rgba(255, 255, 255, 0.8) inset,
     -1px 0 1px rgba(255, 255, 255, 0.8) inset,
     0 1px 1.5px rgba(4, 38, 60, 0.4);
   cursor: pointer;
   margin: 4px;
 }
 
+html[dir=rtl] .tab {
+  box-shadow:
+    0 1px 0 #FFFFFF inset,
+    0 -1px 1px rgba(255, 255, 255, 0.8) inset,
+    -1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 1.5px rgba(4, 38, 60, 0.4);
+}
+
 .tab canvas,
 .cached-thumb {
   border: 1px solid rgba(73, 99, 119, 0.3);
 }
 
 .thumb {
   box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
   background-color: white;  
 }
 
+html[dir=rtl] .thumb {
+  box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
 .favicon {
   background-color: #E0EAF5;
-  border-bottom-right-radius: 0.4em;
-  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(73, 99, 119, 0.3);
+  -moz-border-end: 1px solid rgba(73, 99, 119, 0.3);
   border-bottom: 1px solid rgba(73, 99, 119, 0.3);
   height: 17px;
   width: 17px;
 }
 
+html[dir=ltr] .favicon {
+  border-bottom-right-radius: 0.4em;
+}
+
+html[dir=rtl] .favicon {
+  border-bottom-left-radius: 0.4em;
+  left: auto;
+  right: 2px;
+}
+
 .favicon img {
   border: none;
   width: 16px;
   height: 16px;
 }
 
 .close {
   top: 6px;
@@ -62,28 +90,39 @@ body {
   height: 16px;
   background: url(chrome://global/skin/icons/Close.gif) 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: 6px;
   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;
 }
 
@@ -106,35 +145,52 @@ 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 1px 0 #FFFFFF inset,
     0 -1px 1px #FFFFFF inset,
     1px 0 1px #FFFFFF inset,
     -1px 0 1px #FFFFFF inset,
     0 0 5.5px #007ECE;
 }
 
+html[dir=rtl] .tab.focus {
+  box-shadow:
+    0 1px 0 #FFFFFF inset,
+    0 -1px 1px #FFFFFF inset,
+    -1px 0 1px #FFFFFF inset,
+    1px 0 1px #FFFFFF inset,
+    0 0 5.5px #007ECE;
+}
+
 /* Tab: Zooming
 ----------------------------------*/
 
 .front .tab-title, 
 .front .close, 
 .front .favicon, 
 .front .expander, 
 .front .thumb-shadow {
@@ -168,41 +224,55 @@ body {
   box-shadow:
     0 1px 0 #FFFFFF inset,
     0 -1px 1px rgba(255, 255, 255, 0.8) inset,
     1px 0 1px rgba(255, 255, 255, 0.8) inset,
     -1px 0 1px rgba(255, 255, 255, 0.8) inset,
     0 1px 3px rgba(4, 38, 60, 0.6);
 }
 
+html[dir=rtl] .groupItem {
+  box-shadow:
+    0 1px 0 #FFFFFF inset,
+    0 -1px 1px rgba(255, 255, 255, 0.8) inset,
+    -1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    1px 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 3px rgba(4, 38, 60, 0.6);
+}
+
 .groupItem.activeGroupItem {
   box-shadow:
     rgba(0,0,0,0.6) 1px 1px 5.5px;
 }
 
-.phantom {
+html[dir=rtl] .groupItem.activeGroupItem {
+  box-shadow:
+    rgba(0,0,0,0.6) -1px 1px 5.5px;
 }
 
 .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;
@@ -223,16 +293,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 {
@@ -240,31 +315,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;
 }
 
+.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;
 }
 
@@ -290,42 +375,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-start: 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;
@@ -346,24 +451,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-start: 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);
@@ -381,43 +494,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, 18, 18, 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%;  
 }
@@ -425,32 +556,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 9px 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: #CFDBE8;
   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 9px 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 9px 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;  
 }
@@ -467,41 +608,46 @@ input.defaultName {
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 30px;
   background-color: rgba(0,0,0,.3);
   box-shadow: 0px -1px 0px rgba(255,255,255,.1), inset 0px 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;
 }