ambient: Add a basic Chrome OS settings page

This patch adds a basic Chrome OS settings page for the ambient mode.
Two settings added:
1. A top level toggle to enable/disable the ambient mode.
2. A radio button group to choose the topic source, e.g. Google photos.

Bug: b/151372242
Test: new browser tests
Change-Id: Ifeda979080b33a5d42643b010e39d5e15b31c2e3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2102008Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Cook <jamescook@chromium.org>
Reviewed-by: Sam McNally <sammc@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Yue Li <updowndota@chromium.org>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Tao Wu <wutao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753258}

ash/ambient/ambient_controller.cc

@@ -35,6 +35,14 @@ void AmbientController::RegisterProfilePrefs(PrefRegistrySimple* registry) {
   if (chromeos::features::IsAmbientModeEnabled()) {
     registry->RegisterStringPref(ash::ambient::prefs::kAmbientBackdropClientId,
                                  std::string());
+
+    // Do not sync across devices to allow different usages for different
+    // devices.
+    registry->RegisterBooleanPref(ash::ambient::prefs::kAmbientModeEnabled,
+                                  true);
+    registry->RegisterIntegerPref(
+        ash::ambient::prefs::kAmbientModeTopicSource,
+        static_cast<int>(ash::ambient::prefs::TopicSource::kArtGallery));
   }
 }
 

ash/public/cpp/ambient/ambient_prefs.cc

@@ -12,6 +12,10 @@ namespace prefs {
 
 constexpr char kAmbientBackdropClientId[] = "ash.ambient.backdrop.client.id";
 
+constexpr char kAmbientModeEnabled[] = "settings.ambient_mode.enabled";
+
+constexpr char kAmbientModeTopicSource[] = "settings.ambient_mode.topic_source";
+
 }  // namespace prefs
 }  // namespace ambient
 }  // namespace ash

ash/public/cpp/ambient/ambient_prefs.h

@@ -11,9 +11,27 @@ namespace ash {
 namespace ambient {
 namespace prefs {
 
+// Enumeration of the topic source, i.e. where the photos come from.
+// Values need to stay in sync with the |topicSource_| in ambient_mode_page.js.
+// Art gallery is a super set of art related topic sources in Backdrop service.
+// These values are registered in prefs.
+// Entries should not be renumbered and numeric values should never be reused.
+// Only append to this enum is allowed if more source will be added.
+enum class TopicSource {
+  kGooglePhotos = 0,
+  kArtGallery = 1,
+  kMaxValue = kArtGallery,
+};
+
 // A GUID for backdrop client.
 ASH_PUBLIC_EXPORT extern const char kAmbientBackdropClientId[];
 
+// Boolean pref for whether ambient mode is enabled.
+ASH_PUBLIC_EXPORT extern const char kAmbientModeEnabled[];
+
+// Integer pref for ambient topic source, value is one of TopicSource.
+ASH_PUBLIC_EXPORT extern const char kAmbientModeTopicSource[];
+
 }  // namespace prefs
 }  // namespace ambient
 }  // namespace ash

chrome/app/os_settings_strings.grdp

@@ -315,6 +315,30 @@
   <message name="IDS_OS_SETTINGS_CHANGE_PICTURE_TITLE" desc="Label for row in settings page that shows the user image picker.">
     Change device account image
   </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_TITLE" desc="Label for row in settings page that opens the ambient mode settings page to customize what you see on your screen when the device is idle.">
+    Ambient mode
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_ENABLED" desc="Sub label for the ambient mode row in settings page when it is enabled.">
+    Enabled
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_DISABLED" desc="Sub label for the ambient mode row in settings page when it is disabled.">
+    Disabled
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_ON" desc="Label for the toggle row in ambient mode settings page when it is enabled.">
+    On
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_OFF" desc="Label for the toggle row in ambient mode settings page when it is disabled.">
+    Off
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_TITLE" desc="Label for the radio button group of topic source, where the screen contents come from.">
+    Choose what you see on your screen
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_GOOGLE_PHOTOS" desc="Label for the radio button to choose the topic source from Google Photos.">
+    Google Photos
+  </message>
+  <message name="IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_ART_GALLERY" desc="Label for the radio button to choose the topic source from art gallery.">
+    Art gallery
+  </message>
 
   <!-- Search and Assistant section. -->
   <message name="IDS_OS_SETTINGS_SEARCH_ENGINE_LABEL" desc="Label in OS settings describing search engine behavior.">

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_DISABLED.png.sha1

