Create and use customEvent helper function.

This will help as we add more events for additional functionality.
Particular flags need to be set for all CustomEvent's so they bubble
up through the Polymer components.

Change-Id: I11e909b7a6afc6bc9433392e1fbb160156cdf10e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2636077
Commit-Queue: Kenton Lam <kentonlam@google.com>
Reviewed-by: Keith Lee <keithlee@chromium.org>
Reviewed-by: John Palmer <jopalmer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844672}

chrome/browser/resources/chromeos/emoji_picker/emoji_group.js

@@ -4,7 +4,7 @@
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {EMOJI_BUTTON_EVENT, EmojiButtonEvent} from './events.js';
+import {createCustomEvent, EMOJI_BUTTON_EVENT} from './events.js';
 import {EmojiGroup} from './types.js';
 
 class EmojiGroupComponent extends PolymerElement {
@@ -28,13 +28,8 @@ class EmojiGroupComponent extends PolymerElement {
   }
 
   onClickEmoji(ev) {
-    /** @type {EmojiButtonEvent} */
-    const event = new CustomEvent(EMOJI_BUTTON_EVENT, {
-      bubbles: true,
-      composed: true,
-      detail: {emoji: ev.path[0].textContent.trim()}
-    });
-    this.dispatchEvent(event);
+    this.dispatchEvent(createCustomEvent(
+        EMOJI_BUTTON_EVENT, {emoji: ev.path[0].textContent.trim()}));
   }
 
   _renderEmoji(codepoints) {

chrome/browser/resources/chromeos/emoji_picker/emoji_group_button.js

@@ -7,7 +7,7 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {GROUP_BUTTON_EVENT, GroupButtonEvent} from './events.js';
+import {createCustomEvent, GROUP_BUTTON_EVENT} from './events.js';
 
 class EmojiGroupButton extends PolymerElement {
   static get is() {
@@ -32,11 +32,8 @@ class EmojiGroupButton extends PolymerElement {
   }
 
   handleClick(ev) {
-    /** @type {GroupButtonEvent} */
-    const event = new CustomEvent(
-        GROUP_BUTTON_EVENT,
-        {bubbles: true, composed: true, detail: {group: this.group}});
-    this.dispatchEvent(event);
+    this.dispatchEvent(
+        createCustomEvent(GROUP_BUTTON_EVENT, {group: this.group}));
   }
 
   _className(active) {

chrome/browser/resources/chromeos/emoji_picker/events.js

@@ -14,4 +14,17 @@ export const GROUP_BUTTON_EVENT = 'group-button';
  */
 export let EmojiButtonEvent;
 
-export const EMOJI_BUTTON_EVENT = 'emoji-button';
+export const EMOJI_BUTTON_EVENT = 'emoji-button';
\ No newline at end of file
+
+/**
+ * Constructs a CustomEvent with the given event type and details.
+ * The event will bubble up through elements and components.
+ *
+ * @param {string} type event type
+ * @param {T=} detail event details
+ * @return {!CustomEvent<T>} custom event
+ * @template T event detail type
+ */
+export function createCustomEvent(type, detail) {
+  return new CustomEvent(type, {bubbles: true, composed: true, detail});
+}
\ No newline at end of file