Bug 1116803 - merge pull request #27328 from anefzaoui:bug-1116803 to…

… mozilla-b2g:master

apps/communications/contacts/style/app.css

@@ -118,7 +118,7 @@ td {
 }
 
 caption, th {
-  text-align: left;
+  text-align: start;
 }
 
 caption {
@@ -217,37 +217,14 @@ li button.activity > b em {
 }
 
 [data-type="list"] li p {
-  margin-left: 1.5rem;
+  -moz-margin-start: 1.5rem;
 }
 
 /* BB Lists extending */
 #view-contacts-list [data-type="list"] {
-  padding: 2.5rem 2.5rem 0 0;
-}
-
-html[dir="rtl"] #view-contacts-list [data-type="list"] {
-  padding-right: 4.5rem;
-}
-
-html[dir="rtl"] #search-list li {
-  text-align: right;
-  padding-right: 1rem;
-}
-
-html[dir="rtl"] #search-list.pack-checkbox {
-  right: 0;
-}
-
-html[dir="rtl"] #search-list[data-type="list"] li > .pack-checkbox {
-  right: 0;
-}
-
-html[dir="rtl"] nav[data-type="scrollbar"] li a {
-  text-indent: -1.5rem;
-}
-
-html[dir="rtl"] .icon-social {
-  margin: 0 0 0 1rem
+  padding: 0;
+  padding-top: 2.5rem;
+  padding-right: 2.5rem;
 }
 
 [data-type="list"] gaia-header {
@@ -268,8 +245,9 @@ html[dir="rtl"] .icon-social {
   pointer-events: none;
 }
 
-[data-type="list"] li aside.pack-end {
-  margin: 0 2rem 0 0;
+html[dir="ltr"] [data-type="list"] li aside.pack-end {
+  margin: 0;
+  margin-right: 2rem;
 }
 
 /* Selection tag extended from shared/style/buttons.css */
@@ -310,7 +288,7 @@ html[dir="rtl"] .icon-social {
   -moz-box-sizing: border-box;
   background: #fff;
   color: #333;
-  text-align: left;
+  text-align: start;
   will-change: scroll-position;
 }
 
@@ -409,7 +387,7 @@ li button.icon-find-and-merge:before {
 
 /* FILL FLOW: general components for helping in defining basic flows in forms; */
 .fill-flow {
-  padding-right: 0;
+  -moz-padding-end: 0;
 }
 
 /* ROW: horizontal separation for elements; */
@@ -418,7 +396,7 @@ li button.icon-find-and-merge:before {
 }
 
 .fillflow-left {
-  margin-right: 0.7rem;
+  -moz-margin-end: 0.7rem;
 }
 
 .fillflow-twocols {
@@ -452,7 +430,9 @@ li button.icon-find-and-merge:before {
 
 /* MEDIA: specific ratio used in forms; */
 .fillflow-media {
-  margin: 0 1rem 0.5rem 0;
+  margin: 0;
+  -moz-margin-end: 1rem;
+  margin-bottom: 0.5rem;
   width: 7rem;
   height: 7rem;
   position: relative;
@@ -568,13 +548,9 @@ nav[data-type="scrollbar"] ol > li > * {
   background-position: center top;
 }
 
-html:not([dir="rtl"]) #groups-list.selecting .group-section li,
-html:not([dir="rtl"]) #search-list.selecting li {
-  padding-left: 2rem;
-}
-
-html[dir="rtl"] #groups-list.selecting {
-  padding-right: 8rem;
+#groups-list.selecting .group-section li,
+#search-list.selecting li {
+  -moz-padding-start: 2rem;  
 }
 
 form[role="dialog"].no-overlay {
@@ -595,23 +571,13 @@ form[role="dialog"].no-overlay button {
   display:none !important;
 }
 
-html[dir="rtl"] .fillflow-row-action {
-  right: auto;
-  left: 0;
-}
-
-html[dir="rtl"] .view-body-inner,
-html[dir="rtl"] ::-moz-placeholder {
-  text-align: right;
-}
-
 #import-settings button {
   margin: 1.5rem;
   width: calc(100% - 3rem);
 }
 
 #contact-list-ice {
-  padding-left: 1rem
+  -moz-padding-start: 1rem
 }
 
 #contact-list-ice li {
@@ -632,7 +598,7 @@ html[dir="rtl"] ::-moz-placeholder {
 #ice-list {
   min-height: 100%;
   background: #FFF;
-  text-align: left;
+  text-align: start;
 }
 
 .ice-contact {
@@ -649,4 +615,50 @@ html[dir="rtl"] ::-moz-placeholder {
 
 #search-list li.contact-item {
   -moz-user-select: none;
+  text-align: start;
 }
+
+/* RTL View */
+
+html[dir="rtl"] [data-type="list"].active li:after {
+  left: 0;
+  right: unset;
+}
+
+html[dir="rtl"] li button.icon-fav:before {
+  left: 0.5rem;
+  right: unset;
+}
+
+html[dir="rtl"] li button.icon-add:before {
+  left: unset;
+  right: 0.2rem
+}
+
+html[dir="rtl"] .fillflow-twocols button {
+  float: right;
+}
+
+html[dir="rtl"] .fillflow-twocols button:last-child {
+  float: left;
+}
+
+html[dir="rtl"] .fillflow-media p {
+  left: unset;
+  right: -1.5rem;
+}
+
+html[dir="rtl"] .contact-checkbox {
+  left: unset;
+  right: 0 !important;
+}
+
+html[dir="rtl"] .view-body-inner {
+  left: unset;
+}
+
+html[dir="rtl"] #view-contacts-list [data-type="list"] {
+  padding-left: 4.5rem; /* extending +2rem for RTL consistency */
+  padding-right: unset;
+}
+

apps/communications/contacts/style/contacts.css

@@ -252,7 +252,7 @@ div.with-overflow > p.input-container > input {
 }
 
 .two_fields > :first-child {
-  margin-right: 1rem;
+  -moz-margin-end: 1rem;
   width: 12rem;
 }
 
@@ -326,7 +326,9 @@ form p textarea + button[type="reset"].hide {
   overflow: hidden;
   width: 1.5rem;
   height: 1.5rem;
-  margin: -0.2rem 1rem 0 0;
+  margin: 0;
+  margin-top: -0.2rem;
+  -moz-margin-end: 1rem;
 }
 
 .icon-social.icon-fb,
@@ -355,7 +357,7 @@ form p textarea + button[type="reset"].hide {
 }
 
 .facebook fieldset {
-  margin-left: 4rem;
+  -moz-margin-start: 4rem;
 }
 
 .facebook fieldset, .facebook legend, .facebook input {
@@ -761,7 +763,7 @@ html[dir=ltr] #view-settings [data-type="list"] .fb-item aside label {
 }
 
 .group-section {
-  padding-left: 1.5rem;
+  -moz-padding-start: 1.5rem;
 }
 
 .datetime {
@@ -848,16 +850,6 @@ form[role="dialog"][data-type="edit"].contacts-select:not(.insearchmode) gaia-he
   image-rendering: auto;
 }
 
-html[dir="rtl"] #no-contacts .icon {
-  padding-right: 3.5rem;
-  padding-left: 0;
-}
-
-html[dir="rtl"] #no-contacts .create.icon,
-html[dir="rtl"] #no-contacts .import.icon {
-  background-position: 100% 50%;
-}
-
 nav[data-type="scrollbar"] li .pack-icon-ice {
   width: 1.2rem;
   height: 1.2rem;
@@ -867,16 +859,6 @@ nav[data-type="scrollbar"] li .pack-icon-ice {
   background-image: url("/contacts/style/images/ice_small.png");
 }
 
-html[dir="rtl"] #no-contacts .icon {
-  padding-right: 3.5rem;
-  padding-left: 0;
-}
-
-html[dir="rtl"] #no-contacts .create.icon,
-html[dir="rtl"] #no-contacts .import.icon {
-  background-position: 100% 50%;
-}
-
 fieldset legend {
   font-size: 1.6rem;
   background-color: #f2f2f2;
@@ -902,7 +884,10 @@ form[role="combobox"] span[data-field="type"] {
 
 .img-delete-button {
   padding: 0;
-  margin: 0.2rem 1rem 0 0.2rem;
+  margin: 0;
+  margin-top: 0.2rem;
+  -moz-margin-start: 0.2rem;
+  -moz-margin-end: 1rem;
   width: 2.8rem;
   color: #fff;
   background: url('images/icon_remove.png') no-repeat scroll 0 0 / 3rem auto transparent;
@@ -1021,3 +1006,47 @@ li button[data-field-type]:active {
   background: transparent;
   color: #5F5F5F;
 }
+
+/* RTL View */
+
+html[dir="rtl"] .field-template {
+  border-radius: 0 15px 0 0;
+}
+
+html[dir="rtl"] #no-contacts .icon {
+  padding-right: 3.5rem;
+  padding-left: 0;
+}
+
+html[dir="rtl"] #no-contacts .create.icon,
+html[dir="rtl"] #no-contacts .import.icon {
+  background-position: 100% 50%;
+}
+
+html[dir="rtl"] #contact-form div.with-overflow button[type="reset"] {
+  left: calc(-0.5rem + -0.3rem);
+  right: unset;
+}
+
+html[dir="rtl"] #view-settings [data-type="list"] .fb-item aside {
+  left: 0;
+  right: unset;
+}
+
+html[dir="rtl"] #view-settings [data-type="list"] .fb-item {
+  background-position: 100% calc(50% + 0.5rem);
+}
+
+html[dir="rtl"] #view-settings [data-type="list"] .fb-item aside label {
+  left: 0;
+  right: unset;
+}
+
+html[dir="rtl"] #view-settings [data-type="list"] li button.icon:before {
+  left: auto;
+  right: 0.5rem;
+}
+
+html[dir="rtl"] .img-delete-button {
+  background-position: 100% 0;
+}

