Bug 1546451 - Fix RTL spacing for inputs in Fonts panel. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Thu, 25 Apr 2019 12:30:09 +0000
changeset 471308 988b90e06a7ad93c32eed60b0f765997d88caffb
parent 471307 c45916f0bea2c5a258155bc3a9fbacfcbb8e30ea
child 471309 004d050a8ec44987f44fd86c62097266b22b915e
push id112913
push useropoprus@mozilla.com
push dateThu, 25 Apr 2019 22:21:16 +0000
treeherdermozilla-inbound@5279ac14ae48 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1546451
milestone68.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 1546451 - Fix RTL spacing for inputs in Fonts panel. r=pbro Minor fixes to the layout of inputs in right-to-left (RTL) language layout. To enable RTL, navigate to `about:config` and set `intl.uidirection` to 1. Differential Revision: https://phabricator.services.mozilla.com/D28610
devtools/client/themes/fonts.css
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -246,20 +246,20 @@
 }
 
 .font-control-label-detail {
   color: var(--theme-text-color-alt);
   font-size: smaller;
 }
 
 .font-value-input {
-  margin-left: 10px;
   text-align: right;
   width: 60px;
   padding: 2px 3px;
+  padding-inline-end: 5px;
 }
 
 .font-value-input,
 .font-value-select {
   color: var(--theme-text-color-strong);
   border: 1px solid var(--input-border-color);
   background-color: var(--input-background-color);
 }
@@ -282,65 +282,76 @@
   outline: none;
 }
 
 /* Make native number steppers disappear by treating it as text field*/
 .font-value-input[type=number] {
   -moz-appearance: textfield;
 }
 
-/* Do not show number stepper for line height and font-size */
-.font-value-input[name=line-height],
-.font-value-input[name=font-size] {
-  -moz-appearance: textfield;
-  padding-right: 5px;
-  border-right: none;
+/* Swap around order of value input and unit dropdown for RTL */
+.font-value-input:dir(rtl) {
+  order: 3;
 }
 
 .font-value-label {
   /* Combined width of .font-value-input and .font-value-select */
   width: calc(60px + 3.8em);
-  margin-left: 10px;
   padding-top: 2px;
   padding-bottom: 4px;
 }
 
 /* Mock separator because inputs don't have distinguishable borders in dark theme */
-.theme-dark .font-value-input + .font-value-select {
-  margin-left: 2px;
+.theme-dark .font-value-input + .font-value-select:dir(ltr) {
+  margin-inline-start: 2px;
+}
+.theme-dark .font-value-input + .font-value-select:dir(rtl) {
+  margin-inline-end: 2px;
 }
 
 /* Custom styles for <select> elements within the font editor. */
 .font-value-select {
   background-image: url(chrome://devtools/skin/images/select-arrow.svg);
   background-repeat: no-repeat;
   background-position: right 4px center;
   fill: var(--theme-icon-color);
   -moz-context-properties: fill;
   -moz-appearance: none;
   box-shadow: none;
   padding: 1px 10px 1px 2px;
   min-width: 3.8em;
 }
 
+.font-value-input + .font-value-select:dir(ltr){
+  border-inline-start: none;
+}
+
+/* Swap around order of value input and unit dropdown for RTL */
+.font-value-input + .font-value-select:dir(rtl){
+  border-inline-end: none;
+  order: 2;
+  text-align: left;
+}
+
 .font-value-select:-moz-focusring {
   color: transparent;
   text-shadow: 0 0 0 var(--theme-text-color-strong);
 }
 
 .font-value-input:focus,
 .font-value-select:focus {
   outline: 1px solid var(--highlight-color);
   outline-offset: -1px;
 }
 
 .font-value-slider-container {
   flex: 1;
   min-width: 50px;
   position: relative;
+  margin-inline-end: 10px;
 }
 
 /* Firefox doesn't support pseudo-elements on inputs. Using the container instead. */
 .font-value-slider-container::before,
 .font-value-slider-container::after {
   -moz-user-select: none;
   color: var(--theme-text-color-alt);
   font-size: smaller;