Bug 1509651 - Stop flushing style for knowing the UI direction. r=florian
authorDão Gottwald <dao@mozilla.com>
Mon, 26 Nov 2018 11:59:04 +0000
changeset 504398 7bff5a02441019a61423d4038174e6514cf0c252
parent 504397 19f0f3b9cf1a589c9c7ed1074c0a513ddbdd9d9a
child 504399 e35e048ef39639d5c5038ade352a12e2957bdf2e
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs1509651
milestone65.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 1509651 - Stop flushing style for knowing the UI direction. r=florian Differential Revision: https://phabricator.services.mozilla.com/D12827
browser/base/content/browser-sidebar.js
browser/base/content/browser.js
browser/base/content/tabbrowser.js
browser/base/content/tabbrowser.xml
browser/components/customizableui/CustomizeMode.jsm
browser/components/customizableui/DragPositionManager.jsm
browser/components/customizableui/PanelMultiView.jsm
browser/components/search/content/search.xml
browser/components/urlbar/UrlbarView.jsm
--- a/browser/base/content/browser-sidebar.js
+++ b/browser/base/content/browser-sidebar.js
@@ -126,17 +126,17 @@ var SidebarUI = {
 
   showSwitcherPanel() {
     this._ensureShortcutsShown();
     this._switcherPanel.addEventListener("popuphiding", () => {
       this._switcherTarget.classList.remove("active");
     }, {once: true});
 
     // Combine start/end position with ltr/rtl to set the label in the popup appropriately.
-    let label = this._positionStart == this.isRTL ?
+    let label = this._positionStart == RTL_UI ?
                   gNavigatorBundle.getString("sidebar.moveToLeft") :
                   gNavigatorBundle.getString("sidebar.moveToRight");
     this._reversePositionButton.setAttribute("label", label);
 
     this._switcherPanel.hidden = false;
     this._switcherPanel.openPopup(this._icon);
     this._switcherTarget.classList.add("active");
   },
@@ -518,11 +518,8 @@ var SidebarUI = {
     }
   },
 };
 
 // Add getters related to the position here, since we will want them
 // available for both startDelayedLoad and init.
 XPCOMUtils.defineLazyPreferenceGetter(SidebarUI, "_positionStart",
   SidebarUI.POSITION_START_PREF, true, SidebarUI.setPosition.bind(SidebarUI));
-XPCOMUtils.defineLazyGetter(SidebarUI, "isRTL", () => {
-  return getComputedStyle(document.documentElement).direction == "rtl";
-});
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -158,16 +158,20 @@ XPCOMUtils.defineLazyServiceGetters(this
 });
 
 if (AppConstants.MOZ_CRASHREPORTER) {
   XPCOMUtils.defineLazyServiceGetter(this, "gCrashReporter",
                                      "@mozilla.org/xre/app-info;1",
                                      "nsICrashReporter");
 }
 
