Bug 602457 - [RTL] Favicons in about:home are not on the right side [r=mfinkle]
authorVivien Nicolas <21@vingtetun.org>
Fri, 08 Oct 2010 19:27:42 +0200
changeset 66806 e11c0282bc2f0bd0a6bb198834f848c15fb12865
parent 66805 bf34a9f61fea1f67fe5e9ff221f9a0a215850167
child 66807 2b391bc00d9ba36b5d4b9ed42e9728d11c5dfe8b
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs602457
Bug 602457 - [RTL] Favicons in about:home are not on the right side [r=mfinkle]
mobile/chrome/content/aboutHome.xhtml
mobile/themes/core/aboutHome.css
--- a/mobile/chrome/content/aboutHome.xhtml
+++ b/mobile/chrome/content/aboutHome.xhtml
@@ -93,17 +93,17 @@
     <span id="text-openalltabs">&aboutHome.openAllTabs;</span>
     <span id="text-notabs">&aboutHome.noTabs;</span>
     <span id="text-noaddons">&aboutHome.noAddons;</span>
   </div>
 
   <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
                     .QueryInterface(Ci.nsIInterfaceRequestor)
                     .getInterface(Ci.nsIWebNavigation)
                     .QueryInterface(Ci.nsIDocShellTreeItem)
                     .rootTreeItem
                     .QueryInterface(Ci.nsIInterfaceRequestor)
@@ -123,27 +123,27 @@
       uninitWeave();
     }
 
     function _readFile(aFile) {
       try {
         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);
         let content = data.value;
         cvstream.close();
         return content.replace(/\r\n?/g, "\n");
       }
       catch (ex) { Cu.reportError(ex); }
-  
+
       return null;
     }
 
     function openTabs(aURLs) {
       let BrowserUI = getChromeWin().BrowserUI;
       let owner = getChromeWin().Browser.selectedTab;
       for (let i=0; i < aURLs.length; i++) {
         BrowserUI.newTab(aURLs[i], owner);
@@ -158,17 +158,17 @@
       let data = JSON.parse(_readFile(session));
       if (!data || data.windows.length == 0)
         return;
 
       let chromeWin = getChromeWin();
       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];
         if ("entries" in tabData)
           tabData = tabData.entries[0];
 
         let url = tabData.url;
         if (url.indexOf("about:") == 0)
@@ -275,49 +275,49 @@
           let placeHolder = document.getElementById("loadingAddons");
           placeHolder.innerHTML = "<div class='no-items'>" + document.getElementById("text-noaddons").textContent + "</div>";
           return;
         }
 
         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);
           }, false)
 
           let img = document.createElement("img");
           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);
       }
     }
 
     const kAddonsMaxDisplay = 2;
 
--- a/mobile/themes/core/aboutHome.css
+++ b/mobile/themes/core/aboutHome.css
@@ -100,54 +100,68 @@ html {
 
 .section-box > div:last-child {
   border-bottom: 0;
 }
 
 /* Make room for the image */
 .section-box > div > div,
 .section-row > div > div {
-  margin-left: 48px;
+  -moz-margin-start: 48px;
 }
 
 .section-box .title {
   color: black;
 }
 
 .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;
 }
 
 .section-box .inner {
   pointer-events: none;
 }
 
 .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;
 }
 
 #remoteTabs[disabled=true] > div > .favicon {
   opacity: 0.5;
 }
@@ -169,22 +183,29 @@ html {
 .section-row > div {
   position: relative;
   pointer-events: none;
 }
 
 .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;
 }
 
 .no-items {
   text-align: center;
 }