Bug 1253323 - Fix direction of heap-tree-number in RTL. r=ntim draft
authorSteve Chung <schung@mozilla.com>
Wed, 10 Aug 2016 16:11:44 +0800
changeset 403080 2b7df4a4bb2946ef008dc657b51ff02b48d9484e
parent 400444 6e191a55c3d23e83e6a2e72e4e80c1dc21516493
child 403083 4b9e00a3e17e660ca730877cba77b0d375f0733a
child 403735 668eca03ae11dee298b7441ba5b2e7e1a5993e9d
push id26820
push userschung@mozilla.com
push dateFri, 19 Aug 2016 03:24:48 +0000
reviewersntim
bugs1253323
milestone51.0a1
Bug 1253323 - Fix direction of heap-tree-number in RTL. r=ntim MozReview-Commit-ID: EIJIFopbvm
devtools/client/themes/memory.css
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -431,17 +431,18 @@ html, body, #app, #memory-tool {
 .heap-tree-item-count,
 .heap-tree-item-total-bytes,
 .heap-tree-item-total-count {
   /**
    * Flex: contains several subcolumns, which need to be laid out horizontally.
    * These subcolumns may have specific widths or need to flex.
    */
   display: flex;
-  text-align: end;
+  /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
+  text-align: right;
   border-inline-end: var(--cell-border-color) 1px solid;
 }
 
 .heap-tree-item-count,
 .heap-tree-item-total-count,
 .heap-tree-item-bytes,
 .heap-tree-item-total-bytes {
   width: 10%;
@@ -481,34 +482,33 @@ html, body, #app, #memory-tool {
 
 .heap-tree-number,
 .heap-tree-percent,
 .heap-tree-item-name {
   white-space: nowrap;
 }
 
 .heap-tree-number {
-  padding-inline-start: 3px;
+  padding: 0 3px;
+  flex: 1;
+  color: var(--theme-content-color3);
+  /* Make sure number doesn't appear backwards on RTL locales */
+  direction: ltr;
 }
 
 .heap-tree-percent {
   padding-inline-start: 3px;
   padding-inline-end: 3px;
 }
 
 .heap-tree-number,
 .heap-tree-percent {
   font-family: var(--monospace-font-family);
 }
 
-.heap-tree-number {
-  flex: 1;
-  color: var(--theme-content-color3);
-}
-
 .heap-tree-percent {
   width: 4ch;
 }
 
 .heap-tree-item.focused .heap-tree-number,
 .heap-tree-item.focused .heap-tree-percent {
   color: inherit;
 }