ambient: Use ic-checked-filled asset

This patch uses the ic-checked-filled icon for the checked mark.

Screenshot: https://screenshot.googleplex.com/69U4WGtZ63GUsoK

Bug: b/167085170
Test: added new js test
Change-Id: I5249ca6470a795bf45a782f3687be96c00e9ad08
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2384335
Commit-Queue: Tao Wu <wutao@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805162}

chrome/browser/resources/settings/chromeos/ambient_mode_page/album_item.html

@@ -31,6 +31,7 @@
         border-radius: 4px;
         display: block;
         margin: 0 12px;
+        position: relative;
       }
 
       #imageContainer.personal-album {
@@ -51,6 +52,7 @@
         border-radius: 4px;
         display: block;
         height: 160px;
+        position: absolute;
         transform: scale(1.0);
         transition: transform 240ms;
       }
@@ -63,47 +65,20 @@
         width: 256px;
       }
 
-      .selected-circle {
-        background-color: rgba(var(--google-blue-700-rgb), 1.0);
-        border-radius: 50%;
-        box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .16),
-            0 1px 2px 1px rgba(0, 0, 0, .23);
-        display: none;
-        height: 22px;
-        position: absolute;
-        width: 22px;
-        z-index: 1;
-      }
-
-      .selected-circle.personal-album {
-        left: 144px;
-        top: 12px;
-      }
-
-      .selected-circle.art-album {
-        left: 240px;
-        top: 8px;
-      }
-
       .check {
-        border-bottom: 2px solid #fff;
-        border-inline-end: 2px solid #fff;
-        display: none;
-        height: 10px;
+        display: block;
         position: absolute;
-        transform: rotate(45deg);
-        width: 5px;
-        z-index: 2;
+        z-index: 1;
       }
 
       .check.personal-album {
-        left: 152px;
-        top: 16px;
+        left: 134px;
+        top: 6px;
       }
 
       .check.art-album {
-        left: 248px;
-        top: 12px;
+        left: 230px;
+        top: 0;
       }
 
       :host([checked]) #image {
@@ -120,16 +95,6 @@
       :host([checked]) #image.art-album {
         transform: scale(0.875);
       }
-
-      :host([checked]) .selected-circle {
-        display: block;
-        transition: transform 240ms;
-      }
-
-      :host([checked]) .check {
-        display: block;
-        transition: transform 240ms;
-      }
     </style>
     <div id="albumContainer"
         class$="layout vertical left flex [[computeClass_(topicSource)]]">
@@ -138,8 +103,10 @@
         <img id="image" class$="[[computeClass_(topicSource)]]" actionable
             src="[[album.url]]" on-click="onImageClick_">
         </img>
-        <div class$="check [[computeClass_(topicSource)]]"></div>
-        <div class$="selected-circle [[computeClass_(topicSource)]]"></div>
+        <iron-icon icon="os-settings:ic-checked-filled"
+            class$="check [[computeClass_(topicSource)]]"
+            hidden="[[!album.checked]]">
+        </iron-icon>
       </div>
 
       <div id="albumInfo" class$="[[computeClass_(topicSource)]]"

chrome/browser/resources/settings/chromeos/os_icons.html