+XPCOMUtils.defineLazyGetter(this, "RTL_UI", () => {
+  return document.documentElement.matches(":-moz-locale-dir(rtl)");
+});
+
 XPCOMUtils.defineLazyGetter(this, "gBrowserBundle", function() {
   return Services.strings.createBundle("chrome://browser/locale/browser.properties");
 });
 XPCOMUtils.defineLazyGetter(this, "gNavigatorBundle", function() {
   // This is a stringbundle-like interface to gBrowserBundle, formerly a getter for
   // the "bundle_browser" element.
   return {
     getString(key) {
--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -3860,19 +3860,18 @@ window._gBrowser = {
 
   moveTabToEnd() {
     let tabPos = this.selectedTab._tPos;
     if (tabPos < this.browsers.length - 1)
       this.moveTabTo(this.selectedTab, this.browsers.length - 1);
   },
 
   moveTabOver(aEvent) {
-    let direction = window.getComputedStyle(document.documentElement).direction;
-    if ((direction == "ltr" && aEvent.keyCode == KeyEvent.DOM_VK_RIGHT) ||
-        (direction == "rtl" && aEvent.keyCode == KeyEvent.DOM_VK_LEFT)) {
+    if ((!RTL_UI && aEvent.keyCode == KeyEvent.DOM_VK_RIGHT) ||
+        (RTL_UI && aEvent.keyCode == KeyEvent.DOM_VK_LEFT)) {
       this.moveTabForward();
     } else {
       this.moveTabBackward();
     }
   },
 
   /**
    * @param   aTab
@@ -4239,17 +4238,17 @@ window._gBrowser = {
       if (!aEvent.metaKey)
         return;
 
       var offset = 1;
       switch (aEvent.charCode) {
         case "}".charCodeAt(0):
           offset = -1;
         case "{".charCodeAt(0):
-          if (window.getComputedStyle(document.documentElement).direction == "ltr")
+          if (!RTL_UI)
             offset *= -1;
           this.tabContainer.advanceSelectedTab(offset, true);
           aEvent.preventDefault();
       }
     }
   },
 
   createTooltip(event) {
@@ -5323,25 +5322,24 @@ var StatusPanel = {
       MousePosTracker.removeListener(this);
     }
 
     return val;
   },
 
   getMouseTargetRect() {
     let container = this.panel.parentNode;
-    let alignRight = document.documentElement.matches(":-moz-locale-dir(rtl)");
     let panelRect = window.windowUtils.getBoundsWithoutFlushing(this.panel);
     let containerRect = window.windowUtils.getBoundsWithoutFlushing(container);
 
     return {
       top:    panelRect.top,
       bottom: panelRect.bottom,
-      left:   alignRight ? containerRect.right - panelRect.width : containerRect.left,
-      right:  alignRight ? containerRect.right : containerRect.left + panelRect.width,
+      left:   RTL_UI ? containerRect.right - panelRect.width : containerRect.left,
+      right:  RTL_UI ? containerRect.right : containerRect.left + panelRect.width,
     };
   },
 
   onMouseEnter() {
     this._mirror();
   },
 
   onMouseLeave() {
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -602,24 +602,23 @@
           if (screenX == draggedTab._dragData.animLastScreenX)
             return;
 
           // Direction of the mouse movement.
           let ltrMove = screenX > draggedTab._dragData.animLastScreenX;
 
           draggedTab._dragData.animLastScreenX = screenX;
 
-          let rtl = (window.getComputedStyle(this).direction == "rtl");
           let pinned = draggedTab.pinned;
           let numPinned = gBrowser._numPinnedTabs;
           let tabs = this._getVisibleTabs()
                          .slice(pinned ? 0 : numPinned,
                                 pinned ? numPinned : undefined);
 
-          if (rtl) {
+          if (RTL_UI) {
             tabs.reverse();
             // Copy moving tabs array to avoid infinite reversing.
             movingTabs = [...movingTabs].reverse();
           }
           let tabWidth = draggedTab.getBoundingClientRect().width;
           let shiftWidth = tabWidth * movingTabs.length;
           draggedTab._dragData.tabWidth = tabWidth;
 
@@ -693,19 +692,19 @@
             if (tab != draggedTab) {
               let shift = getTabShift(tab, newIndex);
               tab.style.transform = shift ? "translateX(" + shift + "px)" : "";
             }
           }
 
           function getTabShift(tab, dropIndex) {
             if (tab._tPos < draggedTab._tPos && tab._tPos >= dropIndex)
-              return (rtl ? -shiftWidth : shiftWidth);
+              return (RTL_UI ? -shiftWidth : shiftWidth);
             if (tab._tPos > draggedTab._tPos && tab._tPos < dropIndex)
-              return (rtl ? shiftWidth : -shiftWidth);
+              return (RTL_UI ? shiftWidth : -shiftWidth);
             return 0;
           }
         ]]></body>
       </method>
 
       <method name="_finishAnimateTabMove">
         <body><![CDATA[
           if (this.getAttribute("movingtab") != "true") {
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -1625,23 +1625,16 @@ CustomizeMode.prototype = {
   toggleDragSpace(aShouldShowDragSpace) {
     Services.prefs.setBoolPref(kExtraDragSpacePref, aShouldShowDragSpace);
   },
 
   _getBoundsWithoutFlushing(element) {
     return this.window.windowUtils.getBoundsWithoutFlushing(element);
   },
 
-  get _dir() {
-    if (!this.__dir) {
-      this.__dir = this.window.getComputedStyle(this.document.documentElement).direction;
-    }
-    return this.__dir;
-  },
-
   _onDragStart(aEvent) {
     __dumpDragData(aEvent);
     let item = aEvent.target;
     while (item && item.localName != "toolbarpaletteitem") {
       if (item.localName == "toolbar" || item.id == kPaletteId ||
           item.id == "customization-panelHolder") {
         return;
       }
@@ -1760,23 +1753,23 @@ CustomizeMode.prototype = {
         dragValue = "after";
       } else {
         dragOverItem = targetParent.children[position];
         if (targetAreaType == "toolbar") {
           // Check if the aDraggedItem is hovered past the first half of dragOverItem
           let itemRect = this._getBoundsWithoutFlushing(dragOverItem);
           let dropTargetCenter = itemRect.left + (itemRect.width / 2);
           let existingDir = dragOverItem.getAttribute("dragover");
-          let dirFactor = this._dir == "ltr" ? 1 : -1;
+          let dirFactor = this.window.RTL_UI ? -1 : 1;
           if (existingDir == "before") {
             dropTargetCenter += (parseInt(dragOverItem.style.borderInlineStartWidth) || 0) / 2 * dirFactor;
           } else {
             dropTargetCenter -= (parseInt(dragOverItem.style.borderInlineEndWidth) || 0) / 2 * dirFactor;
           }
-          let before = this._dir == "ltr" ? aEvent.clientX < dropTargetCenter : aEvent.clientX > dropTargetCenter;
+          let before = this.window.RTL_UI ? aEvent.clientX > dropTargetCenter : aEvent.clientX < dropTargetCenter;
           dragValue = before ? "before" : "after";
         } else if (targetAreaType == "menu-panel") {
           let itemRect = this._getBoundsWithoutFlushing(dragOverItem);
           let dropTargetCenter = itemRect.top + (itemRect.height / 2);
           let existingDir = dragOverItem.getAttribute("dragover");
           if (existingDir == "before") {
             dropTargetCenter += (parseInt(dragOverItem.style.borderBlockStartWidth) || 0) / 2;
           } else {
@@ -2477,18 +2470,18 @@ CustomizeMode.prototype = {
       if (ball[0] <= 0 || ball[0] >= gameSide) {
         ballDxDy[0] *= -1;
       }
     }
 
     function updatePlayers() {
       if (keydown) {
         let p1Adj = 1;
-        if ((keydown == 37 && !isRTL) ||
-            (keydown == 39 && isRTL)) {
+        if ((keydown == 37 && !window.RTL_UI) ||
+            (keydown == 39 && window.RTL_UI)) {
           p1Adj = -1;
         }
         p1 += p1Adj * 10 * keydownAdj;
       }
 
       let sign = Math.sign(ballDxDy[0]);
       if ((sign > 0 && ball[0] > p2 + paddleWidth / 2) ||
           (sign < 0 && ball[0] < p2 + paddleWidth / 2)) {
@@ -2513,26 +2506,26 @@ CustomizeMode.prototype = {
         quit = true;
       }
       ball = ballDef.slice();
       ballDxDy = ballDxDyDef.slice();
       ballDxDy[1] *= score / winScore + 1;
     }
 
     function draw() {
-      let xAdj = isRTL ? -1 : 1;
+      let xAdj = window.RTL_UI ? -1 : 1;
       elements["wp-player1"].style.transform = "translate(" + (xAdj * p1) + "px, -37px)";
       elements["wp-player2"].style.transform = "translate(" + (xAdj * p2) + "px, " + gameSide + "px)";
       elements["wp-ball"].style.transform = "translate(" + (xAdj * ball[0]) + "px, " + ball[1] + "px)";
       elements["wp-score"].textContent = score;
       elements["wp-lives"].setAttribute("lives", lives);
       if (score >= winScore) {
         let arena = elements.arena;
         let image = "url(chrome://browser/skin/customizableui/whimsy.png)";
-        let position = `${(isRTL ? gameSide : 0) + (xAdj * ball[0]) - 10}px ${ball[1] - 10}px`;
+        let position = `${(window.RTL_UI ? gameSide : 0) + (xAdj * ball[0]) - 10}px ${ball[1] - 10}px`;
         let repeat = "no-repeat";
         let size = "20px";
         if (arena.style.backgroundImage) {
           if (arena.style.backgroundImage.split(",").length >= 160) {
             quit = true;
           }
 
           image += ", " + arena.style.backgroundImage;
@@ -2623,17 +2616,16 @@ CustomizeMode.prototype = {
     let lives = 5;
     let winScore = 11;
     let quit = false;
     let document = this.document;
     let rAFHandle = 0;
     let elements = {
       arena: document.getElementById("customization-pong-arena"),
     };
-    let isRTL = document.documentElement.matches(":-moz-locale-dir(rtl)");
 
     document.addEventListener("keydown", onkeydown);
     document.addEventListener("keyup", onkeyup);
 
     for (let id of ["player1", "player2", "ball", "score", "lives"]) {
       let el = document.createXULElement("box");
       el.id = "wp-" + id;
       elements[el.id] = elements.arena.appendChild(el);
--- a/browser/components/customizableui/DragPositionManager.jsm
+++ b/browser/components/customizableui/DragPositionManager.jsm
@@ -7,18 +7,17 @@
 var gManagers = new WeakMap();
 
 const kPaletteId = "customization-palette";
 
 var EXPORTED_SYMBOLS = ["DragPositionManager"];
 
 function AreaPositionManager(aContainer) {
   // Caching the direction and bounds of the container for quick access later:
-  let window = aContainer.ownerGlobal;
-  this._dir = window.getComputedStyle(aContainer).direction;
+  this._rtl = aContainer.ownerGlobal.RTL_UI;
   let containerRect = aContainer.getBoundingClientRect();
   this._containerInfo = {
     left: containerRect.left,
     right: containerRect.right,
     top: containerRect.top,
     width: containerRect.width,
   };
   this._horizontalDistance = null;
@@ -79,23 +78,23 @@ AreaPositionManager.prototype = {
         minCartesian = cartesianDiff;
         closest = node;
       }
     }
 
     // Now correct this node based on what we're dragging
     if (closest) {
       let targetBounds = this._lazyStoreGet(closest);
-      let farSide = this._dir == "ltr" ? "right" : "left";
+      let farSide = this._rtl ? "left" : "right";
       let outsideX = targetBounds[farSide];
       // Check if we're closer to the next target than to this one:
       // Only move if we're not targeting a node in a different row:
       if (aY > targetBounds.top && aY < targetBounds.bottom) {
-        if ((this._dir == "ltr" && aX > outsideX) ||
-            (this._dir == "rtl" && aX < outsideX)) {
+        if ((!this._rtl && aX > outsideX) ||
+            (this._rtl && aX < outsideX)) {
           return closest.nextElementSibling || aContainer;
         }
       }
     }
     return closest;
   },
 
   /**
@@ -165,17 +164,17 @@ AreaPositionManager.prototype = {
       this._lastPlaceholderInsertion = null;
     }
   },
 
   _diffWithNext(aNode, aSize) {
     let xDiff;
     let yDiff = null;
     let nodeBounds = this._lazyStoreGet(aNode);
-    let side = this._dir == "ltr" ? "left" : "right";
+    let side = this._rtl ? "right" : "left";
     let next = this._getVisibleSiblingForDirection(aNode, "next");
     // First we determine the transform along the x axis.
     // Usually, there will be a next node to base this on:
     if (next) {
       let otherBounds = this._lazyStoreGet(next);
       xDiff = otherBounds[side] - nodeBounds[side];
       // We set this explicitly because otherwise some strange difference
       // between the height and the actual difference between line creeps in
@@ -183,30 +182,30 @@ AreaPositionManager.prototype = {
       yDiff = otherBounds.top - nodeBounds.top;
     } else {
       // We don't have a sibling whose position we can use. First, let's see
       // if we're also the first item (which complicates things):
       let firstNode = this._firstInRow(aNode);
       if (aNode == firstNode) {
         // Maybe we stored the horizontal distance between nodes,
         // if not, we'll use the width of the incoming node as a proxy:
-        xDiff = this._horizontalDistance || (this._dir == "ltr" ? 1 : -1) * aSize.width;
+        xDiff = this._horizontalDistance || (this._rtl ? -1 : 1) * aSize.width;
       } else {
         // If not, we should be able to get the distance to the previous node
         // and use the inverse, unless there's no room for another node (ie we
         // are the last node and there's no room for another one)
         xDiff = this._moveNextBasedOnPrevious(aNode, nodeBounds, firstNode);
       }
     }
 
     // If we've not determined the vertical difference yet, check it here
     if (yDiff === null) {
       // If the next node is behind rather than in front, we must have moved
       // vertically:
-      if ((xDiff > 0 && this._dir == "rtl") || (xDiff < 0 && this._dir == "ltr")) {
+      if ((xDiff > 0 && this._rtl) || (xDiff < 0 && !this._rtl)) {
         yDiff = aSize.height;
       } else {
         // Otherwise, we haven't
         yDiff = 0;
       }
     }
     return "translate(" + xDiff + "px, " + yDiff + "px)";
   },
@@ -216,24 +215,24 @@ AreaPositionManager.prototype = {
    * to base that on.
    * @param aNode           the node to transform
    * @param aNodeBounds     the bounding rect info of this node
    * @param aFirstNodeInRow the first node in aNode's row
    */
   _moveNextBasedOnPrevious(aNode, aNodeBounds, aFirstNodeInRow) {
     let next = this._getVisibleSiblingForDirection(aNode, "previous");
     let otherBounds = this._lazyStoreGet(next);
-    let side = this._dir == "ltr" ? "left" : "right";
+    let side = this._rtl ? "right" : "left";
     let xDiff = aNodeBounds[side] - otherBounds[side];
     // If, however, this means we move outside the container's box
     // (i.e. the row in which this item is placed is full)
     // we should move it to align with the first item in the next row instead
-    let bound = this._containerInfo[this._dir == "ltr" ? "right" : "left"];
-    if ((this._dir == "ltr" && xDiff + aNodeBounds.right > bound) ||
-        (this._dir == "rtl" && xDiff + aNodeBounds.left < bound)) {
+    let bound = this._containerInfo[this._rtl ? "left" : "right"];
+    if ((!this._rtl && xDiff + aNodeBounds.right > bound) ||
+        (this._rtl && xDiff + aNodeBounds.left < bound)) {
       xDiff = this._lazyStoreGet(aFirstNodeInRow)[side] - aNodeBounds[side];
     }
     return xDiff;
   },
 
   /**
    * Get position details from our cache. If the node is not yet cached, get its position
    * information and cache it now.
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -386,20 +386,16 @@ var PanelMultiView = class extends Assoc
     this.node.prepend(viewContainer);
 
     this.openViews = [];
 
     this._panel.addEventListener("popupshowing", this);
     this._panel.addEventListener("popuppositioned", this);
     this._panel.addEventListener("popuphidden", this);
     this._panel.addEventListener("popupshown", this);
-    let cs = this.window.getComputedStyle(this.document.documentElement);
-    // Set CSS-determined attributes now to prevent a layout flush when we do
-    // it when transitioning between panels.
-    this._dir = cs.direction;
 
     // Proxy these public properties and methods, as used elsewhere by various
     // parts of the browser, to this instance.
     ["goBack", "showSubView"].forEach(method => {
       Object.defineProperty(this.node, method, {
         enumerable: true,
         value: (...args) => this[method](...args),
       });
@@ -925,17 +921,17 @@ var PanelMultiView = class extends Assoc
 
       this._offscreenViewStack.style.removeProperty("min-height");
     }
 
     this._transitioning = true;
     details.phase = TRANSITION_PHASES.PREPARE;
 
     // The 'magic' part: build up the amount of pixels to move right or left.
-    let moveToLeft = (this._dir == "rtl" && !reverse) || (this._dir == "ltr" && reverse);
+    let moveToLeft = (this.window.RTL_UI && !reverse) || (!this.window.RTL_UI && reverse);
     let deltaX = prevPanelView.knownWidth;
     let deepestNode = reverse ? previousViewNode : viewNode;
 
     // With a transition when navigating backwards - user hits the 'back'
     // button - we need to make sure that the views are positioned in a way
     // that a translateX() unveils the previous view from the right direction.
     if (reverse)
       this._viewStack.style.marginInlineStart = "-" + deltaX + "px";
@@ -1089,17 +1085,17 @@ var PanelMultiView = class extends Assoc
       return;
     }
     switch (aEvent.type) {
       case "keydown":
         // Since we start listening for the "keydown" event when the popup is
         // already showing and stop listening when the panel is hidden, we
         // always have at least one view open.
         let currentView = this.openViews[this.openViews.length - 1];
-        currentView.keyNavigation(aEvent, this._dir);
+        currentView.keyNavigation(aEvent);
         break;
       case "mousemove":
         this.openViews.forEach(panelView => panelView.clearNavigation());
         break;
       case "popupshowing": {
         this._viewContainer.setAttribute("panelopen", "true");
         if (!this.node.hasAttribute("disablekeynav")) {
           this.window.addEventListener("keydown", this);
@@ -1516,20 +1512,18 @@ var PanelView = class extends Associated
    * Thus, in LTR mode:
    *  - The Right key functions the same as the Enter key, simulating a click
    *  - The Left key triggers a navigation back to the previous view.
    *
    * Key navigation is only enabled while the view is active, meaning that this
    * method will return early if it is invoked during a sliding transition.
    *
    * @param {KeyEvent} event
-   * @param {String} dir
-   *        Direction for arrow navigation, either "ltr" or "rtl".
    */
-  keyNavigation(event, dir) {
+  keyNavigation(event) {
     if (!this.active) {
       return;
     }
 
     let buttons = this._navigableElements;
     if (!buttons.length) {
       return;
     }
@@ -1557,18 +1551,18 @@ var PanelView = class extends Associated
         break;
       case "End":
         stop();
         this.focusLastNavigableElement();
         break;
       case "ArrowLeft":
       case "ArrowRight": {
         stop();
-        if ((dir == "ltr" && keyCode == "ArrowLeft") ||
-            (dir == "rtl" && keyCode == "ArrowRight")) {
+        if ((!this.window.RTL_UI && keyCode == "ArrowLeft") ||
+            (this.window.RTL_UI && keyCode == "ArrowRight")) {
           this.node.panelMultiView.goBack();
           break;
         }
         // If the current button is _not_ one that points to a subview, pressing
         // the arrow key shouldn't do anything.
         let button = this.selectedElement;
         if (!button || !button.classList.contains("subviewbutton-nav")) {
           break;
--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -184,21 +184,19 @@
             }
 
             popup.mInput = this;
             // clear any previous selection, see bugs 400671 and 488357
             popup.selectedIndex = -1;
 
             document.popupNode = null;
 
-            const isRTL = getComputedStyle(this, "").direction == "rtl";
-
             var outerRect = this.getBoundingClientRect();
             var innerRect = this.inputField.getBoundingClientRect();
-            let width = isRTL ?
+            let width = RTL_UI ?
                         innerRect.right - outerRect.left :
                         outerRect.right - innerRect.left;
             popup.setAttribute("width", width > 100 ? width : 100);
 
             // invalidate() depends on the width attribute
             popup._invalidate();
 
             var yOffset = outerRect.bottom - innerRect.bottom;
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -118,35 +118,36 @@ class UrlbarView {
 
     // Subtract two pixels for left and right borders on the panel.
     this._mainContainer.style.maxWidth = (width - 2) + "px";
 
     // Keep the popup items' site icons aligned with the urlbar's identity
     // icon if it's not too far from the edge of the window.  We define
     // "too far" as "more than 30% of the window's width AND more than
     // 250px".
-    let isRTL = this.document.documentElement.matches(":-moz-locale-dir(rtl)");
-    let boundToCheck = isRTL ? "right" : "left";
+    let boundToCheck = this.window.RTL_UI ? "right" : "left";
     let inputRect = this._getBoundsWithoutFlushing(this.urlbar.textbox);
     let startOffset = Math.abs(inputRect[boundToCheck] - documentRect[boundToCheck]);
     let alignSiteIcons = startOffset / width <= 0.3 || startOffset <= 250;
     if (alignSiteIcons) {
       // Calculate the end margin if we have a start margin.
-      let boundToCheckEnd = isRTL ? "left" : "right";
+      let boundToCheckEnd = this.window.RTL_UI ? "left" : "right";
       let endOffset = Math.abs(inputRect[boundToCheckEnd] -
                                documentRect[boundToCheckEnd]);
       if (endOffset > startOffset * 2) {
         // Provide more space when aligning would result in an unbalanced
         // margin. This allows the location bar to be moved to the start
         // of the navigation toolbar to reclaim space for results.
         endOffset = startOffset;
       }
       let identityIcon = this.document.getElementById("identity-icon");
       let identityRect = this._getBoundsWithoutFlushing(identityIcon);
-      let start = isRTL ? documentRect.right - identityRect.right : identityRect.left;
+      let start = this.window.RTL_UI ?
+                    documentRect.right - identityRect.right :
+                    identityRect.left;
 
       this.panel.style.setProperty("--item-padding-start", Math.round(start) + "px");
       this.panel.style.setProperty("--item-padding-end", Math.round(endOffset) + "px");
     } else {
       this.panel.style.removeProperty("--item-padding-start");
       this.panel.style.removeProperty("--item-padding-end");
     }
   }