CrOS Settings: Convert ambient mode page to class-based syntax

Converts Polymer elements to the class-based syntax to prepare for the
upcoming TypeScript migration. Additionally removes uses of
addSingletonGetter().

Bug: chromium:1206112, chromium:1315757
Test: out/Default/browser_tests --gtest_filter='*OSSettings*AmbientMode*'
Test: Manual UI testing
Change-Id: Ia9f295e54196682f22db6aa3bac70bd451100715
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3633017
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Wes Okuhara <wesokuhara@google.com>
Cr-Commit-Position: refs/heads/main@{#1001188}

chrome/browser/resources/settings/chromeos/ambient_mode_page/album_item.js

@@ -13,63 +13,79 @@ import '//resources/cr_elements/shared_vars_css.m.js';
 import './text_with_tooltip.js';
 import '../../settings_shared_css.js';
 
-import {I18nBehavior} from '//resources/js/i18n_behavior.m.js';
-import {html, Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {I18nBehavior, I18nBehaviorInterface} from '//resources/js/i18n_behavior.m.js';
+import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {AmbientModeAlbum, AmbientModeTopicSource} from './constants.js';
 
-Polymer({
-  _template: html`{__html_template__}`,
-  is: 'album-item',
-
-  behaviors: [I18nBehavior],
-
-  properties: {
-    /** @type {?AmbientModeAlbum} */
-    album: {
-      type: AmbientModeAlbum,
-      value: null,
-    },
-
-    /** @private {!AmbientModeTopicSource} */
-    topicSource: Number,
-
-    /** @private */
-    checked: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true,
-      notify: true,
-    },
-
-    /** Aria label for the album. */
-    ariaLabel: {
-      type: String,
-      computed: 'computeAriaLabel_(album.*, checked)',
-      reflectToAttribute: true,
-    },
-
-    titleTooltipIsVisible: {
-      type: Boolean,
-      observer: 'tooltipVisibilityChanged_',
-    },
-
-    descriptionTooltipIsVisible: {
-      type: Boolean,
-      observer: 'tooltipVisibilityChanged_',
-    },
-
-    /**
-     * Whether dark mode is the active preferred color scheme.
-     * @private {boolean}
-     */
-    isDarkModeActive_: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  listeners: {keydown: 'onKeydown_'},
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {I18nBehaviorInterface}
+ */
+const AlbumItemElementBase = mixinBehaviors([I18nBehavior], PolymerElement);
+
+/** @polymer */
+class AlbumItemElement extends AlbumItemElementBase {
+  static get is() {
+    return 'album-item';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      /** @type {?AmbientModeAlbum} */
+      album: {
+        type: AmbientModeAlbum,
+        value: null,
+      },
+
+      /** @private {!AmbientModeTopicSource} */
+      topicSource: Number,
+
+      /** @private */
+      checked: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        notify: true,
+      },
+
+      /** Aria label for the album. */
+      ariaLabel: {
+        type: String,
+        computed: 'computeAriaLabel_(album.*, checked)',
+        reflectToAttribute: true,
+      },
+
+      titleTooltipIsVisible: {
+        type: Boolean,
+        observer: 'tooltipVisibilityChanged_',
+      },
+
+      descriptionTooltipIsVisible: {
+        type: Boolean,
+        observer: 'tooltipVisibilityChanged_',
+      },
+
+      /**
+       * Whether dark mode is the active preferred color scheme.
+       * @private {boolean}
+       */
+      isDarkModeActive_: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener('keydown', this.onKeydown_);
+  }
 
   /**
    * @return {string} Class name of album type.
@@ -79,7 +95,7 @@ Polymer({
     return this.topicSource === AmbientModeTopicSource.GOOGLE_PHOTOS ?
         'personal-album' :
         'art-album';
-  },
+  }
 
   /**
    * @return {string} Checked icon for album.
@@ -88,7 +104,7 @@ Polymer({
   computeCheckedIcon_() {
     return this.isDarkModeActive_ ? 'os-settings:ic-checked-filled-dark' :
                                     'os-settings:ic-checked-filled';
-  },
+  }
 
   /**
    * @return {string} Aria label string for ChromeVox to verbalize.
@@ -108,13 +124,13 @@ Polymer({
     return this.i18n(
         'ambientModeAlbumsSubpageAlbumUnselected', this.album.title,
         this.album.description);
-  },
+  }
 
   /**
-   * @param {!KeyboardEvent} event
+   * @param {!Event} event
    * @private
    */
-  onKeydown_(event) {
+  onKeydown_(/** @type {!KeyboardEvent}*/ event) {
     // The only key event handled by this element is pressing Enter.
     if (event.key !== 'Enter') {
       return;
@@ -123,7 +139,7 @@ Polymer({
     this.fireSelectedAlbumsChanged_();
     event.preventDefault();
     event.stopPropagation();
-  },
+  }
 
   /**
    * Because of the paper-tooltips anchored in this item exceed the bounds of
@@ -136,7 +152,7 @@ Polymer({
     const tooltipIsVisible =
         this.titleTooltipIsVisible || this.descriptionTooltipIsVisible;
     this.style.zIndex = tooltipIsVisible ? '1' : '0';
-  },
+  }
 
   /**
    * @param {!MouseEvent} event
@@ -146,15 +162,19 @@ Polymer({
     this.fireSelectedAlbumsChanged_();
     event.preventDefault();
     event.stopPropagation();
-  },
+  }
 
   /**
    * Fires a 'selected-albums-changed' event with |this.album| as the details.
    * @private
    */
   fireSelectedAlbumsChanged_() {
     this.checked = !this.checked;
-    this.fire('selected-albums-changed', this.album);
-  },
-
-});
+    const event = new CustomEvent(
+        'selected-albums-changed',
+        {bubbles: true, composed: true, detail: this.album});
+    this.dispatchEvent(event);
+  }
+}
+
+customElements.define(AlbumItemElement.is, AlbumItemElement);

chrome/browser/resources/settings/chromeos/ambient_mode_page/album_list.js

@@ -17,46 +17,60 @@ import '//resources/polymer/v3_0/iron-list/iron-list.js';
 import '//resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 import '../../settings_shared_css.js';
 
-import {html, Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {GlobalScrollTargetBehavior} from '../global_scroll_target_behavior.js';
+import {Route} from '../../router.js';
+import {GlobalScrollTargetBehavior, GlobalScrollTargetBehaviorInterface} from '../global_scroll_target_behavior.js';
 import {routes} from '../os_route.js';
 
 import {AmbientModeAlbum, AmbientModeTopicSource} from './constants.js';
 
-Polymer({
-  _template: html`{__html_template__}`,
-  is: 'album-list',
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {GlobalScrollTargetBehaviorInterface}
+ */
+const AlbumListElementBase =
+    mixinBehaviors([GlobalScrollTargetBehavior], PolymerElement);
 
-  behaviors: [
-    GlobalScrollTargetBehavior,
-  ],
+/** @polymer */
+class AlbumListElement extends AlbumListElementBase {
+  static get is() {
+    return 'album-list';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
 
-  properties: {
-    /** @private {!AmbientModeTopicSource} */
-    topicSource: {
-      type: Number,
-      value() {
-        return AmbientModeTopicSource.UNKNOWN;
+  static get properties() {
+    return {
+      /** @private {!AmbientModeTopicSource} */
+      topicSource: {
+        type: Number,
+        value() {
+          return AmbientModeTopicSource.UNKNOWN;
+        },
       },
-    },
 
-    /** @private {?Array<!AmbientModeAlbum>} */
-    albums: {
-      type: Array,
-      value: null,
-      notify: true,
-    },
+      /** @private {?Array<!AmbientModeAlbum>} */
+      albums: {
+        type: Array,
+        value: null,
+        notify: true,
+      },
 
-    /**
-     * Needed by GlobalScrollTargetBehavior.
-     * @override
-     */
-    subpageRoute: {
-      type: Object,
-      value: routes.AMBIENT_MODE_PHOTOS,
-    },
-  },
+      /**
+       * Needed by GlobalScrollTargetBehavior.
+       * @type {Route}
+       * @override
+       */
+      subpageRoute: {
+        type: Object,
+        value: routes.AMBIENT_MODE_PHOTOS,
+      },
+    };
+  }
 
   /**
    * @return {boolean}
@@ -65,4 +79,6 @@ Polymer({
   isGooglePhotos_() {
     return this.topicSource === AmbientModeTopicSource.GOOGLE_PHOTOS;
   }
-});
+}
+
+customElements.define(AlbumListElement.is, AlbumListElement);

chrome/browser/resources/settings/chromeos/ambient_mode_page/ambient_mode_browser_proxy.js

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
-
 import {AmbientModeSettings, AmbientModeTemperatureUnit, AmbientModeTopicSource} from './constants.js';
 
 /**
@@ -62,8 +60,17 @@ export class AmbientModeBrowserProxyImpl {
   setSelectedAlbums(settings) {
     chrome.send('setSelectedAlbums', [settings]);
   }
+
+  /** @return {!AmbientModeBrowserProxy} */
+  static getInstance() {
+    return instance || (instance = new AmbientModeBrowserProxyImpl());
+  }
+
+  /** @param {!AmbientModeBrowserProxy} obj */
+  static setInstance(obj) {
+    instance = obj;
+  }
 }
 
-// The singleton instance_ is replaced with a test version of this wrapper
-// during testing.
-addSingletonGetter(AmbientModeBrowserProxyImpl);
+/** @type {?AmbientModeBrowserProxy} */
+let instance = null;