[ntp][modules] Disable toggle if module visibility is policy controlled

If the module visibility state is controlled by a policy the user is not
able to set module visibility. We communicate that by graying out the
toggle and showing a business icon explain the situation.

Toggle off: screenshot/8dUeEADe6jyvyLa
Toggle on: screenshot/K4WGhYvGnESmLYF

Bug: 1142878
Change-Id: Id3af801552c6c01a2bf3611233c08de892393469
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2533581
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827011}

chrome/browser/resources/new_tab_page/customize_modules.html

@@ -14,7 +14,7 @@
     width: 100%;
   }
 
-  :host([hide_]) #hide {
+  :host([selected_]) #hide {
     background-color: var(--ntp-selected-background-color);
     border-color: var(--ntp-selected-border-color);
     color: var(--ntp-selected-border-color);
@@ -25,7 +25,7 @@
     margin-inline-start: 24px;
   }
 
-  :host([hide_]) #hideIcon {
+  :host([selected_]) #hideIcon {
     background-color: var(--ntp-selected-border-color);
   }
 
@@ -37,6 +37,10 @@
     font-weight: bold;
   }
 
+  cr-policy-indicator {
+    margin-inline-end: 24px;
+  }
+
   cr-toggle {
     margin-inline-end: 20px;
   }
@@ -47,6 +51,10 @@
     <div id="hideTitle">$i18n{hideModules}</div>
     $i18n{hideModulesDesc}
   </div>
+  <cr-policy-indicator indicator-type="devicePolicy"
+      hidden="[[!hideManagedByPolicy_]]">
+  </cr-policy-indicator>
   <cr-toggle id="hideToggle" title="$i18n{hideModules}" checked="[[hide_]]"
-      on-change="onHideChange_"></cr-toggle>
+      on-change="onHideChange_" disabled="[[hideManagedByPolicy_]]">
+  </cr-toggle>
 </div>

chrome/browser/resources/new_tab_page/customize_modules.js

@@ -6,8 +6,10 @@ import './mini_page.js';
 import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/policy/cr_policy_indicator.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BrowserProxy} from './browser_proxy.js';
@@ -29,6 +31,19 @@ class CustomizeModulesElement extends PolymerElement {
         type: Boolean,
         reflectToAttribute: true,
       },
+
+      /** @private */
+      hideManagedByPolicy_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('modulesVisibleManagedByPolicy'),
+      },
+
+      /** @private */
+      selected_: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: 'computeSelected_(hide_, hideManagedByPolicy_)',
+      },
     };
   }
 
@@ -56,10 +71,31 @@ class CustomizeModulesElement extends PolymerElement {
         assert(this.setModulesVisibleListenerId_));
   }
 
+  /** @override */
+  ready() {
+    // |window.CrPolicyStrings.controlledSettingPolicy| populates the tooltip
+    // text of <cr-policy-indicator indicator-type="devicePolicy" /> elements.
+    // Needs to be called before |super.ready()| so that the string is available
+    // when <cr-policy-indicator> gets instantiated.
+    window.CrPolicyStrings = {
+      controlledSettingPolicy:
+          loadTimeData.getString('controlledSettingPolicy'),
+    };
+    super.ready();
+  }
+
   apply() {
     BrowserProxy.getInstance().handler.setModulesVisible(!this.hide_);
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeSelected_() {
+    return this.hide_ && !this.hideManagedByPolicy_;
+  }
+
   /**
    * @param {!CustomEvent<boolean>} e
    * @private

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -26,6 +26,7 @@
 #include "chrome/browser/ui/webui/sanitized_image_source.h"
 #include "chrome/browser/ui/webui/theme_source.h"
 #include "chrome/browser/ui/webui/webui_util.h"
+#include "chrome/common/pref_names.h"
 #include "chrome/common/url_constants.h"
 #include "chrome/grit/browser_resources.h"
 #include "chrome/grit/generated_resources.h"
@@ -33,6 +34,7 @@
 #include "chrome/grit/new_tab_page_resources_map.h"
 #include "components/favicon_base/favicon_url_parser.h"
 #include "components/google/core/common/google_util.h"
+#include "components/prefs/pref_service.h"
 #include "components/search/ntp_features.h"
 #include "components/search_engines/template_url_service.h"
 #include "components/strings/grit/components_strings.h"
@@ -106,6 +108,7 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       {"doneButton", IDS_DONE},
       {"title", IDS_NEW_TAB_TITLE},
       {"undo", IDS_NEW_TAB_UNDO_THUMBNAIL_REMOVE},
+      {"controlledSettingPolicy", IDS_CONTROLLED_SETTING_POLICY},
 
       // Custom Links.
       {"addLinkTitle", IDS_NTP_CUSTOM_LINKS_ADD_SHORTCUT_TITLE},
@@ -311,6 +314,9 @@ NewTabPageUI::NewTabPageUI(content::WebUI* web_ui)
   auto* source = CreateNewTabPageUiHtmlSource(profile_);
   source->AddBoolean("customBackgroundDisabledByPolicy",
                      instant_service_->IsCustomBackgroundDisabledByPolicy());
+  source->AddBoolean(
+      "modulesVisibleManagedByPolicy",
+      profile_->GetPrefs()->IsManagedPreference(prefs::kNtpModulesVisible));
   content::WebUIDataSource::Add(profile_, source);
 
   content::URLDataSource::Add(profile_,

chrome/test/data/webui/new_tab_page/customize_modules_test.js

@@ -3,13 +3,12 @@
 // found in the LICENSE file.
 
 import 'chrome://new-tab-page/lazy_load.js';
-import {BrowserProxy} from 'chrome://new-tab-page/new_tab_page.js';
-import {createTestProxy} from 'chrome://test/new_tab_page/test_support.js';
 
-suite('NewTabPageCustomizeModulesTest', () => {
-  /** @type {!CustomizeModulesElement} */
-  let customizeModules;
+import {$$, BrowserProxy} from 'chrome://new-tab-page/new_tab_page.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {assertNotStyle, assertStyle, createTestProxy} from 'chrome://test/new_tab_page/test_support.js';
 
+suite('NewTabPageCustomizeModulesTest', () => {
   /**
    * @implements {BrowserProxy}
    * @extends {TestBrowserProxy}
@@ -21,14 +20,13 @@ suite('NewTabPageCustomizeModulesTest', () => {
 
     testProxy = createTestProxy();
     BrowserProxy.instance_ = testProxy;
-
-    customizeModules = document.createElement('ntp-customize-modules');
-    document.body.appendChild(customizeModules);
   });
 
   [true, false].forEach(visible => {
     test('toggle hide calls handler', async () => {
       // Arrange.
+      const customizeModules = document.createElement('ntp-customize-modules');
+      document.body.appendChild(customizeModules);
       testProxy.callbackRouterRemote.setModulesVisible(visible);
 
       // Act.
@@ -37,6 +35,20 @@ suite('NewTabPageCustomizeModulesTest', () => {
 
       // Assert.
       assertEquals(1, testProxy.handler.getCallCount('setModulesVisible'));
+      assertStyle(
+          $$(customizeModules, 'cr-policy-indicator'), 'display', 'none');
     });
   });
+
+  test('policy disables hide toggle', () => {
+    // Act.
+    loadTimeData.overrideValues({modulesVisibleManagedByPolicy: true});
+    const customizeModules = document.createElement('ntp-customize-modules');
+    document.body.appendChild(customizeModules);
+
+    // Assert.
+    assertTrue(customizeModules.$.hideToggle.disabled);
+    assertNotStyle(
+        $$(customizeModules, 'cr-policy-indicator'), 'display', 'none');
+  });
 });