From 3b72df1f801b1a3b81bc226fc12705d827b511a2 Mon Sep 17 00:00:00 2001
From: Jason Thai <jasontt@chromium.org>
Date: Tue, 15 Mar 2022 03:31:45 +0000
Subject: [PATCH] personalization: add zero state for ambient subpage

When ambient mode is disabled, show zero state image and message.

BUG=b/224550204
TEST=browser_tests
       --gtest_filter="PersonalizationAppComponentBrowserTest"

Screenshot: https://screenshot.googleplex.com/6kcjM8aqpiMM22B

Cq-Include-Trybots: luci.chrome.try:linux-chromeos-chrome
Change-Id: Ic1e2d8555056f8142a0d9b092bf4d6d7846626ad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3522727
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Jason Thai <jasontt@chromium.org>
Cr-Commit-Position: refs/heads/main@{#980949}
---
 .../personalization_app_ui.cc                 |  2 +
 .../personalization_app/resources/BUILD.gn    |  3 +
 .../common/ambient_mode_disabled.svg          | 89 +++++++++++++++++++
 .../common/ambient_mode_disabled_dark.svg     | 85 ++++++++++++++++++
 .../ambient/ambient_subpage_element.html      | 46 ++++++----
 .../trusted/ambient/zero_state_element.html   | 27 ++++++
 .../trusted/ambient/zero_state_element.ts     | 48 ++++++++++
 .../resources/trusted/personalization_app.ts  |  1 +
 .../ambient_subpage_element_test.ts           | 64 +++++++++----
 chromeos/chromeos_strings.grd                 |  3 +
 ...P_AMBIENT_MODE_ZERO_STATE_MESSAGE.png.sha1 |  1 +
 11 files changed, 335 insertions(+), 34 deletions(-)
 create mode 100644 ash/webui/personalization_app/resources/common/ambient_mode_disabled.svg
 create mode 100644 ash/webui/personalization_app/resources/common/ambient_mode_disabled_dark.svg
 create mode 100644 ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.html
 create mode 100644 ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.ts
 create mode 100644 chromeos/chromeos_strings_grd/IDS_PERSONALIZATION_APP_AMBIENT_MODE_ZERO_STATE_MESSAGE.png.sha1

diff --git a/ash/webui/personalization_app/personalization_app_ui.cc b/ash/webui/personalization_app/personalization_app_ui.cc
index b3916598f82e8f..373654ad55ffc5 100644
--- a/ash/webui/personalization_app/personalization_app_ui.cc
+++ b/ash/webui/personalization_app/personalization_app_ui.cc
@@ -145,6 +145,8 @@ void AddStrings(content::WebUIDataSource* source) {
        IDS_PERSONALIZATION_APP_AMBIENT_MODE_ANIMATION_FEEL_THE_BREEZE_LABEL},
       {"ambientModeAnimationFloatOnByLabel",
        IDS_PERSONALIZATION_APP_AMBIENT_MODE_ANIMATION_FLOAT_ON_BY_LABEL},
+      {"ambientModeZeroStateMessage",
+       IDS_PERSONALIZATION_APP_AMBIENT_MODE_ZERO_STATE_MESSAGE},
 
       // Google Photos strings
       {"googlePhotosLabel", IDS_PERSONALIZATION_APP_GOOGLE_PHOTOS},
diff --git a/ash/webui/personalization_app/resources/BUILD.gn b/ash/webui/personalization_app/resources/BUILD.gn
index 983a925efb311f..2c6b072aead9b3 100644
--- a/ash/webui/personalization_app/resources/BUILD.gn
+++ b/ash/webui/personalization_app/resources/BUILD.gn
@@ -78,6 +78,7 @@ polymer_js_files = [
   "trusted/ambient/toggle_row_element.ts",
   "trusted/ambient/topic_source_item_element.ts",
   "trusted/ambient/topic_source_list_element.ts",
+  "trusted/ambient/zero_state_element.ts",
   "trusted/personalization_main_element.ts",
   "trusted/personalization_router_element.ts",
   "trusted/personalization_theme_element.ts",
@@ -110,6 +111,8 @@ polymer_js_files = [
 static_resource_files = [
   "icon_192.png",
 
+  "common/ambient_mode_disabled.svg",
+  "common/ambient_mode_disabled_dark.svg",
   "common/base.css",
   "common/feel_the_breeze.png",
   "common/float_on_by.png",
diff --git a/ash/webui/personalization_app/resources/common/ambient_mode_disabled.svg b/ash/webui/personalization_app/resources/common/ambient_mode_disabled.svg
new file mode 100644
index 00000000000000..e6819dea4ac518
--- /dev/null
+++ b/ash/webui/personalization_app/resources/common/ambient_mode_disabled.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 240 188" style="enable-background:new 0 0 240 188;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#202124;}
+	.st1{fill:#404D64;}
+	.st2{fill:#1E3A5F;}
+	.st3{fill:#FCC934;}
+	.st4{fill:#5EF1F2;}
+	.st5{fill:none;}
+	.st6{fill:#F882FF;}
+	.st7{fill:#5184EB;}
+	.st8{fill:#669DF6;}
+	.st9{fill:#5BB974;}
+	.st10{fill:#EA4335;}
+	.st11{fill:none;stroke:#231F20;stroke-width:0.3;stroke-miterlimit:10;}
+	.st12{fill:#D2E3FC;}
+	.st13{fill:#4285F4;}
+	.st14{font-family:'GoogleSans-Regular';}
+	.st15{font-size:14px;}
+	.st16{fill:#8AB4F8;}
+	.st17{fill:#FBBC04;}
+	.st18{fill:#30E2EA;}
+	.st19{fill:#EE5FFA;}
+	.st20{fill:#FFFFFF;}
+	.st21{fill:#34A853;}
+</style>
+<g id="BG">
+</g>
+<g id="Layer_1">
+	<g>
+		<path class="st12" d="M202.4,155.3H40.8c-3.6,0-6.5-2.9-6.5-6.5V44.6c0-3.6,2.9-6.5,6.5-6.5h161.6c3.6,0,6.5,2.9,6.5,6.5v104.2
+			C208.9,152.4,206,155.3,202.4,155.3z"/>
+		<g>
+			<text transform="matrix(1 0 0 1 42.7482 148.5264)" class="st13 st14 st15">10:20</text>
+			<path class="st16" d="M176,148.8h-16c-2.4,0-4.3-1.9-4.3-4.3l0,0c0-2.4,1.9-4.3,4.3-4.3h16c2.4,0,4.3,1.9,4.3,4.3l0,0
+				C180.3,146.9,178.4,148.8,176,148.8z"/>
+			<path class="st16" d="M198.7,47.6h-21.5c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h21.5c0.8,0,1.5,0.7,1.5,1.5l0,0
+				C200.2,46.9,199.5,47.6,198.7,47.6z"/>
+			<path class="st16" d="M195.9,148.8h-8.5c-2.4,0-4.3-1.9-4.3-4.3l0,0c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3l0,0
+				C200.2,146.9,198.3,148.8,195.9,148.8z"/>
+		</g>
+	</g>
+	<path class="st17" d="M103.1,113.5l1-2.2c0.2-0.4,0.7-0.6,1.1-0.4l2.2,1c0.4,0.2,0.6,0.7,0.4,1.1l-1,2.2c-0.2,0.4-0.7,0.6-1.1,0.4
+		l-2.2-1C103.1,114.4,102.9,113.9,103.1,113.5z"/>
+	<path class="st18" d="M89.1,81.2l1-2.2c0.2-0.4,0.7-0.6,1.1-0.4l2.2,1c0.4,0.2,0.6,0.7,0.4,1.1l-1,2.2c-0.2,0.4-0.7,0.6-1.1,0.4
+		l-2.2-1C89.1,82.1,88.9,81.7,89.1,81.2z"/>
+	<path class="st5" d="M92.9,102.2c0.6-0.2,1.3-0.5,1.8-0.9c0.6-0.5,1.2-1,1.8-1.6c0.2-0.2,0.5-0.5,0.7-0.7c1.7-1.6,3.9-2.4,6.2-2.3
+		l2.4,0.1c0,0,0.1,0,0.1,0c0.7,0.1,1.3,0.1,2,0.1c1.5-0.1,2.8-0.6,4.1-1.4c3.5-2.3,4.9-6.9,3.1-10.8c-1-2.2-2.8-3.9-5.1-4.6
+		c-2.3-0.8-4.7-0.6-6.8,0.5c-1,0.6-2,1.3-2.7,2.2c-0.4,0.5-0.8,1.1-1.1,1.7c0,0,0,0.1,0,0.1l-1.3,2c-1.1,1.8-2.8,3-5,3.8
+		c-0.6,0.2-1.3,0.4-1.9,0.5c-1.3,0.3-2.4,0.6-3.4,1.2C91,94.4,92.9,98.2,92.9,102.2z"/>
+	<path class="st19" d="M116.6,83.9c-1.2-2.6-3.4-4.6-6.1-5.5c-2.7-0.9-5.7-0.7-8.2,0.7c-1.2,0.7-2.3,1.6-3.2,2.7c0,0,0,0,0,0
+		c-0.5,0.6-0.9,1.3-1.2,2c-0.9,1.4-1.1,1.8-1.2,2l0,0c-0.9,1.4-2.3,2.5-4.1,3.1c-0.6,0.2-1.2,0.3-1.8,0.5c-1.6,0.4-3.2,0.8-4.5,1.9
+		c0.5,0.3,1.1,0.6,1.5,1c1-0.6,2.1-0.9,3.4-1.2c0.6-0.2,1.3-0.3,1.9-0.5c2.2-0.7,3.9-2,5-3.8l1.3-2c0,0,0-0.1,0-0.1
+		c0.3-0.6,0.6-1.2,1.1-1.7c0.7-0.9,1.6-1.7,2.7-2.2c2.1-1.1,4.6-1.3,6.8-0.5c2.3,0.8,4.1,2.4,5.1,4.6c1.7,3.8,0.4,8.5-3.1,10.8
+		c-1.2,0.8-2.6,1.3-4.1,1.4c-0.7,0.1-1.3,0-2-0.1c0,0-0.1,0-0.1,0l-2.4-0.1c-2.3-0.1-4.5,0.7-6.2,2.3c-0.2,0.2-0.5,0.4-0.7,0.7
+		c-0.6,0.6-1.2,1.2-1.8,1.6c-0.6,0.4-1.2,0.7-1.8,0.9c0,0.6-0.1,1.2-0.1,1.8c1.1-0.2,2.1-0.7,3-1.4c0.7-0.5,1.4-1.2,2-1.8
+		c0.2-0.2,0.5-0.4,0.7-0.7c1.4-1.3,3.2-2,5-1.9l2.3,0.1c0.8,0.1,1.6,0.1,2.3,0.1c1.7-0.1,3.4-0.7,4.8-1.7
+		C117.1,94.1,118.7,88.5,116.6,83.9z M98.7,84.1L98.7,84.1L98.7,84.1z"/>
+	<path class="st7" d="M86.4,93.4c-1.2,1.7-1.4,3.9-0.5,5.8c0,0.1,0.1,0.2,0.1,0.3c0.8,1.5,2.2,2.5,3.8,2.9c1,0.2,2.1,0.2,3.1-0.1
+		c0-4-1.8-7.8-5.1-10.2C87.3,92.4,86.8,92.8,86.4,93.4z"/>
+	<path class="st13" d="M89.5,104c-2.1-0.5-3.9-1.8-4.9-3.7c-0.1-0.1-0.1-0.2-0.2-0.4c-1.1-2.4-0.9-5.3,0.7-7.4
+		c0.4-0.5,0.8-1,1.2-1.3c-0.4-0.2-0.8-0.4-1.3-0.6c-6.4-2.5-13.6,0.7-16,7.1s0.7,13.6,7.1,16c6.4,2.5,13.6-0.7,16-7.1
+		c0.3-0.9,0.6-1.7,0.7-2.6c-0.5,0.1-1.1,0.2-1.6,0.2C90.6,104.2,90,104.1,89.5,104z"/>
+	<path class="st20" d="M92.9,102.2c-1,0.3-2,0.4-3.1,0.1c-1.7-0.4-3-1.4-3.8-2.9c-0.1-0.1-0.1-0.2-0.1-0.3c-0.9-1.9-0.7-4.1,0.5-5.8
+		c0.4-0.6,0.9-1,1.4-1.3c-0.5-0.4-1-0.7-1.5-1c-0.4,0.4-0.9,0.8-1.2,1.3c-1.5,2.2-1.8,5-0.7,7.4c0.1,0.1,0.1,0.2,0.2,0.4
+		c1,1.9,2.8,3.3,4.9,3.7c0.5,0.1,1.1,0.2,1.6,0.2c0.6,0,1.1-0.1,1.6-0.2C92.8,103.4,92.9,102.8,92.9,102.2z"/>
+	<circle class="st21" cx="119.4" cy="104.8" r="3.5"/>
+	<circle class="st10" cx="107.3" cy="64.1" r="4.3"/>
+	<g>
+		<path class="st20" d="M138.3,128.4c-0.1,0-0.2,0-0.3-0.1l-6.6-1.4c-1.3-0.3-2.4-1.3-2.9-2.5l-2.1-6.4c-0.4-1.3-0.1-2.7,0.8-3.7
+			l4.5-5c0.9-1,2.3-1.5,3.6-1.2l6.6,1.4c1.3,0.3,2.4,1.3,2.9,2.5l2.1,6.4c0.4,1.3,0.1,2.7-0.8,3.7l-4.5,5
+			C140.7,128.1,139.5,128.6,138.3,128.4z M134.7,109.7c-0.7-0.1-1.4,0.2-1.9,0.7l-4.5,5c-0.5,0.6-0.7,1.4-0.4,2.1l2.1,6.4
+			c0.2,0.7,0.9,1.3,1.6,1.4l6.6,1.4c0.8,0.2,1.5-0.1,2.1-0.7l4.5-5c0.5-0.6,0.7-1.4,0.4-2.1l-2.1-6.4c-0.2-0.7-0.9-1.3-1.6-1.4
+			c0,0,0,0,0,0l-6.6-1.4C134.9,109.8,134.8,109.7,134.7,109.7z"/>
+	</g>
+	<g>
+		<path class="st5" d="M144.9,85l-1,5.3l5.1,4.6c3.6,3.2,9.1,2.9,12.3-0.7c1.5-1.7,2.3-4,2.2-6.3c-0.1-2.3-1.1-4.4-2.9-6L144,67.1
+			c-1.7-1.5-4-2.3-6.3-2.2c-2.3,0.1-4.4,1.1-6,2.9c-3.2,3.6-2.9,9.1,0.7,12.3l6,5.3l5-1.7C144.3,83.4,145.1,84.1,144.9,85z"/>
+		<path class="st21" d="M161.7,80.7l-16.6-14.8c-2.1-1.8-4.7-2.8-7.5-2.6c-2.8,0.1-5.3,1.4-7.1,3.4c-3.8,4.2-3.5,10.8,0.8,14.6
+			l5.3,4.7l1.8-0.6l-6-5.3c-3.6-3.2-3.9-8.7-0.7-12.3c1.5-1.7,3.7-2.7,6-2.9c2.3-0.1,4.5,0.7,6.3,2.2L160.6,82
+			c1.7,1.5,2.7,3.7,2.9,6c0.1,2.3-0.7,4.5-2.2,6.3c-3.2,3.6-8.7,3.9-12.3,0.7l-5.1-4.6l-0.4,1.9l4.4,3.9c2,1.8,4.4,2.6,6.9,2.6
+			c2.8,0,5.7-1.2,7.7-3.4C166.3,91.1,166,84.5,161.7,80.7z"/>
+		<path class="st17" d="M125.2,89.9c-0.9,0.3-1.1,1.4-0.4,2l14.5,12.6c0.7,0.6,1.7,0.2,1.9-0.7l2.3-11.7l-6.9-6.2L125.2,89.9z"/>
+		<path class="st17" d="M144.9,85c0.2-0.9-0.7-1.6-1.5-1.3l-5,1.7l5.5,4.9L144.9,85z"/>
+		<polygon class="st10" points="138.4,85.4 136.6,86 143.5,92.2 143.9,90.3 		"/>
+	</g>
+</g>
+</svg>
diff --git a/ash/webui/personalization_app/resources/common/ambient_mode_disabled_dark.svg b/ash/webui/personalization_app/resources/common/ambient_mode_disabled_dark.svg
new file mode 100644
index 00000000000000..b964466230a386
--- /dev/null
+++ b/ash/webui/personalization_app/resources/common/ambient_mode_disabled_dark.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 240 188" style="enable-background:new 0 0 240 188;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#404D64;}
+	.st1{fill:#669DF6;}
+	.st2{font-family:'GoogleSans-Regular';}
+	.st3{font-size:14px;}
+	.st4{fill:#1E3A5F;}
+	.st5{fill:#FCC934;}
+	.st6{fill:#5EF1F2;}
+	.st7{fill:none;}
+	.st8{fill:#F882FF;}
+	.st9{fill:#5184EB;}
+	.st10{fill:#202124;}
+	.st11{fill:#5BB974;}
+	.st12{fill:#EA4335;}
+	.st13{fill:none;stroke:#231F20;stroke-width:0.3;stroke-miterlimit:10;}
+	.st14{fill:#D2E3FC;}
+	.st15{fill:#8AB4F8;}
+	.st16{fill:#FBBC04;}
+	.st17{fill:#30E2EA;}
+	.st18{fill:#EE5FFA;}
+	.st19{fill:#4285F4;}
+	.st20{fill:#FFFFFF;}
+	.st21{fill:#34A853;}
+</style>
+<g id="BG">
+</g>
+<g id="Layer_1">
+	<path class="st0" d="M202.4,155.3H40.8c-3.6,0-6.5-2.9-6.5-6.5V44.6c0-3.6,2.9-6.5,6.5-6.5h161.6c3.6,0,6.5,2.9,6.5,6.5v104.2
+		C208.9,152.4,206,155.3,202.4,155.3z"/>
+	<text transform="matrix(1 0 0 1 42.7482 148.5264)" class="st1 st2 st3">10:20</text>
+	<path class="st4" d="M176,148.8h-16c-2.4,0-4.3-1.9-4.3-4.3l0,0c0-2.4,1.9-4.3,4.3-4.3h16c2.4,0,4.3,1.9,4.3,4.3l0,0
+		C180.3,146.9,178.4,148.8,176,148.8z"/>
+	<path class="st4" d="M198.7,47.6h-21.5c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h21.5c0.8,0,1.5,0.7,1.5,1.5l0,0
+		C200.2,46.9,199.5,47.6,198.7,47.6z"/>
+	<path class="st4" d="M195.9,148.8h-8.5c-2.4,0-4.3-1.9-4.3-4.3l0,0c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3l0,0
+		C200.2,146.9,198.3,148.8,195.9,148.8z"/>
+	<path class="st5" d="M103.1,113.5l1-2.2c0.2-0.4,0.7-0.6,1.1-0.4l2.2,1c0.4,0.2,0.6,0.7,0.4,1.1l-1,2.2c-0.2,0.4-0.7,0.6-1.1,0.4
+		l-2.2-1C103.1,114.4,102.9,113.9,103.1,113.5z"/>
+	<path class="st6" d="M89.1,81.2l1-2.2c0.2-0.4,0.7-0.6,1.1-0.4l2.2,1c0.4,0.2,0.6,0.7,0.4,1.1l-1,2.2c-0.2,0.4-0.7,0.6-1.1,0.4
+		l-2.2-1C89.1,82.1,88.9,81.7,89.1,81.2z"/>
+	<path class="st7" d="M92.9,102.2c0.6-0.2,1.3-0.5,1.8-0.9c0.6-0.5,1.2-1,1.8-1.6c0.2-0.2,0.5-0.5,0.7-0.7c1.7-1.6,3.9-2.4,6.2-2.3
+		l2.4,0.1c0,0,0.1,0,0.1,0c0.7,0.1,1.3,0.1,2,0.1c1.5-0.1,2.8-0.6,4.1-1.4c3.5-2.3,4.9-6.9,3.1-10.8c-1-2.2-2.8-3.9-5.1-4.6
+		c-2.3-0.8-4.7-0.6-6.8,0.5c-1,0.6-2,1.3-2.7,2.2c-0.4,0.5-0.8,1.1-1.1,1.7c0,0,0,0.1,0,0.1l-1.3,2c-1.1,1.8-2.8,3-5,3.8
+		c-0.6,0.2-1.3,0.4-1.9,0.5c-1.3,0.3-2.4,0.6-3.4,1.2C91,94.4,92.9,98.2,92.9,102.2z"/>
+	<path class="st8" d="M116.6,83.9c-1.2-2.6-3.4-4.6-6.1-5.5c-2.7-0.9-5.7-0.7-8.2,0.7c-1.2,0.7-2.3,1.6-3.2,2.7c0,0,0,0,0,0
+		c-0.5,0.6-0.9,1.3-1.2,2c-0.9,1.4-1.1,1.8-1.2,2l0,0c-0.9,1.4-2.3,2.5-4.1,3.1c-0.6,0.2-1.2,0.3-1.8,0.5c-1.6,0.4-3.2,0.8-4.5,1.9
+		c0.5,0.3,1.1,0.6,1.5,1c1-0.6,2.1-0.9,3.4-1.2c0.6-0.2,1.3-0.3,1.9-0.5c2.2-0.7,3.9-2,5-3.8l1.3-2c0,0,0-0.1,0-0.1
+		c0.3-0.6,0.6-1.2,1.1-1.7c0.7-0.9,1.6-1.7,2.7-2.2c2.1-1.1,4.6-1.3,6.8-0.5c2.3,0.8,4.1,2.4,5.1,4.6c1.7,3.8,0.4,8.5-3.1,10.8
+		c-1.2,0.8-2.6,1.3-4.1,1.4c-0.7,0.1-1.3,0-2-0.1c0,0-0.1,0-0.1,0l-2.4-0.1c-2.3-0.1-4.5,0.7-6.2,2.3c-0.2,0.2-0.5,0.4-0.7,0.7
+		c-0.6,0.6-1.2,1.2-1.8,1.6c-0.6,0.4-1.2,0.7-1.8,0.9c0,0.6-0.1,1.2-0.1,1.8c1.1-0.2,2.1-0.7,3-1.4c0.7-0.5,1.4-1.2,2-1.8
+		c0.2-0.2,0.5-0.4,0.7-0.7c1.4-1.3,3.2-2,5-1.9l2.3,0.1c0.8,0.1,1.6,0.1,2.3,0.1c1.7-0.1,3.4-0.7,4.8-1.7
+		C117.1,94.1,118.7,88.5,116.6,83.9z M98.7,84.1L98.7,84.1L98.7,84.1z"/>
+	<path class="st9" d="M86.4,93.4c-1.2,1.7-1.4,3.9-0.5,5.8c0,0.1,0.1,0.2,0.1,0.3c0.8,1.5,2.2,2.5,3.8,2.9c1,0.2,2.1,0.2,3.1-0.1
+		c0-4-1.8-7.8-5.1-10.2C87.3,92.4,86.8,92.8,86.4,93.4z"/>
+	<path class="st1" d="M89.5,104c-2.1-0.5-3.9-1.8-4.9-3.7c-0.1-0.1-0.1-0.2-0.2-0.4c-1.1-2.4-0.9-5.3,0.7-7.4c0.4-0.5,0.8-1,1.2-1.3
+		c-0.4-0.2-0.8-0.4-1.3-0.6c-6.4-2.5-13.6,0.7-16,7.1s0.7,13.6,7.1,16c6.4,2.5,13.6-0.7,16-7.1c0.3-0.9,0.6-1.7,0.7-2.6
+		c-0.5,0.1-1.1,0.2-1.6,0.2C90.6,104.2,90,104.1,89.5,104z"/>
+	<path class="st10" d="M92.9,102.2c-1,0.3-2,0.4-3.1,0.1c-1.7-0.4-3-1.4-3.8-2.9c-0.1-0.1-0.1-0.2-0.1-0.3c-0.9-1.9-0.7-4.1,0.5-5.8
+		c0.4-0.6,0.9-1,1.4-1.3c-0.5-0.4-1-0.7-1.5-1c-0.4,0.4-0.9,0.8-1.2,1.3c-1.5,2.2-1.8,5-0.7,7.4c0.1,0.1,0.1,0.2,0.2,0.4
+		c1,1.9,2.8,3.3,4.9,3.7c0.5,0.1,1.1,0.2,1.6,0.2c0.6,0,1.1-0.1,1.6-0.2C92.8,103.4,92.9,102.8,92.9,102.2z"/>
+	<circle class="st11" cx="119.4" cy="104.8" r="3.5"/>
+	<circle class="st12" cx="107.3" cy="64.1" r="4.3"/>
+	<g>
+		<path class="st10" d="M138.3,128.4c-0.1,0-0.2,0-0.3-0.1l-6.6-1.4c-1.3-0.3-2.4-1.3-2.9-2.5l-2.1-6.4c-0.4-1.3-0.1-2.7,0.8-3.7
+			l4.5-5c0.9-1,2.3-1.5,3.6-1.2l6.6,1.4c1.3,0.3,2.4,1.3,2.9,2.5l2.1,6.4c0.4,1.3,0.1,2.7-0.8,3.7l-4.5,5
+			C140.7,128.1,139.5,128.6,138.3,128.4z M134.7,109.7c-0.7-0.1-1.4,0.2-1.9,0.7l-4.5,5c-0.5,0.6-0.7,1.4-0.4,2.1l2.1,6.4
+			c0.2,0.7,0.9,1.3,1.6,1.4l6.6,1.4c0.8,0.2,1.5-0.1,2.1-0.7l4.5-5c0.5-0.6,0.7-1.4,0.4-2.1l-2.1-6.4c-0.2-0.7-0.9-1.3-1.6-1.4
+			c0,0,0,0,0,0l-6.6-1.4C134.9,109.8,134.8,109.7,134.7,109.7z"/>
+	</g>
+	<g>
+		<path class="st7" d="M144.9,85l-1,5.3l5.1,4.6c3.6,3.2,9.1,2.9,12.3-0.7c1.5-1.7,2.3-4,2.2-6.3c-0.1-2.3-1.1-4.4-2.9-6L144,67.1
+			c-1.7-1.5-4-2.3-6.3-2.2c-2.3,0.1-4.4,1.1-6,2.9c-3.2,3.6-2.9,9.1,0.7,12.3l6,5.3l5-1.7C144.3,83.4,145.1,84.1,144.9,85z"/>
+		<path class="st11" d="M161.7,80.7l-16.6-14.8c-2.1-1.8-4.7-2.8-7.5-2.6c-2.8,0.1-5.3,1.4-7.1,3.4c-3.8,4.2-3.5,10.8,0.8,14.6
+			l5.3,4.7l1.8-0.6l-6-5.3c-3.6-3.2-3.9-8.7-0.7-12.3c1.5-1.7,3.7-2.7,6-2.9c2.3-0.1,4.5,0.7,6.3,2.2L160.6,82
+			c1.7,1.5,2.7,3.7,2.9,6c0.1,2.3-0.7,4.5-2.2,6.3c-3.2,3.6-8.7,3.9-12.3,0.7l-5.1-4.6l-0.4,1.9l4.4,3.9c2,1.8,4.4,2.6,6.9,2.6
+			c2.8,0,5.7-1.2,7.7-3.4C166.3,91.1,166,84.5,161.7,80.7z"/>
+		<path class="st5" d="M125.2,89.9c-0.9,0.3-1.1,1.4-0.4,2l14.5,12.6c0.7,0.6,1.7,0.2,1.9-0.7l2.3-11.7l-6.9-6.2L125.2,89.9z"/>
+		<path class="st5" d="M144.9,85c0.2-0.9-0.7-1.6-1.5-1.3l-5,1.7l5.5,4.9L144.9,85z"/>
+		<polygon class="st12" points="138.4,85.4 136.6,86 143.5,92.2 143.9,90.3 		"/>
+	</g>
+</g>
+</svg>
diff --git a/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.html b/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.html
index 429a0179f255fd..a1cd79c86ba26f 100644
--- a/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.html
+++ b/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.html
@@ -6,6 +6,7 @@
     display: grid;
     grid-template-areas:
       '. . toggles   . .'
+      '. . zeroState . .'
       '. . spinner   . .'
       '. . preview   . .'
       '. . animation . .'
@@ -18,6 +19,9 @@
     grid-area: toggles;
     margin: 0 8px;
   }
+  ambient-zero-state {
+    grid-area: zeroState;
+  }
   paper-spinner-lite {
     grid-area: spinner;
     height: 28px;
@@ -46,27 +50,31 @@
       <toggle-row checked="[[ambientModeEnabled_]]"
           on-click="onClickAmbientModeButton_" on-change="onToggleStateChanged_">
       </toggle-row>
+      <template is="dom-if" if="[[ambientModeEnabled_]]">
+        <template is="dom-if" if="[[loadingSettings_]]">
+          <!-- TODO(b/217311018): Add loading state -->
+          <paper-spinner-lite active></paper-spinner-lite>
+        </template>
 
-      <template is="dom-if" if="[[loadingSettings_]]">
-        <!-- TODO(b/217311018): Add loading state -->
-        <paper-spinner-lite active></paper-spinner-lite>
-      </template>
-
-      <template is="dom-if" if="[[!loadingSettings_]]">
-        <ambient-preview></ambient-preview>
-        <template is="dom-if" if="[[isAmbientModeAnimationEnabled_()]]">
-          <animation-theme-list selected-animation-theme="[[animationTheme_]]"
-              disabled$="[[disabled_]]">
-          </animation-theme-list>
+        <template is="dom-if" if="[[!loadingSettings_]]">
+          <ambient-preview></ambient-preview>
+          <template is="dom-if" if="[[isAmbientModeAnimationEnabled_()]]">
+            <animation-theme-list selected-animation-theme="[[animationTheme_]]"
+                disabled$="[[disabled_]]">
+            </animation-theme-list>
+          </template>
+          <topic-source-list selected-topic-source="[[topicSource_]]"
+              has-google-photos-albums="[[hasGooglePhotosAlbums_(albums_)]]"
+              disabled="[[disabled_]]">
+          </topic-source-list>
+          <ambient-weather-unit
+              selected-temperature-unit="[[temperatureUnitToString_(temperatureUnit_)]]"
+              disabled="[[disabled_]]">
+          </ambient-weather-unit>
         </template>
-        <topic-source-list selected-topic-source="[[topicSource_]]"
-            has-google-photos-albums="[[hasGooglePhotosAlbums_(albums_)]]"
-            disabled="[[disabled_]]">
-        </topic-source-list>
-        <ambient-weather-unit
-            selected-temperature-unit="[[temperatureUnitToString_(temperatureUnit_)]]"
-            disabled="[[disabled_]]">
-        </ambient-weather-unit>
+      </template>
+      <template is="dom-if" if="[[!ambientModeEnabled_]]">
+        <ambient-zero-state id="zeroState"></ambient-zero-state>
       </template>
     </div>
   </template>
diff --git a/ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.html b/ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.html
new file mode 100644
index 00000000000000..ee73bfe4dbdab5
--- /dev/null
+++ b/ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.html
@@ -0,0 +1,27 @@
+<style include="trusted-style common-style">
+  :host {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 34px 0;
+    overflow: hidden;
+  }
+
+  div {
+    color: var(--cros-text-color-secondary);
+    font: var(--cros-body-1-font);
+    max-width: 236px;
+    text-align: center;
+  }
+
+  img {
+    width: 260px;
+  }
+</style>
+
+<iron-media-query query="(prefers-color-scheme: dark)"
+    query-matches="{{isDarkModeActive_}}">
+</iron-media-query>
+<img src="[[getImageSource_(isDarkModeActive_)]]" aria-hidden="true">
+<div>$i18n{ambientModeZeroStateMessage}</div>
diff --git a/ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.ts b/ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.ts
new file mode 100644
index 00000000000000..f8305847bd8420
--- /dev/null
+++ b/ash/webui/personalization_app/resources/trusted/ambient/zero_state_element.ts
@@ -0,0 +1,48 @@
+// Copyright 2022 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 Polymer element that displays the Ambient zero state.
+ */
+
+import '../../common/styles.js';
+
+import 'chrome://resources/polymer/v3_0/iron-media-query/iron-media-query.js';
+import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {WithPersonalizationStore} from '../personalization_store.js';
+
+export class AmbientZeroState extends WithPersonalizationStore {
+  static get is() {
+    return 'ambient-zero-state';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      isDarkModeActive_: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  /** Whether the page is being rendered in dark mode. */
+  private isDarkModeActive_: boolean;
+
+  /**
+   * Returns the image source based on whether the page is being
+   * rendered in dark mode.
+   */
+  private getImageSource_() {
+    return this.isDarkModeActive_ ?
+        'chrome://personalization/common/ambient_mode_disabled_dark.svg' :
+        'chrome://personalization/common/ambient_mode_disabled.svg';
+  }
+}
+
+customElements.define(AmbientZeroState.is, AmbientZeroState);
diff --git a/ash/webui/personalization_app/resources/trusted/personalization_app.ts b/ash/webui/personalization_app/resources/trusted/personalization_app.ts
index 793993253edab7..5e11dc0172bab5 100644
--- a/ash/webui/personalization_app/resources/trusted/personalization_app.ts
+++ b/ash/webui/personalization_app/resources/trusted/personalization_app.ts
@@ -21,6 +21,7 @@ import './ambient/ambient_weather_element.js';
 import './ambient/toggle_row_element.js';
 import './ambient/topic_source_item_element.js';
 import './ambient/topic_source_list_element.js';
+import './ambient/zero_state_element.js';
 import './personalization_router_element.js';
 import './personalization_test_api.js';
 import './personalization_toast_element.js';
diff --git a/chrome/test/data/webui/chromeos/personalization_app/ambient_subpage_element_test.ts b/chrome/test/data/webui/chromeos/personalization_app/ambient_subpage_element_test.ts
index 7d1e2ae04291d3..f4ad6800368d7f 100644
--- a/chrome/test/data/webui/chromeos/personalization_app/ambient_subpage_element_test.ts
+++ b/chrome/test/data/webui/chromeos/personalization_app/ambient_subpage_element_test.ts
@@ -53,12 +53,13 @@ export function AmbientSubpageTest() {
 
   async function displayMainSettings(
       topicSource: TopicSource|null, temperatureUnit: TemperatureUnit|null,
+      ambientModeEnabled: boolean,
       animationTheme = AnimationTheme.kSlideshow): Promise<AmbientSubpage> {
     personalizationStore.data.ambient.albums = ambientProvider.albums;
     personalizationStore.data.ambient.animationTheme = animationTheme;
     personalizationStore.data.ambient.topicSource = topicSource;
     personalizationStore.data.ambient.temperatureUnit = temperatureUnit;
-    personalizationStore.data.ambient.ambientModeEnabled = false;
+    personalizationStore.data.ambient.ambientModeEnabled = ambientModeEnabled;
     const ambientSubpage =
         initElement(AmbientSubpage, {path: Paths.Ambient, queryParams: {}});
     personalizationStore.notifyObservers();
@@ -67,7 +68,9 @@ export function AmbientSubpageTest() {
   }
 
   test('displays content', async () => {
-    ambientSubpageElement = await displayMainSettings(null, null);
+    ambientSubpageElement = await displayMainSettings(
+        /*topicSource=*/ null, /*temperatureUnit=*/ null,
+        /*ambientModeEnabled=*/ false);
 
     const toggleRow =
         ambientSubpageElement.shadowRoot!.querySelector('toggle-row');
@@ -76,6 +79,10 @@ export function AmbientSubpageTest() {
     assertTrue(!!toggleButton, 'cr-toggle element exists');
     assertFalse(toggleButton!.checked);
 
+    personalizationStore.data.ambient.ambientModeEnabled = true;
+    personalizationStore.notifyObservers();
+    await waitAfterNextRender(ambientSubpageElement);
+
     let spinner =
         ambientSubpageElement.shadowRoot!.querySelector('paper-spinner-lite');
     assertTrue(!!spinner, 'paper-spinner-lite element exists');
@@ -106,7 +113,8 @@ export function AmbientSubpageTest() {
     personalizationStore.expectAction(
         AmbientActionName.SET_AMBIENT_MODE_ENABLED);
     ambientSubpageElement = await displayMainSettings(
-        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ false);
 
     await ambientProvider.whenCalled('setAmbientObserver');
     ambientProvider.updateAmbientObserver();
@@ -136,10 +144,8 @@ export function AmbientSubpageTest() {
 
   test('sets ambient mode enabled when toggle row clicked', async () => {
     ambientSubpageElement = await displayMainSettings(
-        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
-    personalizationStore.data.ambient.ambientModeEnabled = true;
-    personalizationStore.notifyObservers();
-    await waitAfterNextRender(ambientSubpageElement);
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ true);
 
     const toggleRow =
         ambientSubpageElement.shadowRoot!.querySelector('toggle-row');
@@ -172,10 +178,8 @@ export function AmbientSubpageTest() {
 
   test('sets ambient mode enabled when toggle button clicked', async () => {
     ambientSubpageElement = await displayMainSettings(
-        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
-    personalizationStore.data.ambient.ambientModeEnabled = true;
-    personalizationStore.notifyObservers();
-    await waitAfterNextRender(ambientSubpageElement);
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ true);
 
     const toggleRow =
         ambientSubpageElement.shadowRoot!.querySelector('toggle-row');
@@ -218,7 +222,8 @@ export function AmbientSubpageTest() {
       'sets animation theme when animation theme item is clicked', async () => {
         loadTimeData.overrideValues({isAmbientModeAnimationEnabled: true});
         ambientSubpageElement = await displayMainSettings(
-            TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
+            TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+            /*ambientModeEnabled=*/ true);
 
         const animationThemeList =
             ambientSubpageElement.shadowRoot!.querySelector(
@@ -269,7 +274,8 @@ export function AmbientSubpageTest() {
 
   test('sets topic source when topic source item clicked', async () => {
     ambientSubpageElement = await displayMainSettings(
-        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ true);
 
     const topicSourceList =
         ambientSubpageElement.shadowRoot!.querySelector('topic-source-list');
@@ -314,7 +320,8 @@ export function AmbientSubpageTest() {
 
   test('sets temperature unit when temperature unit item clicked', async () => {
     ambientSubpageElement = await displayMainSettings(
-        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ true);
 
     const weatherUnit =
         ambientSubpageElement.shadowRoot!.querySelector('ambient-weather-unit');
@@ -597,7 +604,8 @@ export function AmbientSubpageTest() {
     personalizationStore.expectAction(AmbientActionName.SET_ALBUMS);
 
     ambientSubpageElement = await displayMainSettings(
-        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit);
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ true);
 
     await ambientProvider.whenCalled('setAmbientObserver');
     ambientProvider.updateAmbientObserver();
@@ -620,4 +628,30 @@ export function AmbientSubpageTest() {
     assertTrue(!!previewAlbumTitle);
     assertEquals('2', previewAlbumTitle.innerText.replace(/\s/g, ''));
   });
+
+  test('displays zero state when ambient mode is disabled', async () => {
+    ambientSubpageElement = await displayMainSettings(
+        TopicSource.kArtGallery, TemperatureUnit.kFahrenheit,
+        /*ambientModeEnabled=*/ false);
+
+    // Preview image should be absent.
+    assertEquals(
+        ambientSubpageElement.shadowRoot!.querySelector('ambient-preview'),
+        null);
+
+    // Topic source list should be absent.
+    assertEquals(
+        ambientSubpageElement.shadowRoot!.querySelector('topic-source-list'),
+        null);
+
+    // Weather unit should be absent.
+    assertEquals(
+        ambientSubpageElement.shadowRoot!.querySelector('ambient-weather-unit'),
+        null);
+
+    // Zero state should be present.
+    const zeroState =
+        ambientSubpageElement.shadowRoot!.querySelector('ambient-zero-state');
+    assertTrue(!!zeroState);
+  });
 }
diff --git a/chromeos/chromeos_strings.grd b/chromeos/chromeos_strings.grd
index 94b0be220ed7e8..36457b9f641b82 100644
--- a/chromeos/chromeos_strings.grd
+++ b/chromeos/chromeos_strings.grd
@@ -2243,6 +2243,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_PERSONALIZATION_APP_AMBIENT_MODE_ANIMATION_FLOAT_ON_BY_LABEL" desc="Label for the ambient mode float on by animation.">
         Float on by
       </message>
+      <message name="IDS_PERSONALIZATION_APP_AMBIENT_MODE_ZERO_STATE_MESSAGE" desc="Message shown in the Ambient subpage in the personalization hub when ambient mode is disabled.">
+        Turn on the toggle to select the screensaver options
+      </message>
 
       <!-- Traffic Counters UI -->
       <message name="IDS_TRAFFIC_COUNTERS_UNKNOWN" desc="Traffic counters related to an unknown source">
diff --git a/chromeos/chromeos_strings_grd/IDS_PERSONALIZATION_APP_AMBIENT_MODE_ZERO_STATE_MESSAGE.png.sha1 b/chromeos/chromeos_strings_grd/IDS_PERSONALIZATION_APP_AMBIENT_MODE_ZERO_STATE_MESSAGE.png.sha1
new file mode 100644
index 00000000000000..56b6676978329a
--- /dev/null
+++ b/chromeos/chromeos_strings_grd/IDS_PERSONALIZATION_APP_AMBIENT_MODE_ZERO_STATE_MESSAGE.png.sha1
@@ -0,0 +1 @@
+9a01c0a9890fda62eef059f172c78336b50be7cc
\ No newline at end of file