[CrOS PhoneHub] Update Phone Hub notification settings row

If Phone Hub notification access is prohibited due to the user having a
work profile on their phone, disable the toggle and show a (?) icon with
a tooltip explaining why the toggle is disabled.

Note that currently, the prohibited value is never passed; a follow-up
CL passes this value when appropriate.

Screenshot:
http://go/chrome-ss/c999f0fb3f14985d9eef8b59bd8c1cb0e09f6282

Bug: 1155151, 1106937
Change-Id: I3062f37731d5b21fecc8a1da642d0d0e4b5e97d6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575423
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834053}

chrome/app/os_settings_strings.grdp

@@ -2475,6 +2475,9 @@
   <message name="IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_SETUP_DIALOG_ACCESS_PROHIBITED_SUMMARY" desc="The title of the dialog containing the Phone Hub notification opt-in flow when access to notifications is prohibited because the user's phone has a work profile.">
     Notification syncing is not supported for phones in a work profile. <ph name="LINK_BEGIN">&lt;a target="_blank" href="$1<ex>https://google.com/</ex>"&gt;</ph>Learn more<ph name="LINK_END">&lt;/a&gt;</ph>
   </message>
+  <message name="IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_PROHIBITED_TOOLTIP" desc="Tooltip shown to users when hovering the help icon in settings next to the Phone Hub notification syncing feature. The tooltip describes how users with work profiles cannot opt into this feature.">
+    Notification syncing is not supported for phones in a work profile
+  </message>
   <message name="IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_SETUP_DIALOG_GET_STARTED_BUTTON_LABEL" desc="The label to a button in the Phone Hub notification opt-in flow that appears when the dialog first opens. Clicking the button will allow the user to try enabling the feature.">
     Get started
   </message>

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_PROHIBITED_TOOLTIP.png.sha1

+c999f0fb3f14985d9eef8b59bd8c1cb0e09f6282
\ No newline at end of file

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

