[CrOS Wallpaper] Center and fix width of the toast message to fit text.

Ensure that the toast message is the correct width while still centered.
Prior to this CL, the toast message is too elongated for short messages.
This CL ensures that the width of the toast message is just long enough
while centered.

screenshots (both after):
https://screenshot.googleplex.com/2veWnqVG26S
https://screenshot.googleplex.com/Ljyu6q9gACR

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

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

@@ -856,20 +856,24 @@ html[dir='rtl'] .top-header-contents .more-options {
 }
 
 #message-container {
+  bottom: 12px;
+  display: none;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  z-index: 4;
+}
+
+#message-content {
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 16px;
-  bottom: 12px;
   color: #fff;
-  display: block;
+  display: inline-block;
   left: 50%;
+  margin: 0 auto;
   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;
 }
 
 #preview-spinner,

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

@@ -313,22 +313,18 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
         if (!wallpaperPickerWindow)
           return;
         var wpDocument = wallpaperPickerWindow.contentWindow.document;
-        var messageContainer = wpDocument.querySelector('#message-container');
+        var messageContent = wpDocument.querySelector('#message-content');
 
         chrome.wallpaperPrivate.getStrings(strings => {
           if (appName) {
+            wpDocument.querySelector('#message-container').display = 'block';
             var message =
                 strings.currentWallpaperSetByMessage.replace(/\$1/g, appName);
-            messageContainer.textContent = message;
-            messageContainer.style.visibility = 'visible';
+            messageContent.textContent = message;
             wpDocument.querySelector('#checkbox').classList.remove('checked');
             wpDocument.querySelector('#categories-list').disabled = false;
             wpDocument.querySelector('#wallpaper-grid').disabled = false;
           } else {
-            if (messageContainer.textContent !=
-                strings.setSuccessfullyMessage) {
-              messageContainer.style.visibility = 'hidden';
-            }
             Constants.WallpaperSyncStorage.get(
                 Constants.AccessSyncSurpriseMeEnabledKey, function(item) {
                   // TODO(crbug.com/810169): Try to combine this part with

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

@@ -363,8 +363,8 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() {
  * @param {string} errroMessage The string to show in the error dialog.
  */
 WallpaperManager.prototype.showError_ = function(errorMessage) {
-    $('message-container').textContent = errorMessage;
-    $('message-container').style.visibility = 'visible';
+    $('message-content').textContent = errorMessage;
+    $('message-container').style.display = 'block';
 };
 
 /**
@@ -429,11 +429,11 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() {
 
   getThirdPartyAppName(function(appName) {
     if (appName) {
-      $('message-container').textContent =
+      $('message-content').textContent =
           loadTimeData.getStringF('currentWallpaperSetByMessage', appName);
-      $('message-container').style.visibility = 'visible';
+      $('message-container').style.display = 'block';
     } else {
-      $('message-container').style.visibility = 'hidden';
+      $('message-container').style.display = 'none';
     }
   });
 
@@ -451,7 +451,7 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() {
     // Force refreshing the images.
     this.wallpaperGrid_.dataModel = null;
     this.onCategoriesChange_();
-    $('message-container').style.visibility = 'hidden';
+    $('message-container').style.display = 'none';
     this.downloadedListMap_ = null;
     $('wallpaper-grid').classList.remove('image-picker-offline');
   });
@@ -712,7 +712,7 @@ WallpaperManager.prototype.onClose_ = function() {
  */
 WallpaperManager.prototype.onWallpaperChanged_ = function(
     activeItem, currentWallpaperURL) {
-  $('message-container').style.visibility = 'hidden';
+  $('message-container').style.display = 'none';
   this.wallpaperGrid_.activeItem = activeItem;
   this.currentWallpaper_ = currentWallpaperURL;
   this.decorateCurrentWallpaperInfoBar_();
@@ -1059,7 +1059,7 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
       var nextPreviewImage = dataModel.item(nextPreviewIndex);
       if (nextPreviewImage.source == Constants.WallpaperSourceEnum.Online)
         this.updateSpinnerVisibility_(true);
-      $('message-container').style.visibility = 'hidden';
+      $('message-container').style.display = 'none';
       this.setWallpaperAttribution(nextPreviewImage);
       this.setSelectedWallpaper_(nextPreviewImage);
       this.currentPreviewIndex_ = nextPreviewIndex;
@@ -1094,7 +1094,7 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
   };
   this.addEventToButton_($('cancel-preview-wallpaper'), onCancelClicked);
 
-  $('message-container').style.visibility = 'hidden';
+  $('message-container').style.display = 'none';
 };
 
 /*
@@ -1103,10 +1103,10 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
  */
 WallpaperManager.prototype.showSuccessMessageAndQuit_ = function() {
   this.document_.body.classList.add('wallpaper-set-successfully');
-  $('message-container').textContent = str('setSuccessfullyMessage');
+  $('message-content').textContent = str('setSuccessfullyMessage');
   // Success message must be shown in full screen mode.
   chrome.app.window.current().fullscreen();
-  $('message-container').style.visibility = 'visible';
+  $('message-container').style.display = 'block';
   // Close the window after showing the success message.
   window.setTimeout(() => {
     window.close();

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

@@ -182,7 +182,10 @@ found in the LICENSE file.
       </div>
     </div>
   </div>
-  <div id="message-container" i18n-content="connectionFailed"></div>
+  <div id="message-container">
+    <div id="message-content" i18n-content="connectionFailed">
+    </div>
+  </div>
   <div id="preview-canvas"></div>
   <div id="preview-spinner" hidden></div>
   <div id="daily-refresh-banner-template" hidden>