@@ -52,6 +52,7 @@ These icons may appear blurry.
       <g id="google-drive"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.7333 12L13.0167 2H7.31665V2.00833L13.025 12H18.7333ZM8.27502 12.8334L5.41669 17.8334H16.35L19.2084 12.8334H8.27502ZM6.59167 3.26672L1.125 12.8334L3.98333 17.8251L9.45 8.26672C9.45 8.27506 6.59167 3.26672 6.59167 3.26672Z"></path></g>
       <g id="google-play"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.8167 9.06658L14.2667 7.61658L11.8834 9.99991L14.2667 12.3832L16.8167 10.9332C17.275 10.6749 17.5 10.3416 17.5 9.99991C17.5 9.65824 17.275 9.32491 16.8167 9.06658ZM3.92498 2.04163C4.93332 3.04996 10.9417 9.05829 10.9417 9.05829L13.0666 6.93329L4.14998 1.88329C4.09165 1.84996 4.03332 1.82496 3.97498 1.79996C3.83332 1.74163 3.72498 1.84163 3.84998 1.97496C3.87498 1.99163 3.89998 2.01663 3.92498 2.04163ZM3.92501 17.9583C3.90001 17.9833 3.87501 18.0083 3.85834 18.025C3.73334 18.15 3.84168 18.2583 3.98334 18.2C4.04168 18.175 4.10001 18.15 4.15834 18.1166L13.0667 13.0667L10.9417 10.9417C10.9417 10.9417 4.94168 16.95 3.92501 17.9583ZM10 9.99995C10 9.99995 2.975 2.97495 2.81667 2.81662C2.65833 2.65828 2.5 2.75828 2.5 2.97495V17.025C2.5 17.2416 2.65833 17.3416 2.81667 17.1833C2.975 17.025 10 9.99995 10 9.99995Z"></path></g>
       <g id="hard-drive"><path d="M14 14C14 14.5523 13.5523 15 13 15C12.4477 15 12 14.5523 12 14C12 13.4477 12.4477 13 13 13C13.5523 13 14 13.4477 14 14Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.89543 2 3 2.89543 3 4V16C3 17.1046 3.89543 18 5 18H15C16.1046 18 17 17.1046 17 16V4C17 2.89543 16.1046 2 15 2H5ZM5 16H15V12H5V16ZM5 10H15V4H5V10Z"></path></g>
+      <g id="ic-checked-filled"><circle cx="10" cy="10" r="8" fill="#1A73E8"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M8.33333 11.833L6.16667 9.66634L5 10.833L8.33333 14.1663L15 7.49967L13.8333 6.33301L8.33333 11.833Z" fill="white"></path></g>
       <g id="lock"><path d="M11.75 12.5C11.75 13.4665 10.9665 14.25 10 14.25C9.0335 14.25 8.25 13.4665 8.25 12.5C8.25 11.5335 9.0335 10.75 10 10.75C10.9665 10.75 11.75 11.5335 11.75 12.5Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14 7H13.5V5C13.5 3.34315 11.6569 2 10 2C8.34315 2 6.5 3.34315 6.5 5V7H6C4.89543 7 4 7.89543 4 9V16C4 17.1046 4.89543 18 6 18H14C15.1046 18 16 17.1046 16 16V9C16 7.89543 15.1046 7 14 7ZM12 5.5V7H8V5.5C8 5 8.5 3.5 10 3.5C11.5 3.5 12 5 12 5.5ZM6 9V16H14V9H6Z"></path></g>
       <g id="keyboard"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 3H2C0.9 3 0.01 3.9 0.01 5L0 15C0 16.1 0.9 17 2 17H18C19.1 17 20 16.1 20 15V5C20 3.9 19.1 3 18 3ZM18 5V15H2V5H18ZM11 6H9V8H11V6ZM9 9H11V11H9V9ZM8 6H6V8H8V6ZM6 9H8V11H6V9ZM5 9H3V11H5V9ZM3 6H5V8H3V6ZM14 12H6V14H14V12ZM12 9H14V11H12V9ZM14 6H12V8H14V6ZM15 9H17V11H15V9ZM17 6H15V8H17V6Z"></path></g>
       <g id="magic-tethering"><path d="M19 6.49212C14.5855 1.83596 6.42182 1.83596 2 6.49212L3.5 8C7.5 3.97898 13.5 3.97898 17.5 8L19 6.49212Z"></path><path d="M6.23521 11L4.5 9.33611C5.90378 7.99334 7.67283 7.21963 9.5 7L8.2038 9.73544C7.48803 10.0225 6.81737 10.4418 6.23521 11Z"></path><path d="M16.5 9.33645L14.7651 11C14.183 10.4419 13.5125 10.0227 12.7968 9.7357L11.5 7C13.3286 7.21876 15.0982 7.99231 16.5 9.33645Z"></path><path d="M6.5 12.9992L9.2496 11.7496L10.4992 9L11.7496 11.7496L14.5 12.9992L11.7496 14.2504L10.4992 17L9.2496 14.2504L6.5 12.9992Z"></path></g>

