Bug 1506455 - Enforce LTR code on RTL layout in Changes panel r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 03 Dec 2018 09:17:38 +0000
changeset 508489 215654db940b23c34d3360a8d348709eef52d157
parent 508488 0f02ec66af19136b49ecbcb4a21596b8330b1f1c
child 508490 98462e66f4d3c513be641a4c6bdfa8fc6f28a621
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1506455
milestone65.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 1506455 - Enforce LTR code on RTL layout in Changes panel r=pbro Differential Revision: https://phabricator.services.mozilla.com/D13617
devtools/client/themes/changes.css
--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -21,16 +21,26 @@
 :root.theme-dark {
   --diff-add-background-color: rgba(18, 188, 0, 0.15);
   --diff-add-text-color: #12BC00;
   --diff-remove-background-color: rgba(255, 0, 57, 0.15);
   --diff-remove-text-color: #FF0039;
   --diff-source-background: #222225;
 }
 
+:root[dir="rtl"] {
+  /* Increase minimum offset on right-to-left layout to clear the floating scrollbar. */
+  --diff-level-min-offset: 15px;
+}
+
+:root[dir="rtl"] #sidebar-panel-changes .source {
+  /* Enforce left-to-right code rendering on right-to-left layout. */
+  direction: ltr;
+}
+
 #sidebar-panel-changes {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: var(--theme-sidebar-background);
 }
@@ -38,19 +48,24 @@
 #sidebar-panel-changes .href {
   display: flex;
   align-items: center;
   color: var(--theme-toolbar-color);
   background: var(--diff-source-background);
   border-top: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid var(--theme-splitter-color);
   padding: 4px;
+  padding-inline-start: var(--diff-level-min-offset);
   font-size: 12px;
 }
 
+#sidebar-panel-changes .source:first-child .href {
+  border-top: unset;
+}
+
 #sidebar-panel-changes .href span {
   /* Allows trimming of flex item with overflow ellipsis within the flex container */
   min-width: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }