Bug 592562 - RTL small UI issues after the landing of bug 476423 [r=mfinkle]
authorVivien Nicolas <21@vingtetun.org>
Fri, 03 Sep 2010 03:27:20 +0200
changeset 66526 404e7296a9a6f2f8f41ae963599e010e024d4e1d
parent 66525 8bd55855a71a6e9cda5e5f0ec1c40258949b6c64
child 66527 9517703d45c379e33e65f2aac4671980870897d6
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
bugs592562, 476423
Bug 592562 - RTL small UI issues after the landing of bug 476423 [r=mfinkle]
mobile/chrome/content/Util.js
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.js
mobile/chrome/content/browser.xul
mobile/chrome/content/tabs.xml
mobile/themes/core/browser.css
--- a/mobile/chrome/content/Util.js
+++ b/mobile/chrome/content/Util.js
@@ -297,16 +297,18 @@ Util.Timeout.prototype = {
  */
 let Elements = {};
 
 [
   ["browserBundle",      "bundle_browser"],
   ["contentShowing",     "bcast_contentShowing"],
   ["urlbarState",        "bcast_urlbarState"],
   ["stack",              "stack"],
+  ["tabs",               "tabs-container"],
+  ["controls",           "browser-controls"],
   ["panelUI",            "panel-container"],
   ["viewBuffer",         "view-buffer"],
   ["toolbarContainer",   "toolbar-container"],
 ].forEach(function (elementGlobal) {
   let [name, id] = elementGlobal;
   Elements.__defineGetter__(name, function () {
     let element = document.getElementById(id);
     if (!element)
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -345,21 +345,18 @@ var BrowserUI = {
     if (!this._toolbarH) {
       let toolbar = document.getElementById("toolbar-main");
       this._toolbarH = toolbar.boxObject.height;
     }
     return this._toolbarH;
   },
 
   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() {
     delete this.starButton;
     return this.starButton = document.getElementById("tool-star");
   },
 
   sizeControls: function(windowW, windowH) {
@@ -1271,17 +1268,27 @@ var PageActions = {
 };
 
 var NewTabPopup = {
   _timeout: 0,
   _tabs: [],
 
   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() {
     let newtabStrings = Elements.browserBundle.getString("newtabpopup.opened");
     let label = PluralForm.get(this._tabs.length, newtabStrings).replace("#1", this._tabs.length);
 
     this.box.firstChild.setAttribute("value", label);
   },
@@ -1361,46 +1368,47 @@ var AwesomePanel = function(aElementId, 
       BrowserUI.activePanel = null;
       BrowserUI.goToURI(uri);
     }
   }
 };
 
 var BookmarkPopup = {
   get box() {
+    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;
-    // Hide the popup if there is any new page loading
     messageManager.addMessageListener("pagehide", function(aMessage) {
       self.hide();
     });
 
-    delete this.box;
-    return this.box = document.getElementById("bookmark-popup");
+    return this.box;
   },
 
   _bookmarkPopupTimeout: -1,
 
   hide : function hide() {
     if (this._bookmarkPopupTimeout != -1) {
       clearTimeout(this._bookmarkPopupTimeout);
       this._bookmarkPopupTimeout = -1;
     }
     this.box.hidden = true;
     BrowserUI.popPopup();
   },
 
   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;
         self.hide();
       }, 2000, this);
     }
 
     // include starButton here, so that click-to-dismiss works as expected
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -1008,45 +1008,42 @@ var Browser = {
   },
 
   /**
    * Compute the sidebar percentage visibility.
    *
    * @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();
-
-    if (leftbarCBR.left > ritebarCBR.left)
-      [ritebarCBR, leftbarCBR] = [leftbarCBR, ritebarCBR]; // switch in RTL case
-
-    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 visrect = new Rect(0, 0, window.innerWidth, 1);
-
-    let leftvis = visibility(leftbar, visrect);
-    let ritevis = visibility(ritebar, visrect);
-
-    return [leftvis, ritevis, leftw, ritew];
+    let [leftSidebar, rightSidebar] = [Elements.tabs.getBoundingClientRect(), Elements.controls.getBoundingClientRect()];
+    if (leftSidebar.left > rightSidebar.left)
+      [rightSidebar, leftSidebar] = [leftSidebar, rightSidebar]; // 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 leftTotalWidth = leftRect.width;
+    let leftVisibility = visibility(leftRect, visibleRect);
+
+    let rightTotalWidth = rightRect.width;
+    let rightVisibility = visibility(rightRect, visibleRect);
+
+    return [leftVisibility, rightVisibility, leftTotalWidth, rightTotalWidth];
   },
 
   /**
    * Compute the horizontal distance needed to scroll in order to snap the
    * sidebars into place.
    *
    * Visibility is computed by creating dummy rectangles for the sidebar and the
    * visible rect.  Sidebar rectangles come from getBoundingClientRect(), so
@@ -2217,26 +2214,33 @@ function showDownloadManager(aWindowCont
   // TODO: select the download with aID
 }
 
 var AlertsHelper = {
   _timeoutID: -1,
   _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) {
     this._clickable = aTextClickable || false;
     this._listener = aListener || null;
     this._cookie = aCookie || "";
 
     document.getElementById("alerts-image").setAttribute("src", aImageURL);
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -352,17 +352,17 @@
         <pageaction id="pageaction-search" title="&pageactions.search.addNew;"/>
       </hbox>
     </vbox>
 
     <vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">
       <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>
         <button id="bookmark-popup-edit" label="&bookmarkEdit.label;" class="button-dark" oncommand="BookmarkHelper.edit();"/>
         <spacer/>
         <button id="bookmark-popup-remove" label="&bookmarkRemove.label;" class="button-dark" oncommand="BookmarkPopup.hide(); BookmarkHelper.removeBookmarksForURI(getBrowser().currentURI);"/>
       </vbox>
     </vbox>
--- a/mobile/chrome/content/tabs.xml
+++ b/mobile/chrome/content/tabs.xml
@@ -4,19 +4,19 @@
     xmlns="http://www.mozilla.org/xbl"
     xmlns:xbl="http://www.mozilla.org/xbl"
     xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <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>
     </content>
     
    <implementation>
       <method name="_onClick">
         <body>
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -875,17 +875,17 @@ autocompleteresult.noresults > .autocomp
   }
 
   #awesome-header > toolbarbutton .toolbarbutton-text {
     font-size: 18px !important;
   }
 }
 
 #awesome-header > toolbarbutton:last-child {
-  border-right-width: 0;
+  -moz-border-end-width: 0;
 }
 
 #awesome-header > toolbarbutton:hover:active,
 #awesome-header > toolbarbutton[checked="true"] {
   border-color: #36373b !important;
   color: white !important;
   background: -moz-radial-gradient(#757575, #636363, #666769) !important;
 }
@@ -907,16 +907,20 @@ autocompleteresult.noresults > .autocomp
   min-width: 48px;
   min-height: 48px;
 }
 
 #awesome-header > toolbarbutton .toolbarbutton-text {
   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);
 }
 
 #awesome-header > toolbarbutton.choice-history {
   list-style-image: url(chrome://browser/skin/images/history-48.png);
 }
 
@@ -986,16 +990,17 @@ autocompleteresult.noresults > .autocomp
   margin-top: 8px; /* core spacing */
   -moz-box-pack: start;
 }
 
 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;
 }
 
 .documenttab-canvas {
   /* keep the unselected thumbnails aligned with the selected one */
   border: 8px solid #36373b;
   background-color: white;
 }
@@ -1004,16 +1009,20 @@ box[type="documenttab"] {
   border: 8px solid;
   -moz-border-radius: 3px;
   -moz-border-top-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
   -moz-border-right-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
   -moz-border-bottom-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
   -moz-border-left-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
 }
 
+.documenttab-close-container {
+  -moz-margin-end: 65px;
+}
+
 .documenttab-close {
   width: 40px;
   height: 40px;
   list-style-image: url("chrome://browser/skin/images/close-default-40.png");
 }
 
 hbox:hover:active > .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-active-40.png");
@@ -1195,16 +1204,26 @@ pageaction {
     width: 100%;
   }
 
   .prompt-button:last-child:not(:nth-child(odd)),
   pageaction[selector="last-child"][even=true] {
     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) {
   .prompt-button:last-child,
   pageaction[selector="last-child"] {
     -moz-border-radius-bottomleft: 8px;
     -moz-border-radius-bottomright: 8px;
   }
@@ -1307,16 +1326,20 @@ pageaction:hover:active > vbox > .pageac
 #alerts-container {
   -moz-transform: translatex(100%);
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 0.5s;
   margin-bottom: 20px;
   -moz-margin-end: 20px;
 }
 
+#alerts-container:-moz-locale-dir(rtl) {
+  -moz-transform: translatex(-100%);
+}
+
 #alerts-container.showing {
   -moz-transform: translatex(0);
 }
 
 #alerts-text {
   font-size: 18px !important;
   white-space: pre-wrap;
 }