Update error container for printer dialogs to use display flex

- Fixes a bug where some large error text would appear misplaced in both
  add and edit printer dialog.
- Update browsertest to reflect this change.

Bug: 1019432
Test: browsertests and end to end
Change-Id: I24c2c96f4cf68c647a16d8cb69580cdf66ae43f8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1888950
Commit-Queue: jimmy gong <jimmyxgong@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711102}

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

@@ -79,15 +79,9 @@
     <style include="cups-printer-shared"></style>
     <add-printer-dialog>
       <div slot="dialog-title">
-        $i18n{addPrintersManuallyTitle}
-        <div id="general-error-container" hidden="[[!errorText_]]">
-          <div id="general-error">
-            <iron-icon id="general-error-icon" icon="cr:warning"></iron-icon>
-            <div id="general-error-message">
-              [[errorText_]]
-            </div>
-          </div>
-        </div>
+        <span>$i18n{addPrintersManuallyTitle}</span>
+        <printer-dialog-error error-text="[[errorText_]]">
+        </printer-dialog-error>
       </div>
       <div slot="dialog-body">
         <div class="settings-box first two-line">
@@ -161,15 +155,10 @@
       }
     </style>
     <add-printer-dialog>
-      <div slot="dialog-title">$i18n{manufacturerAndModelDialogTitle}
-        <div id="general-error-container" hidden="[[!errorText_]]">
-            <div id="general-error">
-              <iron-icon id="general-error-icon" icon="cr:warning"></iron-icon>
-              <div id="general-error-message">
-                [[errorText_]]
-              </div>
-            </div>
-        </div>
+      <div slot="dialog-title">
+        <span>$i18n{manufacturerAndModelDialogTitle}</span>
+        <printer-dialog-error error-text="[[errorText_]]">
+        </printer-dialog-error>
       </div>
       <div slot="dialog-body">
         <div class="subtext" id="makeModelTextInfo">

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="cups_printer_dialog_util.html">
 <link rel="import" href="cups_printer_shared_css.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
@@ -54,3 +55,36 @@
   </template>
   <script src="cups_add_printer_dialog_elements.js"></script>
 </dom-module>
+
+<dom-module id="printer-dialog-error">
+  <template>
+    <style>
+      #error-wrap {
+        display: flex;
+      }
+
+      #error-container {
+        height: 20px;
+        margin-top: 10px;
+      }
+
+      #error-icon {
+       --iron-icon-fill-color: var(--google-red-600);
+      }
+
+      #error-message {
+        color: var(--google-red-600);
+        font-size: 10px;
+        margin-inline-start: 5px;
+      }
+    </style>
+    <div id="error-container" hidden="[[!errorText]]">
+      <div id="error-wrap">
+        <iron-icon id="error-icon" icon="cr:warning"></iron-icon>
+        <div id="error-message">
+          [[errorText]]
+        </div>
+      </div>
+    </div>
+  </template>
+</dom-module>

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

@@ -52,3 +52,18 @@ Polymer({
     this.$.dialog.close();
   },
 });
+
+/**
+ * 'printer-dialog-error' is the error container for dialogs.
+ */
+Polymer({
+  is: 'printer-dialog-error',
+
+  properties: {
+    /** The error text to be displayed on the dialog. */
+    errorText: {
+      type: String,
+      value: '',
+    },
+  },
+});

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

@@ -19,14 +19,8 @@
     <style include="cr-shared-style cups-printer-shared"></style>
     <add-printer-dialog>
       <div slot="dialog-title">$i18n{editPrinterDialogTitle}
-        <div id="general-error-container" hidden="[[!errorText_]]">
-          <div id="general-error">
-            <iron-icon id="general-error-icon" icon="cr:warning"></iron-icon>
-            <div id="general-error-message">
-              [[errorText_]]
-            </div>
-          </div>
-        </div>
+        <printer-dialog-error error-text="[[errorText_]]">
+        </printer-dialog-error>
       </div>
       <div slot="dialog-body" scrollable>
         <div class="settings-box first two-line">

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

@@ -98,22 +98,6 @@
         padding-inline-start: 20px;
       }
 
-      #general-error-container {
-        height: 20px;
-        margin-top: 10px;
-      }
-
-      #general-error-icon {
-       --iron-icon-fill-color: var(--google-red-600);
-      }
-
-      #general-error-message {
-        color: var(--google-red-600);
-        display: inline-block;
-        font-size: 10px;
-        margin-inline-start: 5px;
-      }
-
       #no-search-results {
         text-align: center;
       }

chrome/test/data/webui/settings/chromeos/cups_printer_page_tests.js

@@ -237,7 +237,8 @@ suite('CupsAddPrinterDialogTests', function() {
         .then(function(result) {
           // The general error should be showing.
           assertTrue(!!addDialog.errorText_);
-          assertFalse(addDialog.$$('#general-error-container').hidden);
+          const generalErrorElement = addDialog.$$('printer-dialog-error');
+          assertFalse(generalErrorElement.$$('#error-container').hidden);
         });
   });