Bug 1425964 - Prevent sync reflows by using document.dir to check for locale direction. r=Honza,jdescottes
MozReview-Commit-ID: H8uYVtnNXLz
--- 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({