Bug 877351 - Network Panel is broken on RTL UI, r=rcampbell

browser/devtools/netmonitor/netmonitor-controller.js

@@ -530,6 +530,14 @@ let Prefs = new ViewHelpers.Prefs("devtools.netmonitor", {
   networkDetailsHeight: ["Int", "panes-network-details-height"]
 });
 
+/**
+ * Returns true if this is document is in RTL mode.
+ * @return boolean
+ */
+XPCOMUtils.defineLazyGetter(window, "isRTL", function() {
+  return window.getComputedStyle(document.documentElement, null).direction == "rtl";
+});
+
 /**
  * Convenient way of emitting events from the panel window.
  */

browser/devtools/netmonitor/netmonitor-view.js

@@ -897,10 +897,11 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
       let startCapNode = $(".requests-menu-timings-cap.start", target);
       let endCapNode = $(".requests-menu-timings-cap.end", target);
       let totalNode = $(".requests-menu-timings-total", target);
+      let direction = window.isRTL ? -1 : 1;
 
       // Render the timing information at a specific horizontal translation
       // based on the delta to the first monitored event network.
-      let translateX = "translateX(" + attachment.startedDeltaMillis + "px)";
+      let translateX = "translateX(" + (direction * attachment.startedDeltaMillis) + "px)";
 
       // Based on the total time passed until the last request, rescale
       // all the waterfalls to a reasonable size.
@@ -911,8 +912,8 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
       let revScaleX = "scaleX(" + (1 / scale) + ")";
 
       timingsNode.style.transform = scaleX + " " + translateX;
-      startCapNode.style.transform = revScaleX + " translateX(0.5px)";
-      endCapNode.style.transform = revScaleX + " translateX(-0.5px)";
+      startCapNode.style.transform = revScaleX + " translateX(" + (direction * 0.5) + "px)";
+      endCapNode.style.transform = revScaleX + " translateX(" + (direction * -0.5) + "px)";
       totalNode.style.transform = revScaleX;
     }
   },
@@ -947,10 +948,11 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
 
       // Insert one label for each division on the current scale.
       let fragment = document.createDocumentFragment();
+      let direction = window.isRTL ? -1 : 1;
 
       for (let x = 0; x < availableWidth; x += scaledStep) {
         let divisionMS = (x / aScale).toFixed(0);
-        let translateX = "translateX(" + (x | 0) + "px)";
+        let translateX = "translateX(" + ((direction * x) | 0) + "px)";
 
         let node = document.createElement("label");
         let text = L10N.getFormatStr("networkMenu.divisionMS", divisionMS);
@@ -1009,7 +1011,8 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
       for (let i = 1; i <= REQUESTS_WATERFALL_BACKGROUND_TICKS_SCALES; i++) {
         let increment = scaledStep * Math.pow(2, i);
         for (let x = 0; x < canvasWidth; x += increment) {
-          data32[x | 0] = (alphaComponent << 24) | (b << 16) | (g << 8) | r;
+          let position = (window.isRTL ? canvasWidth - x : x) | 0;
+          data32[position] = (alphaComponent << 24) | (b << 16) | (g << 8) | r;
         }
         alphaComponent += REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_ADD;
       }
@@ -1035,6 +1038,9 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
    * Hides the overflowing columns in the requests table.
    */
   _hideOverflowingColumns: function() {
+    if (window.isRTL) {
+      return;
+    }
     let table = $("#network-table");
     let toolbar = $("#requests-menu-toolbar");
     let columns = [
@@ -1202,7 +1208,11 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
       let waterfall = $("#requests-menu-waterfall-header-box");
       let containerBounds = container.getBoundingClientRect();
       let waterfallBounds = waterfall.getBoundingClientRect();
-      this._cachedWaterfallWidth = containerBounds.width - waterfallBounds.left;
+      if (!window.isRTL) {
+        this._cachedWaterfallWidth = containerBounds.width - waterfallBounds.left;
+      } else {
+        this._cachedWaterfallWidth = waterfallBounds.right;
+      }
     }
     return this._cachedWaterfallWidth;
   },

browser/devtools/netmonitor/netmonitor.css

@@ -3,6 +3,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+#toolbar-labels {
+  overflow: hidden;
+}
+
 #details-pane-toggle[disabled] {
   visibility: hidden;
 }

browser/themes/linux/devtools/netmonitor.css

@@ -29,12 +29,18 @@
   padding: 4px;
 }
 
-.requests-menu-header:not(:last-child),
-.requests-menu-subitem:not(:last-child) {
+.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
   -moz-border-end: 1px solid hsla(210,8%,5%,.25);
   box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
 }
 
