[CrOS Wallpaper] Bring preview navbar centering buttons up to UI spec.

* Add ripple effect to the 'center' and 'center cropped' buttons.
* Remove border when either button is selected.
* Center the centering buttons correctly.

sceenshots & video of ripple:
https://drive.google.com/drive/folders/1mwxne0ZwSRH1OUDaS2c7thJ7iQ8ExkHm?usp=sharing

Bug: 916671
Change-Id: I5c67ffd2718973a56af80426604dc7e3e9f8c01c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1892294Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712245}

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

@@ -476,6 +476,7 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
 .top-header-contents #wallpaper-description {
   color: rgb(128, 134, 139);
   max-width: 312px;
+  min-width: 132px;
   overflow: hidden;
   padding-inline-end: 16px;
   padding-inline-start: 8px;
@@ -532,46 +533,55 @@ html[dir='rtl'] .top-header-contents .more-options {
   width: 16px;
 }
 
-.top-header-contents .more-options .center-button,
-.top-header-contents .more-options .center-cropped-button {
+#centering-options {
+  display: flex;
+  padding: 0;
+}
+
+.top-header-contents .more-options #center-button,
+.top-header-contents .more-options #center-cropped-button {
   background-color: #fff;
+  border: none;
+  border-radius: 16px;
   color: rgb(128, 134, 139);
-  padding-inline-start: 28px;
+  overflow: hidden;
+  padding: 8px 28px;
+  position: relative;
   z-index: 0;
 }
 
-.top-header-contents .more-options .center-button.disabled,
-.top-header-contents .more-options .center-cropped-button.disabled {
+.top-header-contents .more-options #center-button.disabled,
+.top-header-contents .more-options #center-cropped-button.disabled {
   background-color: rgb(232, 240, 254);
   color: rgb(26, 115, 232);
   pointer-events: none;
   z-index: 1;
 }
 
-.top-header-contents .more-options .center-button {
+.top-header-contents .more-options #center-button {
   padding-inline-end: 36px;
 }
 
-.top-header-contents .more-options .center-cropped-button {
+.top-header-contents .more-options #center-cropped-button {
   margin-inline-start: -24px;
 }
 
-.top-header-contents .center-button .icon,
+.top-header-contents #center-button .icon,
 #current-wallpaper-more-options #center .icon {
   background-image: url(../images/ui/center_layout.svg);
 }
 
-.top-header-contents .center-button.disabled .icon,
+.top-header-contents #center-button.disabled .icon,
 #current-wallpaper-more-options #center.disabled .icon {
   background-image: url(../images/ui/center_layout_disabled.svg);
 }
 
-.top-header-contents .center-cropped-button .icon,
+.top-header-contents #center-cropped-button .icon,
 #current-wallpaper-more-options #center-cropped .icon {
   background-image: url(../images/ui/center_cropped_layout.svg);
 }
 
-.top-header-contents .center-cropped-button.disabled .icon,
+.top-header-contents #center-cropped-button.disabled .icon,
 #current-wallpaper-more-options #center-cropped.disabled .icon {
   background-image: url(../images/ui/center_cropped_layout_disabled.svg);
 }

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js

@@ -94,6 +94,41 @@ function centerElement(element, totalWidth, totalHeight) {
     element.style.top = (totalHeight - element.offsetHeight) / 2 + 'px';
 }
 
+/**
+ * Helper function to give an element the ripple effect capability.
+ * @param {String} elementID The element to be centered.
+ */
+function addRippleOverlay(elementID) {
+  if(!$(elementID))
+    return;
+  $(elementID).querySelectorAll('.ink').forEach(e => e.remove());
+  var inkEl = document.createElement('span');
+  inkEl.classList.add('ink');
+  $(elementID).appendChild(inkEl);
+  $(elementID).addEventListener('mousedown', e => {
+    var currentTarget = e.currentTarget;
+    var inkEl = currentTarget.querySelector('.ink');
+    inkEl.style.width = inkEl.style.height =
+        currentTarget.offsetWidth + 'px';
+    // If target is on contained child, the offset of child must be added.
+    inkEl.style.left =
+        (e.offsetX +
+         (e.target.id != elementID ? e.target.offsetLeft : 0) -
+         0.5 * inkEl.offsetWidth) +
+        'px';
+    inkEl.style.top =
+        (e.offsetY +
+         (e.target.id != elementID ? e.target.offsetTop : 0) -
+         0.5 * inkEl.offsetHeight) +
+        'px';
+    inkEl.classList.add('ripple-category-list-item-animation');
+  });
+  inkEl.addEventListener('animationend', e => {
+    var inkTarget = e.target;
+    inkTarget.classList.remove('ripple-category-list-item-animation');
+  });
+}
+
 /**
  * Loads translated strings.
  */
