Web UI Polymer 3: Port cr-tooltip-icon

- Autogenerate Polymer 3 cr-tooltip-icon. This is used by the
chrome://extensions page directly (rather than through a pref
indicator).
- Add to the demo page
- Small update to demo page styling so that elements are spaced out a
bit.

Bug: 965770
Change-Id: Id22953537a3968ce471f1c40221a8ffc68fa9b0d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1787169
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#694993}

chrome/browser/resources/print_preview/polymer3/demo.js

@@ -17,6 +17,7 @@ import 'chrome://resources/cr_elements/cr_toast/cr_toast.m.js';
 import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/md_select_css.m.js';
+import 'chrome://resources/cr_elements/policy/cr_tooltip_icon.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -28,6 +29,15 @@ class HelloPolymer3Element extends PolymerElement {
         cr-toggle {
           display: inline-block;
         }
+
+        .setting {
+          align-items: center;
+          display: flex;
+        }
+
+        div, cr-input, cr-icon-button, select, cr-checkbox {
+          margin-top: 20px;
+        }
       </style>
 
       <cr-checkbox checked="{{checkboxChecked_}}">
@@ -100,6 +110,15 @@ class HelloPolymer3Element extends PolymerElement {
         <cr-expand-button on-click="onExpand_">Expand</cr-expand-button>
         <div hidden$="[[!expanded_]]">Expanded content</div>
       </div>
+
+      <div class="setting">
+        <span>Some setting</span>
+        <cr-tooltip-icon tooltip-text="This setting is controlled by policy"
+            icon-class="cr20:domain"
+            icon-aria-label="This setting is controlled by policy">
+        </cr-tooltip-icon>
+        <cr-toggle disabled checked></cr-toggle>
+      <div>
     `;
   }
 

ui/webui/resources/cr_elements/BUILD.gn

@@ -46,6 +46,7 @@ group("closure_compile") {
     "cr_toast:closure_compile_module",
     "cr_toggle:closure_compile_module",
     "cr_view_manager:closure_compile_module",
+    "policy:closure_compile_module",
   ]
 
   if (is_chromeos) {
@@ -148,6 +149,7 @@ group("polymer3_elements") {
     "cr_toast:cr_toast_module",
     "cr_toggle:cr_toggle_module",
     "cr_view_manager:cr_view_manager_module",
+    "policy:cr_tooltip_icon_module",
   ]
 }
 

ui/webui/resources/cr_elements/policy/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -87,3 +88,26 @@ if (is_chromeos) {
 
 js_library("cr_tooltip_icon") {
 }
+
+polymer_modulizer("cr_tooltip_icon") {
+  js_file = "cr_tooltip_icon.js"
+  html_file = "cr_tooltip_icon.html"
+  html_type = "dom-module"
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_tooltip_icon.m",
+  ]
+}
+
+js_library("cr_tooltip_icon.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":cr_tooltip_icon_module" ]
+}

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -106,6 +106,11 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_TOOLTIP_ICON_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/policy/cr_tooltip_icon.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_VIEW_MANAGER_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.m.js"
          use_base_dir="false"