@@ -74,6 +74,7 @@ js_library("multidevice_page") {
     "../../controls:password_prompt_dialog",
     "../../prefs:prefs_behavior",
     "../localized_link:localized_link",
+    "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
@@ -399,10 +400,8 @@ polymer_modulizer("multidevice_page") {
   migrated_imports = os_settings_migrated_imports
   namespace_rewrites = os_settings_namespace_rewrites
   auto_imports =
-      os_settings_auto_imports + [
-        "ui/webui/resources/html/polymer.html|Polymer,html,beforeNextRender",
-        "ui/webui/resources/html/assert.html|assert",
-      ]
+      os_settings_auto_imports +
+      [ "ui/webui/resources/html/polymer.html|Polymer,html,beforeNextRender" ]
 }
 
 polymer_modulizer("multidevice_notification_access_setup_dialog") {

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_constants.js

@@ -65,6 +65,17 @@ cr.define('settings', function() {
     UNAVAILABLE_TOP_LEVEL_FEATURE_DISABLED: 9,
   };
 
+  /**
+   * Possible states of Phone Hub's notification access. Access can be
+   * prohibited if the user is using a work profile on their phone.
+   * @enum {number}
+   */
+  /* #export */ const PhoneHubNotificationAccessStatus = {
+    PROHIBITED: 0,
+    AVAILABLE_BUT_NOT_GRANTED: 1,
+    ACCESS_GRANTED: 2,
+  };
+
   /**
    * Container for the initial data that the page requires in order to display
    * the correct content. It is also used for receiving status updates during
@@ -90,7 +101,7 @@ cr.define('settings', function() {
    *   phoneHubTaskContinuationState: !settings.MultiDeviceFeatureState,
    *   wifiSyncState: !settings.MultiDeviceFeatureState,
    *   isAndroidSmsPairingComplete: boolean,
-   *   isNotificationAccessGranted: boolean
+   *   notificationAccessStatus: !settings.PhoneHubNotificationAccessStatus
    * }}
    */
   /* #export */ let MultiDevicePageContentData;
@@ -101,6 +112,7 @@ cr.define('settings', function() {
     MultiDeviceFeature,
     MultiDeviceFeatureState,
     MultiDevicePageContentData,
+    PhoneHubNotificationAccessStatus,
     SmartLockSignInEnabledState
   };
 });

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_feature_behavior.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // clang-format off
-// #import {MultiDeviceSettingsMode, MultiDeviceFeature, MultiDeviceFeatureState, MultiDevicePageContentData } from './multidevice_constants.m.js';
+// #import {MultiDeviceSettingsMode, MultiDeviceFeature, MultiDeviceFeatureState, MultiDevicePageContentData, PhoneHubNotificationAccessStatus} from './multidevice_constants.m.js';
 // #import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 // clang-format on
 
@@ -71,6 +71,16 @@ const MultiDeviceFeatureBehaviorImpl = {
     ].includes(this.getFeatureState(feature));
   },
 
+  /**
+   * @return {boolean} Whether or not Phone Hub notification access is
+   *     prohibited (i.e., due to the user having a work profile).
+   */
+  isPhoneHubNotificationAccessProhibited() {
+    return this.pageContentData &&
+        this.pageContentData.notificationAccessStatus ===
+        settings.PhoneHubNotificationAccessStatus.PROHIBITED;
+  },
+
   /**
    * Whether the user is prevented from attempted to change a given feature. In
    * the UI this corresponds to a disabled toggle.
@@ -85,6 +95,13 @@ const MultiDeviceFeatureBehaviorImpl = {
       return false;
     }
 
+    // Cannot edit the Phone Hub notification toggle if notification access is
+    // prohibited.
+    if (feature === settings.MultiDeviceFeature.PHONE_HUB_NOTIFICATIONS &&
+        this.isPhoneHubNotificationAccessProhibited()) {
+      return false;
+    }
+
     return [
       settings.MultiDeviceFeatureState.DISABLED_BY_USER,
       settings.MultiDeviceFeatureState.ENABLED_BY_USER

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_feature_item.html

@@ -17,7 +17,7 @@
 <dom-module id="settings-multidevice-feature-item">
   <template>
     <style include="settings-shared">
-      :host([is-sub-feature]) iron-icon {
+      :host([is-sub-feature]) #feature-icon {
         display: none;
       }
 
@@ -31,7 +31,7 @@
         padding: var(--feature-item-row-padding);
       }
 
-      iron-icon {
+      #feature-icon {
         padding: 2px;
       }
 
@@ -45,7 +45,8 @@
                feature, pageContentData, subpageRoute)]]"
            on-click="handleItemClick_">
         <slot name="icon">
-          <iron-icon icon="[[getIconName(feature)]]"></iron-icon>
+          <iron-icon id="feature-icon" icon="[[getIconName(feature)]]">
+          </iron-icon>
         </slot>
         <div id="item-text-container" class="middle">
           <div id="featureName">[[getFeatureName(feature)]]</div>
@@ -58,18 +59,24 @@
           </slot>
         </div>
         <template is="dom-if"
-                  if="[[hasSubpageClickHandler_(
-              feature, pageContentData, subpageRoute)]]"
+            if="[[hasSubpageClickHandler_(feature, pageContentData,
+                      subpageRoute)]]"
                   restamp>
           <cr-icon-button id="subpageButton" class="subpage-arrow"
               aria-labelledby="featureName" aria-describedby="featureSecondary"
               aria-roledescription="$i18n{subpageArrowRoleDescription}">
           </cr-icon-button>
         </template>
+        <template is="dom-if" if="[[infoTooltip]]" restamp>
+          <iron-icon id="help-icon" icon="cr:help-outline"></iron-icon>
+          <paper-tooltip for="help-icon" position="top" fit-to-visible-bounds>
+            [[infoTooltip]]
+          </paper-tooltip>
+        </template>
       </div>
       <template is="dom-if"
-                if="[[hasSubpageClickHandler_(
-              feature, pageContentData, subpageRoute)]]"
+          if="[[shouldShowSeparator_(
+                    feature, pageContentData, subpageRoute)]]"
                 restamp>
         <div class="separator"></div>
       </template>

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_feature_item.js

@@ -27,6 +27,11 @@ Polymer({
      */
     subpageRoute: Object,
 
+    /**
+     * A tooltip to show over an info icon. If unset, no info icon is shown.
+     */
+    infoTooltip: String,
+
     /**
      * URLSearchParams for subpage route. No param is provided if it is
      * undefined.
@@ -76,6 +81,14 @@ Polymer({
     return !!this.subpageRoute && this.isFeatureAllowedByPolicy(this.feature);
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowSeparator_() {
+    return this.hasSubpageClickHandler_() || !!this.infoTooltip;
+  },
+
   /** @private */
   handleItemClick_(event) {
     // We do not navigate away if the click was on a link.

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_feature_toggle.js

@@ -62,6 +62,13 @@ Polymer({
    * @private
    */
   resetChecked_() {
+    // If Phone Hub notification access is prohibited, the toggle is always off.
+    if (this.feature === settings.MultiDeviceFeature.PHONE_HUB_NOTIFICATIONS &&
+        this.isPhoneHubNotificationAccessProhibited()) {
+      this.checked_ = false;
+      return;
+    }
+
     this.checked_ = this.getFeatureState(this.feature) ===
         settings.MultiDeviceFeatureState.ENABLED_BY_USER;
   },

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

@@ -3,10 +3,10 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="../../i18n_setup.html">
 <link rel="import" href="../deep_linking_behavior.html">

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

@@ -351,9 +351,19 @@ Polymer({
     // If the feature to enable is Phone Hub Notifications, notification access
     // must have been granted before the feature can be enabled.
     if (feature === settings.MultiDeviceFeature.PHONE_HUB_NOTIFICATIONS &&
-        enabled && !this.pageContentData.isNotificationAccessGranted) {
-      this.showNotificationAccessSetupDialog_ = true;
-      return;
+        enabled) {
+      switch (this.pageContentData.notificationAccessStatus) {
+        case settings.PhoneHubNotificationAccessStatus.PROHIBITED:
+          assertNotReached('Cannot enable notification access; prohibited');
+          return;
+        case settings.PhoneHubNotificationAccessStatus
+            .AVAILABLE_BUT_NOT_GRANTED:
+          this.showNotificationAccessSetupDialog_ = true;
+          return;
+        default:
+          // Fall through and attempt to toggle feature.
+          break;
+      }
     }
 
     // Disabling any feature does not require authentication, and enable some
@@ -440,7 +450,8 @@ Polymer({
   onInitialPageContentDataFetched_(newData) {
     this.onPageContentDataChanged_(newData);
 
-    if (this.pageContentData.isNotificationAccessGranted) {
+    if (this.pageContentData.notificationAccessStatus !==
+        settings.PhoneHubNotificationAccessStatus.AVAILABLE_BUT_NOT_GRANTED) {
       return;
     }
 

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_subpage.html

@@ -124,6 +124,8 @@
             restamp>
           <settings-multidevice-feature-item id="phoneHubNotificationsItem"
               feature="[[MultiDeviceFeature.PHONE_HUB_NOTIFICATIONS]]"
+              info-tooltip="[[getPhoneHubNotificationsTooltip_(
+                                  pageContentData)]]"
               page-content-data="[[pageContentData]]" is-sub-feature
               deep-link-focus-id$="[[Setting.kPhoneHubNotificationsOnOff]]">
           </settings-multidevice-feature-item>

chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_subpage.js

@@ -157,5 +157,13 @@ Polymer({
     return !this.isSuiteOn() ||
         messagesFeatureState ===
         settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY;
-  }
+  },
+
+  getPhoneHubNotificationsTooltip_() {
+    if (!this.isPhoneHubNotificationAccessProhibited()) {
+      return '';
+    }
+
+    return this.i18n('multideviceNotificationAccessProhibitedTooltip');
+  },
 });

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

@@ -65,6 +65,7 @@ os_settings_namespace_rewrites = settings_namespace_rewrites +
                                    "settings.OsResetBrowserProxy|OsResetBrowserProxy",
                                    "settings.OsSyncBrowserProxy|OsSyncBrowserProxy",
                                    "settings.OsSyncPrefs|OsSyncPrefs",
+                                   "settings.PhoneHubNotificationAccessStatus|PhoneHubNotificationAccessStatus",
                                    "settings.recordLockScreenProgress|recordLockScreenProgress",
                                    "settings.recordSettingChange|recordSettingChange",
                                    "settings.Route|Route",
@@ -106,7 +107,7 @@ os_settings_auto_imports = settings_auto_imports +
                              "chrome/browser/resources/settings/chromeos/google_assistant_page/google_assistant_browser_proxy.html|GoogleAssistantBrowserProxy,GoogleAssistantBrowserProxyImpl",
                              "chrome/browser/resources/settings/chromeos/metrics_recorder.html|recordSettingChange",
                              "chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_browser_proxy.html|MultiDeviceBrowserProxy,MultiDeviceBrowserProxyImpl",
-                             "chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_constants.html|MultiDeviceSettingsMode,MultiDeviceFeature,MultiDeviceFeatureState,MultiDevicePageContentData,SmartLockSignInEnabledState",
+                             "chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_constants.html|MultiDeviceSettingsMode,MultiDeviceFeature,MultiDeviceFeatureState,MultiDevicePageContentData,PhoneHubNotificationAccessStatus,SmartLockSignInEnabledState",
                              "chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_feature_behavior.html|MultiDeviceFeatureBehavior",
                              "chrome/browser/resources/settings/chromeos/multidevice_page/multidevice_browser_proxy.html|MultiDeviceBrowserProxy,MultiDeviceBrowserProxyImpl",
                              "chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_account_manager_browser_proxy.html|NearbyAccountManagerBrowserProxy,NearbyAccountManagerBrowserProxyImpl",

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

@@ -56,7 +56,7 @@ export {GoogleAssistantBrowserProxyImpl} from './google_assistant_page/google_as
 export {ConsentStatus, DspHotwordState} from './google_assistant_page/google_assistant_page.m.js';
 export {InternetPageBrowserProxy, InternetPageBrowserProxyImpl} from './internet_page/internet_page_browser_proxy.m.js';
 export {MultiDeviceBrowserProxy, MultiDeviceBrowserProxyImpl} from './multidevice_page/multidevice_browser_proxy.m.js';
-export {MultiDeviceFeature, MultiDeviceFeatureState, MultiDevicePageContentData, MultiDeviceSettingsMode, SmartLockSignInEnabledState} from './multidevice_page/multidevice_constants.m.js';
+export {MultiDeviceFeature, MultiDeviceFeatureState, MultiDevicePageContentData, MultiDeviceSettingsMode, PhoneHubNotificationAccessStatus, SmartLockSignInEnabledState} from './multidevice_page/multidevice_constants.m.js';
 export {Account, NearbyAccountManagerBrowserProxy, NearbyAccountManagerBrowserProxyImpl} from './nearby_share_page/nearby_account_manager_browser_proxy.m.js';
 export {getReceiveManager, observeReceiveManager, setReceiveManagerForTesting} from './nearby_share_page/nearby_share_receive_manager.m.js';
 export {dataUsageStringToEnum, NearbyShareDataUsage} from './nearby_share_page/types.m.js';

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

@@ -43,7 +43,7 @@ const char kPageContentDataPhoneHubTaskContinuationStateKey[] =
     "phoneHubTaskContinuationState";
 const char kPageContentDataWifiSyncStateKey[] = "wifiSyncState";
 const char kPageContentDataSmartLockStateKey[] = "smartLockState";
-const char kIsNotificationAccessGranted[] = "isNotificationAccessGranted";
+const char kNotificationAccessStatus[] = "notificationAccessStatus";
 const char kIsAndroidSmsPairingComplete[] = "isAndroidSmsPairingComplete";
 
 constexpr char kAndroidSmsInfoOriginKey[] = "origin";
@@ -473,11 +473,16 @@ MultideviceHandler::GeneratePageContentDataDictionary() {
           ? android_sms_pairing_state_tracker_->IsAndroidSmsPairingComplete()
           : false);
 
-  page_content_dictionary->SetBoolean(
-      kIsNotificationAccessGranted,
-      notification_access_manager_
-          ? notification_access_manager_->HasAccessBeenGranted()
-          : false);
+  // TODO(khorimoto): Send prohibited value if notification access is
+  // prohibited.
+  static const int kAccessNotGranted = 1;
+  static const int kAccessGranted = 2;
+  int access_value = kAccessNotGranted;
+  if (notification_access_manager_ &&
+      notification_access_manager_->HasAccessBeenGranted()) {
+    access_value = kAccessGranted;
+  }
+  page_content_dictionary->SetInteger(kNotificationAccessStatus, access_value);
 
   return page_content_dictionary;
 }

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

@@ -303,6 +303,8 @@ void MultiDeviceSection::AddLoadTimeData(
        IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_SETUP_DIALOG_COULD_NOT_ESTABLISH_CONNECTION_SUMMARY},
       {"multideviceNotificationAccessSetupAccessProhibitedTitle",
        IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_SETUP_DIALOG_ACCESS_PROHIBITED_TITLE},
+      {"multideviceNotificationAccessProhibitedTooltip",
+       IDS_SETTINGS_MULTIDEVICE_NOTIFICATION_ACCESS_PROHIBITED_TOOLTIP},
       {"multideviceInstantTetheringItemTitle",
        IDS_SETTINGS_MULTIDEVICE_INSTANT_TETHERING},
       {"multideviceInstantTetheringItemSummary",

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

@@ -5,7 +5,7 @@
 // clang-format off
 // #import 'chrome://os-settings/chromeos/os_settings.js';
 
-// #import {MultiDeviceFeature, MultiDeviceFeatureState} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {MultiDeviceFeature, MultiDeviceFeatureState, PhoneHubNotificationAccessStatus} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // clang-format on
@@ -21,17 +21,31 @@ suite('Multidevice', () => {
   let featureToggle = null;
   /** @type {?CrToggleElement} */
   let crToggle = null;
+  /** @type {!settings.MultiDeviceFeature} */
+  let featureToTest;
+  /** @type {string} */
+  let pageContentDataKey;
 
   /**
-   * Sets the state of the feature shown in the toggle (i.e. Messages). Note
-   * that in order to trigger featureToggle's bindings to update, we set its
-   * pageContentData to a new object as the actual UI does.
-   * @param {?settings.MultiDeviceFeatureState} newMessagesState. New value for
-   * featureToggle.pageContentData.messagesState.
+   * Sets the state of the feature shown in the toggle. Note that in order to
+   * trigger featureToggle's bindings to update, we set its pageContentData to a
+   * new object as the actual UI does.
+   * @param {?settings.MultiDeviceFeatureState} newFeatureState
    */
-  function setMessagesState(newMessagesState) {
+  function setFeatureState(newFeatureState) {
     featureToggle.pageContentData = Object.assign(
-        {}, featureToggle.pageContentData, {messagesState: newMessagesState});
+        {}, featureToggle.pageContentData,
+        {[pageContentDataKey]: newFeatureState});
+    Polymer.dom.flush();
+  }
+
+  /**
+   * @param {!settings.PhoneHubNotificationAccessStatus} accessStatus
+   */
+  function setNotificationAccessStatus(accessStatus) {
+    featureToggle.pageContentData = Object.assign(
+        {}, featureToggle.pageContentData,
+        {notificationAccessStatus: accessStatus});
     Polymer.dom.flush();
   }
 
@@ -49,19 +63,25 @@ suite('Multidevice', () => {
     Polymer.dom.flush();
   }
 
-  setup(() => {
-    PolymerTest.clearBody();
+  /**
+   * @param {!settings.MultiDeviceFeature} feature
+   * @param {string} key
+   */
+  function init(feature, key) {
+    featureToTest = feature;
+    pageContentDataKey = key;
 
     featureToggle =
         document.createElement('settings-multidevice-feature-toggle');
-    featureToggle.feature = settings.MultiDeviceFeature.MESSAGES;
+    featureToggle.feature = feature;
+
     // Initially toggle will be unchecked but not disabled. Note that the word
     // "disabled" is ambiguous for feature toggles because it can refer to the
     // feature or the cr-toggle property/attribute. DISABLED_BY_USER refers to
     // the former so it unchecks but does not functionally disable the toggle.
     featureToggle.pageContentData = {
       betterTogetherState: settings.MultiDeviceFeatureState.ENABLED_BY_USER,
-      messagesState: settings.MultiDeviceFeatureState.DISABLED_BY_USER,
+      [pageContentDataKey]: settings.MultiDeviceFeatureState.DISABLED_BY_USER,
     };
     document.body.appendChild(featureToggle);
     Polymer.dom.flush();
@@ -71,44 +91,56 @@ suite('Multidevice', () => {
     assertFalse(featureToggle.checked_);
     assertFalse(crToggle.checked);
     assertFalse(crToggle.disabled);
+  }
+
+  setup(() => {
+    PolymerTest.clearBody();
   });
 
   test('checked property can be set by feature state', () => {
-    setMessagesState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
+    init(settings.MultiDeviceFeature.MESSAGES, 'messagesState');
+
+    setFeatureState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
     assertTrue(featureToggle.checked_);
     assertTrue(crToggle.checked);
 
-    setMessagesState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
+    setFeatureState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
     assertFalse(featureToggle.checked_);
     assertFalse(crToggle.checked);
   });
 
   test('disabled property can be set by feature state', () => {
-    setMessagesState(settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY);
+    init(settings.MultiDeviceFeature.MESSAGES, 'messagesState');
+
+    setFeatureState(settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY);
     assertTrue(crToggle.disabled);
 
-    setMessagesState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
+    setFeatureState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
     assertFalse(crToggle.disabled);
   });
 
   test('disabled and checked properties update simultaneously', () => {
-    setMessagesState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
+    init(settings.MultiDeviceFeature.MESSAGES, 'messagesState');
+
+    setFeatureState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
     assertTrue(featureToggle.checked_);
     assertTrue(crToggle.checked);
     assertFalse(crToggle.disabled);
 
-    setMessagesState(settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY);
+    setFeatureState(settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY);
     assertFalse(featureToggle.checked_);
     assertFalse(crToggle.checked);
     assertTrue(crToggle.disabled);
 
-    setMessagesState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
+    setFeatureState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
     assertFalse(featureToggle.checked_);
     assertFalse(crToggle.checked);
     assertFalse(crToggle.disabled);
   });
 
   test('disabled property can be set by suite pref', () => {
+    init(settings.MultiDeviceFeature.MESSAGES, 'messagesState');
+
     setSuiteState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
     Polymer.dom.flush();
     assertTrue(crToggle.disabled);
@@ -119,7 +151,9 @@ suite('Multidevice', () => {
   });
 
   test('checked property is unaffected by suite pref', () => {
-    setMessagesState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
+    init(settings.MultiDeviceFeature.MESSAGES, 'messagesState');
+
+    setFeatureState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
     assertTrue(featureToggle.checked_);
     assertTrue(crToggle.checked);
     assertFalse(crToggle.disabled);
@@ -132,9 +166,28 @@ suite('Multidevice', () => {
   });
 
   test('clicking toggle does not change checked property', () => {
+    init(settings.MultiDeviceFeature.MESSAGES, 'messagesState');
+
     const preClickCrToggleChecked = crToggle.checked;
     crToggle.click();
     Polymer.dom.flush();
     assertEquals(crToggle.checked, preClickCrToggleChecked);
   });
+
+  test('notification access is prohibited', () => {
+    init(
+        settings.MultiDeviceFeature.PHONE_HUB_NOTIFICATIONS,
+        'phoneHubNotificationsState');
+
+    setFeatureState(settings.MultiDeviceFeatureState.ENABLED_BY_USER);
+    assertTrue(featureToggle.checked_);
+    assertTrue(crToggle.checked);
+    assertFalse(crToggle.disabled);
+
+    setNotificationAccessStatus(
+        settings.PhoneHubNotificationAccessStatus.PROHIBITED);
+    assertFalse(featureToggle.checked_);
+    assertFalse(crToggle.checked);
+    assertTrue(crToggle.disabled);
+  });
 });

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

@@ -6,7 +6,7 @@
 // #import 'chrome://os-settings/chromeos/os_settings.js';
 
 // #import {TestLifetimeBrowserProxy} from './test_os_lifetime_browser_proxy.m.js';
-// #import {MultiDeviceSettingsMode, MultiDeviceFeature, MultiDeviceFeatureState, MultiDevicePageContentData, MultiDeviceBrowserProxyImpl, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {MultiDeviceSettingsMode, MultiDeviceFeature, MultiDeviceFeatureState, MultiDevicePageContentData, MultiDeviceBrowserProxyImpl, PhoneHubNotificationAccessStatus, Router, routes} from 'chrome://os-settings/chromeos/os_settings.js';
 // #import {TestOsResetBrowserProxy} from './test_os_reset_browser_proxy.m.js';
 // #import {assertEquals, assertFalse, assertNotEquals, assertTrue} from '../../chai_assert.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -73,9 +73,12 @@ suite('Multidevice', function() {
    * @param {boolean} accessGranted
    */
   function setPhoneHubNotificationAccessGranted(accessGranted) {
+    const accessState = accessGranted ?
+        settings.PhoneHubNotificationAccessStatus.ACCESS_GRANTED :
+        settings.PhoneHubNotificationAccessStatus.AVAILABLE_BUT_NOT_GRANTED;
     setPageContentData(Object.assign(
         {}, multidevicePage.pageContentData,
-        {isNotificationAccessGranted: accessGranted}));
+        {notificationAccessStatus: accessState}));
   }
 
   /**
@@ -111,8 +114,10 @@ suite('Multidevice', function() {
       const accessDialog = multidevicePage.$$(
           'settings-multidevice-notification-access-setup-dialog');
       assertEquals(
-          !accessDialog,
-          multidevicePage.pageContentData.isNotificationAccessGranted);
+          !!accessDialog,
+          multidevicePage.pageContentData.notificationAccessStatus ===
+              settings.PhoneHubNotificationAccessStatus
+                  .AVAILABLE_BUT_NOT_GRANTED);
       return;
     }
 
@@ -207,6 +212,8 @@ suite('Multidevice', function() {
     PolymerTest.clearBody();
     browserProxy = new multidevice.TestMultideviceBrowserProxy();
     settings.MultiDeviceBrowserProxyImpl.instance_ = browserProxy;
+    browserProxy.data.notificationAccessStatus =
+        settings.PhoneHubNotificationAccessStatus.AVAILABLE_BUT_NOT_GRANTED;
 
     multidevicePage = document.createElement('settings-multidevice-page');
     assertTrue(!!multidevicePage);