[OsSettingsLanguages] Update dialog padding

Update languages' dialogs to have 24px padding.
UX is fine with these dialogs's paddings deviate from others.
Change device language: http://screen/xQa4J5bcswqWrJj
Add languages: http://screen/5BFTcGwzKfxE9hg
Add input methods: http://screen/37GF8UyM3z8THcM

Bug: 1113439
Change-Id: Id3d7ed561120d519aae66dc65a22004ecceb7b07
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2437074
Commit-Queue: My Nguyen <myy@chromium.org>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811849}

chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn

@@ -372,6 +372,7 @@ group("polymer3_elements") {
     ":os_languages_page_v2_module",
     ":os_languages_section_module",
     ":shared_style_module",
+    ":shared_vars_module",
     ":smart_inputs_page_module",
     "../../languages_page:languages_module",
     "../../languages_page:modulize",
@@ -474,6 +475,12 @@ polymer_modulizer("shared_style") {
   html_type = "style-module"
 }
 
+polymer_modulizer("shared_vars") {
+  js_file = "shared_vars.m.js"
+  html_file = "shared_vars.html"
+  html_type = "custom-style"
+}
+
 polymer_modulizer("smart_inputs_page") {
   js_file = "smart_inputs_page.js"
   html_file = "smart_inputs_page.html"

chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.html

@@ -19,7 +19,6 @@
         flex-direction: column;
         height: 336px;
         overflow: auto;
-        padding-inline-end: 0;
       }
 
       cr-search-field {

chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.html

@@ -31,7 +31,8 @@
 
       cr-search-field {
         margin-bottom: 16px;
-        margin-inline-start: 20px;
+        margin-inline-end: var(--dialog-horizontal-padding);
+        margin-inline-start: var(--dialog-horizontal-padding);
         margin-top: 16px;
       }
 
@@ -58,8 +59,8 @@
       }
 
       .padded {
-        padding-inline-end: 20px;
-        padding-inline-start: 20px;
+        padding-inline-end: var(--dialog-horizontal-padding);
+        padding-inline-start: var(--dialog-horizontal-padding);
       }
 
       paper-ripple {

chrome/browser/resources/settings/chromeos/os_languages_page/os_add_languages_dialog.html

@@ -21,7 +21,6 @@
         flex-direction: column;
         height: 350px;
         overflow: auto;
-        padding-inline-end: 0;
       }
 
       cr-search-field {

chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.html

+<link rel="import" href="shared_vars.html">
 
 <!-- Common styles for 'Languages and inputs' section. -->
 <dom-module id="shared-style">
@@ -19,13 +20,23 @@
         --cr-search-field-search-icon-inline-margin-start: 6px;
         background-color: var(--google-grey-100);
         border-radius: 4px;
-        margin-inline-end: 20px;
+      }
+
+      cr-dialog [slot=title] {
+        padding-inline-end: var(--dialog-horizontal-padding);
+        padding-inline-start: var(--dialog-horizontal-padding);
+        padding-top: var(--dialog-horizontal-padding);
+      }
+
+      cr-dialog [slot=body] {
+        padding-inline-end: var(--dialog-horizontal-padding);
+        padding-inline-start: var(--dialog-horizontal-padding);
       }
 
       cr-dialog [slot=button-container] {
         padding-bottom: 20px;
-        padding-inline-end: 20px;
-        padding-inline-start: 20px;
+        padding-inline-end: var(--dialog-horizontal-padding);
+        padding-inline-start: var(--dialog-horizontal-padding);
         padding-top: 20px;
       }
     </style>

chrome/browser/resources/settings/chromeos/os_languages_page/shared_vars.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+
+<custom-style>
+<style>
+  html {
+    --dialog-horizontal-padding: 24px;
+  }
+</style>
+</custom-style>
\ No newline at end of file

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -214,6 +214,11 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SHARED_VARS_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/shared_vars.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SMART_INPUTS_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js"
            use_base_dir="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -782,6 +782,9 @@
       <structure name="IDR_OS_SETTINGS_LANGUAGES_SHARED_STYLE_HTML"
                  file="chromeos/os_languages_page/shared_style.html"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_SHARED_VARS_HTML"
+                 file="chromeos/os_languages_page/shared_vars.html"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_LANGUAGES_SMART_INPUTS_PAGE_HTML"
                  file="chromeos/os_languages_page/smart_inputs_page.html"
                  compress="false" type="chrome_html" />