apps/communications/contacts/style/fb_extensions.css

@@ -48,16 +48,16 @@
 }
 
 .with-photo.facebook {
-  padding-right: 0
+  -moz-padding-end: 0;
 }
 
 .with-photo.facebook .edit-photo  {
-  right: 0
+  right: 0;
 }
 
 
 #settingsFb li p {
-  margin-left: 0;
+  -moz-margin-start: 0;
 }
 
 #settings-article[data-state="fb-disabled"] #settingsFb,
@@ -83,3 +83,8 @@
   white-space: normal;
   margin-top: 1rem;
 }
+
+/* RTL View */
+html[dir="rtl"] .with-photo.facebook .edit-photo  {
+  right: -1.5rem;
+}

apps/communications/contacts/style/matching_contacts.css

@@ -25,7 +25,7 @@
 
 #contacts-list-container > ol > li[data-uuid] {
   display: block;
-  padding-left: 4rem;
+  -moz-padding-start: 4rem;
   border-top: none !important;
 }
 
@@ -112,3 +112,10 @@ form[role="dialog"][data-type="edit"] #main {
 [data-type="list"] li[data-visited="true"] aside img {
   border-style: solid;
 }
+
+/* RTL View */
+
+html[dir="rtl"] #contacts-list-container label {
+  left: unset;
+  right: 0;
+}

build/csslint/xfail.list

@@ -15,7 +15,7 @@ apps/camera/style/preview-gallery.css 0 2
 apps/clock/style/onring.css 0 1
 apps/clock/style/picker/picker.css 0 1
 apps/clock/style/alarm.css 0 4
-apps/communications/contacts/style/app.css 0 5
+apps/communications/contacts/style/app.css 0 6
 apps/communications/contacts/style/contacts.css 0 6
 apps/communications/contacts/style/matching_contacts.css 0 3
 apps/communications/contacts/style/overlay.css 0 1