+.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
+  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
+}
+
 .requests-menu-header-button {
   -moz-appearance: none;
   background: none;
@@ -171,7 +177,6 @@ box.requests-menu-status[code^="5"] {
   -moz-padding-start: 4px;
   -moz-border-start: 1px dotted #999;
   font-size: 75%;
-  text-align: left;
   pointer-events: none;
 }
 
@@ -179,6 +184,14 @@ box.requests-menu-status[code^="5"] {
   -moz-margin-start: -100px !important; /* Don't affect layout. */
 }
 
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
 /* Network requests table: waterfall items */
 
 .requests-menu-subitem.requests-menu-waterfall {
@@ -189,15 +202,30 @@ box.requests-menu-status[code^="5"] {
   margin-bottom: -1px;
 }
 
-.requests-menu-timings {
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
+.requests-menu-timings:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
+.requests-menu-timings:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
 .requests-menu-timings-total {
   -moz-padding-start: 8px;
   font-size: 85%;
   font-weight: 600;
-  transform-origin: left center;
 }
 
 .requests-menu-timings-cap {
@@ -208,16 +236,32 @@ box.requests-menu-status[code^="5"] {
 
 .requests-menu-timings-cap.start {
   -moz-border-end: none;
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
 }
 
 .requests-menu-timings-cap.end {
   -moz-border-start: none;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
   border-radius: 0 4px 4px 0;
   transform-origin: left center;
 }
 
+.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
+  border-radius: 0 4px 4px 0;
+  transform-origin: left center;
+}
+
+.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
 .requests-menu-timings-box {
   height: 10px;
   border-top: 1px solid #fff;

browser/themes/osx/devtools/netmonitor.css

@@ -29,12 +29,18 @@
   padding: 4px;
 }
 
-.requests-menu-header:not(:last-child),
-.requests-menu-subitem:not(:last-child) {
+.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
   -moz-border-end: 1px solid hsla(210,8%,5%,.25);
   box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
 }
 
+.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
+  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
+}
+
 .requests-menu-header-button {
   -moz-appearance: none;
   background: none;
@@ -171,7 +177,6 @@ box.requests-menu-status[code^="5"] {
   -moz-padding-start: 4px;
   -moz-border-start: 1px dotted #999;
   font-size: 75%;
-  text-align: left;
   pointer-events: none;
 }
 
@@ -179,6 +184,14 @@ box.requests-menu-status[code^="5"] {
   -moz-margin-start: -100px !important; /* Don't affect layout. */
 }
 
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
 /* Network requests table: waterfall items */
 
 .requests-menu-subitem.requests-menu-waterfall {
@@ -189,15 +202,30 @@ box.requests-menu-status[code^="5"] {
   margin-bottom: -1px;
 }
 
-.requests-menu-timings {
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
+.requests-menu-timings:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
+.requests-menu-timings:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
 .requests-menu-timings-total {
   -moz-padding-start: 8px;
   font-size: 85%;
   font-weight: 600;
-  transform-origin: left center;
 }
 
 .requests-menu-timings-cap {
@@ -208,16 +236,32 @@ box.requests-menu-status[code^="5"] {
 
 .requests-menu-timings-cap.start {
   -moz-border-end: none;
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
 }
 
 .requests-menu-timings-cap.end {
   -moz-border-start: none;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
   border-radius: 0 4px 4px 0;
   transform-origin: left center;
 }
 
+.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
+  border-radius: 0 4px 4px 0;
+  transform-origin: left center;
+}
+
+.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
 .requests-menu-timings-box {
   height: 10px;
   border-top: 1px solid #fff;

browser/themes/windows/devtools/netmonitor.css

@@ -29,12 +29,18 @@
   padding: 4px;
 }
 
-.requests-menu-header:not(:last-child),
-.requests-menu-subitem:not(:last-child) {
+.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
   -moz-border-end: 1px solid hsla(210,8%,5%,.25);
   box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
 }
 
+.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
+  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
+}
+
 .requests-menu-header-button {
   -moz-appearance: none;
   background: none;
@@ -171,7 +177,6 @@ box.requests-menu-status[code^="5"] {
   -moz-padding-start: 4px;
   -moz-border-start: 1px dotted #999;
   font-size: 90%;
-  text-align: left;
   pointer-events: none;
 }
 
@@ -179,6 +184,14 @@ box.requests-menu-status[code^="5"] {
   -moz-margin-start: -100px !important; /* Don't affect layout. */
 }
 
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
 /* Network requests table: waterfall items */
 
 .requests-menu-subitem.requests-menu-waterfall {
@@ -189,15 +202,30 @@ box.requests-menu-status[code^="5"] {
   margin-bottom: -1px;
 }
 
-.requests-menu-timings {
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
+.requests-menu-timings:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
+.requests-menu-timings:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
 .requests-menu-timings-total {
   -moz-padding-start: 8px;
   font-size: 85%;
   font-weight: 600;
-  transform-origin: left center;
 }
 
 .requests-menu-timings-cap {
@@ -208,16 +236,32 @@ box.requests-menu-status[code^="5"] {
 
 .requests-menu-timings-cap.start {
   -moz-border-end: none;
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
 }
 
 .requests-menu-timings-cap.end {
   -moz-border-start: none;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
   border-radius: 0 4px 4px 0;
   transform-origin: left center;
 }
 
+.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
+  border-radius: 0 4px 4px 0;
+  transform-origin: left center;
+}
+
+.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
 .requests-menu-timings-box {
   height: 10px;
   border-top: 1px solid #fff;