Update read later mark as read/unread icons to match UX mocks.

Bug: 1109316
Change-Id: Ia467c437a8be6168c905396b2fb39e265dd5d5d4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2510930
Commit-Queue: Caroline Rising <corising@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#824428}

chrome/browser/resources/read_later/BUILD.gn

@@ -78,6 +78,7 @@ preprocess_grit("preprocess_web_components") {
   out_manifest = "$target_gen_dir/$preprocess_web_components_manifest"
   in_files = [
     "app.js",
+    "icons.js",
     "read_later_item.js",
   ]
 }
@@ -117,6 +118,7 @@ js_library("read_later_item") {
 html_to_js("web_components") {
   js_files = [
     "app.js",
+    "icons.js",
     "read_later_item.js",
   ]
 }

chrome/browser/resources/read_later/icons.html

+<iron-iconset-svg name="read-later" size="24">
+  <svg>
+    <defs>
+      <!-- Material icons -->
+      <g id="check-circle-outline">
+        <path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z">
+        </path>
+      </g>
+    </defs>
+</iron-iconset-svg>
\ No newline at end of file

chrome/browser/resources/read_later/icons.js

+// Copyright 2020 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.
+
+import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
+
+import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = html`{__html_template__}`;
+document.head.appendChild(template.content);
\ No newline at end of file

chrome/browser/resources/read_later/read_later_item.html

@@ -64,11 +64,13 @@
   </div>
 </div>
 <div class="button-container">
-  <cr-icon-button id="updateStatusButton"
+  <cr-icon-button id="updateStatusButton" disable-ripple
       aria-label="[[getUpdateStatusButtonTooltip_('$i18n{tooltipMarkAsUnread}',
-      '$i18n{tooltipMarkAsRead}', data.read)]]" disable-ripple
-      iron-icon="cr:check" title="[[getUpdateStatusButtonTooltip_(
-      '$i18n{tooltipMarkAsUnread}', '$i18n{tooltipMarkAsRead}', data.read)]]"
+          '$i18n{tooltipMarkAsRead}', data.read)]]"
+      iron-icon="[[getUpdateStatusButtonIcon_('cr:check-circle',
+          'read-later:check-circle-outline', data.read)]]"
+      title="[[getUpdateStatusButtonTooltip_('$i18n{tooltipMarkAsUnread}',
+          '$i18n{tooltipMarkAsRead}', data.read)]]"
       on-click="onUpdateStatusClick_">
   </cr-icon-button>
   <cr-icon-button id="deleteButton" aria-label="$i18n{tooltipDelete}"

chrome/browser/resources/read_later/read_later_item.js

@@ -7,6 +7,7 @@ import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import './icons.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -63,6 +64,16 @@ export class ReadLaterItemElement extends PolymerElement {
     this.apiProxy_.removeEntry(this.data.url);
   }
 
+  /**
+   * @param {string} markAsUnreadIcon
+   * @param {string} markAsReadIcon
+   * @return {string} The appropriate icon for the current state
+   * @private
+   */
+  getUpdateStatusButtonIcon_(markAsUnreadIcon, markAsReadIcon) {
+    return this.data.read ? markAsUnreadIcon : markAsReadIcon;
+  }
+
   /**
    * @param {string} markAsUnreadTooltip
    * @param {string} markAsReadTooltip

ui/webui/resources/cr_elements/icons.html

@@ -87,11 +87,6 @@ blurry at 20 px). Please use 20 px icons when available.
             d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z">
           </path>
         </g>
-        <g id="check-circle">
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
-          </path>
-        </g>
       </if>
       <g id="cancel">
         <path
@@ -101,6 +96,11 @@ blurry at 20 px). Please use 20 px icons when available.
       <g id="check">
         <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
       </g>
+      <g id="check-circle">
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
+        </path>
+      </g>
       <g id="chevron-left">
         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
       </g>