diff --git a/browser/devtools/netmonitor/netmonitor-controller.js b/browser/devtools/netmonitor/netmonitor-controller.js index f933a3933f1..589895e9d88 100644 --- a/browser/devtools/netmonitor/netmonitor-controller.js +++ b/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. */ diff --git a/browser/devtools/netmonitor/netmonitor-view.js b/browser/devtools/netmonitor/netmonitor-view.js index 7a32047075c..81b678d4172 100644 --- a/browser/devtools/netmonitor/netmonitor-view.js +++ b/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; }, diff --git a/browser/devtools/netmonitor/netmonitor.css b/browser/devtools/netmonitor/netmonitor.css index 85fddef9b86..cae41f8aa2e 100644 --- a/browser/devtools/netmonitor/netmonitor.css +++ b/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; } diff --git a/browser/themes/linux/devtools/netmonitor.css b/browser/themes/linux/devtools/netmonitor.css index da98151466f..bb17c33b328 100644 --- a/browser/themes/linux/devtools/netmonitor.css +++ b/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; diff --git a/browser/themes/osx/devtools/netmonitor.css b/browser/themes/osx/devtools/netmonitor.css index baf23e41d6b..96d2f713c93 100644 --- a/browser/themes/osx/devtools/netmonitor.css +++ b/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; diff --git a/browser/themes/windows/devtools/netmonitor.css b/browser/themes/windows/devtools/netmonitor.css index 29f2647fccf..04ae79b9239 100644 --- a/browser/themes/windows/devtools/netmonitor.css +++ b/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;