Fix style issues for right-to-left languages

ui/login/account_picker/md_user_pod_row.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 144 matching lines @@
   /**
    * Helper function to remove a class from given element.
    * @param {!HTMLElement} el Element whose class list to change.
    * @param {string} cl Class to remove.
    */
   function removeClass(el, cl) {
     el.classList.remove(cl);
   }
 
   /**
+   * Helper function to switch directions for right-to-left languages.
+   * @param {!HTMLElement} el Element whose style needs to change.
+   */
+  function switchDirection(el) {
+    var leftStyle = el.style.left;
+    el.style.left = el.style.right;
+    el.style.right = leftStyle;
+  }
+
+  /**
    * Creates a user pod.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var UserPod = cr.ui.define(function() {
     var node = $('user-pod-template').cloneNode(true);
     node.removeAttribute('id');
     return node;
   });
 
@@ skipping 3703 matching lines @@
     },
 
     /**
      * Called after pod placement and before showing the pod row. Updates
      * elements whose style may depend on the pod placement outcome.
      * @private
      */
     handleAfterPodPlacement_: function() {
       var pods = this.pods;
       for (var pod of pods) {
-        if (pods.length > POD_ROW_LIMIT && pod != this.mainPod_)
+        if (pod.getPodStyle() != UserPod.Style.LARGE)
           continue;
         // Make sure that user name on each large pod is centered and extra
         // long names don't exceed maximum pod width.
         var nameArea = pod.querySelector('.name-container');
         var leftMargin = (CROS_POD_WIDTH - pod.nameElement.offsetWidth) / 2;
-        if (leftMargin > 0)
+        if (leftMargin > 0) {
           nameArea.style.left = cr.ui.toCssPx(leftMargin);
-        else {
+          nameArea.style.right = 'auto';
+        } else {
           pod.nameElement.style.width = cr.ui.toCssPx(CROS_POD_WIDTH);
           nameArea.style.left = cr.ui.toCssPx(0);
+          nameArea.style.right = 'auto';
         }
+
         // Update info container area for public session pods.
         if (pod.isPublicSessionPod) {
           var infoElement = pod.querySelector('.info');
           var infoIcon = pod.querySelector('.learn-more');
           var totalWidth = PUBLIC_SESSION_ICON_WIDTH + infoElement.offsetWidth;
           var infoLeftMargin = (CROS_POD_WIDTH - totalWidth) / 2;
           if (infoLeftMargin > 0) {
             infoIcon.style.left = cr.ui.toCssPx(infoLeftMargin);
+            infoIcon.style.right = 'auto';
             infoElement.style.left =
                 cr.ui.toCssPx(infoLeftMargin + PUBLIC_SESSION_ICON_WIDTH);
+            infoElement.style.right = 'auto';
           } else {
             infoIcon.style.left = cr.ui.toCssPx(0);
+            infoIcon.style.right = 'auto';
             infoElement.style.left = cr.ui.toCssPx(PUBLIC_SESSION_ICON_WIDTH);
+            infoElement.style.right = 'auto';
             infoElement.style.width = cr.ui.toCssPx(
                 CROS_POD_WIDTH - PUBLIC_SESSION_ICON_WIDTH -
                 infoElement.style.paddingLeft);
           }
           // If the public session pod is already expanded, make sure it's
           // still centered.
           if (pod.expanded)
             this.centerPod_(pod, PUBLIC_EXPANDED_WIDTH, PUBLIC_EXPANDED_HEIGHT);
         }
+
         // Update action box menu position to ensure it doesn't overlap with
         // elements outside the pod.
         var actionBoxMenu = pod.querySelector('.action-box-menu');
         var actionBoxButton = pod.querySelector('.action-box-button');
         var MENU_TOP_PADDING = 7;
         if (this.isPortraitMode_() && pods.length > 1) {
           // Confine the menu inside the pod when it may overlap with outside
           // elements.
           actionBoxMenu.style.left = 'auto';
           actionBoxMenu.style.right = cr.ui.toCssPx(0);
           actionBoxMenu.style.top =
               cr.ui.toCssPx(actionBoxButton.offsetHeight + MENU_TOP_PADDING);
         } else if (!this.isPortraitMode_() && this.isScreenShrinked_()) {
           // Prevent the virtual keyboard from blocking the remove user button.
           actionBoxMenu.style.left = cr.ui.toCssPx(
               pod.nameElement.offsetWidth + actionBoxButton.offsetWidth);
           actionBoxMenu.style.right = 'auto';
           actionBoxMenu.style.top = cr.ui.toCssPx(0);
         } else {
           actionBoxMenu.style.left = cr.ui.toCssPx(
               pod.nameElement.offsetWidth + actionBoxButton.style.marginLeft);
           actionBoxMenu.style.right = 'auto';
           actionBoxMenu.style.top =
               cr.ui.toCssPx(actionBoxButton.offsetHeight + MENU_TOP_PADDING);
         }
+
         // Update password container width based on the visibility of the
         // custom icon container.
         pod.querySelector('.password-container')
             .classList.toggle(
                 'custom-icon-shown', !pod.customIconElement.hidden);
         // Add ripple animation.
         var actionBoxRippleEffect =
             pod.querySelector('.action-box-button.ripple-circle');
         actionBoxRippleEffect.style.left = cr.ui.toCssPx(
             pod.nameElement.offsetWidth + actionBoxButton.style.marginLeft);
+        actionBoxRippleEffect.style.right = 'auto';
         actionBoxRippleEffect.style.top =
             cr.ui.toCssPx(actionBoxButton.style.marginTop);
         // Adjust the vertical position of the pod if pin keyboard is shown.
         if (pod.isPinShown() && !this.isScreenShrinked_())
           pod.top = (this.screenSize.height - CROS_POD_HEIGHT_WITH_PIN) / 2;
+
+        // In the end, switch direction of the above elements if right-to-left
+        // language is used.
+        if (isRTL()) {
+          switchDirection(nameArea);
+          switchDirection(actionBoxMenu);
+          switchDirection(actionBoxRippleEffect);
+          if (pod.isPublicSessionPod) {
+            switchDirection(pod.querySelector('.info'));
+            switchDirection(pod.querySelector('.learn-more'));
+          }
+        }
       }
       // Update the position of the sign-in banner if it's shown.
       if ($('signin-banner').textContent.length != 0) {
         var bannerContainer = $('signin-banner-container1');
         bannerContainer.style.top = cr.ui.toCssPx(this.mainPod_.top / 2);
         if (this.pods.length <= POD_ROW_LIMIT) {
           bannerContainer.style.left = cr.ui.toCssPx(
               (this.screenSize.width - bannerContainer.offsetWidth) / 2);
         }
         else {
@@ skipping 693 matching lines @@
       if (pod && pod.multiProfilesPolicyApplied) {
         pod.userTypeBubbleElement.classList.remove('bubble-shown');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });