WebUI cr-dialog: Don't play "pulse" animation when clicking on the scrollbar.

Bug: 746294
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ie50a57965ca0cea2d5415ac3a6ffea88d6d38201
Reviewed-on: https://chromium-review.googlesource.com/578294Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#488466}

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

@@ -17,17 +17,17 @@
         box-shadow: 0 0 16px rgba(0, 0, 0, 0.12),
                     0 16px 16px rgba(0, 0, 0, 0.24);
         color: inherit;
-        overflow: auto;
         padding: 0;
         top: 0;
         width: 512px;
       }
 
-      :host([open]) {
+      :host([open]) #content-wrapper {
         /* Keep max-height within viewport, and flex content accordingly. */
         display: flex;
         flex-direction: column;
         max-height: 100vh;
+        overflow: auto;
       }
 
       /* When needing to flex, force .body-container alone to shrink. */
@@ -118,22 +118,26 @@
         padding: 10px;  /* Makes the actual icon 16x16. */
       }
     </style>
-    <div class="top-container">
-      <div class="title-container" tabindex="-1">
-        <slot name="title"></slot>
+    <!-- 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 class="top-container">
+        <div class="title-container" tabindex="-1">
+          <slot name="title"></slot>
+        </div>
+        <button is="paper-icon-button-light" class="icon-clear" id="close"
+            aria-label$="[[closeText]]" hidden$="[[noCancel]]" on-tap="cancel"
+            on-keypress="onCloseKeypress_">
+        </button>
       </div>
-      <button is="paper-icon-button-light" class="icon-clear" id="close"
-          aria-label$="[[closeText]]" hidden$="[[noCancel]]" on-tap="cancel"
-          on-keypress="onCloseKeypress_">
-      </button>
-    </div>
-    <div class="body-container">
-      <span id="bodyTopMarker"></span>
-      <slot name="body"></slot>
-      <span id="bodyBottomMarker"></span>
+      <div class="body-container">
+        <span id="bodyTopMarker"></span>
+        <slot name="body"></slot>
+        <span id="bodyBottomMarker"></span>
+      </div>
+      <slot name="button-container"></slot>
+      <slot name="footer"></slot>
     </div>
-    <slot name="button-container"></slot>
-    <slot name="footer"></slot>
   </template>
   <script src="cr_dialog.js"></script>
 </dom-module>