chrome/test/data/webui/settings/chromeos/ambient_mode_photos_page_test.js

@@ -62,6 +62,39 @@ suite('AmbientModeHandler', function() {
     ambientModePhotosPage.remove();
   });
 
+  /**
+   * @param {!AmbientModeTopicSource} topicSource
+   * @private
+   */
+  function assertCheckPosition(topicSource) {
+    ambientModePhotosPage.albums_ = [
+      {albumId: 'id0', checked: true, title: 'album0'},
+      {albumId: 'id1', checked: true, title: 'album1'}
+    ];
+    ambientModePhotosPage.topicSource_ = topicSource;
+    Polymer.dom.flush();
+
+    const albumList = ambientModePhotosPage.$$('album-list');
+    const ironList = albumList.$$('iron-list');
+    const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
+
+    albumItems.forEach((album) => {
+      const check = album.$$('.check');
+      const image = album.$.image;
+      const boundingWidth = image.getBoundingClientRect().width;
+      const scale = boundingWidth / image.offsetWidth;
+
+      const checkTop = Math.round(
+          (image.offsetHeight * (1.0 - scale) - check.offsetHeight) / 2.0);
+      assertEquals(checkTop, check.offsetTop);
+
+      const checkLeft = Math.round(
+          (image.offsetWidth * (1.0 - scale) - check.offsetWidth) / 2.0 +
+          boundingWidth);
+      assertEquals(checkLeft, check.offsetLeft);
+    });
+  }
+
   test('hasAlbums', function() {
     ambientModePhotosPage.albums = [
       {albumId: 'id0', checked: true, title: 'album0'},
@@ -173,6 +206,49 @@ suite('AmbientModeHandler', function() {
     assertEquals(4, selectedAlbumsChangedEventCalls);
   });
 
+  test('showCheckIconOnSelectedAlbum', function() {
+    ambientModePhotosPage.albums = [
+      {albumId: 'id0', checked: true, title: 'album0'},
+      {albumId: 'id1', checked: false, title: 'album1'}
+    ];
+    Polymer.dom.flush();
+
+    const albumList = ambientModePhotosPage.$$('album-list');
+    const ironList = albumList.$$('iron-list');
+    const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
+
+    const album0 = albumItems[0];
+    const check0 = album0.$$('.check');
+    assertTrue(album0.checked);
+    assertFalse(check0.hidden);
+
+    // Click album item image will toggle the check.
+    album0.$.image.click();
+    assertFalse(album0.checked);
+    assertTrue(check0.hidden);
+
+    const album1 = albumItems[1];
+    const check1 = album1.$$('.check');
+    assertFalse(album1.checked);
+    assertTrue(check1.hidden);
+
+    // Click album item image will toggle the check.
+    album1.$.image.click();
+    assertTrue(album1.checked);
+    assertFalse(check1.hidden);
+    // Click album1 will not affect album0.
+    assertFalse(album0.checked);
+    assertTrue(check0.hidden);
+  });
+
+  test('personalPhotosCheckIconHasCorrectPosition', function() {
+    assertCheckPosition(AmbientModeTopicSource.GOOGLE_PHOTOS);
+  });
+
+  test('artPhotosCheckIconHasCorrectPosition', function() {
+    assertCheckPosition(AmbientModeTopicSource.GOOGLE_PHOTOS);
+  });
+
   test('setSelectedAlbums', async () => {
     ambientModePhotosPage.albums = [
       {albumId: 'id0', checked: true, title: 'album0'},