+c857f2eab5600f993642e58139a1d09d1648c64f
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_ENABLED.png.sha1

+6463a86de2a4f69cc1ec7014099fea42e887be13
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_OFF.png.sha1

+53edd126c4273f366fdc0d0fb2667959d75fc780
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_ON.png.sha1

+d694d74276c3d458f4ff7a6e1814fc56ba0a5367
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_TITLE.png.sha1

+22d883ef436173ef138214b2731e4371af96dcce
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_ART_GALLERY.png.sha1

+14f5b65f17900e406f6bc5e73ae278ddb980693d
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_GOOGLE_PHOTOS.png.sha1

+24473868c185ef36c5f8975a29709c25844cd6db
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_TITLE.png.sha1

+ed13f271527f62a8b0bad446be8d7140e02a5351
\ No newline at end of file

chrome/browser/extensions/api/settings_private/prefs_util.cc

@@ -44,6 +44,7 @@
 #include "extensions/common/extension.h"
 
 #if defined(OS_CHROMEOS)
+#include "ash/public/cpp/ambient/ambient_prefs.h"
 #include "ash/public/cpp/ash_pref_names.h"  // nogncheck
 #include "chrome/browser/chromeos/crostini/crostini_pref_names.h"
 #include "chrome/browser/chromeos/guest_os/guest_os_pref_names.h"
@@ -473,6 +474,12 @@ const PrefsUtil::TypedPrefMap& PrefsUtil::GetWhitelistedKeys() {
   (*s_whitelist)[arc::prefs::kArcEnabled] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
 
+  // Ambient Mode.
+  (*s_whitelist)[ash::ambient::prefs::kAmbientModeEnabled] =
+      settings_api::PrefType::PREF_TYPE_BOOLEAN;
+  (*s_whitelist)[ash::ambient::prefs::kAmbientModeTopicSource] =
+      settings_api::PrefType::PREF_TYPE_NUMBER;
+
   // Google Assistant.
   (*s_whitelist)[chromeos::assistant::prefs::kAssistantConsentStatus] =
       settings_api::PrefType::PREF_TYPE_NUMBER;

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

@@ -86,6 +86,7 @@ group("closure_compile") {
     ":os_route",
     ":os_settings_routes",
     ":route_origin_behavior",
+    "ambient_mode_page:closure_compile",
     "bluetooth_page:closure_compile",
     "crostini_page:closure_compile",
     "date_time_page:closure_compile",

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

+# Copyright 2020 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":ambient_mode_browser_proxy",
+    ":ambient_mode_page",
+  ]
+}
+
+js_library("ambient_mode_browser_proxy") {
+  deps = [ "//ui/webui/resources/js:cr" ]
+  externs_list = [ "$externs_path/chrome_send.js" ]
+}
+
+js_library("ambient_mode_page") {
+  deps = [
+    ":ambient_mode_browser_proxy",
+    "../../prefs:prefs_behavior",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js:load_time_data",
+  ]
+}

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

