Bug 1285528 - [RTL] Collapse/Expand pane button is not properly displayed. r=ntim
authorgasolin <gasolin@gmail.com>
Tue, 26 Jul 2016 16:22:30 +0800
changeset 347125 f5875c1a1fbdb09f7bd586ef9cde06afec36a1ea
parent 347124 80206c1833893617b0413beb27fa85415701603d
child 347126 7771811dec587c7bba6c92061a7046772524cb90
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1285528
milestone50.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 1285528 - [RTL] Collapse/Expand pane button is not properly displayed. r=ntim MozReview-Commit-ID: KITju7vmqW6
devtools/client/shared/components/sidebar-toggle.css
--- a/devtools/client/shared/components/sidebar-toggle.css
+++ b/devtools/client/shared/components/sidebar-toggle.css
@@ -2,23 +2,31 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 .sidebar-toggle {
   display: block;
 }
 
-.sidebar-toggle::before {
+.sidebar-toggle:-moz-locale-dir(ltr)::before,
+.sidebar-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
   background-image: var(--theme-pane-collapse-image);
 }
 
-.sidebar-toggle.pane-collapsed::before {
+.sidebar-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
+.sidebar-toggle:-moz-locale-dir(rtl)::before {
   background-image: var(--theme-pane-expand-image);
 }
 
 /* Rotate button icon 90deg if the toolbox container is
   in vertical mode (sidebar displayed under the main panel) */
 @media (max-width: 700px) {
-  .sidebar-toggle::before {
+  .sidebar-toggle:-moz-locale-dir(ltr)::before {
     transform: rotate(90deg);
   }
+
+  /* Since RTL swaps the used images, we need to flip them
+     the other way round */
+  .sidebar-toggle:-moz-locale-dir(rtl)::before {
+    transform: rotate(-90deg);
+  }
 }