Bug 1425964 - Prevent sync reflows by using document.dir to check for locale direction. r=Honza,jdescottes draft
authorAlexandre Poirot <poirot.alex@gmail.com>
Thu, 11 Jan 2018 08:22:56 -0800
changeset 720816 ee224459df376948766cc8729bf241b7fb61c432
parent 720815 8d02379c2520b6121fa534e25dc32abbdfc39999
child 746161 8eb131942ebd266934882e570affbc524168b0c8
push id95654
push userbmo:poirot.alex@gmail.com
push dateTue, 16 Jan 2018 10:04:16 +0000
reviewersHonza, jdescottes
bugs1425964
milestone59.0a1
Bug 1425964 - Prevent sync reflows by using document.dir to check for locale direction. r=Honza,jdescottes MozReview-Commit-ID: H8uYVtnNXLz
devtools/client/inspector/breadcrumbs.js
devtools/client/netmonitor/src/widgets/WaterfallBackground.js
devtools/client/shared/components/splitter/SplitBox.js
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -68,17 +68,17 @@ ArrowScrollBox.prototype = {
     this.inner.addEventListener("underflow", this.onUnderflow);
     this.inner.addEventListener("overflow", this.onOverflow);
   },
 
   /**
    * Determine whether the current text directionality is RTL
    */
   isRtl: function () {
-    return this.win.getComputedStyle(this.container).direction === "rtl";
+    return this.doc.dir === "rtl";
   },
 
   /**
    * Scroll to the specified element using the current scroll behavior
    * @param {Element} element element to scroll
    * @param {String} block desired alignment of element after scrolling
    */
   scrollToElement: function (element, block) {
--- a/devtools/client/netmonitor/src/widgets/WaterfallBackground.js
+++ b/devtools/client/netmonitor/src/widgets/WaterfallBackground.js
@@ -78,18 +78,17 @@ class WaterfallBackground {
       scaledStep = state.scale * timingStep;
       if (scaledStep < REQUESTS_WATERFALL.BACKGROUND_TICKS_SPACING_MIN) {
         timingStep <<= 1;
         continue;
       }
       optimalTickIntervalFound = true;
     }
 
-    const isRTL = document.defaultView
-      .getComputedStyle(document.documentElement).direction === "rtl";
+    const isRTL = document.dir === "rtl";
     const [r, g, b] = REQUESTS_WATERFALL.BACKGROUND_TICKS_COLOR_RGB;
     let alphaComponent = REQUESTS_WATERFALL.BACKGROUND_TICKS_OPACITY_MIN;
 
     function drawPixelAt(offset, color) {
       let position = (isRTL ? canvasWidth - offset : offset - 1) | 0;
       let [rc, gc, bc, ac] = color;
       view32bit[position] = (ac << 24) | (bc << 16) | (gc << 8) | rc;
     }
--- a/devtools/client/shared/components/splitter/SplitBox.js
+++ b/devtools/client/shared/components/splitter/SplitBox.js
@@ -135,27 +135,24 @@ class SplitBox extends Component {
 
   /**
    * Adjust size of the controlled panel. Depending on the current
    * orientation we either remember the width or height of
    * the splitter box.
    */
   onMove(x, y) {
     const node = ReactDOM.findDOMNode(this);
-    const doc = node.ownerDocument;
-    const win = doc.defaultView;
 
     let size;
     let { endPanelControl } = this.props;
 
     if (this.state.vert) {
       // Switch the control flag in case of RTL. Note that RTL
       // has impact on vertical splitter only.
-      let dir = win.getComputedStyle(doc.documentElement).direction;
-      if (dir == "rtl") {
+      if (document.dir === "rtl") {
         endPanelControl = !endPanelControl;
       }
 
       size = endPanelControl ?
         (node.offsetLeft + node.offsetWidth) - x :
         x - node.offsetLeft;
 
       this.setState({