WebUI: set initial values for padding so there is a default value

When a polyer element style is overridden and there is no explicitly set
style, all the other usages of that polymer element will erroneously
try to override the style with an undefined variable and no default.

Example: |padding-bottom: var(--cr-dialog-body_-_padding-bottom);|

This is only happens when |optimize_webui=true| is set in the build
arguments.

Bug: 846254
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I010c560e80f89c0473722351dce346d481cd3113
Reviewed-on: https://chromium-review.googlesource.com/1072236Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#561700}

chrome/browser/resources/md_extensions/options_dialog.html

@@ -29,8 +29,11 @@
       cr-dialog {
         --scroll-border: 0;
         --cr-dialog-body: {
+          -webkit-padding-end: 0;
+          -webkit-padding-start: 0;
           height: 100%;
-          padding: 0;
+          padding-bottom: 0;
+          padding-top: 0;
         };
 
         --cr-dialog-wrapper: {

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -35,7 +35,10 @@
           height: 100%;
         };
         --cr-dialog-body: {
-          padding: 0 16px;
+          -webkit-padding-end: 16px;
+          -webkit-padding-start: 16px;
+          padding-bottom: 0;
+          padding-top: 0;
         };
         --cr-dialog-body-container: {
           flex: 1;

chrome/browser/resources/print_preview/new/search_dialog_css.html

@@ -31,11 +31,17 @@
         --cr-icon-ripple-size: 14px;
         --cr-icon-size: 14px;
         --cr-dialog-title: {
-          padding: 16px;
+          -webkit-padding-end: 16px;
+          -webkit-padding-start: 16px;
+          padding-bottom: 16px;
+          padding-top: 16px;
         };
         --cr-dialog-body: {
+          -webkit-padding-end: 16px;
+          -webkit-padding-start: 16px;
           box-sizing: border-box;
-          padding: 0 16px 12px 16px;
+          padding-bottom: 12px;
+          padding-top: 0;
         };
         --cr-dialog-wrapper: {
           max-height: calc(100vh - 40px);

chrome/browser/resources/settings/languages_page/add_languages_dialog.html

@@ -12,12 +12,14 @@
 <dom-module id="settings-add-languages-dialog">
   <template>
     <style include="settings-shared">
-      [slot=body] {
-        -webkit-padding-end: 0 !important;
-        display: flex;
-        flex-direction: column;
-        height: 350px;
-        overflow: auto;
+      cr-dialog {
+        --cr-dialog-body: {
+          -webkit-padding-end: 0;
+          display: flex;
+          flex-direction: column;
+          height: 350px;
+          overflow: auto;
+        }
       }
 
       settings-subpage-search {

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -49,16 +49,30 @@
         top: 0;
       }
 
+      /**
+       * When using mixins, avoid using padding shorthand. Using both the
+       * shorthand and top/bottom/start/end can lead to style override issues.
+       * This is only noticable when the |optimize_webui=true| build arguement
+       * is used.
+       *
+       * See https://crbug.com/846254 and associated CL for more information.
+       */
       :host ::slotted([slot=body]) {
-        padding: 0 20px;
+        -webkit-padding-end: 20px;
+        -webkit-padding-start: 20px;
+        padding-bottom: 0;
+        padding-top: 0;
         @apply --cr-dialog-body;
       }
 
       :host ::slotted([slot=title]) {
+        -webkit-padding-end: 20px;
+        -webkit-padding-start: 20px;
         flex: 1;
         font-size: calc(15 / 13 * 100%);
         line-height: 1;
-        padding: 16px 20px;
+        padding-bottom: 16px;
+        padding-top: 16px;
         @apply --cr-dialog-title;
       }