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 3837 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()) {
+          this.switchDirection_(nameArea);
+          this.switchDirection_(actionBoxMenu);
+          this.switchDirection_(actionBoxRippleEffect);
+          if (pod.isPublicSessionPod) {
+            this.switchDirection_(pod.querySelector('.info'));
+            this.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 {
           var leftPadding = this.mainPod_.left -
               (bannerContainer.offsetWidth - CROS_POD_WIDTH) / 2;
           bannerContainer.style.left = cr.ui.toCssPx(Math.max(leftPadding, 0));
         }
       }
     },
 
     /**
+     * Helper function for right-to-left languages.
+     * @param {!HTMLElement} el Element whose style needs to change.
+     * @private
+     */
+    switchDirection_: function(el) {

[xiyuan, 2017/06/20 19:14:36]

nit: Move this out of the class, similar to removeClass, since it is a generic
helper rather than a class specific method.

[Wenzhao (Colin) Zang, 2017/06/20 20:43:50]

Done.

+      var leftStyle = el.style.left;
+      el.style.left = el.style.right;
+      el.style.right = leftStyle;
+    },
+
+    /**
      * Handles required UI changes when a public session pod toggles the
      * expanded state.
      * @param {UserPod} pod Public session pod.
      * @param {boolean} expanded Whether the pod is expanded or not.
      */
     handlePublicPodExpansion: function(pod, expanded) {
       // Hide all other elements in the account picker if the pod is expanded.
       this.parentNode.classList.toggle('public-account-expanded', expanded);
       if (expanded) {
         this.centerPod_(pod, PUBLIC_EXPANDED_WIDTH, PUBLIC_EXPANDED_HEIGHT);
@@ skipping 641 matching lines @@
       if (pod && pod.multiProfilesPolicyApplied) {
         pod.userTypeBubbleElement.classList.remove('bubble-shown');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });