Convert managed dialog to a cr_component

Convert the managed dialog settings element to a cr_component as it will be used in the customize_theme component (bug 1173533), which is also a cr_component. Bug: 1173533 Change-Id: I073eb14f1a34340a8090aafed8f1db32f54435d9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2733230 Reviewed-by: dpapad <dpapad@chromium.org> Commit-Queue: Igor Ruvinov <igorruvinov@chromium.org> Cr-Commit-Position: refs/heads/master@{#860287}
marcosholgado · Mar 5, 2021 · ff4a482 · ff4a482
1 parent 962c8df
commit ff4a482
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 64 deletions.
diff --git a/chrome/browser/resources/settings/BUILD.gn b/chrome/browser/resources/settings/BUILD.gn
@@ -228,7 +228,6 @@ preprocess_if_expr("preprocess_generated") {
     "languages_page/languages_page.js",
     "languages_page/languages_subpage.js",
     "lifetime_browser_proxy.m.js",
-    "managed_dialog.js",
     "settings_menu/settings_menu.js",
     "on_startup_page/on_startup_page.js",
     "on_startup_page/startup_url_dialog.js",
@@ -499,7 +498,6 @@ js_type_check("closure_compile_local_module") {
     ":i18n_setup",
     ":lazy_load",
     ":lifetime_browser_proxy.m",
-    ":managed_dialog",
     ":metrics_browser_proxy",
     ":open_window_proxy",
     ":page_visibility",
@@ -582,12 +580,6 @@ js_library("lifetime_browser_proxy.m") {
   extra_deps = [ ":modulize" ]
 }
 
-js_library("managed_dialog") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("metrics_browser_proxy") {
   deps = [ "//ui/webui/resources/js:cr.m" ]
 }
@@ -729,10 +721,7 @@ polymer_modulizer("settings_vars_css") {
 }
 
 html_to_js("web_components_local") {
-  js_files = [
-    "managed_dialog.js",
-    "site_favicon.js",
-  ]
+  js_files = [ "site_favicon.js" ]
 }
 
 js_modulizer("modulize") {

diff --git a/chrome/browser/resources/settings/lazy_load.js b/chrome/browser/resources/settings/lazy_load.js
@@ -9,7 +9,6 @@ import './autofill_page/passwords_section.js';
 import './autofill_page/passwords_device_section.js';
 import './autofill_page/payments_section.js';
 import './clear_browsing_data_dialog/clear_browsing_data_dialog.js';
-import './managed_dialog.js';
 import './search_engines_page/search_engines_page.js';
 import './privacy_page/cookies_page.js';
 import './privacy_page/security_keys_subpage.js';

diff --git a/chrome/browser/resources/settings/managed_dialog.html b/chrome/browser/resources/settings/managed_dialog.html
diff --git a/chrome/test/data/webui/cr_components/BUILD.gn b/chrome/test/data/webui/cr_components/BUILD.gn
@@ -17,6 +17,7 @@ js_type_check("closure_compile") {
     ":certificate_manager_provisioning_test",
     ":certificate_manager_test",
     ":customize_themes_test",
+    ":managed_dialog_test",
   ]
 }
 
@@ -61,3 +62,12 @@ js_library("customize_themes_test") {
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
+
+js_library("managed_dialog_test") {
+  deps = [
+    "..:chai_assert",
+    "//ui/webui/resources/cr_components/managed_dialog",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
diff --git a/chrome/test/data/webui/cr_components/cr_components_v3_browsertest.js b/chrome/test/data/webui/cr_components/cr_components_v3_browsertest.js
@@ -82,3 +82,15 @@ TEST_F('CrComponentsCertificateManagerProvisioningV3Test', 'All', function() {
 });
 
 GEN('#endif  // defined(USE_NSS_CERTS) && BUILDFLAG(IS_CHROMEOS_ASH)');
+
+// eslint-disable-next-line no-var
+var CrComponentsManagedDialogV3Test = class extends CrComponentsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test/test_loader.html?module=cr_components/managed_dialog_test.js';
+  }
+};
+
+TEST_F('CrComponentsManagedDialogV3Test', 'All', function() {
+  mocha.run();
+});
diff --git a/...ata/webui/settings/managed_dialog_test.js → ...ebui/cr_components/managed_dialog_test.js b/...ata/webui/settings/managed_dialog_test.js → ...ebui/cr_components/managed_dialog_test.js
@@ -4,11 +4,16 @@
 
 /** @fileoverview Test suite for managed-dialog. */
 
-import 'chrome://settings/lazy_load.js';
+import 'chrome://resources/cr_components/managed_dialog/managed_dialog.js';
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {assertFalse, assertNotEquals, assertTrue} from '../chai_assert.js';
 
-suite('SettingsManagedDialog', function() {
+suite('ManagedDialogTest', function() {
+  suiteSetup(function() {
+    loadTimeData.data = {};
+  });
+
   setup(function() {
     document.body.innerHTML = '';
   });
@@ -21,7 +26,15 @@ suite('SettingsManagedDialog', function() {
    * @return {Element}
    */
   function createManagedDialog(title, body) {
-    const dialog = document.createElement('settings-managed-dialog');
+    loadTimeData.overrideValues({
+      title,
+      body,
+      controlledSettingPolicy: '',
+      ok: 'OK',
+      close: 'Close',
+    });
+
+    const dialog = document.createElement('managed-dialog');
     dialog.title = title;
     dialog.body = body;
     document.body.appendChild(dialog);
@@ -36,12 +49,6 @@ suite('SettingsManagedDialog', function() {
     assertTrue(dialog.$$('cr-dialog').open);
     assertTrue(dialog.shadowRoot.textContent.includes(title));
     assertTrue(dialog.shadowRoot.textContent.includes(body));
-  });
-
-  test('DialogDismiss', function() {
-    const dialog = createManagedDialog('', '');
-    assertNotEquals('none', getComputedStyle(dialog).display);
-    assertTrue(dialog.$$('cr-dialog').open);
 
     // Click OK button to dismiss dialog
     dialog.$$('.action-button').click();

diff --git a/chrome/test/data/webui/settings/BUILD.gn b/chrome/test/data/webui/settings/BUILD.gn
@@ -113,9 +113,6 @@ js_type_check("closure_compile") {
 
     #":languages_page_tests",
     #":languages_tests",
-
-    ":managed_dialog_test",
-
     #":metrics_reporting_tests",
     #":on_startup_page_tests",
     #":password_check_test",
@@ -479,14 +476,6 @@ js_library("security_page_test") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
-js_library("managed_dialog_test") {
-  deps = [
-    "..:chai_assert",
-    "//chrome/browser/resources/settings:lazy_load",
-  ]
-  externs_list = [ "$externs_path/mocha-2.5.js" ]
-}
-
 js_library("settings_page_test_util") {
   deps = [ "..:chai_assert" ]
 }

diff --git a/chrome/test/data/webui/settings/cr_settings_v3_browsertest.js b/chrome/test/data/webui/settings/cr_settings_v3_browsertest.js
@@ -508,7 +508,6 @@ TEST_F('CrSettingsAdvancedPageV3Test', 'MAYBE_Load', function() {
  ['ExtensionControlledIndicator', 'extension_controlled_indicator_tests.js'],
  ['HelpPage', 'help_page_v3_test.js'],
  ['Languages', 'languages_tests.js'],
- ['ManagedDialog', 'managed_dialog_test.js'],
  ['Menu', 'settings_menu_test.js'],
  ['OnStartupPage', 'on_startup_page_tests.js'],
  ['PaymentsSection', 'payments_section_test.js'],

diff --git a/ui/webui/resources/cr_components/BUILD.gn b/ui/webui/resources/cr_components/BUILD.gn
@@ -112,6 +112,7 @@ preprocess_if_expr("preprocess_generated") {
   in_files = [
     "customize_themes/customize_themes.js",
     "customize_themes/theme_icon.js",
+    "managed_dialog/managed_dialog.js",
     "managed_footnote/managed_footnote.m.js",
     "omnibox/cr_autocomplete_match_list.js",
   ]
@@ -390,6 +391,7 @@ group("closure_compile") {
   deps = [
     "certificate_manager:closure_compile_module",
     "customize_themes:closure_compile",
+    "managed_dialog:closure_compile",
     "managed_footnote:closure_compile",
     "managed_footnote:closure_compile_module",
     "omnibox:closure_compile",
@@ -404,6 +406,7 @@ group("polymer3_elements") {
   public_deps = [
     "certificate_manager:web_components",
     "customize_themes:web_components",
+    "managed_dialog:web_components",
     "managed_footnote:managed_footnote_module",
     "omnibox:web_components",
   ]

diff --git a/ui/webui/resources/cr_components/managed_dialog/BUILD.gn b/ui/webui/resources/cr_components/managed_dialog/BUILD.gn
@@ -0,0 +1,23 @@
+# Copyright 2021 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")
+import("//tools/polymer/html_to_js.gni")
+
+js_type_check("closure_compile") {
+  is_polymer3 = true
+  deps = [ ":managed_dialog" ]
+}
+
+js_library("managed_dialog") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+}
+
+html_to_js("web_components") {
+  js_files = [ "managed_dialog.js" ]
+}
diff --git a/ui/webui/resources/cr_components/managed_dialog/managed_dialog.html b/ui/webui/resources/cr_components/managed_dialog/managed_dialog.html
@@ -0,0 +1,26 @@
+<style>
+  iron-icon {
+    --iron-icon-height: var(--cr-icon-size);
+    --iron-icon-width: var(--cr-icon-size);
+    padding-inline-end: 10px;
+  }
+
+  cr-dialog::part(body-container) {
+    padding-inline-start: 35px;
+  }
+</style>
+
+<cr-dialog id="dialog" close-text="[[i18n('close')]]" show-on-attach>
+  <div slot="title">
+    <iron-icon icon="cr:domain" role="img"
+        aria-label="[[i18n('controlledSettingPolicy')]]">
+    </iron-icon>
+    [[title]]
+  </div>
+  <div slot="body">[[body]]</div>
+  <div slot="button-container">
+    <cr-button class="action-button" on-click="onOkClick_">
+      [[i18n('ok')]]
+    </cr-button>
+  </div>
+</cr-dialog>
diff --git a/...wser/resources/settings/managed_dialog.js → ...mponents/managed_dialog/managed_dialog.js b/...wser/resources/settings/managed_dialog.js → ...mponents/managed_dialog/managed_dialog.js
@@ -6,18 +6,23 @@
  * @fileoverview 'managed-dialog' is a dialog that is displayed when a user
  * interact with some UI features which are managed by the user's organization.
  */
-import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
-import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
-import 'chrome://resources/cr_elements/icons.m.js';
+import '../../cr_elements/cr_button/cr_button.m.js';
+import '../../cr_elements/cr_dialog/cr_dialog.m.js';
+import '../../cr_elements/icons.m.js';
+import '../../cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {I18nBehavior} from '../../js/i18n_behavior.m.js';
+
 Polymer({
-  is: 'settings-managed-dialog',
+  is: 'managed-dialog',
 
   _template: html`{__html_template__}`,
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** Managed dialog title text. */
     title: String,