+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="ambient_mode_browser_proxy.js"></script>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview A helper object used from the ambient mode section to interact
+ * with the browser.
+ */
+
+cr.define('settings', function() {
+  /** @interface */
+  class AmbientModeBrowserProxy {
+    onAmbientModePageReady() {}
+  }
+
+  /** @implements {settings.AmbientModeBrowserProxy} */
+  class AmbientModeBrowserProxyImpl {
+    /** @override */
+    onAmbientModePageReady() {
+      chrome.send('onAmbientModePageReady');
+    }
+  }
+
+  // The singleton instance_ is replaced with a test version of this wrapper
+  // during testing.
+  cr.addSingletonGetter(AmbientModeBrowserProxyImpl);
+
+  return {
+    AmbientModeBrowserProxy: AmbientModeBrowserProxy,
+    AmbientModeBrowserProxyImpl: AmbientModeBrowserProxyImpl,
+  };
+});

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="ambient_mode_browser_proxy.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="../../controls/settings_radio_group.html">
+<link rel="import" href="../../controls/settings_toggle_button.html">
+<link rel="import" href="../../settings_shared_css.html">
+
+<dom-module id="settings-ambient-mode-page">
+  <template>
+    <style include="settings-shared">
+      #ambientModeEnable {
+        border-bottom: var(--cr-separator-line);
+      }
+
+      #topicSourceDescription {
+        display: block;
+        padding-inline-end: var(--cr-section-padding);
+        padding-inline-start: var(--cr-section-padding);
+      }
+    </style>
+    <settings-toggle-button id="ambientModeEnable"
+        class="first primary-toggle"
+        pref="{{prefs.settings.ambient_mode.enabled}}"
+        label="[[getAmbientModeOnOffLabel_(
+            prefs.settings.ambient_mode.enabled.value)]]">
+    </settings-toggle-button>
+
+    <template is="dom-if" if="[[prefs.settings.ambient_mode.enabled.value]]">
+      <label id="topicSourceDescription" class="settings-box-text">
+          $i18n{ambientModeTopicSourceTitle}
+      </label>
+      <settings-radio-group id="topicSourceRadioGroup"
+          class="list-frame"
+          aria-labelledby="topicSourceDescription"
+          pref="{{prefs.settings.ambient_mode.topic_source}}">
+        <cr-radio-button name="[[topicSource_.GOOGLE_PHOTOS]]"
+            class="list-item underbar"
+            label="$i18n{ambientModeTopicSourceGooglePhotos}">
+        </cr-radio-button>
+        <cr-radio-button name="[[topicSource_.ART_GALLERY]]"
+            class="list-item underbar"
+            label="$i18n{ambientModeTopicSourceArtGallery}">
+        </cr-radio-button>
+      </settings-radio-group>
+    </template>
+  </template>
+  <script src="ambient_mode_page.js"></script>
+</dom-module>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview 'settings-ambient-mode-page' is the settings page containing
+ * ambient mode settings.
+ */
+Polymer({
+  is: 'settings-ambient-mode-page',
+
+  behaviors: [I18nBehavior, PrefsBehavior],
+
+  properties: {
+    prefs: Object,
+
+    /**
+     * Enum values for the 'settings.ambient_mode.topic_source' preference.
+     * Values need to stay in sync with the |ash::ambient::prefs::TopicSource|.
+     * @private {!Object<string, number>}
+     */
+    topicSource_: {
+      type: Object,
+      value: {
+        GOOGLE_PHOTOS: 0,
+        ART_GALLERY: 1,
+      },
+      readOnly: true,
+    },
+
+    /** @private */
+    isAmbientModeEnabled_: {
+      type: Boolean,
+      value() {
+        return loadTimeData.getBoolean('isAmbientModeEnabled');
+      },
+      readOnly: true,
+    },
+  },
+
+  /** @private {?settings.AmbientModeBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  created() {
+    this.browserProxy_ = settings.AmbientModeBrowserProxyImpl.getInstance();
+  },
+
+  /** @override */
+  ready() {
+    this.browserProxy_.onAmbientModePageReady();
+  },
+
+  /**
+   * @param {boolean} toggleValue
+   * @return {string}
+   * @private
+   */
+  getAmbientModeOnOffLabel_(toggleValue) {
+    return this.i18n(toggleValue ? 'ambientModeOn' : 'ambientModeOff');
+  },
+});

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

