Bug 592562 - RTL small UI issues after the landing of bug 476423 [r=mfinkle]

mobile/chrome/content/Util.js

@@ -302,6 +302,8 @@ let Elements = {};
   ["contentShowing",     "bcast_contentShowing"],
   ["urlbarState",        "bcast_urlbarState"],
   ["stack",              "stack"],
+  ["tabs",               "tabs-container"],
+  ["controls",           "browser-controls"],
   ["panelUI",            "panel-container"],
   ["viewBuffer",         "view-buffer"],
   ["toolbarContainer",   "toolbar-container"],

mobile/chrome/content/browser-ui.js

@@ -350,11 +350,8 @@ var BrowserUI = {
   },
 
   get sidebarW() {
-    if (!this._sidebarW) {
-      let sidebar = document.getElementById("browser-controls");
-      this._sidebarW = sidebar.boxObject.width;
-    }
-    return this._sidebarW;
+    delete this._sidebarW;
+    return this._sidebarW = Elements.controls.getBoundingClientRect().width;
   },
 
   get starButton() {
@@ -1276,7 +1273,17 @@ var NewTabPopup = {
 
   get box() {
     delete this.box;
-    return this.box = document.getElementById("newtab-popup");
+    let box = document.getElementById("newtab-popup");
+
+    // Move the popup on the other side if we are in RTL
+    let [leftSidebar, rightSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
+    if (leftSidebar.left > rightSidebar.left) {
+      let margin = box.getAttribute("left");
+      box.removeAttribute("left");
+      box.setAttribute("right", margin);
+    }
+
+    return this.box = box;
   },
 
   _updateLabel: function() {
@@ -1366,14 +1373,21 @@ var AwesomePanel = function(aElementId, aCommandId) {
 
 var BookmarkPopup = {
   get box() {
-    let self = this;
+    delete this.box;
+    this.box = document.getElementById("bookmark-popup");
+
+    const margin = 10;
+    let [tabsSidebar, controlsSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
+    this.box.setAttribute(tabsSidebar.left < controlsSidebar.left ? "right" : "left", controlsSidebar.width + margin);
+    this.box.top  = BrowserUI.starButton.getBoundingClientRect().top + margin;
+
     // Hide the popup if there is any new page loading
+    let self = this;
     messageManager.addMessageListener("pagehide", function(aMessage) {
       self.hide();
     });
 
-    delete this.box;
-    return this.box = document.getElementById("bookmark-popup");
+    return this.box;
   },
 
   _bookmarkPopupTimeout: -1,
@@ -1388,14 +1402,8 @@ var BookmarkPopup = {
   },
 
   show : function show(aAutoClose) {
-    const margin = 10;
-
     this.box.hidden = false;
 
-    let [,,,controlsW] = Browser.computeSidebarVisibility();
-    this.box.left = window.innerWidth - (this.box.getBoundingClientRect().width + controlsW + margin);
-    this.box.top  = BrowserUI.starButton.getBoundingClientRect().top + margin;
-
     if (aAutoClose) {
       this._bookmarkPopupTimeout = setTimeout(function (self) {
         self._bookmarkPopupTimeout = -1;

mobile/chrome/content/browser.js

@@ -1013,35 +1013,32 @@ var Browser = {
    * @param [optional] dx
    * @param [optional] dy an offset distance at which to perform the visibility
    * computation
-   * @return [leftVisibility, rightVisiblity, leftTotalWidth, rightTotalWidth]
    */
   computeSidebarVisibility: function computeSidebarVisibility(dx, dy) {
-    function visibility(bar, visrect) {
-      let w = bar.width;
-      bar.restrictTo(visrect);
-      return bar.width / w;
+    function visibility(aSidebarRect, aVisibleRect) {
+      let width = aSidebarRect.width;
+      aSidebarRect.restrictTo(aVisibleRect);
+      return aSidebarRect.width / width;
     }
 
     if (!dx) dx = 0;
     if (!dy) dy = 0;
 
-    let leftbarCBR = document.getElementById('tabs-container').getBoundingClientRect();
-    let ritebarCBR = document.getElementById('browser-controls').getBoundingClientRect();
+    let [leftSidebar, rightSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
+    if (leftSidebar.left > rightSidebar.left)
+      [rightSidebar, leftSidebar] = [leftSidebar, rightSidebar]; // switch in RTL case
 
-    if (leftbarCBR.left > ritebarCBR.left)
-      [ritebarCBR, leftbarCBR] = [leftbarCBR, ritebarCBR]; // switch in RTL case
+    let visibleRect = new Rect(0, 0, window.innerWidth, 1);
+    let leftRect = new Rect(Math.round(leftSidebar.left) - dx, 0, Math.round(leftSidebar.width), 1);
+    let rightRect = new Rect(Math.round(rightSidebar.left) - dx, 0, Math.round(rightSidebar.width), 1);
 
-    let leftbar = new Rect(Math.round(leftbarCBR.left) - dx, 0, Math.round(leftbarCBR.width), 1);
-    let ritebar = new Rect(Math.round(ritebarCBR.left) - dx, 0, Math.round(ritebarCBR.width), 1);
-    let leftw = leftbar.width;
-    let ritew = ritebar.width;
+    let leftTotalWidth = leftRect.width;
+    let leftVisibility = visibility(leftRect, visibleRect);
 
-    let visrect = new Rect(0, 0, window.innerWidth, 1);
+    let rightTotalWidth = rightRect.width;
+    let rightVisibility = visibility(rightRect, visibleRect);
 
-    let leftvis = visibility(leftbar, visrect);
-    let ritevis = visibility(ritebar, visrect);
-
-    return [leftvis, ritevis, leftw, ritew];
+    return [leftVisibility, rightVisibility, leftTotalWidth, rightTotalWidth];
   },
 
   /**
@@ -2222,16 +2219,23 @@ var AlertsHelper = {
   _listener: null,
   _cookie: "",
   _clickable: false,
-  _container: null,
   get container() {
-    if (!this._container) {
-      this._container = document.getElementById("alerts-container");
-      let self = this;
-      this._container.addEventListener("transitionend", function() {
-        self.alertTransitionOver();
-      }, true);
+    delete this.container;
+    let container = document.getElementById("alerts-container");
+
+    // Move the popup on the other side if we are in RTL
+    let [leftSidebar, rightSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
+    if (leftSidebar.left > rightSidebar.left) {
+      container.removeAttribute("right");
+      container.setAttribute("left", "0");
     }
-    return this._container;
+
+    let self = this;
+    container.addEventListener("transitionend", function() {
+      self.alertTransitionOver();
+    }, true);
+
+    return this.container = container;
   },
 
   showAlertNotification: function ah_show(aImageURL, aTitle, aText, aTextClickable, aCookie, aListener) {

mobile/chrome/content/browser.xul

@@ -357,7 +357,7 @@
       <label/>
     </vbox>
 
-    <vbox id="bookmark-popup" hidden="true" class="dialog-dark" align="center" left="0">
+    <vbox id="bookmark-popup" hidden="true" class="dialog-dark" align="center">
       <label value="&bookmarkPopup.label;"/>
       <separator class="thin"/>
       <vbox>

mobile/chrome/content/tabs.xml

@@ -9,9 +9,9 @@
   <binding id="documenttab">
     <content>
       <xul:stack anonid="page" class="documenttab-container" flex="1">
-        <html:canvas anonid="canvas" class="documenttab-canvas" left="8" width="106" height="64" moz-opaque="true"
+        <html:canvas anonid="canvas" class="documenttab-canvas" left="0" width="106" height="64" moz-opaque="true"
           onclick="document.getBindingParent(this)._onClick()" xbl:inherits="selected"/>
-        <xul:hbox left="0" top="10" height="64" width="55" align="center" onclick="document.getBindingParent(this)._close()">
+        <xul:hbox class="documenttab-close-container" left="0" top="10" height="64" width="55" align="center" onclick="document.getBindingParent(this)._close()">
           <xul:image anonid="close" class="documenttab-close" mousethrough="always"/>
         </xul:hbox>
       </xul:stack>

mobile/themes/core/browser.css

@@ -880,7 +880,7 @@ autocompleteresult.noresults > .autocomplete-item-label {
 }
 
 #awesome-header > toolbarbutton:last-child {
-  border-right-width: 0;
+  -moz-border-end-width: 0;
 }
 
 #awesome-header > toolbarbutton:hover:active,
@@ -912,6 +912,10 @@ autocompleteresult.noresults > .autocomplete-item-label {
   text-align: left;
 }
 
+#awesome-header > toolbarbutton .toolbarbutton-text:-moz-locale-dir(rtl) {
+  text-align: right;
+}
+
 #awesome-header > toolbarbutton.choice-bookmarks {
   list-style-image: url(chrome://browser/skin/images/bookmarks-48.png);
 }
@@ -991,6 +995,7 @@ box[type="documenttab"] {
   /* display:block allow us to change the line-height, it won't work otherwise */
   display: block;
   width: 128px;
+  -moz-margin-start: 8px; /* core spacing */
   line-height: 0;
 }
 
@@ -1009,6 +1014,10 @@ box[type="documenttab"] {
   -moz-border-left-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
 }
 
+.documenttab-close-container {
+  -moz-margin-end: 65px;
+}
+
 .documenttab-close {
   width: 40px;
   height: 40px;
@@ -1200,6 +1209,16 @@ pageaction {
     border-bottom: 1px solid #fff;
     -moz-border-radius-bottomright: 8px;
   }
+
+  .prompt-button:nth-last-child(2):not(:nth-child(even)):-moz-locale-dir(rtl) {
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-bottomright: 8px;
+  }
+
+  .prompt-button:last-child:not(:nth-child(odd)):-moz-locale-dir(rtl) {
+    -moz-border-radius-bottomright: 0;
+    -moz-border-radius-bottomleft: 8px;
+  }
 }
 
 @media (max-width: 499px) {
@@ -1312,6 +1331,10 @@ pageaction:hover:active > vbox > .pageaction-desc {
   -moz-margin-end: 20px;
 }
 
+#alerts-container:-moz-locale-dir(rtl) {
+  -moz-transform: translatex(-100%);
+}
+
 #alerts-container.showing {
   -moz-transform: translatex(0);
 }