From 89cf4ed29b88eb2db4625133f863ccba3a9838b0 Mon Sep 17 00:00:00 2001
From: Florens Verschelde <florens@fvsch.com>
Date: Mon, 2 Sep 2019 13:42:41 +0000
Subject: [PATCH] Bug 1578020 - Fix horizontal spacing and RTL issues in Fonts
 panel; r=rcaliman

Differential Revision: https://phabricator.services.mozilla.com/D44309

--HG--
extra : moz-landing-system : lando
---
 .../inspector/layout/components/Accordion.css | 16 ++++--------
 devtools/client/themes/fonts.css              | 25 +++++++++++++------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/devtools/client/inspector/layout/components/Accordion.css b/devtools/client/inspector/layout/components/Accordion.css
index 43387f4b47f7..2987f6d0797e 100644
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -40,8 +40,11 @@
   background-color: var(--theme-toolbar-hover);
 }
 
-.accordion ._header:hover svg {
-  fill: var(--theme-text-color-inactive);
+.accordion ._header .arrow {
+  flex: none;
+  margin-inline-start: 0px;
+  margin-inline-end: 2px;
+  padding: 0;
 }
 
 .accordion ._header .truncate {
@@ -60,12 +63,3 @@
 .accordion div:last-child ._content {
   border-bottom: none;
 }
-
-.arrow {
-  vertical-align: middle;
-  display: inline-block;
-  padding-inline-start: 2px;
-  padding-inline-end: 1px;
-  flex-shrink: 0;
-}
-
diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css
index 4eb7f389db9f..323475b5fa92 100644
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -91,13 +91,13 @@
   background: var(--preview-input-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
-  height: 23px;
+  height: 25px;
 }
 
 #font-preview-input-container input {
   background-image: none;
   flex: 1;
-  padding-left: 14px;
+  padding-inline: 19px;
 }
 
 .font-preview {
@@ -157,14 +157,23 @@
 }
 
 .font-css-code {
+  /* Force text direction in LTR and RTL */
   direction: ltr;
+  text-align: left;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--theme-text-color-strong);
   grid-column: span 2;
-  position: relative;
-  inset-inline-start: -4px;
+}
+
+.font-css-code .theme-twisty {
+  margin-inline-start: -3px;
+}
+
+/* Force arrow direction in LTR and RTL */
+.font-css-code .theme-twisty:not([open]) {
+  transform: rotate(-90deg) !important;
 }
 
 .font-css-code-expander::before {
@@ -188,7 +197,7 @@
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  padding: 0 18px;
+  padding: 0 20px;
   margin: .6em 0;
 }
 
@@ -234,7 +243,7 @@
   flex: 1;
   font-size: 12px;
   min-width: 70px;
-  margin-right: 10px;
+  margin-inline-end: 10px;
   user-select: none;
 }
 
@@ -369,12 +378,12 @@
 
 .font-value-slider-container::before {
   content: attr(data-min);
-  left: .3em;
+  inset-inline-start: .3em;
 }
 
 .font-value-slider-container::after {
   content: attr(data-max);
-  right: .3em;
+  inset-inline-end: .3em;
 }
 
 .font-value-slider {