Bug 1205590 - [RTL] Waterfall twisty direction is wrong in RTL locales. r=ntim
MozReview-Commit-ID: 63gZ4NA3qSi
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -131,20 +131,16 @@
}
/* From skin */
.expander {
visibility: hidden;
margin-inline-start: -12px !important;
}
-.expander:-moz-locale-dir(rtl) {
- transform: scaleX(-1);
-}
-
.expandable {
visibility: visible;
}
.match {
visibility: hidden;
}
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -277,16 +277,22 @@ div.CodeMirror span.eval-text {
.theme-twisty[open], .theme-twisty.open {
background-position: -42px -14px;
}
.theme-twisty[invisible] {
visibility: hidden;
}
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
.theme-checkbox {
display: inline-block;
border: 0;
padding: 0;
outline: none;
background-position: -28px 0;
}
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -289,16 +289,22 @@ div.CodeMirror span.eval-text {
.theme-selected ~ .theme-twisty {
background-position: -28px -14px;
}
.theme-selected ~ .theme-twisty[open] {
background-position: -42px -14px;
}
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
.theme-checkbox {
display: inline-block;
border: 0;
padding: 0;
outline: none;
background-position: 0 0;
}
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -531,16 +531,22 @@ a {
.message .theme-twisty {
display: inline-block;
vertical-align: middle;
margin: 3px 0 0 0;
flex-shrink: 0;
}
+/*Do not mirror the twisty because container force to ltr */
+.message .theme-twisty:dir(rtl),
+.message .theme-twisty:-moz-locale-dir(rtl) {
+ transform: none;
+}
+
.cm-s-mozilla a[class] {
font-style: italic;
text-decoration: none;
}
.cm-s-mozilla a[class]:hover,
.cm-s-mozilla a[class]:focus {
text-decoration: underline;