Migrate os_about_page from Polymer 2 to Polymer 3

Bug: 1045266
Change-Id: Id9424142a6da6137a0a667ab6deb7b00ce123a88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2370603
Commit-Queue: Claude van der Merwe <cvandermerwe@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Jon Mann <jonmann@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801250}

chrome/browser/resources/settings/about_page/about_page_browser_proxy.js

@@ -19,7 +19,7 @@
  *   url: string,
  * }}
  */
-let RegulatoryInfo;
+/* #export */ let RegulatoryInfo;
 
 /**
  * @typedef {{
@@ -28,7 +28,7 @@ let RegulatoryInfo;
  *   isLts: boolean,
  * }}
  */
-let ChannelInfo;
+/* #export */ let ChannelInfo;
 
 /**
  * @typedef {{
@@ -37,7 +37,7 @@ let ChannelInfo;
  *   osVersion: string,
  * }}
  */
-let VersionInfo;
+/* #export */ let VersionInfo;
 
 /**
  * @typedef {{
@@ -45,7 +45,7 @@ let VersionInfo;
  *   size: (string|undefined),
  * }}
  */
-let AboutPageUpdateInfo;
+/* #export */ let AboutPageUpdateInfo;
 
 /**
  * @typedef {{
@@ -59,7 +59,7 @@ let EndOfLifeInfo;
  * Enumeration of all possible browser channels.
  * @enum {string}
  */
