Settings: fix event handling for Polymer 2

The feature that allowed specifying an element id before the event name
in the listeners object is no longer supported in Polymer 2.

For example:

  listeners: {
    'id.eventName': 'onEventName_',
  }

Bug: 885294
Change-Id: Ieb468d10ebdc3ba436fdc38b8858b6a1b237e93f
Reviewed-on: https://chromium-review.googlesource.com/1237400Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593655}

chrome/browser/resources/md_downloads/manager.html

@@ -41,7 +41,7 @@
         opacity: var(--cr-container-shadow-max-opacity);
       }
 
-      #downloads-list {
+      #downloadsList {
         min-width: calc(
           var(--downloads-card-width) + 2 * var(--downloads-card-margin));
         /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
@@ -51,12 +51,12 @@
       }
 
       #no-downloads,
-      #downloads-list {
+      #downloadsList {
         flex: 1;
       }
 
       :host([loading]) #no-downloads,
-      :host([loading]) #downloads-list {
+      :host([loading]) #downloadsList {
         display: none;
       }
 
@@ -89,12 +89,12 @@
     </style>
 
     <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}"
-        role="none">
+        role="none" on-search-changed="onSearchChanged_">
     </downloads-toolbar>
     <div id="drop-shadow"></div>
     <div id="mainContainer">
-      <iron-list id="downloads-list" items="[[items_]]"
-          hidden="[[!hasDownloads_]]">
+      <iron-list id="downloadsList" items="[[items_]]"
+          hidden="[[!hasDownloads_]]" on-scroll="onListScroll_">
         <template>
           <downloads-item data="[[item]]"></downloads-item>
         </template>

chrome/browser/resources/md_downloads/manager.js

@@ -46,11 +46,6 @@ cr.define('downloads', function() {
       loading: true,
     },
 
-    listeners: {
-      'downloads-list.scroll': 'onListScroll_',
-      'toolbar.search-changed': 'onSearchChanged_',
-    },
-
     observers: [
       'itemsChanged_(items_.*)',
     ],
@@ -86,7 +81,7 @@ cr.define('downloads', function() {
         this.$.toolbar.downloadsShowing = this.hasDownloads_;
 
       if (this.hasDownloads_)
-        this.$['downloads-list'].fire('iron-resize');
+        this.$.downloadsList.fire('iron-resize');
     },
 
     /**
@@ -172,7 +167,7 @@ cr.define('downloads', function() {
 
     /** @private */
     onListScroll_: function() {
-      const list = this.$['downloads-list'];
+      const list = this.$.downloadsList;
       if (list.scrollHeight - list.scrollTop - list.offsetHeight <= 100) {
         // Approaching the end of the scrollback. Attempt to load more items.
         this.searchService_.loadMore();
@@ -249,7 +244,7 @@ cr.define('downloads', function() {
                            removed: [],
                          }]);
       this.async(() => {
-        const list = /** @type {!IronListElement} */ (this.$['downloads-list']);
+        const list = /** @type {!IronListElement} */ (this.$.downloadsList);
         list.updateSizeForIndex(index);
       });
     },

chrome/browser/resources/settings/controls/settings_textarea.html

@@ -17,7 +17,9 @@
            exceeds the bounds, it will scroll by default. No space or comments
            allowed before closing tag. -->
       <textarea id="input" autofocus="[[autofocus]]" rows="3"
-          value="{{value::input}}" aria-label$="[[label]]"></textarea>
+          value="{{value::input}}" aria-label$="[[label]]"
+          on-focus="onInputFocusChange_" on-blur="onInputFocusChange_"
+          on-change="onInputChange_"></textarea>
       <div id="underline"></div>
     </div>
   </template>

chrome/browser/resources/settings/controls/settings_textarea.js

@@ -32,12 +32,6 @@ Polymer({
     'aria-disabled': 'false',
   },
 
-  listeners: {
-    'input.focus': 'onInputFocusChange_',
-    'input.blur': 'onInputFocusChange_',
-    'input.change': 'onInputChange_',
-  },
-
   /**
    * 'change' event fires when <input> value changes and user presses 'Enter'.
    * This function helps propagate it to host since change events don't

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -45,7 +45,8 @@
       </settings-clear-browsing-data-dialog>
     </template>
     <template id="doNotTrackDialogIf" is="dom-if"
-        if="[[showDoNotTrackDialog_]]" notify-dom-change>
+        if="[[showDoNotTrackDialog_]]" notify-dom-change
+        on-dom-change="onDoNotTrackDomChange_">
       <cr-dialog id="confirmDoNotTrackDialog"
           close-text="$i18n{close}" on-cancel="onDoNotTrackDialogCancel_"
           on-close="onDoNotTrackDialogClosed_">

chrome/browser/resources/settings/privacy_page/privacy_page.js

@@ -165,10 +165,6 @@ Polymer({
     },
   },
 
-  listeners: {
-    'doNotTrackDialogIf.dom-change': 'onDoNotTrackDomChange_',
-  },
-
   /** @override */
   ready: function() {
     this.ContentSettingsTypes = settings.ContentSettingsTypes;