@@ -117,6 +117,7 @@ cr.define('settings', function() {
       r.PERSONALIZATION =
           r.BASIC.createSection('/personalization', 'personalization');
       r.CHANGE_PICTURE = r.PERSONALIZATION.createChild('/changePicture');
+      r.AMBIENT_MODE = r.PERSONALIZATION.createChild('/ambientMode');
 
       // Files (analogous to Downloads)
       r.FILES = r.ADVANCED.createSection('/files', 'files');

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

@@ -159,7 +159,8 @@
         <template is="dom-if" if="[[!isGuestMode_]]" restamp>
           <settings-section page-title="$i18n{personalizationPageTitle}"
               section="personalization">
-            <settings-personalization-page></settings-personalization-page>
+            <settings-personalization-page prefs="{{prefs}}">
+            </settings-personalization-page>
           </settings-section>
         </template>
         <settings-section page-title="$i18n{osSearchPageTitle}"

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

@@ -38,7 +38,9 @@ js_library("personalization_page") {
     ":wallpaper_browser_proxy",
     "..:os_route",
     "../..:router",
+    "../../prefs",
     "../../settings_page:settings_animated_pages",
+    "../ambient_mode_page:ambient_mode_browser_proxy",
     "//ui/webui/resources/js:cr",
   ]
 }

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="../ambient_mode_page/ambient_mode_page.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="change_picture.html">
 <link rel="import" href="../os_route.html">
 <link rel="import" href="../../router.html">
@@ -31,6 +33,19 @@
             </cr-policy-indicator>
           </template>
         </cr-link-row>
+
+        <!-- Ambient mode -->
+        <template is="dom-if" if="[[isAmbientModeEnabled_]]">
+          <cr-link-row
+              class="hr"
+              id="ambientModeRow"
+              label="$i18n{ambientModeTitle}"
+              sub-label="[[getAmbientModeRowSubLabel_(
+                  prefs.settings.ambient_mode.enabled.value)]]"
+              on-click="navigateToAmbientMode_"
+              role-description="$i18n{subpageArrowRoleDescription}">
+          </cr-link-row>
+        </template>
       </div>
 
       <template is="dom-if" route-path="/changePicture">
@@ -40,6 +55,14 @@
           <settings-change-picture></settings-change-picture>
         </settings-subpage>
       </template>
+      <template is="dom-if" route-path="/ambientMode">
+        <settings-subpage
+            associated-control="[[$$('#ambientModeRow')]]"
+            page-title="$i18n{ambientModeTitle}">
+          <settings-ambient-mode-page prefs="{{prefs}}">
+          </settings-ambient-mode-page>
+        </settings-subpage>
+      </template>
     </settings-animated-pages>
   </template>
   <script src="personalization_page.js"></script>

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

@@ -12,13 +12,29 @@
 Polymer({
   is: 'settings-personalization-page',
 
+  behaviors: [I18nBehavior],
+
   properties: {
+    /**
+     * Preferences state.
+     */
+    prefs: Object,
+
     /** @private */
     showWallpaperRow_: {type: Boolean, value: true},
 
     /** @private */
     isWallpaperPolicyControlled_: {type: Boolean, value: true},
 
+    /** @private */
+    isAmbientModeEnabled_: {
+      type: Boolean,
+      value() {
+        return loadTimeData.getBoolean('isAmbientModeEnabled');
+      },
+      readOnly: true,
+    },
+
     /** @private {!Map<string, string>} */
     focusConfig_: {
       type: Object,
@@ -26,7 +42,10 @@ Polymer({
         const map = new Map();
         if (settings.routes.CHANGE_PICTURE) {
           map.set(settings.routes.CHANGE_PICTURE.path, '#changePictureRow');
+        } else if (settings.routes.AMBIENT_MODE) {
+          map.set(settings.routes.AMBIENT_MODE.path, '#ambientModeRow');
         }
+
         return map;
       }
     },
@@ -63,5 +82,20 @@ Polymer({
   navigateToChangePicture_() {
     settings.Router.getInstance().navigateTo(settings.routes.CHANGE_PICTURE);
   },
+
+  /** @private */
+  navigateToAmbientMode_() {
+    settings.Router.getInstance().navigateTo(settings.routes.AMBIENT_MODE);
+  },
+
+  /**
+   * @param {boolean} toggleValue
+   * @return {string}
+   * @private
+   */
+  getAmbientModeRowSubLabel_(toggleValue) {
+    return this.i18n(
+        toggleValue ? 'ambientModeEnabled' : 'ambientModeDisabled');
+  },
 });
 })();

chrome/browser/resources/settings/os_settings_resources.grd

@@ -61,6 +61,18 @@
       <structure name="IDR_OS_SETTINGS_A11Y_PAGE_HTML"
                  file="chromeos/os_a11y_page/os_a11y_page.html"
                  type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_AMBIENT_MODE_PAGE_AMBIENT_MODE_PAGE_JS"
+                 file="chromeos/ambient_mode_page/ambient_mode_page.js"
+                 type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_AMBIENT_MODE_PAGE_AMBIENT_MODE_PAGE_HTML"
+                 file="chromeos/ambient_mode_page/ambient_mode_page.html"
+                 type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_AMBIENT_MODE_PAGE_AMBIENT_MODE_BROWSER_PROXY_JS"
+                 file="chromeos/ambient_mode_page/ambient_mode_browser_proxy.js"
+                 type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_AMBIENT_MODE_PAGE_AMBIENT_MODE_BROWSER_PROXY_HTML"
+                 file="chromeos/ambient_mode_page/ambient_mode_browser_proxy.html"
+                 type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_APPS_PAGE_JS"
                  file="chromeos/os_apps_page/os_apps_page.js"
                  type="chrome_html" />

chrome/browser/resources/settings/settings_routes.js

@@ -12,6 +12,7 @@
  *   ACCESSIBILITY: !settings.Route,
  *   ADVANCED: !settings.Route,
  *   ADDRESSES: !settings.Route,
+ *   AMBIENT_MODE: !settings.Route,
  *   APPEARANCE: !settings.Route,
  *   AUTOFILL: !settings.Route,
  *   BASIC: !settings.Route,

chrome/browser/ui/BUILD.gn

@@ -1984,6 +1984,8 @@ jumbo_static_library("ui") {
       "webui/settings/chromeos/accessibility_handler.h",
       "webui/settings/chromeos/account_manager_handler.cc",
       "webui/settings/chromeos/account_manager_handler.h",
+      "webui/settings/chromeos/ambient_mode_handler.cc",
+      "webui/settings/chromeos/ambient_mode_handler.h",
       "webui/settings/chromeos/android_apps_handler.cc",
       "webui/settings/chromeos/android_apps_handler.h",
       "webui/settings/chromeos/app_management/app_management_page_handler_factory.cc",

chrome/browser/ui/ash/chrome_new_window_client.cc

@@ -77,6 +77,7 @@ constexpr std::pair<arc::mojom::ChromePage, const char*> kOSSettingsMapping[] =
     {{ChromePage::ACCESSIBILITY, chrome::kAccessibilitySubPage},
      {ChromePage::ACCOUNTS, chrome::kAccountSubPage},
      {ChromePage::ACCOUNTMANAGER, chrome::kAccountManagerSubPage},
+     {ChromePage::AMBIENTMODE, chrome::kAmbientModeSubPage},
      {ChromePage::ANDROIDAPPSDETAILS, chrome::kAndroidAppsDetailsSubPage},
      {ChromePage::ANDROIDAPPSDETAILSINBROWSERSETTINGS,
       chrome::kAndroidAppsDetailsSubPageInBrowserSettings},

chrome/browser/ui/ash/chrome_new_window_client_browsertest.cc

@@ -286,6 +286,8 @@ void TestAllOSSettingPages(const GURL& base_url) {
                      base_url.Resolve(chrome::kAccessibilitySubPage));
   TestOpenChromePage(ChromePage::ACCOUNTMANAGER,
                      base_url.Resolve(chrome::kAccountManagerSubPage));
+  TestOpenChromePage(ChromePage::AMBIENTMODE,
+                     base_url.Resolve(chrome::kAmbientModeSubPage));
   TestOpenChromePage(ChromePage::ANDROIDAPPSDETAILS,
                      base_url.Resolve(chrome::kAndroidAppsDetailsSubPage));
   TestOpenChromePage(

chrome/browser/ui/webui/settings/chromeos/ambient_mode_handler.cc

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "chrome/browser/ui/webui/settings/chromeos/ambient_mode_handler.h"
+
+#include "base/bind.h"
+#include "base/values.h"
+
+namespace chromeos {
+namespace settings {
+
+AmbientModeHandler::AmbientModeHandler() = default;
+
+AmbientModeHandler::~AmbientModeHandler() = default;
+
+void AmbientModeHandler::RegisterMessages() {
+  web_ui()->RegisterMessageCallback(
+      "onAmbientModePageReady",
+      base::BindRepeating(&AmbientModeHandler::HandleInitialized,
+                          base::Unretained(this)));
+}
+
+void AmbientModeHandler::HandleInitialized(const base::ListValue* args) {
+  CHECK(args);
+  CHECK(args->empty());
+
+  AllowJavascript();
+}
+
+}  // namespace settings
+}  // namespace chromeos

chrome/browser/ui/webui/settings/chromeos/ambient_mode_handler.h

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CHROME_BROWSER_UI_WEBUI_SETTINGS_CHROMEOS_AMBIENT_MODE_HANDLER_H_
+#define CHROME_BROWSER_UI_WEBUI_SETTINGS_CHROMEOS_AMBIENT_MODE_HANDLER_H_
+
+#include "chrome/browser/ui/webui/settings/settings_page_ui_handler.h"
+
+namespace base {
+class ListValue;
+}  // namespace base
+
+namespace chromeos {
+namespace settings {
+
+// Chrome OS ambient mode settings page UI handler, to allow users to customize
+// photo frame and other related functionalities.
+class AmbientModeHandler : public ::settings::SettingsPageUIHandler {
+ public:
+  AmbientModeHandler();
+  AmbientModeHandler(const AmbientModeHandler&) = delete;
+  AmbientModeHandler& operator=(const AmbientModeHandler&) = delete;
+  ~AmbientModeHandler() override;
+
+  // settings::SettingsPageUIHandler:
+  void RegisterMessages() override;
+  void OnJavascriptAllowed() override {}
+  void OnJavascriptDisallowed() override {}
+
+ private:
+  // WebUI call to signal js side is ready.
+  void HandleInitialized(const base::ListValue* args);
+};
+
+}  // namespace settings
+}  // namespace chromeos
+
+#endif  // CHROME_BROWSER_UI_WEBUI_SETTINGS_CHROMEOS_AMBIENT_MODE_HANDLER_H_

chrome/browser/ui/webui/settings/chromeos/os_settings_localized_strings_provider.cc

@@ -423,6 +423,17 @@ void AddLanguagesStrings(content::WebUIDataSource* html_source) {
 
 void AddPersonalizationStrings(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
+      {"ambientModeTitle", IDS_OS_SETTINGS_AMBIENT_MODE_TITLE},
+      {"ambientModeEnabled", IDS_OS_SETTINGS_AMBIENT_MODE_ENABLED},
+      {"ambientModeDisabled", IDS_OS_SETTINGS_AMBIENT_MODE_DISABLED},
+      {"ambientModeOn", IDS_OS_SETTINGS_AMBIENT_MODE_ON},
+      {"ambientModeOff", IDS_OS_SETTINGS_AMBIENT_MODE_OFF},
+      {"ambientModeTopicSourceTitle",
+       IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_TITLE},
+      {"ambientModeTopicSourceGooglePhotos",
+       IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_GOOGLE_PHOTOS},
+      {"ambientModeTopicSourceArtGallery",
+       IDS_OS_SETTINGS_AMBIENT_MODE_TOPIC_SOURCE_ART_GALLERY},
       {"changePictureTitle", IDS_OS_SETTINGS_CHANGE_PICTURE_TITLE},
       {"openWallpaperApp", IDS_OS_SETTINGS_OPEN_WALLPAPER_APP},
       {"personalizationPageTitle", IDS_OS_SETTINGS_PERSONALIZATION},
@@ -451,6 +462,8 @@ void AddPersonalizationStrings(content::WebUIDataSource* html_source) {
   html_source->AddBoolean(
       "changePictureVideoModeEnabled",
       base::FeatureList::IsEnabled(::features::kChangePictureVideoMode));
+  html_source->AddBoolean("isAmbientModeEnabled",
+                          chromeos::features::IsAmbientModeEnabled());
 }
 
 void AddFingerprintListStrings(content::WebUIDataSource* html_source) {

chrome/browser/ui/webui/settings/chromeos/os_settings_ui.cc

@@ -46,6 +46,7 @@
 #include "chrome/browser/ui/webui/settings/browser_lifetime_handler.h"
 #include "chrome/browser/ui/webui/settings/chromeos/accessibility_handler.h"
 #include "chrome/browser/ui/webui/settings/chromeos/account_manager_handler.h"
+#include "chrome/browser/ui/webui/settings/chromeos/ambient_mode_handler.h"
 #include "chrome/browser/ui/webui/settings/chromeos/android_apps_handler.h"
 #include "chrome/browser/ui/webui/settings/chromeos/change_picture_handler.h"
 #include "chrome/browser/ui/webui/settings/chromeos/crostini_handler.h"
@@ -384,6 +385,11 @@ void OSSettingsUI::InitOSWebUIHandlers(content::WebUIDataSource* html_source) {
           std::make_unique<chromeos::settings::ParentalControlsHandler>(
               profile));
     }
+
+    if (chromeos::features::IsAmbientModeEnabled()) {
+      web_ui()->AddMessageHandler(
+          std::make_unique<chromeos::settings::AmbientModeHandler>());
+    }
   }
 
   html_source->AddBoolean(

chrome/common/webui_url_constants.cc

@@ -392,6 +392,7 @@ const char kTriggeredResetProfileSettingsSubPage[] =
 const char kAccessibilitySubPage[] = "accessibility";
 const char kAccountManagerSubPage[] = "accountManager";
 const char kAccountSubPage[] = "accounts";
+const char kAmbientModeSubPage[] = "ambientMode";
 const char kAndroidAppsDetailsSubPage[] = "androidAppsDetails";
 const char kAndroidAppsDetailsSubPageInBrowserSettings[] =
     "androidApps/details";
@@ -445,6 +446,7 @@ bool IsOSSettingsSubPage(const std::string& sub_page) {
       kAccessibilitySubPage,
       kAccountManagerSubPage,
       kAccountSubPage,
+      kAmbientModeSubPage,
       kAndroidAppsDetailsSubPage,
       kAndroidAppsDetailsSubPageInBrowserSettings,
       kAppManagementDetailSubPage,

chrome/common/webui_url_constants.h

@@ -348,6 +348,7 @@ extern const char kTriggeredResetProfileSettingsSubPage[];
 extern const char kAccessibilitySubPage[];
 extern const char kAccountManagerSubPage[];
 extern const char kAccountSubPage[];
+extern const char kAmbientModeSubPage[];
 extern const char kAndroidAppsDetailsSubPage[];
 extern const char kAndroidAppsDetailsSubPageInBrowserSettings[];
 extern const char kAppManagementDetailSubPage[];

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @implements {settings.AmbientModeBrowserProxy}
+ */
+class TestAmbientModeBrowserProxy extends TestBrowserProxy {
+  constructor() {
+    super([
+      'onAmbientModePageReady',
+    ]);
+  }
+
+  /** @override */
+  onAmbientModePageReady() {
+    this.methodCalled('onAmbientModePageReady');
+  }
+}
+
+suite('AmbientModeHandler', function() {
+  /** @type {SettingsAmbientModePageElement} */
+  let page = null;
+
+  /** @type {?TestAmbientModeBrowserProxy} */
+  let browserProxy = null;
+
+  suiteSetup(function() {});
+
+  setup(function() {
+    browserProxy = new TestAmbientModeBrowserProxy();
+    settings.AmbientModeBrowserProxyImpl.instance_ = browserProxy;
+
+    PolymerTest.clearBody();
+
+    const prefElement = document.createElement('settings-prefs');
+    document.body.appendChild(prefElement);
+
+    return CrSettingsPrefs.initialized.then(function() {
+      page = document.createElement('settings-ambient-mode-page');
+      page.prefs = prefElement.prefs;
+      document.body.appendChild(page);
+    });
+  });
+
+  teardown(function() {
+    page.remove();
+  });
+
+  test('toggleAmbientMode', function() {
+    const button = page.$$('#ambientModeEnable');
+    assertTrue(!!button);
+    assertFalse(button.disabled);
+
+    // The button's state is set by the pref value.
+    const enabled = page.getPref('settings.ambient_mode.enabled.value');
+    assertEquals(enabled, button.checked);
+
+    // Click the button will toggle the pref value.
+    button.click();
+    Polymer.dom.flush();
+    const enabled_toggled = page.getPref('settings.ambient_mode.enabled.value');
+    assertEquals(enabled_toggled, button.checked);
+    assertEquals(enabled, !enabled_toggled);
+
+    // Click again will toggle the pref value.
+    button.click();
+    Polymer.dom.flush();
+    const enabled_toggled_twice =
+        page.getPref('settings.ambient_mode.enabled.value');
+    assertEquals(enabled_toggled_twice, button.checked);
+    assertEquals(enabled, enabled_toggled_twice);
+  });
+
+  test('chooseTopicSource', function() {
+    const topicSourceRadioGroup = page.$$('#topicSourceRadioGroup');
+
+    // The radio group's state is set by the pref value.
+    let topicSourceValue =
+        page.getPref('settings.ambient_mode.topic_source.value');
+    assertEquals(topicSourceValue, parseFloat(topicSourceRadioGroup.selected));
+
+    const radioButtons =
+        topicSourceRadioGroup.querySelectorAll('cr-radio-button');
+    assertEquals(2, radioButtons.length);
+
+    // Click on topic source radio button will set the pref value.
+    radioButtons.forEach(function(button, index) {
+      button.click();
+      topicSourceValue =
+          page.getPref('settings.ambient_mode.topic_source.value');
+      assertEquals(topicSourceValue, index);
+    });
+  });
+});

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

@@ -218,6 +218,33 @@ TEST_F('OSSettingsAddUsersTest', 'AllJsTests', () => {
   mocha.run();
 });
 
+
+// Tests for ambient mode page.
+// eslint-disable-next-line no-var
+var OSSettingsAmbientModePageTest = class extends OSSettingsBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload + 'ambient_mode_page/ambient_mode_page.html';
+  }
+
+  /** @override */
+  get featureList() {
+    return {enabled: ['chromeos::features::kAmbientModeFeature']};
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      BROWSER_SETTINGS_PATH + '../test_browser_proxy.js',
+      'ambient_mode_page_test.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsAmbientModePageTest', 'AllJsTests', () => {
+  mocha.run();
+});
+
 // Tests for the main contents of the settings page.
 // eslint-disable-next-line no-var
 var OSSettingsPageTest = class extends OSSettingsBrowserTest {
@@ -1043,6 +1070,11 @@ var OSSettingsPersonalizationPageTest = class extends OSSettingsBrowserTest {
         'chromeos/personalization_page/personalization_page.html';
   }
 
+  /** @override */
+  get featureList() {
+    return {enabled: ['chromeos::features::kAmbientModeFeature']};
+  }
+
   /** @override */
   get extraLibraries() {
     return super.extraLibraries.concat([

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

@@ -86,4 +86,14 @@ suite('PersonalizationHandler', function() {
         settings.routes.CHANGE_PICTURE,
         settings.Router.getInstance().getCurrentRoute());
   });
+
+  test('ambientMode', function() {
+    const row = personalizationPage.$$('#ambientModeRow');
+    assertTrue(!!row);
+    row.click();
+    assertEquals(
+        settings.routes.AMBIENT_MODE,
+        settings.Router.getInstance().getCurrentRoute());
+  });
+
 });

components/arc/mojom/intent_helper.mojom

@@ -170,8 +170,9 @@ enum ChromePage {
   TETHERSETTINGS,
   ETHERNET,
   CELLULAR,
+  AMBIENTMODE,
 
-  LAST = CELLULAR,
+  LAST = AMBIENTMODE,
 };
 
 // Describes an unique chrome app.