Bug 1357656 - Part 2: Switch the direction of the tab title fade-out effect based on the directionality of the title string; r=mconley
authorEhsan Akhgari <ehsan@mozilla.com>
Fri, 09 Jun 2017 16:00:32 -0400
changeset 411439 7533679209b1d740374dcb3a8a36d1e23de36dff
parent 411438 2e6cc6c65a79ec24b566cd1d6714744ba8165d3e
child 411440 4bc441fc5860b4c6ebc22c3d261aa9025dfe15da
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1357656
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1357656 - Part 2: Switch the direction of the tab title fade-out effect based on the directionality of the title string; r=mconley
browser/base/content/tabbrowser.css
browser/base/content/tabbrowser.xml
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -46,21 +46,23 @@
 .tab-label-container {
   overflow: hidden;
 }
 
 .tab-label-container[pinned] {
   width: 0;
 }
 
-.tab-label-container[textoverflow]:not([pinned]) {
+.tab-label-container[textoverflow][dir=ltr]:not([pinned]) {
+  direction: ltr;
   mask-image: linear-gradient(to left, transparent, black 2em);
 }
 
-.tab-label-container[textoverflow]:not([pinned]):-moz-locale-dir(rtl) {
+.tab-label-container[textoverflow][dir=rtl]:not([pinned]) {
+  direction: rtl;
   mask-image: linear-gradient(to right, transparent, black 2em);
 }
 
 .tab-stack {
   vertical-align: top; /* for pinned tabs */
 }
 
 tabpanels {
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -1510,17 +1510,22 @@
         <parameter name="aLabel"/>
         <parameter name="aOptions"/>
         <body>
           <![CDATA[
             if (!aLabel || aTab.getAttribute("label") == aLabel) {
               return false;
             }
 
+            let dwu = window.QueryInterface(Ci.nsIInterfaceRequestor)
+                            .getInterface(Ci.nsIDOMWindowUtils);
+            let isRTL = dwu.getDirectionFromText(aLabel) == Ci.nsIDOMWindowUtils.DIRECTION_RTL;
+
             aTab.setAttribute("label", aLabel);
+            aTab.setAttribute("dir", isRTL ? "rtl" : "ltr");
             aTab._labelIsContentTitle = aOptions && aOptions.isContentTitle;
 
             // Dispatch TabAttrModified event unless we're setting the label
             // before the TabOpen event was dispatched.
             if (!aOptions || !aOptions.beforeTabOpen) {
               this._tabAttrModified(aTab, ["label"]);
             }
 
@@ -7232,17 +7237,17 @@
                      anonid="sharing-icon"
                      class="tab-sharing-icon-overlay"
                      role="presentation"/>
           <xul:image xbl:inherits="crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected"
                      anonid="overlay-icon"
                      class="tab-icon-overlay"
                      role="presentation"/>
           <xul:hbox class="tab-label-container"
-                    xbl:inherits="pinned,selected=visuallyselected"
+                    xbl:inherits="pinned,selected=visuallyselected,dir"
                     onoverflow="this.setAttribute('textoverflow', 'true');"
                     onunderflow="this.removeAttribute('textoverflow');"
                     flex="1">
             <xul:label class="tab-text tab-label"
                        xbl:inherits="xbl:text=label,accesskey,fadein,pinned,selected=visuallyselected,attention"
                        role="presentation"/>
           </xul:hbox>
           <xul:image xbl:inherits="soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected"