Settings[DICE]: adjust sync icon location.

Bug: 817117
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I69996a0a30fba0dbedba95745dd396eb1500769b
Reviewed-on: https://chromium-review.googlesource.com/954292
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542314}

chrome/browser/resources/settings/people_page/sync_account_control.html

@@ -15,6 +15,12 @@
 <dom-module id="settings-sync-account-control">
   <template>
     <style include="settings-shared">
+      :host {
+        --sync-icon-size: 16px;
+        --sync-icon-border-size: 2px;
+        --shown-avatar-size: 40px;
+      }
+
       setting-box.middle {
         /* Per spec, middle text is indented 20px in this section. */
         -webkit-margin-start: 20px;
@@ -23,8 +29,8 @@
       .account-icon {
         border-radius: 20px;
         flex-shrink: 0;
-        height: 40px;
-        width: 40px;
+        height: var(--shown-avatar-size);
+        width: var(--shown-avatar-size);
       }
 
       .account-icon.small {
@@ -50,29 +56,30 @@
         position: relative;
       }
 
-      #sync-logo-container {
+      #sync-icon-container {
         align-items: center;
         background: var(--google-blue-500);
-        border: 2px solid white;
+        border: var(--sync-icon-border-size) solid white;
         border-radius: 50%;
-        bottom: 0;
         display: flex;
-        height: 16px;
+        height: var(--sync-icon-size);
         position: absolute;
         right: -6px;
-        width: 16px;
+        top: calc(var(--shown-avatar-size) - var(--sync-icon-size) -
+            var(--sync-icon-border-size));
+        width: var(--sync-icon-size);
       }
 
-      :host-context([dir='rtl']) #sync-logo-container {
+      :host-context([dir='rtl']) #sync-icon-container {
         left: -6px;
         right: initial;
       }
 
-      #sync-logo-container[syncing] {
+      #sync-icon-container[syncing] {
         background: green;
       }
 
-      #sync-logo-container iron-icon {
+      #sync-icon-container iron-icon {
         fill: white;
         height: 12px;
         margin: auto;
@@ -140,7 +147,7 @@
         <div id="avatar-container">
           <img class="account-icon" alt=""
               src="[[getAccountImageSrc_(shownAccount_.avatarImage)]]">
-          <div id="sync-logo-container" syncing$="[[syncStatus.signedIn]]">
+          <div id="sync-icon-container" syncing$="[[syncStatus.signedIn]]">
             <iron-icon icon="notification:sync"></iron-icon>
           </div>
         </div>

chrome/test/data/webui/settings/sync_account_control_test.js

@@ -155,7 +155,7 @@ cr.define('settings_sync_account_control', function() {
 
             assertVisible(testElement.$$('#dropdown-arrow'), true);
             assertFalse(
-                testElement.$$('#sync-logo-container').hasAttribute('syncing'));
+                testElement.$$('#sync-icon-container').hasAttribute('syncing'));
 
             testElement.$$('#dropdown-arrow').click();
             Polymer.dom.flush();
@@ -208,7 +208,7 @@ cr.define('settings_sync_account_control', function() {
       assertVisible(testElement.$$('#dropdown-arrow'), false);
       assertVisible(testElement.$$('#promo-headers'), false);
       assertTrue(
-          testElement.$$('#sync-logo-container').hasAttribute('syncing'));
+          testElement.$$('#sync-icon-container').hasAttribute('syncing'));
       assertFalse(!!testElement.$$('#menu'));
 
       const userInfo = testElement.$$('#user-info');