Bug 602457 - [RTL] Favicons in about:home are not on the right side [r=mfinkle]

mobile/chrome/content/aboutHome.xhtml

@@ -98,7 +98,7 @@
   <script type="application/javascript;version=1.8"><![CDATA[
     let Ci = Components.interfaces, Cc = Components.classes, Cu = Components.utils;
     let gChromeWin = null;
-    
+
     function getChromeWin() {
       if (!gChromeWin) {
         gChromeWin = window
@@ -128,8 +128,8 @@
         let stream = Cc["@mozilla.org/network/file-input-stream;1"].createInstance(Ci.nsIFileInputStream);
         stream.init(aFile, 0x01, 0, 0);
         let cvstream = Cc["@mozilla.org/intl/converter-input-stream;1"].createInstance(Ci.nsIConverterInputStream);
-  
-        let fileSize = stream.available();  
+
+        let fileSize = stream.available();
         cvstream.init(stream, "UTF-8", fileSize, Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
         let data = {};
         cvstream.readString(fileSize, data);
@@ -138,7 +138,7 @@
         return content.replace(/\r\n?/g, "\n");
       }
       catch (ex) { Cu.reportError(ex); }
-  
+
       return null;
     }
 
@@ -163,7 +163,7 @@
       let allPageURLs = [];
 
       let list = document.getElementById("recentTabs");
-      
+
       let tabs = data.windows[0].tabs;
       for (let i=0; i<tabs.length; i++) {
         let tabData = tabs[i];
@@ -280,11 +280,11 @@
         let loading = document.getElementById("loadingAddons");
         loading.parentNode.removeChild(loading);
 
-        for (let i=0; i<aAddons.length; i++) {  
+        for (let i=0; i<aAddons.length; i++) {
           let outer = document.createElement("div");
           outer.setAttribute("role", "button");
           outer.setAttribute("addonID", aAddons[i].id);
-  
+
           let addonName = aAddons[i].name;
           outer.addEventListener("click", function() {
             goToAddons(addonName);
@@ -294,25 +294,25 @@
           img.className = "favicon";
           img.setAttribute("src", aAddons[i].iconURL);
           outer.appendChild(img);
-  
+
           let inner = document.createElement("div");
           inner.className = "inner";
-  
+
           let titlePart = document.createElement("span");
           titlePart.textContent = aAddons[i].name;
           titlePart.className = "title";
           inner.appendChild(titlePart);
-  
+
           let versionPart = document.createElement("span");
           versionPart.textContent = aAddons[i].version;
           versionPart.className = "version";
           inner.appendChild(versionPart);
-  
+
           outer.appendChild(inner);
           list.appendChild(outer);
         }
       },
-    
+
       searchFailed: function searchFailed() {
         let loading = document.getElementById("newAddons");
         loading.parentNode.removeChild(loading);

mobile/themes/core/aboutHome.css

@@ -105,7 +105,7 @@ html {
 /* Make room for the image */
 .section-box > div > div,
 .section-row > div > div {
-  margin-left: 48px;
+  -moz-margin-start: 48px;
 }
 
 .section-box .title {
@@ -113,14 +113,17 @@ html {
 }
 
 .section-box .openall {
-  text-align: right;
   font-size: 18px;
   padding: 12px 8px;
   color: black;
 }
 
+body[dir="ltr"] .section-box .openall {
+  text-align: right;
+}
+
 .section-box .version {
-  margin-left: 12px;
+  -moz-margin-start: 12px;
   font-size: 18px;
   color: gray;
 }
@@ -132,17 +135,28 @@ html {
 .section-box .favicon {
   border: none;
   top: 8px;
-  left: 12px;
   width: 32px;
   height: 32px;
   position: absolute;
   pointer-events: none;
 }
 
-#newAddons > div:not(.loading) {
+body[dir="ltr"] .section-box .favicon {
+  left: 12px;
+}
+
+body[dir="ltr"] .section-box .favicon {
+  right: 12px;
+}
+
+body[dir="ltr"] #newAddons > div:not(.loading) {
   background: url("images/arrowright-16.png") 99% center no-repeat;
 }
 
+body[dir="rtl"] #newAddons > div:not(.loading) {
+  background: url("images/arrowleft-16.png") 1% center no-repeat;
+}
+
 #remoteTabs[disabled=true] {
   pointer-events: none;
   color: #aaa;
@@ -174,12 +188,19 @@ html {
 .section-row .favicon {
   border: none;
   top: 0;
-  left: 4px;
   width: 32px;
   height: 32px;
   position: absolute;
 }
 
+body[dir="ltr"] {
+  left: 4px;
+}
+
+body[dir="rtl"] {
+  right: 4px;
+}
+
 .loading > img {
   display: block;
   margin: 0 auto;