-const BrowserChannel = {
+/* #export */ const BrowserChannel = {
   BETA: 'beta-channel',
   CANARY: 'canary-channel',
   DEV: 'dev-channel',
@@ -71,7 +71,7 @@ const BrowserChannel = {
  *   updateAvailable: boolean,
  * }}
  */
-let TPMFirmwareUpdateStatusChangedEvent;
+/* #export */ let TPMFirmwareUpdateStatusChangedEvent;
 // </if>
 
 /**
@@ -124,7 +124,7 @@ cr.define('settings', function() {
    * @param {boolean} isLts
    * @return {string}
    */
-  function browserChannelToI18nId(channel, isLts) {
+  /* #export */ function browserChannelToI18nId(channel, isLts) {
     if (isLts) {
       return 'aboutChannelLongTermStable';
     }
@@ -149,7 +149,8 @@ cr.define('settings', function() {
    * @return {boolean} Whether the target channel is more stable than the
    *     current channel.
    */
-  function isTargetChannelMoreStable(currentChannel, targetChannel) {
+  /* #export */ function isTargetChannelMoreStable(
+      currentChannel, targetChannel) {
     // List of channels in increasing stability order.
     const channelList = [
       BrowserChannel.CANARY,

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

@@ -272,7 +272,8 @@ group("closure_compile_module") {
     "multidevice_page:closure_compile_module",
 
     #"os_a11y_page:closure_compile_module",
-    #"os_about_page:closure_compile_module",
+    "os_about_page:closure_compile_module",
+
     #"os_apps_page:closure_compile_module",
     #"os_apps_page/app_management_page/plugin_vm_page:closure_compile_module",
     "os_files_page:closure_compile_module",
@@ -435,10 +436,13 @@ group("polymer3_elements") {
     "..:modulize",
     "..:settings_shared_css_module",
     "..:settings_vars_css_module",
+    "../../settings:settings_page_css_module",
+    "../about_page:modulize",
     "../nearby_share_page:polymer3_elements",
     "../prefs:modulize",
     "../prefs:prefs_module",
     "../settings_page:settings_animated_pages_module",
+    "../settings_page:settings_section_module",
     "../settings_page:settings_subpage_module",
   ]
 }

chrome/browser/resources/settings/chromeos/ensure_lazy_loaded.m.js

@@ -5,7 +5,7 @@
 let lazyLoadPromise = null;
 
 /** @return {!Promise<void>} Resolves when the lazy load module is imported. */
-export function ensureLazyLoadedOs() {
+export function ensureLazyLoaded() {
   if (!lazyLoadPromise) {
     const script = document.createElement('script');
     script.type = 'module';

chrome/browser/resources/settings/chromeos/os_about_page/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("../os_settings.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -47,21 +48,23 @@ js_library("channel_switcher_dialog") {
   ]
 }
 
-# TODO: Uncomment as the Polymer3 migration makes progress.
-#js_type_check("closure_compile_module") {
-#  is_polymer3 = true
-#  deps = [
-#    ":channel_switcher_dialog.m",
-#    ":detailed_build_info.m",
-#    ":os_about_page.m",
-#    ":update_warning_dialog.m"
-#  ]
-#}
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":channel_switcher_dialog.m",
+    ":detailed_build_info.m",
+    ":os_about_page.m",
+    ":update_warning_dialog.m",
+  ]
+}
 
 js_library("channel_switcher_dialog.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/channel_switcher_dialog.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "../../about_page:about_page_browser_proxy.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
   extra_deps = [ ":channel_switcher_dialog_module" ]
 }
@@ -69,7 +72,10 @@ js_library("channel_switcher_dialog.m") {
 js_library("detailed_build_info.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "../../about_page:about_page_browser_proxy.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/policy:cr_policy_indicator_behavior.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":detailed_build_info_module" ]
 }
@@ -77,7 +83,17 @@ js_library("detailed_build_info.m") {
 js_library("os_about_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "..:os_route.m",
+    "../..:i18n_setup",
+    "../..:lifetime_browser_proxy.m",
+    "../..:router.m",
+    "../../about_page:about_page_browser_proxy.m",
+    "../os_settings_page:main_page_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:parse_html_subset.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
   extra_deps = [ ":os_about_page_module" ]
 }
@@ -85,7 +101,9 @@ js_library("os_about_page.m") {
 js_library("update_warning_dialog.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/update_warning_dialog.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "../../about_page:about_page_browser_proxy.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":update_warning_dialog_module" ]
 }
@@ -105,22 +123,34 @@ polymer_modulizer("channel_switcher_dialog") {
   js_file = "channel_switcher_dialog.js"
   html_file = "channel_switcher_dialog.html"
   html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
 }
 
 polymer_modulizer("detailed_build_info") {
   js_file = "detailed_build_info.js"
   html_file = "detailed_build_info.html"
   html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
 }
 
 polymer_modulizer("os_about_page") {
   js_file = "os_about_page.js"
   html_file = "os_about_page.html"
   html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
 }
 
 polymer_modulizer("update_warning_dialog") {
   js_file = "update_warning_dialog.js"
   html_file = "update_warning_dialog.html"
   html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
 }

chrome/browser/resources/settings/chromeos/os_about_page/channel_switcher_dialog.html

@@ -7,6 +7,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
 <link rel="import" href="../../about_page/about_page_browser_proxy.html">
 <link rel="import" href="../../settings_shared_css.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
 
 <dom-module id="settings-channel-switcher-dialog">
   <template>

chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.html

@@ -9,6 +9,7 @@
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator_behavior.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 
 <dom-module id="settings-detailed-build-info">

chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/html/parse_html_subset.html">
 <link rel="import" href="../../about_page/about_page_browser_proxy.html">
 <link rel="import" href="../../i18n_setup.html">
-<!-- TODO(crbug.com/986596): Don't use browser icons here. Fork them. -->
 <link rel="import" href="../../icons.html">
 <link rel="import" href="../../lifetime_browser_proxy.html">
 <link rel="import" href="../../prefs/prefs.html">
@@ -62,6 +62,7 @@
         text-align: center;
       }
 
+      /* TODO(crbug.com/986596): Don't use browser icons here. Fork them. */
       iron-icon[icon='settings:check-circle'] {
         fill: var(--cros-icon-color-prominent);
       }
@@ -102,6 +103,7 @@
               when update is done) or set the src (when it's updating). -->
             <div class="icon-container"
                 hidden="[[!shouldShowIcons_(showUpdateStatus_)]]">
+              <!-- TODO(crbug.com/986596): Don't use browser icons here. Fork them. -->
               <iron-icon
                   icon$="[[getUpdateStatusIcon_(
                       hasEndOfLife_, currentUpdateStatusEvent_)]]"

chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.js

@@ -400,6 +400,7 @@ Polymer({
         return 'cr:error';
       case UpdateStatus.UPDATED:
       case UpdateStatus.NEARLY_UPDATED:
+        // TODO(crbug.com/986596): Don't use browser icons here. Fork them.
         return 'settings:check-circle';
       default:
         return null;
@@ -464,6 +465,7 @@ Polymer({
         return this.i18nAdvanced('aboutRelaunch');
       }
     }
+    return '';
   },
 
   /** @private */

chrome/browser/resources/settings/chromeos/os_about_page/update_warning_dialog.js

@@ -40,8 +40,13 @@ Polymer({
 
   /** @private */
   onContinueTap_() {
+    if (!this.updateInfo || !this.updateInfo.version || !this.updateInfo.size){
+      console.log('ERROR: requestUpdateOverCellular arguments are undefined');
+      return;
+    }
     this.browserProxy_.requestUpdateOverCellular(
-        this.updateInfo.version, this.updateInfo.size);
+        /** @type {!string} */ (this.updateInfo.version),
+        /** @type {!string} */ (this.updateInfo.size));
     this.$.dialog.close();
   },
 

chrome/browser/resources/settings/chromeos/os_settings.gni

@@ -74,6 +74,9 @@ os_settings_namespace_rewrites = settings_namespace_rewrites +
                                    "settings.printing.isNameAndAddressValid|isNameAndAddressValid",
                                    "settings.printing.isPPDInfoValid|isPPDInfoValid",
                                    "settings.printing.getPrintServerErrorText|getPrintServerErrorText",
+                                   "settings.AboutPageBrowserProxyImpl|AboutPageBrowserProxyImpl",
+                                   "settings.browserChannelToI18nId|browserChannelToI18nId",
+                                   "settings.isTargetChannelMoreStable|isTargetChannelMoreStable",
                                  ]
 
 os_settings_auto_imports = settings_auto_imports +
@@ -120,6 +123,9 @@ os_settings_auto_imports = settings_auto_imports +
                              "ui/webui/resources/html/web_ui_listener_behavior.html|WebUIListenerBehavior",
                              "ui/webui/resources/cr_components/chromeos/network/network_listener_behavior.html|NetworkListenerBehavior",
                              "chrome/browser/resources/settings/chromeos/os_printing_page/cups_printer_types.html|PrinterListEntry,PrinterType",
+                             "chrome/browser/resources/settings/about_page/about_page_browser_proxy.html|AboutPageBrowserProxyImpl,AboutPageUpdateInfo,AboutPageBrowserProxy,browserChannelToI18nId,VersionInfo,ChannelInfo,BrowserChannel,isTargetChannelMoreStable,UpdateStatus,UpdateStatusChangedEvent,RegulatoryInfo,TPMFirmwareUpdateStatusChangedEvent",
+                             "chrome/browser/resources/settings/chromeos/os_settings_page/main_page_behavior.html|MainPageBehavior",
+                             "ui/webui/resources/html/parse_html_subset.html|parseHtmlSubset",
                            ]
 
 os_settings_migrated_imports = settings_migrated_imports

chrome/browser/resources/settings/chromeos/os_settings.js

@@ -16,7 +16,12 @@ import './os_people_page/account_manager.m.js';
 import './os_people_page/kerberos_accounts.m.js';
 import './parental_controls_page/parental_controls_page.m.js';
 import './os_people_page/os_people_page.m.js';
+import './os_about_page/os_about_page.m.js';
+import './os_about_page/channel_switcher_dialog.m.js';
+import './os_about_page/detailed_build_info.m.js';
+import './os_about_page/update_warning_dialog.m.js';
 
+export {AboutPageBrowserProxyImpl, BrowserChannel, UpdateStatus} from '../about_page/about_page_browser_proxy.m.js';
 export {LifetimeBrowserProxy, LifetimeBrowserProxyImpl} from '../lifetime_browser_proxy.m.js';
 export {dataUsageStringToEnum, NearbyShareDataUsage} from '../nearby_share_page/types.m.js';
 export {pageVisibility} from '../page_visibility.js';

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -406,6 +406,49 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_OS_ABOUT_PAGE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.m.js"
+           use_base_dir="false"
+           compress="false"
+           preprocess="true"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_CHANNEL_SWITCHER_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/channel_switcher_dialog.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_DETAILED_BUILD_INFO_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_UPDATE_WARNING_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/update_warning_dialog.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_SETTINGS_PAGE_MAIN_PAGE_BEHAVIOR_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_settings_page/main_page_behavior.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_ABOUT_PAGE_ABOUT_PAGE_BROWSER_PROXY_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/about_page/about_page_browser_proxy.m.js"
+           use_base_dir="false"
+           compress="false"
+           preprocess="true"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_SETTINGS_PAGE_SETTINGS_SECTION_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/settings_page/settings_section.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_SETTINGS_PAGE_CSS_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/settings_page_css.m.js"
+           use_base_dir="false"
+           compress="false"
+           preprocess="true"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_OS_FILES_PAGE_OS_FILES_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_files_page/os_files_page.m.js"
            use_base_dir="false"

chrome/test/data/webui/BUILD.gn

@@ -300,6 +300,8 @@ if (include_js_tests) {
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/cups_printer_test_utils.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/cups_printer_landing_page_tests.m.js",
         "$root_gen_dir/chrome/test/data/webui/settings/chromeos/cups_printer_entry_tests.m.js",
+        "$root_gen_dir/chrome/test/data/webui/settings/chromeos/os_about_page_tests.m.js",
+        "$root_gen_dir/chrome/test/data/webui/settings/chromeos/test_about_page_browser_proxy_chromeos.m.js",
       ]
     }
     defines = [ "HAS_OUT_OF_PROC_TEST_RUNNER" ]

chrome/test/data/webui/settings/chromeos/BUILD.gn

@@ -75,6 +75,8 @@ js_modulizer("modulize") {
     "cups_printer_test_utils.js",
     "cups_printer_landing_page_tests.js",
     "cups_printer_entry_tests.js",
+    "os_about_page_tests.js",
+    "test_about_page_browser_proxy_chromeos.js",
   ]
   namespace_rewrites =
       os_settings_namespace_rewrites + os_test_namespace_rewrites

chrome/test/data/webui/settings/chromeos/os_about_page_tests.js

@@ -2,28 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('settings_about_page', function() {
-  function registerAboutPageTests() {
-    /**
-     * @param {!UpdateStatus} status
-     * @param {{
-     *   progress: number|undefined,
-     *   message: string|undefined
-     *   rollback: bool|undefined
-     *   powerwash: bool|undefined
-     * }} opt_options
-     */
-    function fireStatusChanged(status, opt_options) {
-      const options = opt_options || {};
-      cr.webUIListenerCallback('update-status-changed', {
-        progress: options.progress === undefined ? 1 : options.progress,
-        message: options.message,
-        status: status,
-        rollback: options.rollback,
-        powerwash: options.powerwash,
-      });
-    }
+// clang-format off
+// #import {TestAboutPageBrowserProxyChromeOS} from './test_about_page_browser_proxy_chromeos.m.js';
+// #import {BrowserChannel,UpdateStatus,AboutPageBrowserProxyImpl,LifetimeBrowserProxyImpl,Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {TestLifetimeBrowserProxy} from './test_os_lifetime_browser_proxy.m.js';
+// #import {eventToPromise,flushTasks} from 'chrome://test/test_util.m.js';
+// clang-format on
 
+cr.define('settings_about_page', function() {
   suite('AboutPageTest', function() {
     let page = null;
 
@@ -49,6 +37,26 @@ cr.define('settings_about_page', function() {
       page = null;
     });
 
+    /**
+     * @param {!UpdateStatus} status
+     * @param {{
+     *   progress: number|undefined,
+     *   message: string|undefined
+     *   rollback: bool|undefined
+     *   powerwash: bool|undefined
+     * }} opt_options
+     */
+    function fireStatusChanged(status, opt_options) {
+      const options = opt_options || {};
+      cr.webUIListenerCallback('update-status-changed', {
+        progress: options.progress === undefined ? 1 : options.progress,
+        message: options.message,
+        status: status,
+        rollback: options.rollback,
+        powerwash: options.powerwash,
+      });
+    }
+
     /** @return {!Promise} */
     function initNewPage() {
       aboutBrowserProxy.reset();
@@ -218,8 +226,7 @@ cr.define('settings_about_page', function() {
      * is more stable than current channel and update will powerwash.
      */
     test('ButtonsUpdate_BetaToStable', async () => {
-        aboutBrowserProxy.setChannels(
-            BrowserChannel.BETA, BrowserChannel.STABLE);
+      aboutBrowserProxy.setChannels(BrowserChannel.BETA, BrowserChannel.STABLE);
       await initNewPage();
 
       fireStatusChanged(UpdateStatus.NEARLY_UPDATED, {powerwash: true});
@@ -241,8 +248,7 @@ cr.define('settings_about_page', function() {
      * is less stable than current channel.
      */
     test('ButtonsUpdate_StableToBeta', async () => {
-        aboutBrowserProxy.setChannels(
-            BrowserChannel.STABLE, BrowserChannel.BETA);
+      aboutBrowserProxy.setChannels(BrowserChannel.STABLE, BrowserChannel.BETA);
       await initNewPage();
 
       fireStatusChanged(UpdateStatus.NEARLY_UPDATED, {powerwash: false});
@@ -484,25 +490,7 @@ cr.define('settings_about_page', function() {
       return aboutBrowserProxy.whenCalled('openOsHelpPage');
     });
   });
-  }
 
-  function registerOfficialBuildTests() {
-    suite('AboutPageTest_OfficialBuild', function() {
-      test('ReportAnIssue', function() {
-        const browserProxy = new TestAboutPageBrowserProxyChromeOS();
-        settings.AboutPageBrowserProxyImpl.instance_ = browserProxy;
-        PolymerTest.clearBody();
-        const page = document.createElement('os-settings-about-page');
-        document.body.appendChild(page);
-
-        assertTrue(!!page.$.reportIssue);
-        page.$.reportIssue.click();
-        return browserProxy.whenCalled('openFeedbackDialog');
-      });
-    });
-  }
-
-  function registerDetailedBuildInfoTests() {
   suite('DetailedBuildInfoTest', function() {
     let page = null;
     let browserProxy = null;
@@ -615,16 +603,15 @@ cr.define('settings_about_page', function() {
       checkCopyBuildDetailsButton();
     });
   });
-  }
 
-  function registerChannelSwitcherDialogTests() {
   suite('ChannelSwitcherDialogTest', function() {
     let dialog = null;
     let radioButtons = null;
     let browserProxy = null;
-      const currentChannel = BrowserChannel.BETA;
+    let currentChannel;
 
     setup(function() {
+      currentChannel = BrowserChannel.BETA;
       browserProxy = new TestAboutPageBrowserProxyChromeOS();
       browserProxy.setChannels(currentChannel, currentChannel);
       settings.AboutPageBrowserProxyImpl.instance_ = browserProxy;
@@ -708,14 +695,21 @@ cr.define('settings_about_page', function() {
       assertEquals(BrowserChannel.STABLE, detail);
     });
   });
-  }
 
-  return {
-    registerTests: function() {
-      registerDetailedBuildInfoTests();
-      registerChannelSwitcherDialogTests();
-      registerAboutPageTests();
-    },
-    registerOfficialBuildTests: registerOfficialBuildTests,
-  };
+  suite('AboutPageTest_OfficialBuild', function() {
+    test('ReportAnIssue', function() {
+      const browserProxy = new TestAboutPageBrowserProxyChromeOS();
+      settings.AboutPageBrowserProxyImpl.instance_ = browserProxy;
+      PolymerTest.clearBody();
+      const page = document.createElement('os-settings-about-page');
+      document.body.appendChild(page);
+
+      assertTrue(!!page.$.reportIssue);
+      page.$.reportIssue.click();
+      return browserProxy.whenCalled('openFeedbackDialog');
+    });
+  });
+
+  // #cr_define_end
+  return {};
 });

chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js

@@ -82,15 +82,13 @@ var OSSettingsAboutPageTest = class extends OSSettingsBrowserTest {
   }
 };
 
-TEST_F('OSSettingsAboutPageTest', 'AboutPage', () => {
-  settings_about_page.registerTests();
-  mocha.run();
+TEST_F('OSSettingsAboutPageTest', 'AllBuilds', () => {
+  mocha.grep('/^(?!AboutPageTest_OfficialBuild).*$/').run();
 });
 
 GEN('#if BUILDFLAG(GOOGLE_CHROME_BRANDING)');
 TEST_F('OSSettingsAboutPageTest', 'AboutPage_OfficialBuild', () => {
-  settings_about_page.registerOfficialBuildTests();
-  mocha.run();
+  mocha.grep('AboutPageTest_OfficialBuild').run();
 });
 GEN('#endif');
 

chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js

@@ -6,6 +6,7 @@
 // Polymer BrowserTest fixture.
 GEN_INCLUDE(['//chrome/test/data/webui/polymer_browser_test_base.js']);
 GEN('#include "chrome/common/buildflags.h"');
+GEN('#include "build/branding_buildflags.h"');
 GEN('#include "content/public/test/browser_test.h"');
 GEN('#include "chromeos/constants/chromeos_features.h"');
 
@@ -65,6 +66,7 @@ var OSSettingsV3BrowserTest = class extends PolymerTest {
  ['CupsPrinterPage', 'cups_printer_page_tests.m.js'],
  ['CupsPrinterLandingPage', 'cups_printer_landing_page_tests.m.js'],
  ['CupsPrinterEntry', 'cups_printer_entry_tests.m.js'],
+ ['AboutPage', 'os_about_page_tests.m.js'],
 ].forEach(test => registerTest(...test));
 
 function registerTest(testName, module, caseName) {
@@ -76,5 +78,19 @@ function registerTest(testName, module, caseName) {
     }
   };
 
+  // AboutPage has a test suite that can only succeed on official builds where
+  // the is_chrome_branded build flag is enabled
+  if (testName === 'AboutPage') {
+    TEST_F(className, 'AllBuilds' || 'All', () => {
+      mocha.grep('/^(?!AboutPageTest_OfficialBuild).*$/').run();
+    });
+
+    GEN('#if BUILDFLAG(GOOGLE_CHROME_BRANDING)');
+    TEST_F(className, 'OfficialBuild' || 'All', () => {
+      mocha.grep('AboutPageTest_OfficialBuild').run();
+    });
+    GEN('#endif');
+  } else {
     TEST_F(className, caseName || 'All', () => mocha.run());
+  }
 }

chrome/test/data/webui/settings/chromeos/test_about_page_browser_proxy_chromeos.js

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// #import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
-// #import {BrowserChannel, UpdateStatus} from 'chrome://settings/settings.js';
+// clang-format off
+// #import {TestBrowserProxy} from '../../test_browser_proxy.m.js';
+// #import {BrowserChannel,UpdateStatus} from 'chrome://os-settings/chromeos/os_settings.js';
+// clang-format on
 
 /** @implements {settings.AboutPageBrowserProxy} */
 /* #export */ class TestAboutPageBrowserProxyChromeOS extends TestBrowserProxy {

ui/webui/resources/cr_elements/chromeos/os_cr_elements.gni

@@ -12,4 +12,5 @@ cr_elements_chromeos_namespace_rewrites = [
 cr_elements_chromeos_auto_imports = [
   "ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_types.html|CrPicture",
   "ui/webui/resources/cr_elements/chromeos/cr_picture/png.html|convertImageSequenceToPng,isEncodedPngDataUrlAnimated",
+  "ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.html|CrPolicyIndicatorType",
 ]