@@ -798,7 +833,7 @@ WallpaperManager.prototype.setCustomWallpaperImpl_ = function(
             return;
           }
           var layoutButton = this.document_.querySelector(
-              layout == 'CENTER' ? '.center-button' : '.center-cropped-button');
+              layout == 'CENTER' ? '#center-button' : '#center-cropped-button');
           this.addEventToButton_(layoutButton, () => {
             chrome.wallpaperPrivate.setCustomWallpaper(
                 imageData, layout, false /*generateThumbnail=*/,
@@ -809,9 +844,9 @@ WallpaperManager.prototype.setCustomWallpaperImpl_ = function(
                     return;
                   }
                   this.currentlySelectedLayout_ = layout;
-                  this.document_.querySelector('.center-button')
+                  this.document_.querySelector('#center-button')
                       .classList.toggle('disabled', layout == 'CENTER');
-                  this.document_.querySelector('.center-cropped-button')
+                  this.document_.querySelector('#center-cropped-button')
                       .classList.toggle('disabled', layout == 'CENTER_CROPPED');
                   this.onPreviewModeStarted_(
                       selectedItem,
@@ -825,7 +860,7 @@ WallpaperManager.prototype.setCustomWallpaperImpl_ = function(
         decorateLayoutButton('CENTER');
         decorateLayoutButton('CENTER_CROPPED');
         // The default layout is CENTER_CROPPED.
-        this.document_.querySelector('.center-cropped-button').click();
+        this.document_.querySelector('#center-cropped-button').click();
       });
 };
 
@@ -914,6 +949,9 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
   if (this.isDuringPreview_())
     return;
 
+  addRippleOverlay("center-button");
+  addRippleOverlay("center-cropped-button");
+
   this.document_.body.classList.add('preview-animation');
   chrome.wallpaperPrivate.minimizeInactiveWindows();
   window.setTimeout(() => {
@@ -1224,14 +1262,14 @@ WallpaperManager.prototype.setCustomWallpaperLayout_ = function(newLayout) {
       return;
     }
     var layoutButton = this.document_.querySelector(
-        layout == 'CENTER' ? '.center-button' : '.center-cropped-button');
+        layout == 'CENTER' ? '#center-button' : '#center-cropped-button');
     var newLayoutButton = layoutButton.cloneNode(true);
     layoutButton.parentNode.replaceChild(newLayoutButton, layoutButton);
     newLayoutButton.addEventListener('click', () => {
       setCustomWallpaperLayoutImpl(layout, () => {
-        this.document_.querySelector('.center-button')
+        this.document_.querySelector('#center-button')
             .classList.toggle('disabled', layout == 'CENTER');
-        this.document_.querySelector('.center-cropped-button')
+        this.document_.querySelector('#center-cropped-button')
             .classList.toggle('disabled', layout == 'CENTER_CROPPED');
         this.onPreviewModeStarted_(
             {source: Constants.WallpaperSourceEnum.Custom},
@@ -1247,7 +1285,7 @@ WallpaperManager.prototype.setCustomWallpaperLayout_ = function(newLayout) {
   decorateLayoutButton('CENTER_CROPPED');
   this.document_
       .querySelector(
-          newLayout == 'CENTER' ? '.center-button' : '.center-cropped-button')
+          newLayout == 'CENTER' ? '#center-button' : '#center-cropped-button')
       .click();
   this.setWallpaperAttribution({collectionName: str('customCategoryLabel')});
 };

chrome/browser/resources/chromeos/wallpaper_manager/main.html

@@ -165,13 +165,15 @@ found in the LICENSE file.
       <div class="divider"></div>
       <div id="wallpaper-description"></div>
       <div class="more-options">
-        <div class="center-button custom-option">
-          <div class="icon"></div>
-          <div class="text" i18n-content="centerLayout"></div>
-        </div>
-        <div class="center-cropped-button custom-option">
-          <div class="icon"></div>
-          <div class="text" i18n-content="centerCroppedLayout"></div>
+        <div id="centering-options">
+          <div id="center-button" class="custom-option">
+            <div class="icon"></div>
+            <div class="text" i18n-content="centerLayout"></div>
+          </div>
+          <div id="center-cropped-button" class="custom-option">
+            <div class="icon"></div>
+            <div class="text" i18n-content="centerCroppedLayout"></div>
+          </div>
         </div>
         <div id="refresh-wallpaper" class="daily-option"
             i18n-content="refreshLabel"></div>