Polymer WebUI: Add "pulse" effect when clicking outside cr-dialog.

This matches the behavior of old Options, but it will also show
up an all Polymer WebUI pages using cr-dialog.

Bug: 740771
Change-Id: Ieb5db50b4796264a87be38e01ebfd1f362ff9d39
Reviewed-on: https://chromium-review.googlesource.com/566093Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486135}

ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp

@@ -8,6 +8,7 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-icon-button/compiled_resources2.gyp:paper-icon-button-extracted',
+        '<(EXTERNS_GYP):web_animations',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

@@ -48,6 +48,10 @@ Polymer({
     },
   },
 
+  listeners: {
+    'pointerdown': 'onPointerdown_',
+  },
+
   /** @private {?IntersectionObserver} */
   intersectionObserver_: null,
 
@@ -198,4 +202,25 @@ Polymer({
     if (this.noCancel)
       e.preventDefault();
   },
+
+  /** @param {!PointerEvent} e */
+  onPointerdown_: function(e) {
+    // Only show pulse animation if user left-clicked outside of the dialog
+    // contents.
+    if (e.button != 0 || e.composedPath()[0].tagName !== 'DIALOG')
+      return;
+
+    this.animate(
+        [
+          {transform: 'scale(1)', offset: 0},
+          {transform: 'scale(1.02)', offset: 0.4},
+          {transform: 'scale(1.02)', offset: 0.6},
+          {transform: 'scale(1)', offset: 1},
+        ],
+        /** @type {!KeyframeEffectOptions} */ ({
+          duration: 180,
+          easing: 'ease-in-out',
+          iterations: 1,
+        }));
+  },
 });