Settings: Make error style reusable

- Moves CSS for error messages from the cups printers page to the settings
shared style so that it can be reused by other error messages.
- Switches Printers Page from using a custom message to using a cr_toast.

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I979499a8762e2405497a2ef9f090246c775c5269
Reviewed-on: https://chromium-review.googlesource.com/996618Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557944}

chrome/browser/resources/settings/printing_page/BUILD.gn

@@ -50,6 +50,7 @@ js_library("cups_edit_printer_dialog") {
 js_library("cups_printers") {
   deps = [
     ":cups_printers_browser_proxy",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js:web_ui_listener_behavior",

chrome/browser/resources/settings/printing_page/cups_printers.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
@@ -14,24 +15,6 @@
 <dom-module id="settings-cups-printers">
   <template>
     <style include="cups-printer-shared action-link">
-      #message {
-        display: flex;
-        justify-content: center;
-        position: absolute;
-        top: 85%;
-        width: 100%;
-      }
-
-      .center {
-        background-color: black;
-        color: white;
-        font: 13px;
-        padding-bottom: 15px;
-        padding-top: 15px;
-        text-align: center;
-        width: 350px;
-      }
-
       #noSearchResultsMessage {
         color: var(--md-loading-message-color);
         font-size: 16px;
@@ -95,16 +78,16 @@
       $i18n{noSearchResults}
     </div>
 
-    <div id="message">
-      <div class="center" id="addPrinterDoneMessage" hidden>
-        $i18n{printerAddedSuccessfulMessage}
-      </div>
-      <div class="center" id="addPrinterErrorMessage" hidden>
-        <span id="addPrinterFailedMessage">
-          $i18n{printerAddedFailedMessage}
-        </span>
-      </div>
-    </div>
+    <cr-toast id="errorToast" duration="3000">
+      <div class="error-message" id="addPrinterDoneMessage" hidden>
+          $i18n{printerAddedSuccessfulMessage}
+        </div>
+        <div class="error-message" id="addPrinterErrorMessage">
+          <span id="addPrinterFailedMessage" hidden>
+            $i18n{printerAddedFailedMessage}
+          </span>
+        </div>
+    </cr-toast>
   </template>
   <script src="cups_printers.js"></script>
 </dom-module>

chrome/browser/resources/settings/printing_page/cups_printers.js

@@ -151,10 +151,8 @@ Polymer({
       }
     }
 
+    this.$.errorToast.show();
     message.hidden = false;
-    window.setTimeout(function() {
-      message.hidden = true;
-    }, 3000);
   },
 
   /** @private */

chrome/browser/resources/settings/settings_shared_css.html

@@ -349,6 +349,16 @@
         color: var(--paper-grey-600);
         font-weight: 500;
       }
+
+      /* Error message that appears in a toast to indicate the success or
+       * failure of an operation. An example is when adding a printer. */
+      .error-message {
+        color: white;
+        font: 13px;
+        padding-bottom: 15px;
+        padding-top: 15px;
+        text-align: center;
+      }
     </style>
   </template>
 </dom-module>