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}

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},

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",

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>

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>

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);

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';