CrOS Settings: Convert app management 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() and creates TemplatizerInterface to aide in
Closure compilation for Polymer elements that mixin Templatizer.

Bug: chromium:1206112, chromium:1315757
Test: out/Default/browser_tests --gtest_filter='*OSSettings*AppManagement*'
Test: Manual UI testing
Change-Id: Idb2cbcd199817d1a6d5af4fd4ae2ad397ad419fc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3636452
Commit-Queue: Wes Okuhara <wesokuhara@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1002829}

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/BUILD.gn

@@ -231,6 +231,7 @@ js_library("supported_links_overlapping_apps_dialog") {
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
+  externs_list = [ "./types.js" ]
 }
 
 js_library("supported_links_dialog") {

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/app_detail_view.js

@@ -12,79 +12,97 @@ import '../../../settings_shared_css.js';
 
 import {AppManagementUserAction, AppType} from '//resources/cr_components/app_management/constants.js';
 import {getSelectedApp, recordAppManagementUserAction} from '//resources/cr_components/app_management/util.js';
-import {assert, assertNotReached} from '//resources/js/assert.m.js';
-import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {assertNotReached} from '//resources/js/assert.m.js';
+import {html, microTask, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Route, Router} from '../../../router.js';
 import {routes} from '../../os_route.js';
-import {RouteObserverBehavior} from '../../route_observer_behavior.js';
+import {RouteObserverBehavior, RouteObserverBehaviorInterface} from '../../route_observer_behavior.js';
 
 import {updateSelectedAppId} from './actions.js';
-import {AppManagementStoreClient} from './store_client.js';
+import {AppManagementStoreClient, AppManagementStoreClientInterface} from './store_client.js';
 import {openMainPage} from './util.js';
 
-Polymer({
-  _template: html`{__html_template__}`,
-  is: 'app-management-app-detail-view',
-
-  behaviors: [
-    AppManagementStoreClient,
-    RouteObserverBehavior,
-  ],
-
-  properties: {
-    /**
-     * @type {App}
-     * @private
-     */
-    app_: {
-      type: Object,
-    },
-
-    /**
-     * @type {AppMap}
-     * @private
-     */
-    apps_: {
-      type: Object,
-      observer: 'appsChanged_',
-    },
-
-    /**
-     * @type {string}
-     * @private
-     */
-    selectedAppId_: {
-      type: String,
-      observer: 'selectedAppIdChanged_',
-    },
-  },
-
-  attached() {
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {AppManagementStoreClientInterface}
+ * @implements {RouteObserverBehaviorInterface}
+ */
+const AppManagementAppDetailViewElementBase = mixinBehaviors(
+    [AppManagementStoreClient, RouteObserverBehavior], PolymerElement);
+
+/** @polymer */
+class AppManagementAppDetailViewElement extends
+    AppManagementAppDetailViewElementBase {
+  static get is() {
+    return 'app-management-app-detail-view';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * @type {App}
+       * @private
+       */
+      app_: {
+        type: Object,
+      },
+
+      /**
+       * @type {AppMap}
+       * @private
+       */
+      apps_: {
+        type: Object,
+        observer: 'appsChanged_',
+      },
+
+      /**
+       * @type {string}
+       * @private
+       */
+      selectedAppId_: {
+        type: String,
+        observer: 'selectedAppIdChanged_',
+      },
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
     this.watch('app_', state => getSelectedApp(state));
     this.watch('apps_', state => state.apps);
     this.watch('selectedAppId_', state => state.selectedAppId);
     this.updateFromStore();
-  },
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
 
-  detached() {
     this.dispatch(updateSelectedAppId(null));
-  },
+  }
 
   /**
    * Updates selected app ID based on the URL query params.
    *
    * RouteObserverBehavior
    * @param {!Route} currentRoute
+   * @param {!Route=} prevRoute
    * @protected
    */
-  currentRouteChanged(currentRoute) {
+  currentRouteChanged(currentRoute, prevRoute) {
     if (currentRoute !== routes.APP_MANAGEMENT_DETAIL) {
       return;
     }
 
     if (this.selectedAppNotFound_()) {
-      this.async(() => {
+      microTask.run(() => {
         openMainPage();
       });
       return;
@@ -93,7 +111,7 @@ Polymer({
     const appId = Router.getInstance().getQueryParameters().get('id');
 
     this.dispatch(updateSelectedAppId(appId));
-  },
+  }
 
   /**
    * @param {?App} app
@@ -124,27 +142,26 @@ Polymer({
       default:
         assertNotReached();
     }
-  },
+  }
 
+  /** @private */
   selectedAppIdChanged_(appId) {
     if (appId && this.app_) {
       recordAppManagementUserAction(
           this.app_.type, AppManagementUserAction.VIEW_OPENED);
     }
-  },
+  }
 
-  /**
-   * @private
-   */
+  /** @private */
   appsChanged_() {
     if (Router.getInstance().getCurrentRoute() ===
             routes.APP_MANAGEMENT_DETAIL &&
         this.selectedAppNotFound_()) {
-      this.async(() => {
+      microTask.run(() => {
         openMainPage();
       });
     }
-  },
+  }
 
   /**
    * @return {boolean}
@@ -154,5 +171,8 @@ Polymer({
     const appId = /** @type {string} */ (
         Router.getInstance().getQueryParameters().get('id'));
     return this.apps_ && !this.apps_[appId];
-  },
-});
+  }
+}
+
+customElements.define(
+    AppManagementAppDetailViewElement.is, AppManagementAppDetailViewElement);

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/app_details_item.js

@@ -287,5 +287,6 @@ class AppManagementAppDetailsItem extends AppManagementAppDetailsItemBase {
     return app.publisherId.replace(/\?.*$/g, '');
   }
 }
+
 customElements.define(
     AppManagementAppDetailsItem.is, AppManagementAppDetailsItem);

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/app_item.js

@@ -7,31 +7,44 @@ import '//resources/cr_elements/cr_icons_css.m.js';
 
 import {AppManagementEntryPoint, AppManagementEntryPointsHistogramName, AppType} from '//resources/cr_components/app_management/constants.js';
 import {getAppIcon} from '//resources/cr_components/app_management/util.js';
-import {assert, assertNotReached} from '//resources/js/assert.m.js';
-import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {assertNotReached} from '//resources/js/assert.m.js';
+import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {updateSelectedAppId} from './actions.js';
-import {AppManagementStoreClient} from './store_client.js';
+import {AppManagementStoreClient, AppManagementStoreClientInterface} from './store_client.js';
 import {openAppDetailPage} from './util.js';
 
-Polymer({
-  _template: html`{__html_template__}`,
-  is: 'app-management-app-item',
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {AppManagementStoreClientInterface}
+ */
+const AppManagementAppItemElementBase =
+    mixinBehaviors([AppManagementStoreClient], PolymerElement);
 
-  behaviors: [
-    AppManagementStoreClient,
-  ],
+/** @polymer */
+class AppManagementAppItemElement extends AppManagementAppItemElementBase {
+  static get is() {
+    return 'app-management-app-item';
+  }
 
-  properties: {
-    /** @type {App} */
-    app: {
-      type: Object,
-    },
-  },
+  static get template() {
+    return html`{__html_template__}`;
+  }
 
-  listeners: {
-    'click': 'onClick_',
-  },
+  static get properties() {
+    return {
+      /** @type {App} */
+      app: {
+        type: Object,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+
+    this.addEventListener('click', this.onClick_);
+  }
 
   /**
    * @private
@@ -42,7 +55,7 @@ Polymer({
         AppManagementEntryPointsHistogramName,
         this.getAppManagementEntryPoint_(this.app.type),
         Object.keys(AppManagementEntryPoint).length);
-  },
+  }
 
   /**
    * @param {App} app
@@ -51,7 +64,7 @@ Polymer({
    */
   iconUrlFromId_(app) {
     return getAppIcon(app);
-  },
+  }
 
   /**
    * @param {appManagement.mojom.AppType} appType
@@ -76,5 +89,8 @@ Polymer({
       default:
         assertNotReached();
     }
-  },
-});
+  }
+}
+
+customElements.define(
+    AppManagementAppItemElement.is, AppManagementAppItemElement);

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/app_management_page.js

@@ -8,22 +8,27 @@ import './api_listener.js';
 import './main_view.js';
 import '../../../settings_shared_css.js';
 
-import {afterNextRender, flush, html, Polymer, TemplateInstanceBase, Templatizer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {updateSelectedAppId} from './actions.js';
-import {BrowserProxy} from './browser_proxy.js';
-import {AppManagementStore} from './store.js';
-import {AppManagementStoreClient} from './store_client.js';
+/** @polymer */
+class SettingsAppManagementPageElement extends PolymerElement {
+  static get is() {
+    return 'settings-app-management-page';
+  }
 
+  static get template() {
+    return html`{__html_template__}`;
+  }
 
-Polymer({
-  _template: html`{__html_template__}`,
-  is: 'settings-app-management-page',
+  static get properties() {
+    return {
+      /**
+       * @type {string}
+       */
+      searchTerm: String,
+    };
+  }
+}
 
-  properties: {
-    /**
-     * @type {string}
-     */
-    searchTerm: String,
-  },
-});
+customElements.define(
+    SettingsAppManagementPageElement.is, SettingsAppManagementPageElement);