Merge pull request #28904 from mikehenrty/bug-1142925-notification-au…

…to-dir

Bug 1142925 - Use dir=auto for notification title text, but ensure it te...

apps/system/js/notifications.js

@@ -476,11 +476,11 @@ var NotificationScreen = {
 
     var titleContainer = document.createElement('div');
     titleContainer.classList.add('title-container');
-    titleContainer.setAttribute('dir', 'auto');
 
     var title = document.createElement('div');
     title.classList.add('title');
     title.textContent = detail.title;
+    title.setAttribute('dir', 'auto');
 
     titleContainer.appendChild(title);
 

apps/system/style/notifications/notifications.css

@@ -242,8 +242,6 @@
 
 #notifications-container .notification > div.title-container .timestamp {
   flex: initial;
-  top: -.2rem;
-  right: 1.5rem;
   padding: 0;
   max-width: 7.5rem;
   font-size: 1.4rem;
@@ -313,16 +311,19 @@ html[dir="rtl"] #notifications-container .notification > img {
   float: right;
 }
 
-html[dir="rtl"] #notifications-container .notification > div.title-container .timestamp {
-  left: 1.5rem;
-  right: unset;
-}
-
 html[dir="rtl"] #notifications-container .notification > div {
   margin-left: unset;
   margin-right: 3.7rem;
 }
 
-html[dir="rtl"] #notifications-container .notification > div:-moz-dir(ltr) {
+/*
+ * For the notification title, we need to use dir="auto" to display
+ * parenthesis and periods in their proper place. However, we still
+ * want the text to align right when in an RTL language, so we use
+ * the following override. See bug 1134453 and bug 1142925.
+ */
+html[dir="rtl"] #notifications-container .title-container .title:-moz-dir(ltr) {
   text-align: right;
+  -moz-margin-end: unset;
+  margin-left: 0.5rem;
 }

apps/system/test/unit/notifications_test.js

@@ -388,7 +388,7 @@ suite('system/NotificationScreen >', function() {
       var notificationNode =
         document.getElementsByClassName('notification')[0];
       var notificationNodeTitle =
-        document.querySelector('.notification .title-container');
+        document.querySelector('.notification .title-container .title');
       assert.equal(dir, notificationNode.dir);
       assert.equal('auto', notificationNodeTitle.dir);
     }