WebUI: Convert --cr-dialog-wrapper mixin to ::part(wrapper)

Bug: 973674
Change-Id: I2d9971b41bd2f399914a6ab57c995cb5f1ca383b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1662730
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#670260}

chrome/browser/resources/extensions/options_dialog.html

@@ -38,6 +38,12 @@
         width: var(--dialog-width);
       }
 
+      cr-dialog::part(wrapper) {
+        height: 100%;
+        max-height: initial;
+        overflow: hidden;
+      }
+
       cr-dialog {
         --cr-dialog-body: {
           height: 100%;
@@ -52,11 +58,6 @@
           height: 100%;
           min-height: initial;
         }
-        --cr-dialog-wrapper: {
-          height: 100%;
-          max-height: initial;
-          overflow: hidden;
-        }
         --scroll-border: none;
       }
     </style>

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

@@ -42,10 +42,11 @@
         width:  calc(100vw - 2 * var(--print-preview-dialog-margin));
       }
 
-      #dialog {
-        --cr-dialog-wrapper: {
+      #dialog::part(wrapper) {
         height: calc(100vh - 2 * var(--print-preview-dialog-margin));
-        };
+      }
+
+      #dialog {
         --cr-dialog-body-container: {
           flex: 1;
         };

chrome/browser/resources/print_preview/ui/print_preview_shared_css.html

@@ -55,12 +55,13 @@
       }
 
       /* Default print preview dialog styles. */
-      cr-dialog {
-        --cr-dialog-wrapper: {
+      cr-dialog::part(wrapper) {
         max-height: calc(100vh - 68px);
-          width:  calc(100vw - 68px);
         max-width: 100%;
-        };
+        width:  calc(100vw - 68px);
+      }
+
+      cr-dialog {
         --cr-dialog-body: {
           box-sizing: border-box;
           padding-inline-end: 20px;

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

@@ -47,7 +47,6 @@
         flex-direction: column;
         max-height: 100vh;
         overflow: auto;
-        @apply --cr-dialog-wrapper;
       }
 
       /* When needing to flex, force .body-container alone to shrink. */
@@ -196,7 +195,7 @@
         on-cancel="onNativeDialogCancel_" part="dialog">
       <!-- This wrapper is necessary, such that the "pulse" animation is not
         erroneously played when the user clicks on the outer-most scrollbar. -->
-      <div id="content-wrapper">
+      <div id="content-wrapper" part="wrapper">
         <div class="top-container">
           <div class="title-container" tabindex="-1">
             <slot name="title"></slot>