Update read later bubble to match UX spec.

This change also updates read later list item button containers to set
up for keyboard navigation. By updating the width, overflow, and
icon-button-fill-color, the buttons can still exist so that backward
keyboard navigation works correctly while not being visible or taking up
space when not hovered.

Bug: 1109316
Change-Id: I0cdc9f7ad5191b2872962e5d4e08024eeada733c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2461936Reviewed-by: Connie Wan <connily@chromium.org>
Commit-Queue: Caroline Rising <corising@chromium.org>
Cr-Commit-Position: refs/heads/master@{#815910}

chrome/browser/resources/read_later/app.html

 <style include="mwb-shared-style">
   #header {
     align-items: center;
-    font-size: 15px;
+    display: flex;
+    font-size: var(--mwb-primary-text-font-size);
+    height: var(--mwb-item-height);
     margin: 0;
-    padding: var(--mwb-list-item-vertical-margin)
-             var(--mwb-list-item-horizontal-margin);
+    padding-inline-start: var(--mwb-list-item-horizontal-margin);
   }
 
   #read-later-list {
-    max-height: 458px;
+    max-height: 444px;
     overflow-x: hidden;
     overflow-y: auto;
   }
 
   .sub-heading {
+    align-items: center;
+    border-bottom: 1px solid #dbdbdb;
     color: var(--cr-secondary-text-color);
-    font-size: var(--mwb-secondary-text-font-size);
-    padding: var(--mwb-list-item-vertical-margin)
-             0
-             calc(var(--mwb-list-item-vertical-margin) / 2)
-             var(--mwb-list-item-horizontal-margin);
-  }
-
-  .sub-heading::after {
-    border-bottom: 1px solid var(--cr-secondary-text-color);
-    content: '';
-    display: block;
-    margin-top: calc(var(--mwb-list-item-vertical-margin) / 2);
+    display: flex;
+    font-size: 11px;
+    height: 24px;
+    margin-inline-start: var(--mwb-list-item-horizontal-margin);
+    margin-top: 4px;
   }
 </style>
 

chrome/browser/resources/read_later/read_later_item.html

 <style>
-  :host(:hover) .button-container,
-  :host(.selected) .button-container {
+  .button-container {
     display: flex;
+    margin-inline-start: calc(var(--mwb-icon-size) / 2);
+    overflow: hidden;
+    width: 0;
   }
 
-  .button-container {
-    display: none;
+  :host(:hover) .button-container {
+    overflow: visible;
+    width: auto;
   }
 
   .text-container {
@@ -33,9 +36,24 @@
   }
 
   cr-icon-button {
-    --cr-icon-button-margin-end: calc(var(--mwb-icon-size) / 4);
-    --cr-icon-button-margin-start: calc(var(--mwb-icon-size) / 4);
-    --cr-icon-button-size: var(--mwb-icon-size);
+    border-radius: 50%;
+    --cr-icon-button-fill-color: transparent;
+    --cr-icon-button-icon-size: var(--mwb-icon-size);
+    --cr-icon-button-size: 24px;
+    --cr-icon-button-margin-start: 0;
+    --cr-icon-button-margin-end: 0;
+  }
+
+  :host(:hover) cr-icon-button {
+    --cr-icon-button-fill-color: var(--google-grey-refresh-700);
+  }
+
+  cr-icon-button:hover {
+    background-color: rgba(var(--google-grey-900-rgb), .1);
+  }
+
+  #deleteButton {
+    margin-inline-start: calc(var(--cr-icon-button-size) / 2);
   }
 </style>
 
@@ -47,14 +65,14 @@
 </div>
 <div class="button-container">
   <cr-icon-button id="updateStatusButton"
-      aria-label="[[getUpdateStatusButtonTooltip_(
-      '$i18n{tooltipMarkAsUnread}', '$i18n{tooltipMarkAsRead}', data.read)]]"
+      aria-label="[[getUpdateStatusButtonTooltip_('$i18n{tooltipMarkAsUnread}',
+      '$i18n{tooltipMarkAsRead}', data.read)]]" disable-ripple
       iron-icon="cr:check" title="[[getUpdateStatusButtonTooltip_(
       '$i18n{tooltipMarkAsUnread}', '$i18n{tooltipMarkAsRead}', data.read)]]"
       on-click="onUpdateStatusClick_">
   </cr-icon-button>
   <cr-icon-button id="deleteButton" aria-label="$i18n{tooltipDelete}"
-      iron-icon="cr:close" title="$i18n{tooltipDelete}"
+      disable-ripple iron-icon="cr:close" title="$i18n{tooltipDelete}"
       on-click="onItemDeleteClick_">
   </cr-icon-button>
 </div>