Bug 1274272 - fix RTL issues with about:privatebrowsing, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Thu, 19 May 2016 22:59:09 +0100
changeset 298246 392304ae5264da68fb3e2be789bcbe34137f6951
parent 298245 fdccec38636a68423966a49bbb4b3e3bba095ea2
child 298247 3c46096adeaf7611bed1588d6adfa0c7c7b2d5e3
push id77083
push usergijskruitbosch@gmail.com
push dateSat, 21 May 2016 00:12:12 +0000
treeherdermozilla-inbound@392304ae5264 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1274272
milestone49.0a1
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 1274272 - fix RTL issues with about:privatebrowsing, r=mikedeboer MozReview-Commit-ID: rFNLKSWnSX
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -61,17 +61,17 @@ p {
   line-height: 1.5em;
 }
 
 .list-row {
   overflow: auto;
 }
 
 .list-row > ul > li {
-  float: left;
+  float: inline-start;
   width: 220px;
   line-height: 1.5em;
   margin-inline-start: 1em;
   margin-bottom: 0;
 }
 
 .title {
   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
@@ -79,39 +79,47 @@ p {
   background-position: left, center;
   font-weight: lighter;
   line-height: 1.5em;
   min-height: 64px;
   margin-inline-start: 0;
   padding-inline-start: calc(var(--icon-margin) + 24px);
 }
 
+.title:dir(rtl) {
+  background-position: right, center;
+}
+
 .about-subheader {
   display: flex;
   align-items: center;
   font-size: 1.5em;
   font-weight: lighter;
   min-height: 32px;
   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
   background-repeat: no-repeat;
   background-size: 32px;
   margin-inline-start: calc(var(--icon-margin) - 32px);
   padding-inline-start: 56px;
 }
 
+.about-subheader:dir(rtl) {
+  background-position: right;
+}
+
 .about-subheader.tp-off {
   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
 }
 
 .about-info {
   font-size: .875em;
 }
 
 .tpTitle {
-  margin-right: 12px;
+  margin-inline-end: 12px;
 }
 
 .private strong {
   color: var(--color-grey-lightest);
   font-weight: normal;
 }
 
 a.button {
@@ -148,34 +156,49 @@ a.button {
   box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
               0 1px 0 hsla(0, 0%, 0%, .2);
   border-radius: 50%;
   background: white;
   transition: left .2s ease;
 }
 
 .toggle + .toggle-btn::before {
-  float: left;
+  float: inline-start;
   left: 9px;
   visibility: hidden;
   background-size: 16px;
   background-repeat: no-repeat;
   background-color: transparent;
   background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
 }
 
+.toggle + .toggle-btn:dir(rtl)::after {
+  left: auto;
+  right: 0;
+  transition-property: right;
+}
+
+.toggle + .toggle-btn:dir(rtl)::before {
+  left: auto;
+  right: 9px;
+}
+
 .toggle:checked + .toggle-btn {
   background: #3fc455;
   border: 1px solid #269939;
 }
 
 .toggle:checked + .toggle-btn::after {
   left: 35px;
 }
 
+.toggle:checked + .toggle-btn:dir(rtl)::after {
+  right: 35px;
+}
+
 .toggle:checked + .toggle-btn::before {
   visibility: visible;
 }
 
 .toggle:-moz-focusring + .toggle-btn {
   outline: 2px solid rgba(0, 149, 221, 0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;