[CrOS Wallpapers] Set min-width and max width to allow ease of centering

Currently, javascript is used to center the message-container.  This is
problematic because the content width is not always known when the JS
tries to center the message-container, leading to incorrect centering
when trying to center the div imperatively as info is missing.

This CL adds a min-width and max-width to the message-container so
centering can be achieved easily declaratively with other CSS rules
(left & transform).  In doing so, the message-container is now centered
correctly, but also has a min width and max width.

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

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

@@ -851,8 +851,13 @@ html[dir='rtl'] .top-header-contents .more-options {
   bottom: 12px;
   color: #fff;
   display: block;
+  left: 50%;
+  max-width: 90%;
+  min-width: 75%;
   padding: 8px 28px;
   position: absolute;
+  text-align: center;
+  transform: translateX(-50%);
   visibility: hidden;  /* Need this for correct positioning. */
   z-index: 4;
 }

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

@@ -272,7 +272,6 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() {
 
   var totalWidth = this.document_.body.offsetWidth;
   var totalHeight = this.document_.body.offsetHeight;
-  centerElement($('message-container'), totalWidth, null);
   centerElement($('top-header'), totalWidth, null);
   centerElement($('preview-spinner'), totalWidth, totalHeight);
 
@@ -330,8 +329,6 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() {
  */
 WallpaperManager.prototype.showError_ = function(errorMessage) {
     $('message-container').textContent = errorMessage;
-    centerElement(
-        $('message-container'), this.document_.body.offsetWidth, null);
     $('message-container').style.visibility = 'visible';
 };
 
@@ -1071,7 +1068,6 @@ WallpaperManager.prototype.showSuccessMessageAndQuit_ = function() {
   $('message-container').textContent = str('setSuccessfullyMessage');
   // Success message must be shown in full screen mode.
   chrome.app.window.current().fullscreen();
-  centerElement($('message-container'), this.document_.body.offsetWidth, null);
   $('message-container').style.visibility = 'visible';
   // Close the window after showing the success message.
   window.setTimeout(() => {